@1doc/1ds-react 2.8.0 → 2.10.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.css

@@ -99,6 +99,19 @@
   opacity: 0.6; /* opacidade do protótipo sem token 1DS */
 }
 
+/* ── Título neutro (titleVariant="neutral") ──
+   14px na cor do texto, em peso médio, também no hover e no aberto: o título não
+   pega a cor de ação. O chevron aberto continua azul (é o sinal do estado). */
+.umds-accordion--title-neutral .umds-accordion__title {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  font-weight: var(--umds-primitive-font-weight-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-accordion--title-neutral .umds-accordion__trigger:disabled .umds-accordion__title {
+  color: inherit;
+}
+
 /* ── Chevron ──
    Migrado de <svg> inline para o componente Icon (chevron-down).
    O wrapper .umds-accordion__chevron recebe cor (via currentColor →

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

@@ -2,16 +2,21 @@ 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} titleVariant - Título dos itens: 'default' | 'neutral'. O `neutral` é o título de texto, 14px na cor do texto, sem cor de ação (como um `Button text` neutro), para o accordion do CrisDoc.
  * @property {string} className - Classes CSS adicionais
  * @quandoUsar Conteúdo que fica RECOLHIDO até o usuário querer: FAQ, seções opcionais de formulário, detalhes secundários. Vários podem abrir juntos com `multiple`.
  * @quandoNaoUsar Para alternar entre visões equivalentes sempre disponíveis — use `Tabs`. Se o conteúdo é essencial, não esconda atrás de acordeão.
@@ -20,6 +25,8 @@ export interface AccordionProps {
     items: AccordionItemData[];
     multiple?: boolean;
     variant?: "default" | "bordered" | "separated";
+    /** Título dos itens. `neutral`: 14px na cor do texto, peso médio. @default 'default' */
+    titleVariant?: "default" | "neutral";
     className?: string;
 }
 declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -35,6 +35,7 @@ function Accordion(props) {
         return [
             "umds-accordion",
             `umds-accordion--${props.variant || "default"}`,
+            props.titleVariant === "neutral" ? "umds-accordion--title-neutral" : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/AppSubheader/AppSubheader.css

@@ -21,14 +21,23 @@
 }
 
 /* O contexto cede espaço e rola sozinho: uma trilha longa não pode empurrar
-   a busca e as ações para fora da tela. */
+   a busca e as ações para fora da tela.
+   Só rola na HORIZONTAL, e só quando a trilha estoura. `overflow-x: auto` sozinho
+   faz o `overflow-y` computar para `auto` também, e o `line-height` do item do
+   Breadcrumb (12px, numa linha de 12px) deixa o conteúdo 2px acima da caixa de 12px
+   (medido: scrollHeight 14, clientHeight 12): com a trilha só na página atual (sem
+   link para focar) o axe acusa `scrollable-region-focusable`. Por isso a região
+   ocupa a altura da barra (`align-self: stretch`, o conteúdo segue centralizado) e o
+   eixo vertical é cortado: não há o que rolar na vertical. */
 .umds-app-subheader__contexto {
   flex: 1;
+  align-self: stretch;
   min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--umds-primitive-spacing-nano);
   overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: none;
 }
 

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);
@@ -167,18 +183,10 @@
 }
 
 .umds-attachment-card__campo {
-    display: flex;
-    align-items: center;
-    gap: var(--umds-primitive-spacing-nano);
     padding: var(--umds-primitive-spacing-nano) 0;
     border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
 }
 
-.umds-attachment-card__campo-texto {
-    flex: 1;
-    min-width: 0;
-}
-
 .umds-attachment-card__campo-rotulo {
     color: var(--umds-semantic-color-neutral-dark-down);
     font-size: var(--umds-primitive-font-size-xxxs);
@@ -186,7 +194,12 @@
     text-transform: uppercase;
 }
 
+/* O valor e o botão de copiar na mesma linha: o botão mora dentro do <dd> (o <dl> só aceita
+   <dt> e <dd> dentro do <div>). */
 .umds-attachment-card__campo-valor {
+    display: flex;
+    align-items: center;
+    gap: var(--umds-primitive-spacing-nano);
     margin: var(--umds-primitive-spacing-micro) 0 0; /* 2px: respiro rótulo→valor */
     font-size: var(--umds-primitive-font-size-xxs);
     font-weight: var(--umds-primitive-font-weight-bold);
@@ -194,6 +207,11 @@
     overflow-wrap: anywhere;
 }
 
+.umds-attachment-card__campo-valor-texto {
+    flex: 1;
+    min-width: 0;
+}
+
 /* Alvo de toque WCAG 2.5.8: 32×32. */
 .umds-attachment-card__copiar {
     display: inline-flex;

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

@@ -6,12 +6,16 @@ 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 {string} size - Tamanho do cartão: 'md' (padrão) | 'sm'. O `sm` é o compacto do CrisDoc: ícone do preview de 40px (no `md`, 48px) e ícone do rodapé de 12px (no `md`, 16px). A largura e os selos não mudam.
  * @property {Function} onOpen - Abre o anexo. Com ele o cartão inteiro vira alvo de clique, com um único ponto de foco.
  * @property {string} openAriaLabel - Nome acessível da ação de abrir. Padrão: "Abrir <tipo>: <arquivo>".
  * @property {string} className - Classes CSS adicionais
@@ -37,12 +41,28 @@ 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;
+    /** Tamanho do cartão. `sm`: ícone do preview de 40px e ícone do rodapé de 12px. @default 'md' */
+    size?: "md" | "sm";
     onOpen?: (event?: any) => void;
     openAriaLabel?: string;
     /** Complemento lido depois do selo, para dizer de qual documento ele é. Recebe o tipo de documento (ou o nome do arquivo). Troque para traduzir. @default (subject) => 'conferência de ' + subject */

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"])';
@@ -29,6 +29,7 @@ function AttachmentCard(props) {
         return [
             "umds-attachment-card",
             props.onOpen ? "umds-attachment-card--interativo" : "",
+            props.size === "sm" ? "umds-attachment-card--sm" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -47,7 +48,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 +109,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() {
@@ -120,6 +146,12 @@ function AttachmentCard(props) {
             return faFileExcel;
         return faFile;
     }
+    function tamanhoIconeCentral() {
+        return props.size === "sm" ? "40px" : "48px";
+    }
+    function tamanhoIconeRodape() {
+        return props.size === "sm" ? "12px" : undefined;
+    }
     function iconeCentral() {
         return props.icon || faFileLines;
     }
@@ -283,6 +315,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 +393,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: [_jsx("dt", { className: "umds-attachment-card__campo-rotulo", children: campo.label }), _jsxs("dd", { className: "umds-attachment-card__campo-valor", children: [_jsx("span", { className: "umds-attachment-card__campo-valor-texto", 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, { variant: "inherit", icon: iconeCentral(), customSize: tamanhoIconeCentral() }) }), _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(), customSize: tamanhoIconeRodape() }) }), 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), attachedSide left | right
    ============================================ */
 
 .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,52 @@
     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);
+}
+
+/* Canto direito (attachedSide="right"): o rótulo cola no canto superior direito. */
+.umds-badge--attached.umds-badge--attached-right {
+    left: auto;
+    right: 0;
+}
+
+/* Neutro colado: cinza claro com texto escuro (o "Tarefa manual" do CrisDoc).
+   O `solid` neutro é cinza escuro com texto branco, pesado demais para um rótulo de card. */
+.umds-badge--attached.umds-badge--neutral.umds-badge--solid {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}

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

@@ -7,15 +7,34 @@ 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 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). O canto é o esquerdo, ou o
+     * direito com `attachedSide="right"`. Com `variant="neutral"` e `appearance="solid"` o
+     * rótulo colado é o cinza claro com texto escuro (o "Tarefa manual" do CrisDoc), e não o
+     * cinza escuro do `solid`, pesado demais para um rótulo de card.
+     * @default false
+     */
+    attached?: boolean;
+    /**
+     * Em que canto do card o `attached` cola: `left` (padrão) ou `right`.
+     * Só vale com `attached`.
+     * @default 'left'
+     */
+    attachedSide?: "left" | "right";
     /**
      * Estilo visual do badge.
      * @default 'soft'

package/dist/components/Badge/Badge.js

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