Item
StableLinha de lista: mídia, título, descrição e ações no fim, em três variantes e três densidades. A decisão que ele carrega é o que a linha É. Como div, é um contêiner e os controles dentro são os alvos; como `a` ou `button`, ela vira um alvo só, e aí nada focalizável pode morar dentro — um botão dentro de um link é um alvo que o teclado alcança e o ponteiro não consegue mirar com honestidade.
Instalação
npx up-web-ds add itemPreview
Default
A intenção semântica vive em variant e a densidade em size.
As Link
With Media
Tokens, tipografia e a escala de motion, publicados por um registry:theme mantido à mão.
Publica apenas itens stable, e exclui os restricted por DS004.
Variants
Mesma estrutura, moldura diferente.
Mesma estrutura, moldura diferente.
Mesma estrutura, moldura diferente.
O grupo aperta o próprio espaçamento junto com as linhas.
O grupo aperta o próprio espaçamento junto com as linhas.
All states
Default
A intenção semântica vive em variant e a densidade em size.
As Link
With Media
Tokens, tipografia e a escala de motion, publicados por um registry:theme mantido à mão.
Publica apenas itens stable, e exclui os restricted por DS004.
Variants
Mesma estrutura, moldura diferente.
Mesma estrutura, moldura diferente.
Mesma estrutura, moldura diferente.
O grupo aperta o próprio espaçamento junto com as linhas.
O grupo aperta o próprio espaçamento junto com as linhas.
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- data-display
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / item
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: como contêiner a linha não entra na sequência de tabulação e os alvos são os controles dentro dela; como link ela vira um Tab stop só, com título e descrição dentro do mesmo alvo em vez de virarem uma segunda parada. Leitor de tela verificado por teste: no modo link o nome acessível é tudo que está dentro da linha, o grupo não inventa semântica de lista — quem precisa de ul e li diz isso por `render` — e um separador entre linhas pode ser decorativo, para não anunciar uma régua por linha. Touch verificado em navegador com emulação de toque em viewport de 375px: a linha inteira é o alvo no modo link, os controles das ações medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 mesmo na densidade xs, e os textos truncam por line-clamp em vez de vazar. Reduced motion verificado com prefers-reduced-motion: reduce — a transição de cor usa duration-fast, que colapsa para 1ms.
Dependências
- Pacotes
- @base-ui/react, class-variance-authority
- Ícones
- Nenhum
- Construído sobre
- Separator
- Usado por
- Nenhum ainda