@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/Kanban/Kanban.js

@@ -90,6 +90,9 @@ function Kanban(props) {
             return undefined;
         return props.addCardLabel || "Adicionar cartão";
     }
+    function papelDoCartao() {
+        return props.cardRoleDescription || "cartão arrastável";
+    }
     function nomeDoQuadro() {
         return props.ariaLabel || "Quadro";
     }
@@ -164,15 +167,23 @@ function Kanban(props) {
         const coluna = colunaDaBase(colunaId);
         return coluna ? coluna.title : "";
     }
+    function anuncios() {
+        return props.announcements || {};
+    }
     function avisoDeLimite(colunaId, total) {
         const coluna = colunaDaBase(colunaId);
         if (!coluna || typeof coluna.wipLimit !== "number")
             return "";
         if (coluna.wipLimit <= 0 || total < coluna.wipLimit)
             return "";
+        const a = anuncios();
         if (total === coluna.wipLimit) {
+            if (a.limitReached)
+                return " " + a.limitReached(coluna.wipLimit);
             return " Limite de " + coluna.wipLimit + " cartões atingido.";
         }
+        if (a.limitExceeded)
+            return " " + a.limitExceeded(coluna.wipLimit);
         return " Limite de " + coluna.wipLimit + " cartões excedido.";
     }
     function tabIndexDe(cartaoId) {
@@ -207,11 +218,13 @@ function Kanban(props) {
             partes.push(cartao.description);
         if (cartao.meta)
             partes.push(cartao.meta);
-        if (cartao.assignee)
-            partes.push("Responsável: " + cartao.assignee);
+        if (cartao.assignee) {
+            partes.push((props.assigneeLabel || "Responsável") + ": " + cartao.assignee);
+        }
         const etiquetas = cartao.tags || [];
         if (etiquetas.length > 0) {
-            partes.push("Etiquetas: " +
+            partes.push((props.tagsLabel || "Etiquetas") +
+                ": " +
                 etiquetas.map((etiqueta) => etiqueta.label).join(", "));
         }
         return partes.join(". ");
@@ -273,6 +286,10 @@ function Kanban(props) {
         setAnuncio(par ? texto + "\u00A0" : texto);
     }
     function posicaoFalada(colunaId, indice, total) {
+        const a = anuncios();
+        if (a.position) {
+            return a.position(tituloDaColuna(colunaId), indice + 1, total);
+        }
         return ("Coluna " +
             tituloDaColuna(colunaId) +
             ", posição " +
@@ -292,11 +309,16 @@ function Kanban(props) {
         setOrigemIndice(pos.indice);
         setPreviewColunaId(pos.colunaId);
         setPreviewIndice(pos.indice);
-        anunciar("Cartão " +
-            tituloDoCartao(cartaoId) +
-            " pego. " +
-            posicaoFalada(pos.colunaId, pos.indice, total) +
-            " Use as setas para mover, Espaço ou Enter para soltar, Esc para cancelar.");
+        const a = anuncios();
+        const titulo = tituloDoCartao(cartaoId);
+        const posicao = posicaoFalada(pos.colunaId, pos.indice, total);
+        anunciar(a.grabbed
+            ? a.grabbed(titulo, posicao)
+            : "Cartão " +
+                titulo +
+                " pego. " +
+                posicao +
+                " Use as setas para mover, Espaço ou Enter para soltar, Esc para cancelar.");
     }
     function moverPego(tecla) {
         const base = props.columns || [];
@@ -331,13 +353,15 @@ function Kanban(props) {
         const total = tamanhoSemPego(destinoId) + 1;
         if (destinoColuna === colunaIndice && destinoIndice === previewIndice) {
             // Bateu na borda: diz qual, para quem ouve saber que parou.
-            let borda = "Fim da coluna.";
-            if (tecla === "ArrowUp" || tecla === "Home")
-                borda = "Início da coluna.";
+            const a = anuncios();
+            let borda = a.columnEnd || "Fim da coluna.";
+            if (tecla === "ArrowUp" || tecla === "Home") {
+                borda = a.columnStart || "Início da coluna.";
+            }
             if (tecla === "ArrowLeft")
-                borda = "Não há coluna à esquerda.";
+                borda = a.noColumnLeft || "Não há coluna à esquerda.";
             if (tecla === "ArrowRight")
-                borda = "Não há coluna à direita.";
+                borda = a.noColumnRight || "Não há coluna à direita.";
             anunciar(borda + " " + posicaoFalada(destinoId, destinoIndice, total));
             return;
         }
@@ -362,13 +386,17 @@ function Kanban(props) {
         setFocoId(cartaoId);
         if (movimento.fromColumnId === movimento.toColumnId &&
             movimento.fromIndex === movimento.toIndex) {
-            anunciar("Cartão " + titulo + " solto na posição original.");
+            const a = anuncios();
+            anunciar(a.droppedInPlace
+                ? a.droppedInPlace(titulo)
+                : "Cartão " + titulo + " solto na posição original.");
         }
         else {
-            anunciar("Cartão " +
-                titulo +
-                " solto. " +
-                posicaoFalada(movimento.toColumnId, movimento.toIndex, total));
+            const a = anuncios();
+            const posicao = posicaoFalada(movimento.toColumnId, movimento.toIndex, total);
+            anunciar(a.dropped
+                ? a.dropped(titulo, posicao)
+                : "Cartão " + titulo + " solto. " + posicao);
             if (props.onCardMove)
                 props.onCardMove(movimento);
         }
@@ -381,10 +409,12 @@ function Kanban(props) {
         const coluna = colunaDaBase(origemColunaId);
         const total = coluna ? (coluna.cards || []).length : 0;
         setPegoId("");
-        anunciar("Movimento cancelado. Cartão " +
-            tituloDoCartao(cartaoId) +
-            " voltou. " +
-            posicaoFalada(origemColunaId, origemIndice, total));
+        const a = anuncios();
+        const titulo = tituloDoCartao(cartaoId);
+        const posicao = posicaoFalada(origemColunaId, origemIndice, total);
+        anunciar(a.cancelled
+            ? a.cancelled(titulo, posicao)
+            : "Movimento cancelado. Cartão " + titulo + " voltou. " + posicao);
         if (devolverFoco)
             focarCartao(cartaoId);
     }
@@ -608,10 +638,12 @@ function Kanban(props) {
         const tamanho = coluna ? (coluna.cards || []).length : 0;
         const total = colunaId === origemId ? tamanho : tamanho + 1;
         setFocoId(cartaoId);
-        anunciar("Cartão " +
-            tituloDoCartao(cartaoId) +
-            " movido. " +
-            posicaoFalada(colunaId, destinoIndice, total));
+        const a = anuncios();
+        const titulo = tituloDoCartao(cartaoId);
+        const posicao = posicaoFalada(colunaId, destinoIndice, total);
+        anunciar(a.moved
+            ? a.moved(titulo, posicao)
+            : "Cartão " + titulo + " movido. " + posicao);
         if (props.onCardMove) {
             props.onCardMove({
                 cardId: cartaoId,
@@ -640,6 +672,6 @@ function Kanban(props) {
         }
         aplicarFocoPendente();
     });
-    return (_jsxs("div", { role: "region", ref: rootRef, id: props.id, style: estiloDoQuadro(), "aria-label": nomeDoQuadro(), className: classesDoQuadro(), children: [_jsx("p", { className: "umds-kanban__sr", id: idDasInstrucoes(), children: textoDasInstrucoes() }), colunasDoQuadro()?.map((coluna, colunaIndice) => (_jsx(KanbanColumn, { title: coluna.title, count: coluna.cards.length, wipLimit: coluna.wipLimit, emptyText: textoVazioDa(coluna), highlighted: colunaEhAlvo(coluna.id), addLabel: rotuloDeAdicionar(), headingLevel: props.columnHeadingLevel, onAdd: (event) => handleAdicionar(coluna.id), children: _jsxs("ul", { className: "umds-kanban__list", onDragOver: (event) => handleDragOver(event, coluna.id), onDragLeave: (event) => handleDragLeave(event, coluna.id), onDrop: (event) => handleDrop(event, coluna.id), children: [coluna.cards?.map((cartao, indice) => (_jsxs(React.Fragment, { children: [mostraIndicador(coluna.id, indice) ? (_jsx("li", { "aria-hidden": "true", className: "umds-kanban__indicator" })) : null, _jsxs("li", { className: classesDoItem(cartao.id), children: [_jsx("div", { role: "button", "aria-roledescription": "cart\u00E3o arrast\u00E1vel", draggable: "true", className: "umds-kanban__handle", "aria-label": cartao.title, "aria-describedby": descritoPor(cartao.id, colunaIndice, indice), "aria-pressed": pressionadoDe(cartao.id), tabIndex: tabIndexDe(cartao.id), "data-card-id": cartao.id, onKeyDown: (event) => handleTecla(event, cartao.id, coluna.id), onFocus: (event) => handleFoco(cartao.id), onBlur: (event) => handleSaida(event), onClick: (event) => handleClique(event, cartao.id, coluna.id), onDragStart: (event) => handleDragStart(event, cartao.id, coluna.id, indice), onDragEnd: (event) => handleDragEnd(), children: _jsx(KanbanCard, { title: cartao.title, description: cartao.description, tags: cartao.tags, meta: cartao.meta, assignee: cartao.assignee, assigneeSrc: cartao.assigneeSrc }) }), _jsx("span", { className: "umds-kanban__sr", id: idDaDescricao(colunaIndice, indice), children: descricaoDoCartao(cartao) })] })] }, cartao.id))), mostraIndicador(coluna.id, coluna.cards.length) ? (_jsx("li", { "aria-hidden": "true", className: "umds-kanban__indicator" })) : null] }) }, coluna.id))), _jsx("div", { "aria-live": "assertive", "aria-atomic": "true", className: "umds-kanban__sr", children: anuncio })] }));
+    return (_jsxs("div", { role: "region", ref: rootRef, id: props.id, style: estiloDoQuadro(), "aria-label": nomeDoQuadro(), className: classesDoQuadro(), children: [_jsx("p", { className: "umds-kanban__sr", id: idDasInstrucoes(), children: textoDasInstrucoes() }), colunasDoQuadro()?.map((coluna, colunaIndice) => (_jsx(KanbanColumn, { title: coluna.title, count: coluna.cards.length, wipLimit: coluna.wipLimit, emptyText: textoVazioDa(coluna), highlighted: colunaEhAlvo(coluna.id), addLabel: rotuloDeAdicionar(), headingLevel: props.columnHeadingLevel, countLabel: props.columnCountLabel, onAdd: (event) => handleAdicionar(coluna.id), children: _jsxs("ul", { className: "umds-kanban__list", onDragOver: (event) => handleDragOver(event, coluna.id), onDragLeave: (event) => handleDragLeave(event, coluna.id), onDrop: (event) => handleDrop(event, coluna.id), children: [coluna.cards?.map((cartao, indice) => (_jsxs(React.Fragment, { children: [mostraIndicador(coluna.id, indice) ? (_jsx("li", { "aria-hidden": "true", className: "umds-kanban__indicator" })) : null, _jsxs("li", { className: classesDoItem(cartao.id), children: [_jsx("div", { role: "button", draggable: "true", className: "umds-kanban__handle", "aria-roledescription": papelDoCartao(), "aria-label": cartao.title, "aria-describedby": descritoPor(cartao.id, colunaIndice, indice), "aria-pressed": pressionadoDe(cartao.id), tabIndex: tabIndexDe(cartao.id), "data-card-id": cartao.id, onKeyDown: (event) => handleTecla(event, cartao.id, coluna.id), onFocus: (event) => handleFoco(cartao.id), onBlur: (event) => handleSaida(event), onClick: (event) => handleClique(event, cartao.id, coluna.id), onDragStart: (event) => handleDragStart(event, cartao.id, coluna.id, indice), onDragEnd: (event) => handleDragEnd(), children: _jsx(KanbanCard, { title: cartao.title, description: cartao.description, tags: cartao.tags, meta: cartao.meta, assignee: cartao.assignee, assigneeSrc: cartao.assigneeSrc, assigneeLabel: props.assigneeLabel }) }), _jsx("span", { className: "umds-kanban__sr", id: idDaDescricao(colunaIndice, indice), children: descricaoDoCartao(cartao) })] })] }, cartao.id))), mostraIndicador(coluna.id, coluna.cards.length) ? (_jsx("li", { "aria-hidden": "true", className: "umds-kanban__indicator" })) : null] }) }, coluna.id))), _jsx("div", { "aria-live": "assertive", "aria-atomic": "true", className: "umds-kanban__sr", children: anuncio })] }));
 }
 export default Kanban;

package/dist/components/Kanban/KanbanCard.d.ts

@@ -44,6 +44,8 @@ export interface KanbanCardProps {
     onClick?: (event?: any) => void;
     className?: string;
     id?: string;
+    /** Prefixo do nome acessível do avatar do responsável (o nome vem depois de ": "). Troque para traduzir. @default 'Responsável' */
+    assigneeLabel?: string;
 }
 declare function KanbanCard(props: KanbanCardProps): import("react/jsx-runtime").JSX.Element;
 export default KanbanCard;

package/dist/components/Kanban/KanbanCard.js

@@ -35,7 +35,7 @@ function KanbanCard(props) {
         return (primeira + ultima).toUpperCase();
     }
     function rotuloDoResponsavel() {
-        return "Responsável: " + (props.assignee || "");
+        return ((props.assigneeLabel || "Responsável") + ": " + (props.assignee || ""));
     }
     function handleClique(event) {
         if (props.onClick)

package/dist/components/Kanban/KanbanColumn.d.ts

@@ -42,6 +42,8 @@ export interface KanbanColumnProps {
     className?: string;
     id?: string;
     children?: any;
+    /** Contagem por extenso lida pelo leitor de tela no lugar do selo. Recebe a quantidade e o limite de WIP (quando há). Troque para traduzir. @default (count, limit) => '4 de 3 cartões, limite excedido' | '3 de 3 cartões, limite atingido' | '1 cartão' | 'N cartões' */
+    countLabel?: (count: number, limit?: number) => string;
 }
 declare function KanbanColumn(props: KanbanColumnProps): import("react/jsx-runtime").JSX.Element;
 export default KanbanColumn;

package/dist/components/Kanban/KanbanColumn.js

@@ -44,6 +44,9 @@ function KanbanColumn(props) {
     function contagemPorExtenso() {
         const n = typeof props.count === "number" ? props.count : 0;
         const limite = props.wipLimit;
+        if (props.countLabel) {
+            return props.countLabel(n, typeof limite === "number" && limite > 0 ? limite : undefined);
+        }
         if (typeof limite === "number" && limite > 0) {
             let frase = n + " de " + limite + " cartões";
             if (n > limite)

package/dist/components/Kbd/Kbd.css

@@ -0,0 +1,66 @@
+/* ─────────────────────────────────────────────
+   KBD
+   Uma tecla, ou uma combinação, em fonte monoespaçada.
+
+   A caixa é cinza com borda e uma sombra de base de 1px (a "espessura" da
+   tecla). Texto escuro sobre cinza claro: contraste de texto, não só de cor.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-kbd {
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: var(--umds-primitive-spacing-xxs); /* 24px */
+  padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano); /* 2px 8px */
+  font-family: var(--umds-semantic-font-family-mono);
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  line-height: var(--umds-primitive-font-line-height-lg);
+  text-align: center;
+  white-space: nowrap;
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  background: var(--umds-semantic-color-background-light);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-bottom-width: var(--umds-primitive-border-width-thin);
+  border-radius: var(--umds-primitive-border-radius-xs);
+}
+
+.umds-kbd.umds-kbd--md {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+}
+
+.umds-kbd.umds-kbd--sm {
+  min-width: 0;
+  padding: 0 var(--umds-primitive-spacing-quarck); /* 0 4px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+/* ── Combinação ── */
+.umds-kbd-combo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  font-family: var(--umds-semantic-font-family-mono);
+}
+
+.umds-kbd-combo__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+}
+
+.umds-kbd-combo__separator {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+/* O tamanho do conjunto vale para cada tecla dentro dele. */
+.umds-kbd-combo.umds-kbd--md .umds-kbd--inner {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+}
+
+.umds-kbd-combo.umds-kbd--sm .umds-kbd--inner {
+  min-width: 0;
+  padding: 0 var(--umds-primitive-spacing-quarck); /* 0 4px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,32 @@
+import './Kbd.css';
+/**
+ * Kbd — uma tecla, ou uma combinação de teclas, num `<kbd>`.
+ *
+ * Uma tecla: `<Kbd>Esc</Kbd>`. Uma combinação: `keys` (`["Ctrl", "Shift", "P"]`),
+ * que desenha uma caixa por tecla com o `separator` entre elas (`+` por padrão).
+ * A fonte é a monoespaçada do DS (`--umds-semantic-font-family-mono`), a caixa é
+ * cinza com borda e uma sombra de base, como uma tecla de verdade.
+ *
+ * Semântica: `<kbd>` é o elemento HTML de "entrada de teclado", e um `<kbd>`
+ * dentro de outro é a forma de dizer "combinação de teclas". O leitor de tela lê
+ * "Ctrl + Shift + P" (o separador é texto, não desenho).
+ * @property {string[]} keys - Teclas de uma combinação, em ordem. Sem `keys`, vale o conteúdo (uma tecla)
+ * @property {string} separator - Texto entre as teclas de uma combinação (padrão "+")
+ * @property {string} size - 'sm' | 'md' (padrão)
+ * @property {string} className - Classes CSS adicionais
+ * @quandoUsar Mostrar um atalho de teclado ou a tecla que a pessoa deve apertar: painel de atalhos, dica de campo, instrução.
+ * @quandoNaoUsar Para botão, use `Button`. Para trecho de código, use `CodeBlock`.
+ */
+export interface KbdProps {
+    keys?: string[];
+    separator?: string;
+    size?: "sm" | "md";
+    className?: string;
+    id?: string;
+    style?: any;
+    [key: string]: any;
+    /** Uma tecla (quando não há `keys`). */
+    children?: any;
+}
+declare function Kbd(props: KbdProps): import("react/jsx-runtime").JSX.Element;
+export default Kbd;

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Kbd.css';
+function Kbd(props) {
+    function isSingle() {
+        return !(props.keys && props.keys.length > 0);
+    }
+    function keyList() {
+        return props.keys || [];
+    }
+    function classes() {
+        const combinacao = !!props.keys && props.keys.length > 0;
+        return [
+            combinacao ? "umds-kbd-combo" : "umds-kbd",
+            `umds-kbd--${props.size || "md"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function separatorText() {
+        return props.separator || "+";
+    }
+    function isLast(index) {
+        return index === keyList().length - 1;
+    }
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 ||
+                chave.indexOf("aria-") === 0 ||
+                chave === "style" ||
+                chave === "title") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs("kbd", { id: props.id, ...htmlAttrs(), className: classes(), children: [isSingle() ? _jsx(_Fragment, { children: props.children }) : null, keyList()?.map((tecla, posicao) => (_jsxs("span", { className: "umds-kbd-combo__item", children: [_jsx("kbd", { className: "umds-kbd umds-kbd--inner", children: tecla }), !isLast(posicao) ? (_jsx("span", { className: "umds-kbd-combo__separator", children: separatorText() })) : null] }, posicao)))] }));
+}
+export default Kbd;

package/dist/components/Link/Link.css

@@ -32,7 +32,7 @@
 .umds-link:focus-visible {
   outline: 2px solid var(--umds-semantic-color-primary-pure);
   outline-offset: 2px;
-  border-radius: 2px; /* sem equivalente 1DS: candidato a novo token */
+  border-radius: var(--umds-primitive-border-radius-xxs); /* 2px */
 }
 
 /* ── Tamanhos ── */

package/dist/components/List/List.css

@@ -0,0 +1,136 @@
+/* ─────────────────────────────────────────────
+   LIST / LIST ITEM
+   Lista semântica (ul/ol > li) de linhas clicáveis com conteúdo livre.
+   Só tokens do DS. Sem equivalente (mantido como literal):
+     padding vertical de 10px do CrisDoc → usa spacing-nano (8px).
+───────────────────────────────────────────── */
+
+/* ── List ── */
+.umds-list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+ul.umds-list,
+ol.umds-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.umds-list--gap-none   { gap: 0; }
+.umds-list--gap-micro  { gap: var(--umds-primitive-spacing-micro); }
+.umds-list--gap-quarck { gap: var(--umds-primitive-spacing-quarck); }
+.umds-list--gap-nano   { gap: var(--umds-primitive-spacing-nano); }
+.umds-list--gap-mini   { gap: var(--umds-primitive-spacing-mini); }
+.umds-list--gap-xxxs   { gap: var(--umds-primitive-spacing-xxxs); }
+
+/* Estado vazio: o miolo da lista troca de conteúdo; quem rodeia não muda. */
+.umds-list--empty {
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── <li> que envolve a linha ── */
+.umds-list__item {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+/* ── Linha ── */
+.umds-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  border: 0;
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
+  background: transparent;
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  transition: background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-list-item--interactive {
+  cursor: pointer;
+}
+
+.umds-list-item--interactive:hover {
+  background: var(--umds-semantic-color-background-light);
+}
+
+.umds-list-item--interactive:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px; /* dentro da linha: o anel não é cortado por overflow do pai */
+}
+
+/* ── Selecionado ── */
+.umds-list-item--selected {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list-item--selected.umds-list-item--interactive:hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-light) 85%,
+    var(--umds-semantic-color-background-white)
+  );
+}
+
+/* ── Desabilitado ── */
+.umds-list-item--disabled,
+.umds-list-item--disabled .umds-list-item__subtitle,
+.umds-list-item--disabled .umds-list-item__meta {
+  color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-list-item--disabled,
+.umds-list-item--disabled.umds-list-item--interactive:hover {
+  cursor: not-allowed;
+  background: transparent;
+}
+
+/* ── Anatomia ── */
+.umds-list-item__start,
+.umds-list-item__end {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  align-self: center;
+}
+
+.umds-list-item__end {
+  margin-left: auto;
+}
+
+.umds-list-item__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-micro); /* 2px */
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.umds-list-item__title {
+  display: block;
+  color: inherit;
+}
+
+.umds-list-item__subtitle,
+.umds-list-item__meta {
+  display: block;
+  color: var(--umds-semantic-color-neutral-dark-down);
+}

package/dist/components/List/List.d.ts

@@ -0,0 +1,82 @@
+import './List.css';
+/** Espaço entre as linhas, na escala oficial do DS. `none` cola as linhas. */
+export type ListGap = "none" | "micro" | "quarck" | "nano" | "mini" | "xxxs";
+/** Elemento da lista: `ul` (padrão) ou `ol` quando a ordem importa. */
+/** Espaço entre as linhas, na escala oficial do DS. `none` cola as linhas. */
+/** Elemento da lista: `ul` (padrão) ou `ol` quando a ordem importa. */
+export type ListTag = "ul" | "ol";
+/**
+ * List — agrupa `ListItem` numa lista semântica (`ul`/`ol` com `li`) e traz o
+ * estado vazio dentro dela.
+ *
+ * Quando não há itens, passe `isEmpty`: a lista troca os itens por um
+ * `EmptyState` (`emptyTitle`, `emptyDescription`, `emptyIcon`, `emptyActionLabel`
+ * com `onEmptyAction`) ou, para um conteúdo próprio, pelo slot `empty`. Só o
+ * miolo troca: o título do cartão, a busca, os filtros e a paginação ao redor
+ * continuam montados, e o estado vazio é anunciado ao leitor de tela
+ * (`role="status"`). `isEmpty` é uma decisão sua, porque a lista não conta
+ * filhos: `:is-empty="!itens.length"`.
+ *
+ * A lista precisa de nome: passe `ariaLabel` (ou `ariaLabelledby`, apontando
+ * para o título visível). Sem isso o leitor de tela anuncia "lista, 5 itens"
+ * sem dizer de quê.
+ *
+ * `ul` e `ol` saem sem marcador, margem e recuo, com `role="list"` (o Safari
+ * tira a semântica de lista de `list-style: none`).
+ * @property {string} as - Elemento: 'ul' (padrão) | 'ol'
+ * @property {string} gap - Espaço entre as linhas, na escala do DS ('none' cola)
+ * @property {string} ariaLabel - Nome acessível da lista
+ * @property {string} ariaLabelledby - Id do título visível que nomeia a lista
+ * @property {boolean} isEmpty - Sem itens: mostra o estado vazio no lugar das linhas
+ * @property {string} emptyTitle - Título do estado vazio (padrão: "Nenhum item encontrado")
+ * @property {string} emptyDescription - Texto de apoio do estado vazio
+ * @property {IconProp} emptyIcon - Ícone do estado vazio (objeto do Font Awesome)
+ * @property {string} emptySize - Tamanho do estado vazio: 'sm' (padrão, compacto) | 'md' | 'lg'
+ * @property {string} emptyActionLabel - Rótulo do botão do estado vazio (junto de onEmptyAction)
+ * @property {function} onEmptyAction - Callback do botão do estado vazio
+ * @property {any} empty - Slot `empty`: conteúdo próprio no lugar do EmptyState
+ * @property {string} className - Classes CSS adicionais
+ * @slot empty - Conteúdo do estado vazio (substitui o EmptyState padrão).
+ * @quandoUsar Qualquer lista de linhas clicáveis (`ListItem`) ou de itens simples que pode ficar sem resultado: documentos não lidos, notificações, resultados de busca. Resolve a semântica de lista e o "nada por aqui" num lugar só.
+ * @quandoNaoUsar Para dados tabulares comparados coluna a coluna, use `DataTable` (que já tem o próprio estado vazio). Para só empilhar blocos com espaçamento, sem semântica de lista, use `Stack`. Para um estado vazio que ocupa a tela inteira (sem lista), use `EmptyState` direto.
+ */
+/** Espaço entre as linhas, na escala oficial do DS. `none` cola as linhas. */
+/** Elemento da lista: `ul` (padrão) ou `ol` quando a ordem importa. */
+export interface ListProps {
+    /** Elemento da lista. @default 'ul' */
+    as?: ListTag;
+    /** Espaço entre as linhas, na escala oficial (`none` cola). @default 'quarck' */
+    gap?: ListGap;
+    /** Nome acessível da lista. */
+    ariaLabel?: string;
+    /** Id do título visível que nomeia a lista. */
+    ariaLabelledby?: string;
+    /** Sem itens: mostra o estado vazio no lugar das linhas. @default false */
+    isEmpty?: boolean;
+    /** Título do estado vazio. @default 'Nenhum item encontrado' */
+    emptyTitle?: string;
+    /** Texto de apoio do estado vazio. */
+    emptyDescription?: string;
+    /** Ícone do estado vazio: o objeto importado do Font Awesome. */
+    emptyIcon?: IconProp;
+    /** Tamanho do estado vazio. @default 'sm' */
+    emptySize?: "sm" | "md" | "lg";
+    /** Rótulo do botão do estado vazio (exibido junto de `onEmptyAction`). */
+    emptyActionLabel?: string;
+    /** Chamado no botão do estado vazio. */
+    onEmptyAction?: () => void;
+    /** Conteúdo próprio do estado vazio. No Vue, slot `empty`. */
+    empty?: any;
+    /** Classes CSS adicionais. */
+    className?: string;
+    /** ID HTML do elemento raiz. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento raiz (style, data-*…). */
+    style?: any;
+    [key: string]: any;
+    /** As linhas: `ListItem` (ou `li`). */
+    children?: any;
+}
+import type { IconProp } from "../Icon/Icon";
+declare function List(props: ListProps): import("react/jsx-runtime").JSX.Element;
+export default List;

package/dist/components/List/List.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './List.css';
+import EmptyState from "../EmptyState/EmptyState";
+function List(props) {
+    function elementTag() {
+        return props.as || "ul";
+    }
+    function showEmpty() {
+        return !!props.isEmpty;
+    }
+    function showItems() {
+        return !props.isEmpty;
+    }
+    function classes() {
+        return [
+            "umds-list",
+            `umds-list--gap-${props.gap || "quarck"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function emptyClasses() {
+        return ["umds-list umds-list--empty", props.className]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function emptyTitleText() {
+        return props.emptyTitle || "Nenhum item encontrado";
+    }
+    function emptyActionProps() {
+        if (!props.onEmptyAction)
+            return {};
+        return {
+            actionLabel: props.emptyActionLabel,
+            onAction: props.onEmptyAction,
+        };
+    }
+    function emptySizeValue() {
+        return props.emptySize || "sm";
+    }
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 || chave === "style") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs(_Fragment, { children: [showEmpty() ? (_jsx("div", { role: "status", id: props.id, ...htmlAttrs(), className: emptyClasses(), children: _jsx(_Fragment, { children: props.empty || (_jsx(EmptyState, { icon: props.emptyIcon, title: emptyTitleText(), description: props.emptyDescription, size: emptySizeValue(), ...emptyActionProps() })) }) })) : null, showItems() && elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, showItems() && elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
+}
+export default List;