@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/Input/Input.css

@@ -186,6 +186,14 @@
   cursor: default;
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-input--readonly .umds-input__control::placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Ícone esquerdo ── */
 .umds-input__icon-left {
   display: flex;
@@ -196,6 +204,20 @@
   flex-shrink: 0;
 }
 
+/* ── Ícone decorativo à direita (iconRight) ── */
+.umds-input__icon-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--umds-primitive-spacing-nano);
+  color: var(--umds-semantic-color-neutral-dark-medium);
+  flex-shrink: 0;
+}
+
+.umds-input--disabled .umds-input__icon-right {
+  color: var(--umds-semantic-color-neutral-dark-up);
+}
+
 /* ── Ações à direita (botões de ícone) ── */
 .umds-input__actions-right {
   display: flex;
@@ -235,6 +257,43 @@
   outline-offset: 0; /* exceção ao offset 2px: o botão vive DENTRO do campo, e o afastamento invadiria a borda */
 }
 
+/* ── borderless: o campo dentro de um grupo que já tem a moldura ──
+   Sem borda, fundo e raio. O foco NÃO some: o anel do campo vira um contorno
+   para dentro (WCAG 2.4.7), e o erro mantém a borda vermelha (a cor do erro não
+   pode depender só da moldura do grupo). Sem erro, hover e foco não pintam borda. */
+.umds-input--borderless:not(.umds-input--error) .umds-input__container {
+  border-color: transparent;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.umds-input--borderless .umds-input__container:focus-within:not(.umds-input__container--disabled):not(.umds-input__container--readonly) {
+  box-shadow: none;
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px;
+}
+
+/* ── grouped: o campo dentro de um contêiner que já tem moldura e foco ──
+   O campo de chips: as tags e o input moram na mesma caixa, e quem desenha a moldura
+   e o foco (`:focus-within`) é o contêiner. Aqui o campo não impõe altura de campo
+   (a linha cresce com as tags), nem padding, nem anel próprio. */
+.umds-input--grouped:not(.umds-input--full-width) {
+  width: auto;
+  flex: 1 1 var(--umds-primitive-spacing-xxl); /* 80px: o input nunca encolhe a ponto de sumir */
+  min-width: 0;
+}
+
+.umds-input--grouped .umds-input__container {
+  height: auto;
+  min-height: 0;
+  padding: 0;
+}
+
+.umds-input--grouped .umds-input__container:focus-within:not(.umds-input__container--disabled):not(.umds-input__container--readonly) {
+  outline: none;
+  box-shadow: none;
+}
+
 /* ── Mobile: fonte ≥16px no controle (decisão 25/07) ──
    Fonte <16px num campo focado dispara zoom automático no Safari iOS.
    Só abaixo do breakpoint-sm (640px) — desktop permanece idêntico. */

package/dist/components/Input/Input.d.ts

@@ -34,7 +34,11 @@ export interface InputAction {
  * @property {string} ariaLabel - Nome acessível quando não há label visível
  * @property {IconProp} iconLeft - Ícone Font Awesome à esquerda
  * @property {InputAction[]} iconsRight - Botões de ação com ícone à direita
- * @property {function} onChange - Callback acionado ao digitar (recebe o novo valor string)
+ * @property {IconProp} iconRight - Ícone decorativo à direita (não é botão, some para o leitor de tela). Para ação clicável, use `iconsRight`.
+ * @property {boolean} grouped - O campo vive dentro de um contêiner que já desenha a moldura E o foco (o campo de chips: as tags e o input na mesma caixa). Implica `borderless`, e tira a altura de campo, o padding e o anel de foco próprio: o contêiner mostra o foco com `:focus-within`. Sem esse foco no contêiner, quem usa teclado perde o indicador (WCAG 2.4.7).
+ * @property {boolean} borderless - Sem borda, fundo e raio: o campo dentro de um grupo que já tem a moldura (um Select e um Input lado a lado numa mesma caixa). O foco continua visível, em contorno, e o erro mantém a borda vermelha.
+ * @property {string} mask - Máscara simples: 'cpf' | 'cnpj' | 'cep' | 'phone'. O valor exibido e o que chega em `onChange` já vêm formatados (para só os dígitos, `valor.replace(/\D/g, "")`). Aceita só dígitos, limita o tamanho e abre o teclado numérico no celular.
+ * @property {function} onChange - Callback acionado A CADA TECLA (recebe o novo valor string), nos dois frameworks. O blur sai em `onBlur`.
  * @property {function} onFocus - Callback de foco (recebe o evento nativo)
  * @property {function} onBlur - Callback de blur (recebe o evento nativo)
  * @quandoUsar Entrada de texto de UMA linha: nome, e-mail, número, busca. É o campo padrão quando o dado é curto e livre.
@@ -87,6 +91,18 @@ export interface InputProps {
     hidePasswordLabel?: string;
     iconLeft?: IconProp;
     iconsRight?: InputAction[];
+    /** Ícone decorativo à direita (não clicável, `aria-hidden`). Para ação, use `iconsRight`. */
+    iconRight?: IconProp;
+    /** Sem borda, fundo e raio, para o campo dentro de um grupo que já tem a moldura. O foco e o erro continuam visíveis. @default false */
+    borderless?: boolean;
+    /**
+     * O campo dentro de um contêiner que já tem a moldura e o foco (o campo de chips).
+     * Implica `borderless` e tira a altura de campo, o padding e o anel de foco
+     * próprio: o foco vem do contêiner (`:focus-within`). @default false
+     */
+    grouped?: boolean;
+    /** Máscara simples. O valor exibido e o de `onChange` já saem formatados. */
+    mask?: "cpf" | "cnpj" | "cep" | "phone";
     onChange?: (value: string) => void;
     onFocus?: (event?: any) => void;
     onBlur?: (event?: any) => void;

package/dist/components/Input/Input.js

@@ -1,11 +1,13 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Input.css';
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Text from "../Text/Text";
 function Input(props) {
+    const ultimoEventoRef = useRef(null);
+    const ultimoValorRef = useRef(null);
     const [isPasswordVisible, setIsPasswordVisible] = useState(() => false);
     const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
     const [uid, setUid] = useState(() => "umds-input-" + Math.random().toString(36).slice(2, 9));
@@ -48,6 +50,8 @@ function Input(props) {
             props.disabled ? "umds-input--disabled" : "",
             props.readOnly ? "umds-input--readonly" : "",
             props.numberSpinner ? "umds-input--number-spinner" : "",
+            props.borderless || props.grouped ? "umds-input--borderless" : "",
+            props.grouped ? "umds-input--grouped" : "",
             `umds-input--${props.size || "md"}`,
             props.className,
         ]
@@ -69,16 +73,74 @@ function Input(props) {
     function iconSize() {
         return props.size === "sm" || props.size === "xs" ? "sm" : "md";
     }
+    function aplicarMascara(valor) {
+        const texto = valor === undefined || valor === null ? "" : String(valor);
+        if (!props.mask)
+            return texto;
+        let digitos = texto.replace(/\D/g, "");
+        let padrao = "";
+        if (props.mask === "cpf")
+            padrao = "###.###.###-##";
+        else if (props.mask === "cnpj")
+            padrao = "##.###.###/####-##";
+        else if (props.mask === "cep")
+            padrao = "#####-###";
+        else if (props.mask === "phone")
+            padrao = digitos.length > 10 ? "(##) #####-####" : "(##) ####-####";
+        let saida = "";
+        let posicao = 0;
+        for (let i = 0; i < padrao.length && posicao < digitos.length; i++) {
+            if (padrao.charAt(i) === "#") {
+                saida += digitos.charAt(posicao);
+                posicao++;
+            }
+            else {
+                saida += padrao.charAt(i);
+            }
+        }
+        return saida;
+    }
+    function tamanhoMaximo() {
+        if (props.mask === "cpf")
+            return 14;
+        if (props.mask === "cnpj")
+            return 18;
+        if (props.mask === "cep")
+            return 9;
+        if (props.mask === "phone")
+            return 15;
+        return undefined;
+    }
+    function modoDoTeclado() {
+        return props.mask ? "numeric" : undefined;
+    }
+    function valorExibido() {
+        const bruto = props.value !== undefined ? props.value : internalValue;
+        return aplicarMascara(bruto);
+    }
     function handleChange(event) {
-        setInternalValue(event.target.value);
+        const nativo = event.nativeEvent || event;
+        if (nativo === ultimoEventoRef.current)
+            return;
+        ultimoEventoRef.current = nativo;
+        const valor = aplicarMascara(event.target.value);
+        // O `change` do blur (Vue) repete o que o `input` da última tecla
+        // entregou; só passa se o valor mudou de fato (ex.: change disparado à mão).
+        if (nativo.type === "change" && valor === ultimoValorRef.current)
+            return;
+        ultimoValorRef.current = valor;
+        if (props.mask && event.target.value !== valor) {
+            event.target.value = valor;
+        }
+        setInternalValue(valor);
         if (props.onChange) {
-            props.onChange(event.target.value);
+            props.onChange(valor);
         }
     }
-    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", forId: inputId(), children: [_jsx(_Fragment, { children: props.label }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: _jsx(Icon, { icon: props.iconLeft, size: iconSize() }) })) : null, _jsx("input", { className: "umds-input__control", id: inputId(), type: inputType(), name: props.name, min: props.min, max: props.max, step: props.step, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: props.value !== undefined ? props.value : internalValue, onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-label": props.ariaLabel, "aria-invalid": !!props.invalid ||
+    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", forId: inputId(), children: [_jsx(_Fragment, { children: props.label }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: _jsx(Icon, { icon: props.iconLeft, size: iconSize() }) })) : null, _jsx("input", { className: "umds-input__control", id: inputId(), type: inputType(), name: props.name, min: props.min, max: props.max, step: props.step, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: valorExibido(), maxLength: tamanhoMaximo(), inputMode: modoDoTeclado(), onInput: (event) => handleChange(event), onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-label": props.ariaLabel, "aria-invalid": !!props.invalid ||
                             !!(props.errorMessage && props.errorMessage.length > 0), "aria-describedby": describedBy() || undefined, required: props.required }), _jsxs("div", { className: "umds-input__actions-right", children: [props.type === "password" ? (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (event) => togglePassword(), "aria-label": passwordToggleLabel(), children: _jsx(Icon, { icon: isPasswordVisible ? faEyeSlash : faEye, size: iconSize() }) })) : null, props.iconsRight?.length ? (_jsx(_Fragment, { children: props.iconsRight?.map((action, index) => (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (e) => {
                                         e.stopPropagation();
                                         action.onClick?.(e);
-                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: _jsx(Icon, { icon: action.icon, size: iconSize() }) }, index))) })) : null] })] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: _jsx(_Fragment, { children: props.errorMessage }) })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: _jsx(_Fragment, { children: props.helperText }) })) : null] }));
+                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: _jsx(Icon, { icon: action.icon, size: iconSize() }) }, index))) })) : null] }), props.iconRight ? (_jsx("div", { "aria-hidden": "true", className: "umds-input__icon-right", children: _jsx(Icon, { icon: props.iconRight, size: iconSize() }) })) : null] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: _jsx(_Fragment, { children: props.errorMessage }) })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: _jsx(_Fragment, { children: props.helperText }) })) : null] }));
 }
 export default Input;

package/dist/components/Kanban/Kanban.css

@@ -7,7 +7,11 @@
    cartão.
    ============================================ */
 
+/* `position: relative` ancora os textos só para leitor de tela (absolutos) das
+   colunas dentro da área que rola; sem ele, o de uma coluna fora da tela sobe
+   até a página e cria rolagem horizontal nela. */
 .umds-kanban {
+  position: relative;
   display: flex;
   align-items: stretch;
   gap: var(--umds-primitive-spacing-xxxs);

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/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;