Scroll Shadow

Wrapper que sinaliza visualmente, via gradiente decorativo, que um conteúdo rolável tem mais itens fora da área visível.

O mk-scroll-shadow envolve qualquer conteúdo via slot default, aplica overflow no eixo definido por orientation e sobrepõe um gradiente decorativo (fade da cor de superfície para transparente) nas bordas indicadas por visibility. O gradiente é estático — reflete a configuração escolhida pelo consumidor, não a posição real de scroll.

Padrão

import { MkScrollShadow } from '@db1/makuco-ui-react';

<MkScrollShadow orientation="vertical" visibility="both" style={{ maxHeight: 240 }}>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    {/* ... */}
  </ul>
</MkScrollShadow>

<mk-scroll-shadow orientation="vertical" visibility="both" style="max-height: 240px;">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <!-- ... -->
  </ul>
</mk-scroll-shadow>

Orientação

A prop orientation define o eixo de rolagem: vertical (padrão, overflow-y: auto) ou horizontal (overflow-x: auto).

<MkScrollShadow orientation="horizontal" visibility="both" style={{ width: 320 }}>
  <div className="cards-row">{/* cards */}</div>
</MkScrollShadow>

<mk-scroll-shadow orientation="horizontal" visibility="both" style="width: 320px;">
  <div class="cards-row"><!-- cards --></div>
</mk-scroll-shadow>

Visibilidade

A prop visibility controla quais bordas exibem o gradiente: start, end ou both (padrão). Em orientation="horizontal", as posições são mapeadas via inset-inline-start/inset-inline-end, invertendo automaticamente sob dir="rtl" sem prop adicional.

<MkScrollShadow visibility="start" style={{ maxHeight: 160 }}>{/* ... */}</MkScrollShadow>
<MkScrollShadow visibility="end" style={{ maxHeight: 160 }}>{/* ... */}</MkScrollShadow>

<mk-scroll-shadow visibility="start" style="max-height: 160px;"><!-- ... --></mk-scroll-shadow>
<mk-scroll-shadow visibility="end" style="max-height: 160px;"><!-- ... --></mk-scroll-shadow>

Tamanho

A prop size controla a espessura do gradiente no eixo de orientation: sm (20px), md (40px, padrão) ou lg (80px).

<MkScrollShadow size="sm" style={{ maxHeight: 240 }}>{/* ... */}</MkScrollShadow>
<MkScrollShadow size="md" style={{ maxHeight: 240 }}>{/* ... */}</MkScrollShadow>
<MkScrollShadow size="lg" style={{ maxHeight: 240 }}>{/* ... */}</MkScrollShadow>

<mk-scroll-shadow size="sm" style="max-height: 240px;"><!-- ... --></mk-scroll-shadow>
<mk-scroll-shadow size="md" style="max-height: 240px;"><!-- ... --></mk-scroll-shadow>
<mk-scroll-shadow size="lg" style="max-height: 240px;"><!-- ... --></mk-scroll-shadow>

Props — mk-scroll-shadow

Prop	Tipo	Padrão	Descrição
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Eixo de rolagem do wrapper interno e eixo em que `size` é aplicado.
`visibility`	`"start" \| "end" \| "both"`	`"both"`	Quais bordas exibem o gradiente decorativo. Estático — não reage à posição real de scroll.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Espessura do gradiente (20px / 40px / 80px) no eixo definido por `orientation`.

Slots

Componente	Slot	Descrição
`mk-scroll-shadow`	(default)	Conteúdo rolável envolvido pelo componente. Qualquer HTML: listas, tabelas, texto longo, cards, mensagens de chat.

Acessibilidade

O host recebe tabindex="0" incondicionalmente, permitindo rolagem via teclado (setas, Page Up/Down, Home/End — comportamento nativo do navegador sobre um elemento com overflow: auto e foco) mesmo sem detecção de overflow real.
Não há role específico no host — a semântica correta é a do próprio conteúdo projetado (lista, tabela, texto).
Cada elemento de gradiente (.mk-scroll-shadow__shadow--start/--end) tem aria-hidden="true", pois é puramente decorativo e nunca deve ser anunciado por leitores de tela.
O anel de foco (:focus-visible no host) mantém contraste adequado contra o fundo adjacente.

Tecla	Comportamento
`Tab`	Move o foco para o host.
`↑ ↓ ← →`	Rolam o conteúdo nativamente, conforme o eixo de `overflow` definido por `orientation`.
`Page Up` / `Page Down`	Rolagem nativa em incrementos de página.
`Home` / `End`	Rolagem nativa até o início/fim do conteúdo.