@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/AILabel/AILabel.js

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { faWandMagicSparkles } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 function AILabel(props) {
-    const [internalOpen, setInternalOpen] = useState(() => false);
+    const [internalOpen, setInternalOpen] = useState(() => props.defaultOpen === true);
     const [uid, setUid] = useState(() => `umds-ailabel-${Math.random().toString(36).slice(2, 9)}`);
     function baseId() {
         return props.id || uid;

package/dist/components/Accordion/Accordion.d.ts

@@ -2,14 +2,18 @@ import './Accordion.css';
 export interface AccordionItemData {
     id: string;
     title: string;
-    /** Conteúdo do painel — aceita ReactNode no React (no Vue, prefira string) */
+    /**
+     * Conteúdo do painel. React: aceita qualquer nó. Vue: aqui vai só texto; para
+     * conteúdo livre (campos, botões) use o slot `#content-<id>` do item, que
+     * recebe `{ item }` e vale sobre este texto.
+     */
     content: any;
     disabled?: boolean;
     defaultOpen?: boolean;
 }
 /**
  * Accordion component — lista de painéis expansíveis (sanfona).
- * @property {AccordionItemData[]} items - Itens do accordion (id, title, content, disabled?, defaultOpen?)
+ * @property {AccordionItemData[]} items - Itens do accordion (id, title, content, disabled?, defaultOpen?). Conteúdo livre por item: no React, `content` aceita nó; no Vue, o slot `#content-<id>` (recebe `{ item }`).
  * @property {boolean} multiple - Permite manter vários painéis abertos ao mesmo tempo
  * @property {string} variant - Estilo visual: 'default' | 'bordered' | 'separated'
  * @property {string} className - Classes CSS adicionais

package/dist/components/AttachmentCard/AttachmentCard.css

@@ -80,6 +80,13 @@
     color: var(--umds-semantic-color-feedback-negative-dark);
 }
 
+/* Selo de recurso de IA: o roxo da IA (mesmos tokens do AILabel). */
+.umds-attachment-card__status--ai {
+    border-color: color-mix(in srgb, var(--umds-semantic-color-ai-pure) 25%, transparent);
+    background-color: var(--umds-semantic-color-ai-light);
+    color: var(--umds-semantic-color-ai-dark);
+}
+
 /* Selo com painel de conferência: vira botão, e fica acima do `::after` do
    "abrir" — senão o clique no selo abriria o arquivo. */
 .umds-attachment-card__status--interativo {
@@ -101,6 +108,11 @@
     border-color: var(--umds-semantic-color-feedback-negative-pure);
 }
 
+.umds-attachment-card__status--interativo.umds-attachment-card__status--ai:hover,
+.umds-attachment-card__status--interativo.umds-attachment-card__status--ai[aria-expanded="true"] {
+    border-color: var(--umds-semantic-color-ai-pure);
+}
+
 .umds-attachment-card__status--interativo:focus-visible {
     outline: 2px solid var(--umds-semantic-color-primary-pure);
     outline-offset: 2px; /* anel de foco canônico: micro-espaçamento, candidato a token */
@@ -146,6 +158,10 @@
     color: var(--umds-semantic-color-feedback-negative-pure);
 }
 
+.umds-attachment-card__detalhe-icone--ai {
+    color: var(--umds-semantic-color-ai-pure);
+}
+
 .umds-attachment-card__detalhe-titulo {
     min-width: 0;
     font-size: var(--umds-primitive-font-size-xxs);

package/dist/components/AttachmentCard/AttachmentCard.d.ts

@@ -6,10 +6,13 @@ import './AttachmentCard.css';
  * @property {string} fileName - Nome do arquivo, com extensão. A extensão escolhe o ícone do rodapé.
  * @property {string} documentType - Tipo de documento que o arquivo cumpre ("CNH", "RG", "Título de Eleitor")
  * @property {boolean} required - O tipo de documento é obrigatório (asterisco no selo)
- * @property {string} status - Situação da conferência: 'positive' | 'negative'. Sem ela o selo não aparece.
+ * @property {string} status - Situação da conferência: 'positive' | 'negative' | 'ai'. O `ai` é o selo de recurso de IA (roxo da IA, com a varinha por padrão), para quando a IA propõe e a pessoa decide. Sem `status` o selo não aparece.
  * @property {string} statusLabel - Texto do selo de situação ("Pré-aprovado", "Rejeitado")
  * @property {IconProp} statusIcon - Ícone à esquerda do texto do selo
  * @property {object} statusDetails - Resultado da conferência: `{ title?, description?, fields?: [{ label, value, copyable? }] }`. Com ele o selo vira botão e abre um painel no hover (sem tirar o foco de onde está) e no clique/teclado (levando o foco para dentro).
+ * @property {any} panel - Conteúdo livre do painel do selo, no lugar do resultado da conferência (ações, campos, texto). Passe o elemento (React) ou o slot `panel` (Vue). Com ele o selo vira botão mesmo sem `statusDetails`.
+ * @property {number} panelWidth - Largura do painel, em px. Padrão: 300.
+ * @property {boolean} closePanelOnAction - Fecha o painel e devolve o foco ao selo quando alguém aciona um botão ou link de dentro dele (o botão "Aplicar sugestão" do painel de IA). O botão de copiar um campo não conta.
  * @property {Function} onCopyField - Avisa quando um campo do painel é copiado (recebe o campo)
  * @property {IconProp} icon - Ícone central. Padrão: documento.
  * @property {Function} onOpen - Abre o anexo. Com ele o cartão inteiro vira alvo de clique, com um único ponto de foco.
@@ -37,10 +40,24 @@ export interface AttachmentCardProps {
     fileName: string;
     documentType?: string;
     required?: boolean;
-    status?: "positive" | "negative";
+    status?: "positive" | "negative" | "ai";
     statusLabel?: string;
     statusIcon?: IconProp;
     statusDetails?: AttachmentCardStatusDetails;
+    /**
+     * Conteúdo livre do painel do selo, no lugar do resultado da conferência
+     * (`statusDetails`): ações, campos, texto. React: o elemento; Vue: o slot
+     * `panel`. Com ele o selo vira botão mesmo sem `statusDetails`.
+     */
+    panel?: any;
+    /** Largura do painel, em px. @default 300 */
+    panelWidth?: number;
+    /**
+     * Fecha o painel e devolve o foco ao selo quando alguém aciona um botão ou
+     * link de dentro dele. O botão de copiar um campo não conta. Sem a prop, o
+     * painel fica aberto até Esc, clique fora ou o foco sair.
+     */
+    closePanelOnAction?: boolean;
     onCopyField?: (field: AttachmentCardField) => void;
     icon?: IconProp;
     onOpen?: (event?: any) => void;

package/dist/components/AttachmentCard/AttachmentCard.js

@@ -4,7 +4,7 @@ import './AttachmentCard.css';
 import { useState, useRef, useEffect } from "react";
 import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
 import { faCopy, faFile, faFileLines, faFilePdf, faFileImage, faFileWord, faFileExcel, } from "@fortawesome/free-regular-svg-icons";
-import { faCheck, faCircleCheck, faCircleXmark, } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCircleCheck, faCircleXmark, faWandMagicSparkles, } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Portal from "../Portal/Portal";
 const FOCAVEIS = 'button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -47,7 +47,30 @@ function AttachmentCard(props) {
         return Boolean(props.status && props.statusLabel);
     }
     function temDetalhe() {
-        return Boolean(temSelo() && props.statusDetails);
+        return Boolean(temSelo() && (props.statusDetails || props.panel));
+    }
+    function painelTemConteudoLivre() {
+        return Boolean(props.panel);
+    }
+    function seloIcone() {
+        if (props.statusIcon)
+            return props.statusIcon;
+        return props.status === "ai" ? faWandMagicSparkles : undefined;
+    }
+    function detalheEstilo() {
+        return props.panelWidth
+            ? {
+                width: props.panelWidth + "px",
+            }
+            : undefined;
+    }
+    function painelNomeadoPor() {
+        return props.panel ? undefined : tituloId();
+    }
+    function painelRotulo() {
+        if (!props.panel)
+            return undefined;
+        return (props.statusLabel || "") + seloComplemento();
     }
     function painelId() {
         return `${props.id || uid}-conferencia`;
@@ -85,6 +108,8 @@ function AttachmentCard(props) {
         return (props.statusDetails && props.statusDetails.fields) || [];
     }
     function detalheIcone() {
+        if (props.status === "ai")
+            return faWandMagicSparkles;
         return props.status === "negative" ? faCircleXmark : faCircleCheck;
     }
     function detalheIconeClasses() {
@@ -283,6 +308,18 @@ function AttachmentCard(props) {
             fechar(true);
         }
     }
+    function cliqueNoPainel(event) {
+        if (!props.closePanelOnAction)
+            return;
+        const alvo = event.target && event.target.closest
+            ? event.target.closest("button, a[href]")
+            : null;
+        if (!alvo)
+            return;
+        if (alvo.classList.contains("umds-attachment-card__copiar"))
+            return;
+        fechar(true);
+    }
     function teclaNoPainel(event) {
         if (event.key === "Escape") {
             event.preventDefault();
@@ -349,6 +386,6 @@ function AttachmentCard(props) {
             desligarObservadores();
         };
     }, []);
-    return (_jsxs("div", { className: classes(), id: props.id, children: [_jsxs("div", { className: "umds-attachment-card__topo", children: [temSelo() && !temDetalhe() ? (_jsxs("span", { className: statusClasses(), children: [props.statusIcon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.statusIcon })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel })] })) : null, temDetalhe() ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-haspopup": "dialog", ref: seloRef, className: statusBotaoClasses(), "aria-expanded": ariaExpandidoTexto(), "aria-controls": ariaControlsTexto(), onMouseEnter: (event) => abrir(false), onMouseLeave: (event) => agendarFechar(), onClick: (event) => alternar(), onKeyDown: (event) => teclaNoSelo(event), onBlur: (event) => focoSaiu(event), children: [props.statusIcon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.statusIcon })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel }), _jsx("span", { className: "umds-attachment-card__sr", children: seloComplemento() })] }), _jsx(Portal, { children: aberto ? (_jsx("span", { className: "umds-attachment-card__flutuante", ref: flutuanteRef, style: flutuanteEstilo(), children: _jsxs("div", { className: "umds-attachment-card__detalhe", role: "dialog", "aria-modal": "false", ref: painelRef, id: painelId(), "aria-labelledby": tituloId(), tabIndex: -1, onMouseEnter: (event) => cancelarFechar(), onMouseLeave: (event) => agendarFechar(), onKeyDown: (event) => teclaNoPainel(event), children: [_jsx("span", { className: "umds-attachment-card__sr", role: "status", "aria-live": "polite", children: anuncio }), _jsxs("div", { className: "umds-attachment-card__detalhe-topo", children: [_jsx("span", { "aria-hidden": "true", className: detalheIconeClasses(), children: _jsx(Icon, { size: "md", variant: "inherit", icon: detalheIcone() }) }), _jsx("span", { className: "umds-attachment-card__detalhe-titulo", id: tituloId(), children: detalheTitulo() })] }), detalheDescricao() ? (_jsx("p", { className: "umds-attachment-card__detalhe-descricao", children: detalheDescricao() })) : null, detalheCampos().length > 0 ? (_jsx("dl", { className: "umds-attachment-card__campos", children: detalheCampos()?.map((campo) => (_jsxs("div", { className: "umds-attachment-card__campo", children: [_jsxs("div", { className: "umds-attachment-card__campo-texto", children: [_jsx("dt", { className: "umds-attachment-card__campo-rotulo", children: campo.label }), _jsx("dd", { className: "umds-attachment-card__campo-valor", children: campo.value })] }), campo.copyable ? (_jsx("button", { type: "button", className: "umds-attachment-card__copiar", "aria-label": rotuloCopiar(campo), onClick: (event) => copiarCampo(campo), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeCopiar(campo) }) })) : null] }, campo.label))) })) : null] }) })) : null })] })) : null] }), _jsx("div", { className: "umds-attachment-card__preview", "aria-hidden": "true", children: _jsx(Icon, { customSize: "48px", variant: "inherit", icon: iconeCentral() }) }), _jsx("div", { className: "umds-attachment-card__tipo-area", children: props.documentType ? (_jsxs("span", { className: "umds-attachment-card__tipo", children: [_jsx("span", { className: "umds-attachment-card__tipo-texto", children: props.documentType }), props.required ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-attachment-card__obrigatorio", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "umds-attachment-card__sr", children: props.requiredLabel || "(obrigatório)" })] })) : null] })) : null }), _jsxs("div", { className: "umds-attachment-card__rodape", title: props.fileName, children: [_jsx("span", { className: "umds-attachment-card__rodape-icone", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeArquivo() }) }), props.onOpen ? (_jsx("button", { type: "button", className: "umds-attachment-card__nome umds-attachment-card__abrir", "aria-label": rotuloAbrir(), onClick: (event) => handleOpen(event), children: props.fileName })) : (_jsx("span", { className: "umds-attachment-card__nome", children: props.fileName }))] })] }));
+    return (_jsxs("div", { className: classes(), id: props.id, children: [_jsxs("div", { className: "umds-attachment-card__topo", children: [temSelo() && !temDetalhe() ? (_jsxs("span", { className: statusClasses(), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel })] })) : null, temDetalhe() ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-haspopup": "dialog", ref: seloRef, className: statusBotaoClasses(), "aria-expanded": ariaExpandidoTexto(), "aria-controls": ariaControlsTexto(), onMouseEnter: (event) => abrir(false), onMouseLeave: (event) => agendarFechar(), onClick: (event) => alternar(), onKeyDown: (event) => teclaNoSelo(event), onBlur: (event) => focoSaiu(event), children: [seloIcone() ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: seloIcone() })) : null, _jsx("span", { className: "umds-attachment-card__status-texto", children: props.statusLabel }), _jsx("span", { className: "umds-attachment-card__sr", children: seloComplemento() })] }), _jsx(Portal, { children: aberto ? (_jsx("span", { className: "umds-attachment-card__flutuante", ref: flutuanteRef, style: flutuanteEstilo(), children: _jsxs("div", { className: "umds-attachment-card__detalhe", role: "dialog", "aria-modal": "false", ref: painelRef, id: painelId(), "aria-labelledby": painelNomeadoPor(), "aria-label": painelRotulo(), tabIndex: -1, style: detalheEstilo(), onClick: (event) => cliqueNoPainel(event), onMouseEnter: (event) => cancelarFechar(), onMouseLeave: (event) => agendarFechar(), onKeyDown: (event) => teclaNoPainel(event), children: [_jsx("span", { className: "umds-attachment-card__sr", role: "status", "aria-live": "polite", children: anuncio }), props.panel ? (_jsx(_Fragment, { children: props.panel })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-attachment-card__detalhe-topo", children: [_jsx("span", { "aria-hidden": "true", className: detalheIconeClasses(), children: _jsx(Icon, { size: "md", variant: "inherit", icon: detalheIcone() }) }), _jsx("span", { className: "umds-attachment-card__detalhe-titulo", id: tituloId(), children: detalheTitulo() })] }), detalheDescricao() ? (_jsx("p", { className: "umds-attachment-card__detalhe-descricao", children: detalheDescricao() })) : null, detalheCampos().length > 0 ? (_jsx("dl", { className: "umds-attachment-card__campos", children: detalheCampos()?.map((campo) => (_jsxs("div", { className: "umds-attachment-card__campo", children: [_jsxs("div", { className: "umds-attachment-card__campo-texto", children: [_jsx("dt", { className: "umds-attachment-card__campo-rotulo", children: campo.label }), _jsx("dd", { className: "umds-attachment-card__campo-valor", children: campo.value })] }), campo.copyable ? (_jsx("button", { type: "button", className: "umds-attachment-card__copiar", "aria-label": rotuloCopiar(campo), onClick: (event) => copiarCampo(campo), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeCopiar(campo) }) })) : null] }, campo.label))) })) : null] }) }))] }) })) : null })] })) : null] }), _jsx("div", { className: "umds-attachment-card__preview", "aria-hidden": "true", children: _jsx(Icon, { customSize: "48px", variant: "inherit", icon: iconeCentral() }) }), _jsx("div", { className: "umds-attachment-card__tipo-area", children: props.documentType ? (_jsxs("span", { className: "umds-attachment-card__tipo", children: [_jsx("span", { className: "umds-attachment-card__tipo-texto", children: props.documentType }), props.required ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-attachment-card__obrigatorio", "aria-hidden": "true", children: "*" }), _jsx("span", { className: "umds-attachment-card__sr", children: props.requiredLabel || "(obrigatório)" })] })) : null] })) : null }), _jsxs("div", { className: "umds-attachment-card__rodape", title: props.fileName, children: [_jsx("span", { className: "umds-attachment-card__rodape-icone", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: iconeArquivo() }) }), props.onOpen ? (_jsx("button", { type: "button", className: "umds-attachment-card__nome umds-attachment-card__abrir", "aria-label": rotuloAbrir(), onClick: (event) => handleOpen(event), children: props.fileName })) : (_jsx("span", { className: "umds-attachment-card__nome", children: props.fileName }))] })] }));
 }
 export default AttachmentCard;

package/dist/components/Avatar/Avatar.css

@@ -72,17 +72,22 @@
 
 /* Avatar Group Styles */
 .umds-avatar-group {
+    /* Sobreposição e anel do grupo: os padrões de sempre; as props `overlap` e
+       `ring` do AvatarGroup trocam estes dois valores por style inline. */
+    --umds-avatar-group-overlap: var(--umds-primitive-spacing-nano); /* 8px */
+    --umds-avatar-group-ring: 1.5px; /* a borda do Avatar base */
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     /* compensa a sobreposição negativa do último item */
-    padding-right: var(--umds-primitive-spacing-nano);
+    padding-right: var(--umds-avatar-group-overlap);
 }
 
 /* Sobreposição: cada avatar do grupo avança sobre o anterior (protótipo: -8px) */
 .umds-avatar-group .umds-avatar {
     /* Borda branca já definida no componente base Avatar */
-    margin-right: calc(-1 * var(--umds-primitive-spacing-nano));
+    margin-right: calc(-1 * var(--umds-avatar-group-overlap));
+    border-width: var(--umds-avatar-group-ring);
     position: relative;
     z-index: 1;
     transition: z-index var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -45,6 +45,23 @@ export interface AvatarGroupProps {
      * @default 'md'
      */
     size?: "sm" | "md" | "lg";
+    /**
+     * Quantas pessoas a mais existem além das que estão em `avatars`: entra na
+     * conta do "+N" sem precisar de itens-fantasma. Com 16 responsáveis, passe
+     * os 4 primeiros em `avatars` e `overflowCount={12}` para ver "+12". Soma com
+     * o que passar de `max` dentro de `avatars`.
+     * @default 0
+     */
+    overflowCount?: number;
+    /**
+     * Quanto cada avatar avança sobre o anterior, em px. O padrão é 8
+     * (`spacing-nano`); 6 deixa as iniciais menos cortadas.
+     */
+    overlap?: number;
+    /**
+     * Largura do anel (a borda da cor do fundo) de cada avatar, em px. O padrão é 1,5.
+     */
+    ring?: number;
     /**
      * Classes adicionais.
      */

package/dist/components/Avatar/AvatarGroup.js

@@ -10,22 +10,36 @@ function AvatarGroup(props) {
     function visibleAvatars() {
         return avatarList().slice(0, maxCount());
     }
-    function overflowCount() {
+    function hiddenCount() {
         const total = avatarList().length;
-        return total > maxCount() ? total - maxCount() : 0;
+        const alem = total > maxCount() ? total - maxCount() : 0;
+        return alem + (props.overflowCount || 0);
     }
     function hasOverflow() {
-        return overflowCount() > 0;
+        return hiddenCount() > 0;
     }
     function overflowAriaLabelText() {
         return props.overflowAriaLabel
-            ? props.overflowAriaLabel(overflowCount())
-            : "Mais " + overflowCount() + " avatares";
+            ? props.overflowAriaLabel(hiddenCount())
+            : "Mais " + hiddenCount() + " avatares";
     }
     function overflowTitleText() {
         return props.overflowTitle
-            ? props.overflowTitle(overflowCount())
-            : overflowCount() + " outros";
+            ? props.overflowTitle(hiddenCount())
+            : hiddenCount() + " outros";
+    }
+    function groupStyle() {
+        if (props.overlap === undefined && props.ring === undefined) {
+            return undefined;
+        }
+        const estilo = {};
+        if (props.overlap !== undefined) {
+            estilo["--umds-avatar-group-overlap"] = props.overlap + "px";
+        }
+        if (props.ring !== undefined) {
+            estilo["--umds-avatar-group-ring"] = props.ring + "px";
+        }
+        return estilo;
     }
     function size() {
         return props.size || "md";
@@ -48,6 +62,6 @@ function AvatarGroup(props) {
         const second = parts[1] ? parts[1][0] : "";
         return (first + second).toUpperCase();
     }
-    return (_jsxs("div", { role: "group", "aria-label": props.ariaLabel || "Grupo de avatares", className: classes(), children: [visibleAvatars()?.map((avatar, index) => (_jsx(Avatar, { className: "umds-avatar-group__item", size: size(), type: avatar.src ? "photo" : "letter", src: avatar.src, alt: avatar.name, title: avatar.name, ariaLabel: avatar.name, onError: (event) => props.onError && props.onError(avatar), children: !avatar.src ? _jsx(_Fragment, { children: getInitials(avatar) }) : null }, avatar.name + "-" + index))), hasOverflow() ? (_jsxs(Avatar, { className: "umds-avatar-group__item umds-avatar-group__overflow", type: "number", size: size(), title: overflowTitleText(), ariaLabel: overflowAriaLabelText(), children: ["+", overflowCount()] })) : null] }));
+    return (_jsxs("div", { role: "group", style: groupStyle(), "aria-label": props.ariaLabel || "Grupo de avatares", className: classes(), children: [visibleAvatars()?.map((avatar, index) => (_jsx(Avatar, { className: "umds-avatar-group__item", size: size(), type: avatar.src ? "photo" : "letter", src: avatar.src, alt: avatar.name, title: avatar.name, ariaLabel: avatar.name, onError: (event) => props.onError && props.onError(avatar), children: !avatar.src ? _jsx(_Fragment, { children: getInitials(avatar) }) : null }, avatar.name + "-" + index))), hasOverflow() ? (_jsxs(Avatar, { className: "umds-avatar-group__item umds-avatar-group__overflow", type: "number", size: size(), title: overflowTitleText(), ariaLabel: overflowAriaLabelText(), children: ["+", hiddenCount()] })) : null] }));
 }
 export default AvatarGroup;

package/dist/components/Badge/Badge.css

@@ -1,8 +1,9 @@
 /* ============================================
    Badge Component
-   Variantes: neutral, positive, negative, info, primary
+   Variantes: neutral, positive, negative, info, primary, new
    Aparências (appearance): solid, soft, outlined
-   Tamanhos: xs, sm, md, lg, pill
+   Tamanhos: 2xs, xs, sm, md, lg, pill
+   Modificador: attached (rótulo colado no topo de um card)
    ============================================ */
 
 .umds-badge {
@@ -59,6 +60,16 @@
 
 /* ── Tamanhos — padding + gap por tamanho (sem height fixa) ── */
 
+/* 2xs: 16px de altura (10 de fonte + 2 + 2 de padding + 2 de borda). A fonte de
+   10px não está na escala do DS (menor degrau: 12px); é o selo compacto do
+   CrisDoc, sem token equivalente. */
+.umds-badge--2xs {
+    font-size: 0.625rem; /* 10px: fora da escala, selo compacto */
+    padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-quarck);
+    gap: var(--umds-primitive-spacing-micro);
+    border-radius: var(--umds-primitive-border-radius-xs); /* 4px */
+}
+
 .umds-badge--lg {
     font-size: var(--umds-primitive-font-size-xxs); /* 14px */
     padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-mini); /* 10px: candidato a novo token */
@@ -116,6 +127,11 @@
     height: 11px;
 }
 
+.umds-badge--2xs .umds-badge__icon {
+    width: 8px;
+    height: 8px;
+}
+
 /* ─────────────── SOLID ─────────────── */
 
 .umds-badge--solid.umds-badge--neutral {
@@ -202,3 +218,39 @@
     border-color: var(--umds-semantic-color-primary-pure);
     color: var(--umds-semantic-color-primary-pure);
 }
+
+/* ─────────────── NEW (selo de novidade) ───────────────
+   O DS não tem token semântico de amarelo. Usa os primitivos de amarelo e o
+   cinza escuro, todos fixos nos temas, então o contraste (8:1 do texto sobre o
+   fundo) não depende do tema. Candidato a token semântico de destaque. */
+
+.umds-badge--new {
+    font-weight: var(--umds-primitive-font-weight-extrabold);
+    text-transform: uppercase;
+    letter-spacing: var(--umds-primitive-font-letter-spacing-wider);
+    border-radius: var(--umds-primitive-border-radius-pill);
+}
+
+.umds-badge--solid.umds-badge--new,
+.umds-badge--soft.umds-badge--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    background-color: var(--umds-primitive-yellow-medium);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- par fixo do amarelo: o semântico inverte no tema escuro e perderia o contraste */
+    color: var(--umds-primitive-gray-darkest);
+}
+
+.umds-badge--outlined.umds-badge--new {
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    border-color: var(--umds-primitive-yellow-pure);
+    /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token semântico de amarelo (candidato a novo token) */
+    color: var(--umds-primitive-yellow-dark);
+}
+
+/* ─────────────── ATTACHED (rótulo colado no topo do card) ─────────────── */
+
+.umds-badge--attached {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 0 0 var(--umds-primitive-border-radius-sm) var(--umds-primitive-border-radius-sm);
+}

package/dist/components/Badge/Badge.d.ts

@@ -7,15 +7,25 @@ import './Badge.css';
  */
 export interface BadgeProps {
     /**
-     * Variação de cor semântica.
+     * Variação de cor semântica. `new` é o selo de novidade: amarelo, em caixa
+     * alta e pílula, para destacar uma funcionalidade recém-chegada.
      * @default 'neutral'
      */
-    variant?: "neutral" | "positive" | "negative" | "info" | "primary";
+    variant?: "neutral" | "positive" | "negative" | "info" | "primary" | "new";
     /**
-     * Tamanho do badge.
+     * Tamanho do badge. `2xs` é o compacto (16px, fonte de 10px) para selo de
+     * setor e de contagem dentro de linha de lista e card.
      * @default 'md'
      */
-    size?: "sm" | "md" | "lg" | "xs" | "pill";
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "pill";
+    /**
+     * Cola o badge no canto superior esquerdo do card (rótulo de card, como
+     * "Tarefa pendente"): cantos de baixo arredondados, os de cima retos.
+     * Posiciona em `absolute`, então o pai precisa de `position: relative`
+     * (o `Card` e o `Box` com `position` já servem).
+     * @default false
+     */
+    attached?: boolean;
     /**
      * Estilo visual do badge.
      * @default 'soft'

package/dist/components/Badge/Badge.js

@@ -7,6 +7,7 @@ function Badge(props) {
             `umds-badge--${props.variant || "neutral"}`,
             `umds-badge--${props.size || "md"}`,
             `umds-badge--${props.appearance || "soft"}`,
+            props.attached ? "umds-badge--attached" : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/Box/Box.css

@@ -99,3 +99,86 @@
 .umds-box--shadow-level1 { box-shadow: var(--umds-primitive-shadow-level-1); }
 .umds-box--shadow-level2 { box-shadow: var(--umds-primitive-shadow-level-2); }
 .umds-box--shadow-level3 { box-shadow: var(--umds-primitive-shadow-level-3); }
+
+/* ── Layout flex (direction, gap, align, justify, wrap) ──
+   Liga quando qualquer uma das props é passada; mesmos nomes e valores do Stack. */
+.umds-box--flex {
+  display: flex;
+}
+
+.umds-box--vertical   { flex-direction: column; }
+.umds-box--horizontal { flex-direction: row; }
+.umds-box--wrap       { flex-wrap: wrap; }
+
+.umds-box--gap-none   { gap: 0; }
+.umds-box--gap-quarck { gap: var(--umds-primitive-spacing-quarck); }
+.umds-box--gap-nano   { gap: var(--umds-primitive-spacing-nano); }
+.umds-box--gap-micro  { gap: var(--umds-primitive-spacing-micro); }
+.umds-box--gap-mini   { gap: var(--umds-primitive-spacing-mini); }
+.umds-box--gap-xxxs   { gap: var(--umds-primitive-spacing-xxxs); }
+.umds-box--gap-xxs    { gap: var(--umds-primitive-spacing-xxs); }
+.umds-box--gap-xs     { gap: var(--umds-primitive-spacing-xs); }
+.umds-box--gap-sm     { gap: var(--umds-primitive-spacing-sm); }
+.umds-box--gap-md     { gap: var(--umds-primitive-spacing-md); }
+.umds-box--gap-lg     { gap: var(--umds-primitive-spacing-lg); }
+.umds-box--gap-xl     { gap: var(--umds-primitive-spacing-xl); }
+.umds-box--gap-xxl    { gap: var(--umds-primitive-spacing-xxl); }
+.umds-box--gap-xxxl   { gap: var(--umds-primitive-spacing-xxxl); }
+
+.umds-box--align-start    { align-items: flex-start; }
+.umds-box--align-center   { align-items: center; }
+.umds-box--align-end      { align-items: flex-end; }
+.umds-box--align-stretch  { align-items: stretch; }
+.umds-box--align-baseline { align-items: baseline; }
+
+.umds-box--justify-start   { justify-content: flex-start; }
+.umds-box--justify-center  { justify-content: center; }
+.umds-box--justify-end     { justify-content: flex-end; }
+.umds-box--justify-between { justify-content: space-between; }
+.umds-box--justify-around  { justify-content: space-around; }
+.umds-box--justify-evenly  { justify-content: space-evenly; }
+
+/* ── Lista: ul/ol sem marcador, margem nem recuo do navegador ──
+   :where() zera a especificidade, para o padding do Box (p, px, py) vencer. */
+:where(ul.umds-box, ol.umds-box) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Como item de Stack/Box flex ── */
+.umds-box--grow { flex-grow: 1; }
+.umds-box--shrink-0 { flex-shrink: 0; }
+.umds-box--shrink-1 { flex-shrink: 1; }
+
+.umds-box--basis-auto { flex-basis: auto; }
+.umds-box--basis-0    { flex-basis: 0; }
+.umds-box--basis-25   { flex-basis: 25%; }
+.umds-box--basis-33   { flex-basis: 33.3333%; }
+.umds-box--basis-50   { flex-basis: 50%; }
+.umds-box--basis-66   { flex-basis: 66.6667%; }
+.umds-box--basis-75   { flex-basis: 75%; }
+.umds-box--basis-100  { flex-basis: 100%; }
+
+/* O padrão do Box já é min-width: 0; estas duas só tornam a escolha explícita. */
+.umds-box--min-w-0    { min-width: 0; }
+.umds-box--min-w-auto { min-width: auto; }
+
+/* ── Overflow: o eixo vem depois do geral, então vence por ordem de cascata ── */
+.umds-box--overflow-visible { overflow: visible; }
+.umds-box--overflow-hidden  { overflow: hidden; }
+.umds-box--overflow-auto    { overflow: auto; }
+.umds-box--overflow-scroll  { overflow: scroll; }
+
+.umds-box--overflow-x-visible { overflow-x: visible; }
+.umds-box--overflow-x-hidden  { overflow-x: hidden; }
+.umds-box--overflow-x-auto    { overflow-x: auto; }
+.umds-box--overflow-x-scroll  { overflow-x: scroll; }
+
+.umds-box--overflow-y-visible { overflow-y: visible; }
+.umds-box--overflow-y-hidden  { overflow-y: hidden; }
+.umds-box--overflow-y-auto    { overflow-y: auto; }
+.umds-box--overflow-y-scroll  { overflow-y: scroll; }
+
+/* ── Dimensão ── */
+.umds-box--full-height { height: 100%; }

package/dist/components/Box/Box.d.ts

@@ -1,12 +1,55 @@
 import './Box.css';
 /** Degraus da escala oficial de espaçamento do 1DS. */
 export type BoxSpacing = "none" | "quarck" | "nano" | "micro" | "mini" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+/** Degraus da escala oficial de espaçamento do 1DS. */
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+export type BoxTag = "div" | "span" | "ul" | "ol" | "li" | "section" | "nav" | "header" | "footer" | "form";
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+/** Degraus da escala oficial de espaçamento do 1DS. */
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+export type BoxOverflow = "visible" | "hidden" | "auto" | "scroll";
 /**
  * Box — superfície com padding, fundo, borda e raio vindos dos tokens.
  *
  * É a caixa genérica do DS. Existe para evitar o `<div style={{ padding: 16,
  * background: "#fff", borderRadius: 8 }}>` escrito à mão: cada valor sai da
  * escala oficial, não da memória de quem escreve.
+ *
+ * Também é layout: com `direction`, `gap`, `align`, `justify` ou `wrap` (os
+ * mesmos nomes e valores do `Stack`) a caixa vira um flex, e uma linha, um
+ * cartão ou uma região com borda, fundo e padding é UM componente só, sem
+ * `Stack` por dentro nem flex no CSS do produto. Sem nenhuma dessas props, o
+ * Box continua sendo um bloco comum. Diferente do `Stack`, o `gap` do Box
+ * não tem valor padrão: sem `gap`, os filhos ficam colados.
+ *
+ * Também é item de flex: dentro de um `Stack` ou de outro `Box` flex, `grow`,
+ * `shrink`, `basis`, `minWidth`, `fullHeight`, `fullWidth` e `overflow*` (os
+ * mesmos nomes e valores do `Stack`) fazem a superfície crescer, encolher ou
+ * rolar no lugar certo, sem CSS do produto.
+ *
+ * `as` troca o elemento (`div` por padrão; `section`, `nav`, `li`, `ul`...):
+ * uma linha com borda e fundo dentro de uma lista é `<Box as="li">`. Com `nav`,
+ * `section` ou `form`, passe `aria-label` ou `aria-labelledby`.
+ *
+ * Atributos HTML (`id`, `style`, `title`, `role`, `tabIndex`, `data-*`,
+ * `aria-*`) vão para o elemento raiz.
+ * @property {string} as - Elemento HTML: 'div' (padrão) | 'span' | 'ul' | 'ol' | 'li' | 'section' | 'nav' | 'header' | 'footer' | 'form'
+ * @property {boolean} grow - Como item de Stack/Box flex: cresce para ocupar o espaço livre
+ * @property {string} shrink - Como item flex: '0' não encolhe, '1' encolhe
+ * @property {string} basis - Como item flex: tamanho base ('auto', '0', '25', '33', '50', '66', '75', '100'; os números são %)
+ * @property {string} minWidth - '0' (padrão do Box) deixa o conteúdo longo encolher; 'auto' devolve o mínimo do conteúdo
+ * @property {string} overflow - Overflow nos dois eixos
+ * @property {string} overflowX - Overflow horizontal
+ * @property {string} overflowY - Overflow vertical
+ * @property {boolean} fullHeight - Ocupa 100% da altura do pai
+ * @property {function} onSubmit - Só com as="form": callback do envio
+ * @property {string} direction - Liga o layout flex: 'vertical' | 'horizontal'
+ * @property {string} gap - Liga o layout flex: espaço entre os filhos, na escala do DS
+ * @property {string} align - Liga o layout flex: alinhamento no eixo transversal
+ * @property {string} justify - Liga o layout flex: distribuição no eixo principal
+ * @property {boolean} wrap - Liga o layout flex: permite quebrar em várias linhas
  * @property {string} padding - Padding em todos os lados, na escala do DS
  * @property {string} paddingX - Padding horizontal (sobrescreve padding)
  * @property {string} paddingY - Padding vertical (sobrescreve padding)
@@ -16,11 +59,25 @@ export type BoxSpacing = "none" | "quarck" | "nano" | "micro" | "mini" | "xxxs"
  * @property {string} shadow - Elevação
  * @property {boolean} fullWidth - Ocupa 100% da largura disponível
  * @property {string} className - Classes CSS adicionais
- * @quandoUsar Agrupar conteúdo numa superfície com respiro e fundo: painel de filtros, bloco de resumo, área destacada dentro de uma tela.
- * @quandoNaoUsar Para um item de listagem com título, ações e elevação própria — use `Card`, que já tem essa anatomia. Para só distribuir filhos no eixo sem desenhar nada, use `Stack`.
+ * @quandoUsar Agrupar conteúdo numa superfície com respiro e fundo: painel de filtros, bloco de resumo, área destacada dentro de uma tela. Uma linha de resultado ou um cartão simples cujo conteúdo precisa alinhar em linha (`direction="horizontal"`, `align="center"`, `gap="xxxs"`) com borda, fundo e padding.
+ * @quandoNaoUsar Para um item de listagem com título, ações e elevação própria — use `Card`, que já tem essa anatomia. Para uma linha de lista clicável (hover, foco, selecionado), use `ListItem`. Para só distribuir filhos no eixo sem desenhar nada (sem fundo, borda nem padding), use `Stack`.
  */
 /** Degraus da escala oficial de espaçamento do 1DS. */
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
 export interface BoxProps {
+    /** Elemento HTML renderizado. @default 'div' */
+    as?: BoxTag;
+    /** Liga o layout flex. Eixo do empilhamento. @default 'vertical' (quando o flex está ligado) */
+    direction?: "vertical" | "horizontal";
+    /** Liga o layout flex. Espaço entre os filhos, na escala oficial (`none` = 0). Sem valor, não há espaço. */
+    gap?: BoxSpacing;
+    /** Liga o layout flex. Alinhamento no eixo transversal. */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Liga o layout flex. Distribuição no eixo principal. */
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    /** Liga o layout flex. Permite quebrar em várias linhas. */
+    wrap?: boolean;
     /** Padding em todos os lados. @default 'none' */
     padding?: BoxSpacing;
     /** Padding horizontal. Sobrescreve `padding` no eixo X. */
@@ -37,8 +94,31 @@ export interface BoxProps {
     shadow?: "none" | "level1" | "level2" | "level3";
     /** Ocupa 100% da largura disponível. */
     fullWidth?: boolean;
+    /** Ocupa 100% da altura do pai. */
+    fullHeight?: boolean;
+    /** Como item de Stack/Box flex: cresce para ocupar o espaço livre. */
+    grow?: boolean;
+    /** Como item flex: `"0"` não encolhe; `"1"` encolhe. */
+    shrink?: "0" | "1";
+    /** Como item flex: tamanho base. Os números são porcentagem do pai. */
+    basis?: "auto" | "0" | "25" | "33" | "50" | "66" | "75" | "100";
+    /** `"0"` (já é o padrão do Box) deixa o conteúdo encolher; `"auto"` volta ao mínimo do conteúdo. */
+    minWidth?: "0" | "auto";
+    /** Overflow nos dois eixos. */
+    overflow?: BoxOverflow;
+    /** Overflow horizontal (vence `overflow` no eixo X). */
+    overflowX?: BoxOverflow;
+    /** Overflow vertical (vence `overflow` no eixo Y). */
+    overflowY?: BoxOverflow;
+    /** Só com `as="form"`: chamado no envio do formulário. */
+    onSubmit?: (event: any) => void;
     /** Classes CSS adicionais. */
     className?: string;
+    /** ID HTML do elemento raiz. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento raiz (style, data-*, aria-*…). */
+    style?: any;
+    [key: string]: any;
     /** Conteúdo da caixa. */
     children?: any;
 }