@1doc/1ds-react 2.7.2 → 2.9.0

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);
@@ -187,7 +203,7 @@
 }
 
 .umds-attachment-card__campo-valor {
-    margin: 2px 0 0; /* candidato a novo token: respiro rótulo→valor */
+    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);
     line-height: 1.4;

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,14 +40,38 @@ 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;
     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 */
+    statusContextLabel?: (subject: string) => string;
+    /** Texto lido depois do asterisco de obrigatório. Troque para traduzir. @default '(obrigatório)' */
+    requiredLabel?: string;
+    /** Nome acessível do botão de copiar um campo do painel. Recebe o rótulo do campo. Troque para traduzir. @default (field) => 'Copiar ' + field */
+    copyLabel?: (field: string) => string;
+    /** Nome acessível do botão e anúncio depois da cópia. Recebe o rótulo do campo. Troque para traduzir. @default (field) => field + ' copiado' */
+    copiedLabel?: (field: string) => string;
+    /** Anúncio quando a cópia falha. Recebe o rótulo do campo. Troque para traduzir. @default (field) => 'Não foi possível copiar ' + field */
+    copyErrorLabel?: (field: string) => string;
     className?: string;
     id?: string;
 }

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`;
@@ -62,7 +85,18 @@ function AttachmentCard(props) {
         return aberto ? painelId() : undefined;
     }
     function seloComplemento() {
-        return `: conferência de ${props.documentType || props.fileName}`;
+        const assunto = props.documentType || props.fileName;
+        if (props.statusContextLabel)
+            return ": " + props.statusContextLabel(assunto);
+        return `: conferência de ${assunto}`;
+    }
+    function textoCopiado(rotulo) {
+        return props.copiedLabel ? props.copiedLabel(rotulo) : `${rotulo} copiado`;
+    }
+    function textoFalhaCopia(rotulo) {
+        return props.copyErrorLabel
+            ? props.copyErrorLabel(rotulo)
+            : `Não foi possível copiar ${rotulo}`;
     }
     function detalheTitulo() {
         return (props.statusDetails && props.statusDetails.title) || props.fileName;
@@ -74,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() {
@@ -137,8 +173,36 @@ function AttachmentCard(props) {
             setPosX(Math.round(pos.x * dpr) / dpr);
             setPosY(Math.round(pos.y * dpr) / dpr);
             setPosicionado(true);
+            // No Vue o `onUpdate` NAO roda aqui: `posicionado` so e lido pelo
+            // estilo do flutuante, que mora no slot do Portal. Quem re-renderiza
+            // e o Portal (filho), e o `updated` do cartao nunca dispara, entao o
+            // foco nao entrava no painel. Um quadro depois o estilo ja foi
+            // aplicado nos dois frameworks; no React o `onUpdate` costuma chegar
+            // antes, e aqui vira no-op (`focarPainel` ja voltou a false).
+            if (focarPainel) {
+                if (typeof requestAnimationFrame !== "undefined") {
+                    requestAnimationFrame(() => focarPainelSePreciso());
+                }
+                else {
+                    setTimeout(() => focarPainelSePreciso(), 0);
+                }
+            }
         });
     }
+    function focarPainelSePreciso() {
+        if (!focarPainel || !aberto || !posicionado)
+            return;
+        if (!painelRef.current)
+            return;
+        const primeiro = painelRef.current.querySelector(FOCAVEIS);
+        if (primeiro) {
+            primeiro.focus();
+        }
+        else {
+            painelRef.current.focus();
+        }
+        setFocarPainel(false);
+    }
     function ligarObservadores() {
         if (!autoUpdateRef.current && seloRef.current && flutuanteRef.current) {
             autoUpdateRef.current = autoUpdate(seloRef.current, flutuanteRef.current, () => posicionar());
@@ -244,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();
@@ -266,12 +342,12 @@ function AttachmentCard(props) {
     }
     function copiarCampo(campo) {
         if (typeof navigator === "undefined" || !navigator.clipboard) {
-            setAnuncio(`Não foi possível copiar ${campo.label}`);
+            setAnuncio(textoFalhaCopia(campo.label));
             return;
         }
         navigator.clipboard.writeText(campo.value).then(() => {
             setCopiado(campo.label);
-            setAnuncio(`${campo.label} copiado`);
+            setAnuncio(textoCopiado(campo.label));
             setTimeout(() => {
                 if (copiado === campo.label)
                     setCopiado("");
@@ -280,12 +356,14 @@ function AttachmentCard(props) {
                 props.onCopyField(campo);
             }
         }, () => {
-            setAnuncio(`Não foi possível copiar ${campo.label}`);
+            setAnuncio(textoFalhaCopia(campo.label));
         });
     }
     function rotuloCopiar(campo) {
-        return copiado === campo.label
-            ? `${campo.label} copiado`
+        if (copiado === campo.label)
+            return textoCopiado(campo.label);
+        return props.copyLabel
+            ? props.copyLabel(campo.label)
             : `Copiar ${campo.label}`;
     }
     function iconeCopiar(campo) {
@@ -300,17 +378,7 @@ function AttachmentCard(props) {
         if (aberto) {
             ligarObservadores();
         }
-        // Espera `posicionado`: focar elemento com visibility:hidden é no-op.
-        if (focarPainel && aberto && posicionado && painelRef.current) {
-            const primeiro = painelRef.current.querySelector(FOCAVEIS);
-            if (primeiro) {
-                primeiro.focus();
-            }
-            else {
-                painelRef.current.focus();
-            }
-            setFocarPainel(false);
-        }
+        focarPainelSePreciso();
     });
     useEffect(() => {
         return () => {
@@ -318,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: "(obrigat\u00F3rio)" })] })) : 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.
      */
@@ -54,6 +71,16 @@ export interface AvatarGroupProps {
      * Recebe o item correspondente.
      */
     onError?: (item: AvatarGroupItem) => void;
+    /**
+     * Nome acessível do avatar de excedente. Recebe a quantidade escondida.
+     * Troque para traduzir. @default (count) => 'Mais ' + count + ' avatares'
+     */
+    overflowAriaLabel?: (count: number) => string;
+    /**
+     * Dica (title) do avatar de excedente. Recebe a quantidade escondida.
+     * Troque para traduzir. @default (count) => count + ' outros'
+     */
+    overflowTitle?: (count: number) => string;
 }
 declare function AvatarGroup(props: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
 export default AvatarGroup;

package/dist/components/Avatar/AvatarGroup.js

@@ -10,12 +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(hiddenCount())
+            : "Mais " + hiddenCount() + " avatares";
+    }
+    function overflowTitleText() {
+        return props.overflowTitle
+            ? 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";
@@ -38,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: overflowCount() + " outros", ariaLabel: "Mais " + overflowCount() + " avatares", 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 {
@@ -41,7 +42,13 @@
     display: block;
 }
 
-.umds-badge__icon svg {
+/* Escopado em `.umds-badge` de propósito: `.umds-badge__icon svg` tinha a MESMA
+   especificidade de `.umds-icon svg` (0,1,1), e quem vencia era a ordem de
+   carga do CSS. No build do Storybook React o CSS do Icon chega depois do do
+   Badge, e o SVG voltava a 1em com `vertical-align: -0.125em` (ícone de 12px
+   deslocado). Com o bloco na frente (0,2,1) a regra vence em qualquer ordem
+   de carga, sem `!important`. */
+.umds-badge .umds-badge__icon svg {
     width: 100%;
     height: 100%;
     display: block;
@@ -53,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 */
@@ -110,6 +127,11 @@
     height: 11px;
 }
 
+.umds-badge--2xs .umds-badge__icon {
+    width: 8px;
+    height: 8px;
+}
+
 /* ─────────────── SOLID ─────────────── */
 
 .umds-badge--solid.umds-badge--neutral {
@@ -196,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/BottomSheet/BottomSheet.css

@@ -22,6 +22,7 @@
 .umds-bottomsheet__backdrop {
   position: absolute;
   inset: 0;
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token) */
   background-color: rgba(0, 0, 0, 0.4); /* overlay escuro — sem token 1DS: candidato a novo token (igual ao Modal) */
   backdrop-filter: blur(4px);
   z-index: 1;

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -34,8 +34,16 @@ export interface BottomSheetProps {
     closable?: any;
     closeOnEsc?: any;
     closeOnBackdrop?: any;
+    /**
+     * Nome acessível do painel quando não há `title` (vira `aria-label`). Sem
+     * título, sem esta prop e sem `ariaLabelledby`, o componente usa "Painel"
+     * como último recurso, para o `role="dialog"` nunca sair anônimo.
+     */
     ariaLabel?: string;
+    /** Id de um elemento externo que nomeia o painel. Vence o `title`. */
     ariaLabelledby?: string;
+    /** Nome acessível da alça de arrastar (slider), que só existe com mais de um encaixe. Troque para traduzir. @default 'Altura do painel' */
+    grabberLabel?: string;
     className?: string;
     id?: string;
     children?: any;

package/dist/components/BottomSheet/BottomSheet.js

@@ -20,6 +20,18 @@ function BottomSheet(props) {
     function labelId() {
         return uid + "-titulo";
     }
+    function labelledByText() {
+        if (props.ariaLabelledby)
+            return props.ariaLabelledby;
+        return props.title ? labelId() : undefined;
+    }
+    function nomeAcessivel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        if (props.ariaLabelledby || props.title)
+            return undefined;
+        return "Painel";
+    }
     function alturaDoPainel() {
         const pontos = props.snapPoints || [];
         if (!pontos.length)
@@ -31,7 +43,7 @@ function BottomSheet(props) {
         return !!props.snapPoints && props.snapPoints.length > 1;
     }
     function grabberAriaLabel() {
-        return "Altura do painel";
+        return props.grabberLabel || "Altura do painel";
     }
     function handleClose(event) {
         if (props.onClose)
@@ -158,7 +170,7 @@ function BottomSheet(props) {
             removeOverlay(uid);
         };
     }, []);
-    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsxs("div", { id: props.id, className: rootClasses(), children: [_jsx("div", { className: "umds-bottomsheet__backdrop", onClick: (event) => handleBackdropClick(event) }), _jsxs("div", { role: "dialog", "aria-modal": "true", className: "umds-bottomsheet", ref: sheetRef, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby || (props.title ? labelId() : undefined), tabIndex: -1, style: {
+    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsxs("div", { id: props.id, className: rootClasses(), children: [_jsx("div", { className: "umds-bottomsheet__backdrop", onClick: (event) => handleBackdropClick(event) }), _jsxs("div", { role: "dialog", "aria-modal": "true", className: "umds-bottomsheet", ref: sheetRef, "aria-label": nomeAcessivel(), "aria-labelledby": labelledByText(), tabIndex: -1, style: {
                             height: alturaDoPainel(),
                         }, onKeyDown: (event) => handleTrapKeydown(event), children: [_jsxs("div", { className: "umds-bottomsheet__top", children: [props.grabber !== false ? (_jsx("div", { className: "umds-bottomsheet__grabber", role: temMaisDeUmEncaixe() ? "slider" : undefined, tabIndex: temMaisDeUmEncaixe() ? 0 : undefined, "aria-label": temMaisDeUmEncaixe() ? grabberAriaLabel() : undefined, "aria-valuenow": temMaisDeUmEncaixe() ? snapAtual : undefined, "aria-valuemin": temMaisDeUmEncaixe() ? 0 : undefined, "aria-valuemax": temMaisDeUmEncaixe()
                                             ? (props.snapPoints || []).length - 1