@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/AIContent/AIContent.d.ts

@@ -29,6 +29,16 @@ export interface AIContentProps {
     sources?: string[];
     notIncluded?: string;
     hideLabel?: any;
+    /** Texto do selo interno, repassado ao AILabel. Troque para traduzir. @default 'IA' */
+    label?: string;
+    /** Descrição acessível do selo interno, repassada ao AILabel. Troque para traduzir. @default 'Conteúdo gerado por IA' */
+    ariaLabel?: string;
+    /** Título do painel de explicação, repassado ao AILabel. Troque para traduzir. @default 'Como isto foi gerado' */
+    explanationTitle?: string;
+    /** Título da lista de fontes no painel, repassado ao AILabel. Troque para traduzir. @default 'Baseado em' */
+    sourcesLabel?: string;
+    /** Título do bloco do que ficou de fora, repassado ao AILabel. Troque para traduzir. @default 'Não considerado' */
+    notIncludedLabel?: string;
     className?: string;
     id?: string;
     children?: any;

package/dist/components/AIContent/AIContent.js

@@ -36,6 +36,6 @@ function AIContent(props) {
             props.onRevert(event);
         }
     }
-    return (_jsxs("div", { className: classes(), id: props.id, children: [mostraSelo() ? (_jsx("div", { className: "umds-aicontent__cabecalho", children: _jsx(AILabel, { size: "sm", explanation: props.explanation, sources: props.sources, notIncluded: props.notIncluded }) })) : null, _jsx("div", { className: "umds-aicontent__corpo", children: _jsx(_Fragment, { children: props.children }) }), foiEditado() ? (_jsxs("div", { className: "umds-aicontent__rodape", children: [_jsx("span", { className: "umds-aicontent__estado", children: props.editedLabel || "Editado por você" }), podeReverter() ? (_jsxs("button", { type: "button", className: "umds-aicontent__reverter", onClick: (event) => handleRevert(event), children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: faRotateLeft }), _jsx("span", { children: props.revertLabel || "Reverter para a sugestão da IA" })] })) : null, estaTravado() ? (_jsx("span", { className: "umds-aicontent__travado", children: props.lockedLabel || "Confirmado — não é mais reversível" })) : null] })) : null] }));
+    return (_jsxs("div", { className: classes(), id: props.id, children: [mostraSelo() ? (_jsx("div", { className: "umds-aicontent__cabecalho", children: _jsx(AILabel, { size: "sm", label: props.label, ariaLabel: props.ariaLabel, explanationTitle: props.explanationTitle, sourcesLabel: props.sourcesLabel, notIncludedLabel: props.notIncludedLabel, explanation: props.explanation, sources: props.sources, notIncluded: props.notIncluded }) })) : null, _jsx("div", { className: "umds-aicontent__corpo", children: _jsx(_Fragment, { children: props.children }) }), foiEditado() ? (_jsxs("div", { className: "umds-aicontent__rodape", children: [_jsx("span", { className: "umds-aicontent__estado", children: props.editedLabel || "Editado por você" }), podeReverter() ? (_jsxs("button", { type: "button", className: "umds-aicontent__reverter", onClick: (event) => handleRevert(event), children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: faRotateLeft }), _jsx("span", { children: props.revertLabel || "Reverter para a sugestão da IA" })] })) : null, estaTravado() ? (_jsx("span", { className: "umds-aicontent__travado", children: props.lockedLabel || "Confirmado — não é mais reversível" })) : null] })) : null] }));
 }
 export default AIContent;

package/dist/components/AILabel/AILabel.d.ts

@@ -34,6 +34,10 @@ export interface AILabelProps {
     className?: string;
     id?: string;
     ariaLabel?: string;
+    /** Título da lista de fontes no painel. Troque para traduzir. @default 'Baseado em' */
+    sourcesLabel?: string;
+    /** Título do bloco do que ficou de fora, no painel. Troque para traduzir. @default 'Não considerado' */
+    notIncludedLabel?: string;
     children?: any;
 }
 declare function AILabel(props: AILabelProps): import("react/jsx-runtime").JSX.Element;

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;
@@ -54,6 +54,6 @@ function AILabel(props) {
             props.onFix(event);
         }
     }
-    return (_jsxs("span", { className: classes(), id: baseId(), children: [_jsxs("button", { type: "button", className: "umds-ailabel__selo", "aria-label": props.ariaLabel || "Conteúdo gerado por IA", "aria-expanded": temExplicacao() ? isOpen() : undefined, "aria-controls": temExplicacao() ? painelId() : undefined, disabled: !temExplicacao(), onClick: (event) => alternar(event), children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: faWandMagicSparkles }), _jsx("span", { className: "umds-ailabel__texto", children: props.label || "IA" })] }), temExplicacao() && isOpen() ? (_jsxs("div", { className: "umds-ailabel__painel", role: "region", id: painelId(), children: [_jsx("p", { className: "umds-ailabel__painel-titulo", children: props.explanationTitle || "Como isto foi gerado" }), props.explanation ? (_jsx("div", { className: "umds-ailabel__painel-texto", children: props.explanation })) : null, props.sources && props.sources.length > 0 ? (_jsxs("div", { className: "umds-ailabel__bloco", children: [_jsx("p", { className: "umds-ailabel__rotulo", children: "Baseado em" }), _jsx("ul", { className: "umds-ailabel__lista", children: listaFontes()?.map((fonte) => (_jsx("li", { children: fonte }, fonte))) })] })) : null, props.notIncluded ? (_jsxs("div", { className: "umds-ailabel__bloco", children: [_jsx("p", { className: "umds-ailabel__rotulo", children: "N\u00E3o considerado" }), _jsx("p", { className: "umds-ailabel__painel-texto", children: props.notIncluded })] })) : null, _jsx(_Fragment, { children: props.children }), props.onFix ? (_jsx("button", { type: "button", className: "umds-ailabel__acao", onClick: (event) => handleFix(event), children: props.fixLabel || "Corrigir manualmente" })) : null] })) : null] }));
+    return (_jsxs("span", { className: classes(), id: baseId(), children: [_jsxs("button", { type: "button", className: "umds-ailabel__selo", "aria-label": props.ariaLabel || "Conteúdo gerado por IA", "aria-expanded": temExplicacao() ? isOpen() : undefined, "aria-controls": temExplicacao() ? painelId() : undefined, disabled: !temExplicacao(), onClick: (event) => alternar(event), children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: faWandMagicSparkles }), _jsx("span", { className: "umds-ailabel__texto", children: props.label || "IA" })] }), temExplicacao() && isOpen() ? (_jsxs("div", { className: "umds-ailabel__painel", role: "region", id: painelId(), children: [_jsx("p", { className: "umds-ailabel__painel-titulo", children: props.explanationTitle || "Como isto foi gerado" }), props.explanation ? (_jsx("div", { className: "umds-ailabel__painel-texto", children: props.explanation })) : null, props.sources && props.sources.length > 0 ? (_jsxs("div", { className: "umds-ailabel__bloco", children: [_jsx("p", { className: "umds-ailabel__rotulo", children: props.sourcesLabel || "Baseado em" }), _jsx("ul", { className: "umds-ailabel__lista", children: listaFontes()?.map((fonte) => (_jsx("li", { children: fonte }, fonte))) })] })) : null, props.notIncluded ? (_jsxs("div", { className: "umds-ailabel__bloco", children: [_jsx("p", { className: "umds-ailabel__rotulo", children: props.notIncludedLabel || "Não considerado" }), _jsx("p", { className: "umds-ailabel__painel-texto", children: props.notIncluded })] })) : null, _jsx(_Fragment, { children: props.children }), props.onFix ? (_jsx("button", { type: "button", className: "umds-ailabel__acao", onClick: (event) => handleFix(event), children: props.fixLabel || "Corrigir manualmente" })) : null] })) : null] }));
 }
 export default AILabel;

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/Alert/Alert.css

@@ -133,6 +133,7 @@
 
 .umds-alert__close:hover {
   opacity: 1;
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de realce translúcido escuro (candidato a novo token) */
   background-color: rgba(0, 0, 0, 0.08); /* realce suave de hover (sem token 1DS) */
 }
 
@@ -212,6 +213,7 @@
 
 /* Overrides for close icon on SOLID */
 .umds-alert--solid .umds-alert__close:hover {
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de realce translúcido claro (candidato a novo token); currentColor mudaria o hover nos temas escuros, ver bloco de alto contraste abaixo */
   background-color: rgba(255, 255, 255, 0.15); /* realce de hover sobre fundo escuro (sem token 1DS) */
 }
 

package/dist/components/Alert/Alert.d.ts

@@ -17,7 +17,9 @@ export interface AlertProps {
      */
     description?: string;
     /**
-     * Variante semântica (cor/finalidade) do alerta.
+     * Variante semântica (cor/finalidade) do alerta. Também define como o
+     * leitor de tela anuncia: `negative` usa `role="alert"` (assertivo,
+     * interrompe a leitura); as demais usam `role="status"` (educado).
      * @default 'neutral'
      */
     variant?: "neutral" | "positive" | "info" | "negative";

package/dist/components/Alert/Alert.js

@@ -22,6 +22,12 @@ function Alert(props) {
             .filter(Boolean)
             .join(" ");
     }
+    function liveRole() {
+        return props.variant === "negative" ? "alert" : "status";
+    }
+    function ariaLive() {
+        return props.variant === "negative" ? "assertive" : "polite";
+    }
     function iconName() {
         const currentVariant = props.variant || "neutral";
         if (currentVariant === "positive")
@@ -64,6 +70,6 @@ function Alert(props) {
             }
         };
     }, []);
-    return (_jsx(_Fragment, { children: visible ? (_jsx(_Fragment, { children: _jsxs("div", { role: "alert", id: props.id, className: classes(), children: [_jsx("div", { className: "umds-alert__icon-wrapper", children: _jsx(Icon, { variant: "inherit", size: "md", icon: iconName() }) }), _jsxs("div", { className: "umds-alert__content", children: [props.title ? (_jsx("div", { className: "umds-alert__title-container", children: _jsx(Text, { variant: "body2", as: "p", className: "umds-alert__title-text", children: props.title }) })) : null, props.description ? (_jsx(Text, { variant: "caption", as: "p", className: "umds-alert__description-text", children: props.description })) : null, props.content || props.children ? (_jsxs("div", { className: "umds-alert__actions", children: [props.content ? (_jsx(_Fragment, { children: props.content })) : null, !props.content ? _jsx(_Fragment, { children: props.children }) : null] })) : null] }), props.dismissable ? (_jsx("button", { type: "button", className: "umds-alert__close", onClick: (event) => handleClose(event), "aria-label": props.dismissLabel || "Dispensar alerta", children: _jsx(Icon, { variant: "inherit", size: "md", icon: faXmark }) })) : null] }) })) : null }));
+    return (_jsx(_Fragment, { children: visible ? (_jsx(_Fragment, { children: _jsxs("div", { role: liveRole(), "aria-live": ariaLive(), id: props.id, className: classes(), children: [_jsx("div", { className: "umds-alert__icon-wrapper", children: _jsx(Icon, { variant: "inherit", size: "md", icon: iconName() }) }), _jsxs("div", { className: "umds-alert__content", children: [props.title ? (_jsx("div", { className: "umds-alert__title-container", children: _jsx(Text, { variant: "body2", as: "p", className: "umds-alert__title-text", children: props.title }) })) : null, props.description ? (_jsx(Text, { variant: "caption", as: "p", className: "umds-alert__description-text", children: props.description })) : null, props.content || props.children ? (_jsxs("div", { className: "umds-alert__actions", children: [props.content ? (_jsx(_Fragment, { children: props.content })) : null, !props.content ? _jsx(_Fragment, { children: props.children }) : null] })) : null] }), props.dismissable ? (_jsx("button", { type: "button", className: "umds-alert__close", onClick: (event) => handleClose(event), "aria-label": props.dismissLabel || "Dispensar alerta", children: _jsx(Icon, { variant: "inherit", size: "md", icon: faXmark }) })) : null] }) })) : null }));
 }
 export default Alert;

package/dist/components/AppHeader/AppHeader.css

@@ -39,7 +39,7 @@
 .umds-app-header__direita {
   display: flex;
   align-items: center;
-  gap: 20px; /* protótipo 20px — entre os degraus 16 e 24 da escala */
+  gap: var(--umds-primitive-spacing-xxxs); /* 16px (protótipo 20px) */
 }
 
 /* ── Largura estreita: a barra nunca passa do contêiner ─────────────────────
@@ -48,8 +48,9 @@
    (`min-width: 0`) mas nada DENTRO delas encolhia — itens `nowrap`, busca fixa
    com `flex-shrink: 0` — e o conteúdo vazava para fora da barra, criando
    rolagem horizontal na página. Agora a ordem de sacrifício é:
-     1. a navegação é recortada (a direita só perde espaço quando não há mais
-        o que tirar da esquerda: a esquerda tem base 0 e só cresce);
+     1. os itens de navegação do fim vão para o menu "Mais" (a direita só
+        perde espaço quando não há mais o que tirar da esquerda: a esquerda
+        tem base 0 e só cresce);
      2. a busca encolhe até 96px;
      3. o nome do usuário vira reticências.
    Marca, ações e avatar nunca encolhem. Com espaço sobrando, nada disso age e
@@ -90,12 +91,84 @@
   overflow-clip-margin: 4px; /* anel de foco: 2px de outline + 2px de offset */
 }
 
+/* ── Itens e menu "Mais" ─────────────────────────────────────────────────────
+   Recortar o último item deixava um pedaço dele clicável com ~13px de largura
+   (WCAG 2.5.8, `target-size`). Agora os itens que não cabem saem da barra e
+   vão para o menu "Mais" — quem decide quais é a medição do componente, que
+   marca cada excedente com `data-umds-excedente`. O recorte da `<nav>` acima
+   fica só como rede de segurança (um item ativo sozinho mais largo que a
+   barra). Com espaço sobrando, o botão não aparece e o desenho é o de sempre. */
+.umds-app-header__itens {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-xxs); /* 24px, o mesmo da nav */
+  /* Do tamanho do conteúdo: o "Mais" vem logo depois do último item visível. */
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.umds-app-header__itens > [data-umds-excedente] {
+  display: none;
+}
+
+.umds-app-header__mais {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Sem excedentes: fora do fluxo e invisível (sai também da árvore de
+   acessibilidade e do Tab), mas com caixa, para a medição saber a largura. */
+.umds-app-header__mais--vazio {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* O gatilho tem o desenho do `AppNavItem`: é mais um item da navegação. */
+.umds-app-header__mais-gatilho {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano); /* 8px, como no AppNavItem (protótipo 6px) */
+  min-height: 24px; /* alvo mínimo do WCAG 2.5.8 */
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font-family: inherit;
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--umds-semantic-motion-duration-fast)
+    var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-app-header__mais-gatilho:hover,
+.umds-app-header__mais-gatilho[aria-expanded="true"] {
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-app-header__mais-gatilho:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: 2px;
+}
+
+.umds-app-header__mais-seta {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px; /* protótipo 10px, como as outras setas do cabeçalho */
+}
+
 /* ── Ação principal (o "+ Novo") ──────────────────────────────────────────── */
 .umds-app-header__acao-principal {
   background: var(--umds-semantic-color-primary-pure);
   color: var(--umds-semantic-color-neutral-light-pure);
   border: none;
-  border-radius: 6px; /* protótipo 6px — a escala do DS só tem 8 */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px — raio canônico (protótipo 6px) */
   padding: 0 var(--umds-primitive-spacing-xxxs); /* 16px */
   height: var(--umds-primitive-spacing-xs); /* 32px */
   font-size: 13px; /* protótipo 13px — entre os degraus 12 e 14 */
@@ -104,7 +177,7 @@
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  gap: 6px; /* protótipo 6px — entre 4 e 8 */
+  gap: var(--umds-primitive-spacing-nano); /* 8px, igual ao Button (protótipo 6px) */
   white-space: nowrap;
   transition: background var(--umds-semantic-motion-duration-fast)
     var(--umds-semantic-motion-easing-standard);
@@ -133,8 +206,8 @@
   max-width: 100%; /* encolhe com a busca quando falta espaço */
   height: var(--umds-semantic-field-height-sm); /* 32px */
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
-  border-radius: 4px; /* protótipo 4px — a escala do DS só tem 8 */
-  padding: 0 var(--umds-primitive-spacing-mini) 0 30px; /* protótipo 0 12px 0 30px */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px — raio canônico (protótipo 4px) */
+  padding: 0 var(--umds-primitive-spacing-mini) 0 var(--umds-primitive-spacing-xs); /* 0 12px 0 32px (protótipo 30px) */
   font-size: 13px; /* protótipo 13px */
   font-family: inherit;
   color: var(--umds-semantic-color-neutral-dark-pure);
@@ -188,7 +261,7 @@
   align-items: center;
   margin-left: var(--umds-primitive-spacing-nano); /* 8px */
   border-left: 1px solid var(--umds-semantic-color-neutral-light-medium);
-  padding-left: 20px; /* protótipo 20px */
+  padding-left: var(--umds-primitive-spacing-xxxs); /* 16px (protótipo 20px) */
   position: relative;
   min-width: 0;
 }
@@ -252,6 +325,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .umds-app-header__acao-principal,
+  .umds-app-header__mais-gatilho,
   .umds-app-header__busca-campo {
     transition: none;
   }

package/dist/components/AppHeader/AppHeader.d.ts

@@ -54,8 +54,19 @@ export interface AppHeaderProps {
     className?: string;
     /** Marca. O padrão é o `Logo` da 1Doc; passe outro conteúdo para substituir. */
     brand?: any;
-    /** Navegação principal — normalmente uma lista de `AppNavItem`. */
+    /**
+     * Navegação principal — normalmente uma lista de `AppNavItem`.
+     *
+     * Quando os itens não cabem na barra, os do fim saem dela e vão para o
+     * menu "Mais" (o item ativo, `aria-current="page"`, fica na barra sempre
+     * que couber sozinho). Escolher um item do menu aciona o próprio item
+     * (o `onClick` dele). Item que abre submenu próprio (`hasMenu`) deve vir
+     * no começo da lista: o submenu é ancorado no item, e dentro do "Mais"
+     * não haveria onde ancorá-lo.
+     */
     children?: any;
+    /** Rótulo do botão que reúne os itens de navegação que não cabem. @default "Mais" */
+    moreLabel?: string;
     /** Campo de busca próprio, no lugar do padrão. */
     search?: any;
     /** Ícones de ação: tema, idioma, notificações. Recebem espaçamento e cor da barra. */

package/dist/components/AppHeader/AppHeader.js

@@ -1,10 +1,152 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './AppHeader.css';
+import { useState, useRef, useEffect } from "react";
+/** Atributo que tira da barra um item que foi para o menu "Mais". Atributo, e
+ *  não classe: React e Vue reescrevem `class` do item a cada render dele, mas
+ *  não tocam num atributo que não declararam. */
 import { faChevronDown, faMagnifyingGlass, } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Logo from "../Logo/Logo";
+import Dropdown from "../Dropdown/Dropdown";
+const ATRIBUTO_EXCEDENTE = "data-umds-excedente";
 function AppHeader(props) {
+    const itensRef = useRef(null);
+    const maisRef = useRef(null);
+    const observadorTamanhoRef = useRef(null);
+    const observadorMutacaoRef = useRef(null);
+    const quadroRef = useRef(0);
+    const assinaturaRef = useRef("");
+    const [itensExcedentes, setItensExcedentes] = useState(() => []);
+    function rotuloMais() {
+        return props.moreLabel || "Mais";
+    }
+    function maisClasses() {
+        return itensExcedentes.length > 0
+            ? "umds-app-header__mais"
+            : "umds-app-header__mais umds-app-header__mais--vazio";
+    }
+    function rotuloDoItem(item) {
+        const rotulo = item.querySelector(".umds-app-nav-item__rotulo");
+        const contador = item.querySelector(".umds-app-nav-item__contador");
+        let texto = "";
+        if (rotulo) {
+            texto = (rotulo.textContent || "").trim();
+        }
+        else {
+            texto = (item.getAttribute("aria-label") ||
+                item.textContent ||
+                "").trim();
+            if (contador) {
+                texto = texto.replace((contador.textContent || "").trim(), "").trim();
+            }
+        }
+        if (contador) {
+            const extra = (contador.getAttribute("aria-label") ||
+                contador.textContent ||
+                "").trim();
+            if (extra)
+                texto = texto + " (" + extra + ")";
+        }
+        return texto;
+    }
+    function medir() {
+        if (typeof window === "undefined" || !itensRef.current || !maisRef.current)
+            return;
+        const filhos = Array.prototype.slice.call(itensRef.current.children);
+        for (let i = 0; i < filhos.length; i++) {
+            filhos[i].removeAttribute(ATRIBUTO_EXCEDENTE);
+        }
+        const vao = parseFloat(window.getComputedStyle(itensRef.current).columnGap) || 0;
+        const nav = itensRef.current.parentElement;
+        if (!nav)
+            return;
+        const vaoNav = parseFloat(window.getComputedStyle(nav).columnGap) || 0;
+        const larguraMais = maisRef.current.getBoundingClientRect().width;
+        const espaco = nav.getBoundingClientRect().right -
+            itensRef.current.getBoundingClientRect().left;
+        const larguras = [];
+        let total = 0;
+        let ativo = -1;
+        for (let i = 0; i < filhos.length; i++) {
+            const largura = filhos[i].getBoundingClientRect().width;
+            larguras.push(largura);
+            total = total + largura + (i > 0 ? vao : 0);
+            if (ativo < 0 &&
+                (filhos[i].getAttribute("aria-current") === "page" ||
+                    filhos[i].querySelector('[aria-current="page"]'))) {
+                ativo = i;
+            }
+        }
+        const ocultos = [];
+        // Meio pixel de folga: larguras fracionárias somadas erram na casa decimal.
+        if (total > espaco + 0.5) {
+            // Com o menu, o botão "Mais" fica no fim da barra, colado na busca:
+            // reserva o mesmo vão que separa as regiões do cabeçalho (20px).
+            const regiao = nav.parentElement;
+            const folga = regiao
+                ? parseFloat(window.getComputedStyle(regiao).columnGap) || 0
+                : 0;
+            const disponivel = espaco - larguraMais - vaoNav - folga;
+            let usado = ativo >= 0 ? larguras[ativo] : 0;
+            let quantos = ativo >= 0 ? 1 : 0;
+            let cheio = false;
+            for (let i = 0; i < filhos.length; i++) {
+                if (i === ativo)
+                    continue;
+                const extra = larguras[i] + (quantos > 0 ? vao : 0);
+                if (!cheio && usado + extra <= disponivel) {
+                    usado = usado + extra;
+                    quantos = quantos + 1;
+                }
+                else {
+                    cheio = true;
+                    ocultos.push(i);
+                }
+            }
+        }
+        const novos = [];
+        for (let j = 0; j < ocultos.length; j++) {
+            const indice = ocultos[j];
+            filhos[indice].setAttribute(ATRIBUTO_EXCEDENTE, "");
+            novos.push({
+                key: "item-" + indice,
+                label: rotuloDoItem(filhos[indice]),
+            });
+        }
+        // Só troca o estado quando o resultado muda: cada troca re-renderiza, e
+        // o re-render dispara os observadores de novo.
+        const assinatura = novos.map((n) => n.key + ":" + n.label).join("|");
+        if (assinatura !== assinaturaRef.current) {
+            assinaturaRef.current = assinatura;
+            setItensExcedentes(novos);
+        }
+    }
+    function agendarMedicao() {
+        if (typeof requestAnimationFrame === "undefined") {
+            medir();
+            return;
+        }
+        if (quadroRef.current)
+            return;
+        quadroRef.current = requestAnimationFrame(() => {
+            quadroRef.current = 0;
+            medir();
+        });
+    }
+    function acionarExcedente(item) {
+        if (!itensRef.current)
+            return;
+        const indice = parseInt(item.key.replace("item-", ""), 10);
+        const filho = itensRef.current.children[indice];
+        if (!filho)
+            return;
+        const alvo = filho.matches("button, a[href]")
+            ? filho
+            : filho.querySelector('button, a[href], [role="button"], [role="link"]');
+        if (alvo)
+            alvo.click();
+    }
     function classes() {
         return [
             "umds-app-header",
@@ -29,6 +171,49 @@ function AppHeader(props) {
             props.onSearchChange(evento.target.value);
         }
     }
-    return (_jsxs("header", { className: classes(), children: [_jsxs("div", { className: "umds-app-header__esquerda", children: [_jsx("span", { className: "umds-app-header__marca", children: _jsx(_Fragment, { children: props.brand || _jsx(Logo, { size: "regular" }) }) }), _jsxs("nav", { className: "umds-app-header__nav", children: [props.primaryActionLabel ? (_jsxs("button", { type: "button", className: "umds-app-header__acao-principal", onClick: (event) => props.onPrimaryAction && props.onPrimaryAction(), children: [props.primaryActionIcon ? (_jsx(Icon, { customSize: "13px", icon: props.primaryActionIcon })) : null, props.primaryActionLabel] })) : null, _jsx(_Fragment, { children: props.children })] })] }), _jsxs("div", { className: "umds-app-header__direita", children: [props.searchPlaceholder ? (_jsxs("div", { className: "umds-app-header__busca", children: [_jsx("span", { className: "umds-app-header__busca-icone", "aria-hidden": "true", children: _jsx(Icon, { customSize: "13px", icon: faMagnifyingGlass }) }), _jsx("input", { className: "umds-app-header__busca-campo", type: "search", value: props.searchValue, placeholder: props.searchPlaceholder, "aria-label": props.searchPlaceholder, onInput: (evento) => aoDigitar(evento) })] })) : null, _jsxs("div", { className: "umds-app-header__acoes", children: [_jsx(_Fragment, { children: props.search }), _jsx(_Fragment, { children: props.actions })] }), _jsx(_Fragment, { children: props.assistant }), props.userName ? (_jsxs("div", { className: "umds-app-header__usuario", children: [_jsxs("button", { type: "button", className: "umds-app-header__usuario-gatilho", "aria-haspopup": temMenu(), "aria-expanded": menuAberto(), onClick: (event) => props.onUserClick && props.onUserClick(), children: [_jsx("span", { className: "umds-app-header__avatar", "aria-hidden": "true", children: props.userInitials }), _jsx("span", { className: "umds-app-header__usuario-nome", children: props.userName }), _jsx("span", { className: "umds-app-header__usuario-seta", "aria-hidden": "true", children: _jsx(Icon, { customSize: "10px", icon: faChevronDown }) })] }), _jsx(_Fragment, { children: props.userMenu })] })) : null] })] }));
+    useEffect(() => {
+        if (typeof window === "undefined" || !itensRef.current)
+            return;
+        medir();
+        if (typeof ResizeObserver !== "undefined") {
+            observadorTamanhoRef.current = new ResizeObserver(() => agendarMedicao());
+            // A nav, e não a caixa dos itens: a caixa muda de largura a cada
+            // medição (itens entrando e saindo); a nav só quando a barra muda.
+            if (itensRef.current.parentElement)
+                observadorTamanhoRef.current.observe(itensRef.current.parentElement);
+        }
+        if (typeof MutationObserver !== "undefined") {
+            observadorMutacaoRef.current = new MutationObserver(() => agendarMedicao());
+            observadorMutacaoRef.current.observe(itensRef.current, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+                attributes: true,
+                attributeFilter: ["aria-current", "class"],
+            });
+        }
+        if (typeof document !== "undefined" &&
+            document.fonts &&
+            document.fonts.ready) {
+            document.fonts.ready.then(() => agendarMedicao());
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (observadorTamanhoRef.current) {
+                observadorTamanhoRef.current.disconnect();
+                observadorTamanhoRef.current = null;
+            }
+            if (observadorMutacaoRef.current) {
+                observadorMutacaoRef.current.disconnect();
+                observadorMutacaoRef.current = null;
+            }
+            if (quadroRef.current && typeof cancelAnimationFrame !== "undefined") {
+                cancelAnimationFrame(quadroRef.current);
+                quadroRef.current = 0;
+            }
+        };
+    }, []);
+    return (_jsxs("header", { className: classes(), children: [_jsxs("div", { className: "umds-app-header__esquerda", children: [_jsx("span", { className: "umds-app-header__marca", children: _jsx(_Fragment, { children: props.brand || _jsx(Logo, { size: "regular" }) }) }), _jsxs("nav", { className: "umds-app-header__nav", children: [props.primaryActionLabel ? (_jsxs("button", { type: "button", className: "umds-app-header__acao-principal", onClick: (event) => props.onPrimaryAction && props.onPrimaryAction(), children: [props.primaryActionIcon ? (_jsx(Icon, { customSize: "13px", icon: props.primaryActionIcon })) : null, props.primaryActionLabel] })) : null, _jsx("div", { className: "umds-app-header__itens", ref: itensRef, children: _jsx(_Fragment, { children: props.children }) }), _jsx("div", { className: maisClasses(), ref: maisRef, children: _jsx(Dropdown, { placement: "bottom-start", items: itensExcedentes, ariaLabel: rotuloMais(), onSelect: (item) => acionarExcedente(item), children: _jsxs("button", { type: "button", className: "umds-app-header__mais-gatilho", children: [rotuloMais(), _jsx("span", { className: "umds-app-header__mais-seta", "aria-hidden": "true", children: _jsx(Icon, { customSize: "10px", variant: "inherit", icon: faChevronDown }) })] }) }) })] })] }), _jsxs("div", { className: "umds-app-header__direita", children: [props.searchPlaceholder ? (_jsxs("div", { className: "umds-app-header__busca", children: [_jsx("span", { className: "umds-app-header__busca-icone", "aria-hidden": "true", children: _jsx(Icon, { customSize: "13px", icon: faMagnifyingGlass }) }), _jsx("input", { className: "umds-app-header__busca-campo", type: "search", value: props.searchValue, placeholder: props.searchPlaceholder, "aria-label": props.searchPlaceholder, onInput: (evento) => aoDigitar(evento) })] })) : null, _jsxs("div", { className: "umds-app-header__acoes", children: [_jsx(_Fragment, { children: props.search }), _jsx(_Fragment, { children: props.actions })] }), _jsx(_Fragment, { children: props.assistant }), props.userName ? (_jsxs("div", { className: "umds-app-header__usuario", children: [_jsxs("button", { type: "button", className: "umds-app-header__usuario-gatilho", "aria-haspopup": temMenu(), "aria-expanded": menuAberto(), onClick: (event) => props.onUserClick && props.onUserClick(), children: [_jsx("span", { className: "umds-app-header__avatar", "aria-hidden": "true", children: props.userInitials }), _jsx("span", { className: "umds-app-header__usuario-nome", children: props.userName }), _jsx("span", { className: "umds-app-header__usuario-seta", "aria-hidden": "true", children: _jsx(Icon, { customSize: "10px", icon: faChevronDown }) })] }), _jsx(_Fragment, { children: props.userMenu })] })) : null] })] }));
 }
 export default AppHeader;

package/dist/components/AppNavItem/AppNavItem.css

@@ -17,7 +17,7 @@
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  gap: 6px; /* protótipo 6px — entre os degraus 4 e 8 da escala */
+  gap: var(--umds-primitive-spacing-nano); /* 8px, igual ao Button (protótipo 6px) */
   margin: 0;
   padding: 0;
   border: none;
@@ -28,6 +28,14 @@
   font-weight: var(--umds-primitive-font-weight-semibold);
   line-height: 1;
   white-space: nowrap;
+  /* Alvo mínimo do WCAG 2.5.8 (24×24). Com `line-height: 1` o botão tinha
+     ~15px de altura e o axe reprovava `target-size` quando o vizinho chega
+     perto (ex.: a busca do cabeçalho). O item segue sem padding e sem fundo:
+     só a caixa clicável cresce, centralizada, e o texto não se move.
+     Largura: o rótulo já passa de 24px. NÃO declarar `min-width` — ele troca
+     o `min-width: auto` do item flex e deixa o `<nav>` apertado espremer os
+     itens um sobre o outro. */
+  min-height: 24px;
   cursor: pointer;
   position: relative;
   transition: color var(--umds-semantic-motion-duration-fast)
@@ -56,8 +64,8 @@
 
 .umds-app-nav-item__contador {
   box-sizing: border-box;
-  padding: var(--umds-primitive-spacing-micro) 6px; /* protótipo 2px 6px — 6 não tem degrau */
-  border-radius: 12px; /* protótipo 12px */
+  padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-quarck); /* 2px 4px, como o contador do AppSidebar (protótipo 2px 6px) */
+  border-radius: var(--umds-primitive-border-radius-pill); /* protótipo 12px já era pílula (altura 15px) */
   background-color: var(--umds-semantic-color-primary-pure);
   color: var(--umds-semantic-color-neutral-light-pure);
   font-size: 11px; /* protótipo 11px — abaixo do menor degrau (12) */

package/dist/components/AppShell/AppShell.css

@@ -66,3 +66,12 @@
   min-width: 0;
   min-height: 0;
 }
+
+/* A região recebe foco por teclado (tabIndex 0) para rolar pelas setas.
+   Foco canônico de não-campo, com uma exceção, como nas Tabs: offset
+   NEGATIVO — a região encosta no cabeçalho e na barra lateral e o
+   `overflow` recortaria um contorno desenhado do lado de fora. */
+.umds-app-shell__conteudo:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px;
+}

package/dist/components/AppShell/AppShell.d.ts

@@ -32,6 +32,7 @@ import './AppShell.css';
  * contêiner da aplicação (`#root`/`#app`) precisam de `height: 100%` — sem
  * isso a rolagem escapa para o `<body>` e cabeçalho e barra lateral rolam junto.
  * @property {string} className - Classes CSS adicionais
+ * @property {string} contentLabel - Nome acessível da região de conteúdo (padrão "Conteúdo principal")
  * @quandoUsar Como raiz de uma aplicação com cabeçalho fixo e navegação lateral. É o esqueleto da tela inteira, usado uma vez por app.
  * @quandoNaoUsar Em página solta, tela de login ou conteúdo embutido em outro sistema — ali o layout é da página, não do app. Para agrupar conteúdo dentro de uma tela, use `Box`, `Stack` ou `Container`.
  */
@@ -44,6 +45,13 @@ export interface AppShellProps {
     sidebar?: any;
     /** Conteúdo da tela — é a única parte que rola. */
     children?: any;
+    /**
+     * Nome acessível da região de conteúdo (o `<main>`).
+     * Padrão: "Conteúdo principal".
+     * A região recebe foco por teclado para poder ser rolada pelas setas, e
+     * todo elemento focável precisa de nome.
+     */
+    contentLabel?: string;
 }
 declare function AppShell(props: AppShellProps): import("react/jsx-runtime").JSX.Element;
 export default AppShell;

package/dist/components/AppShell/AppShell.js

@@ -4,6 +4,9 @@ function AppShell(props) {
     function classes() {
         return ["umds-app-shell", props.className].filter(Boolean).join(" ");
     }
-    return (_jsx("div", { className: classes(), children: _jsxs("div", { className: "umds-app-shell__corpo", children: [_jsx(_Fragment, { children: props.sidebar }), _jsxs("div", { className: "umds-app-shell__principal", children: [_jsx(_Fragment, { children: props.header }), _jsx("main", { className: "umds-app-shell__conteudo", children: _jsx(_Fragment, { children: props.children }) })] })] }) }));
+    function conteudoLabel() {
+        return props.contentLabel || "Conteúdo principal";
+    }
+    return (_jsx("div", { className: classes(), children: _jsxs("div", { className: "umds-app-shell__corpo", children: [_jsx(_Fragment, { children: props.sidebar }), _jsxs("div", { className: "umds-app-shell__principal", children: [_jsx(_Fragment, { children: props.header }), _jsx("main", { className: "umds-app-shell__conteudo", tabIndex: 0, "aria-label": conteudoLabel(), children: _jsx(_Fragment, { children: props.children }) })] })] }) }));
 }
 export default AppShell;

package/dist/components/AppSidebar/AppSidebar.css

@@ -114,7 +114,7 @@
   box-sizing: border-box;
   min-width: var(--umds-primitive-spacing-xxxs);
   padding: 0 var(--umds-primitive-spacing-quarck);
-  border-radius: 100px;
+  border-radius: var(--umds-primitive-border-radius-pill);
   background-color: var(--umds-semantic-color-primary-pure);
   color: var(--umds-semantic-color-neutral-light-pure);
   font-size: var(--umds-primitive-font-size-xxxs);

package/dist/components/AppSidebar/AppSidebar.d.ts

@@ -57,6 +57,10 @@ export interface AppSidebarProps {
     toggleable?: any;
     /** Nome acessível da navegação. @default 'Navegação principal' */
     ariaLabel?: string;
+    /** Nome acessível do botão de abrir com a barra fechada. Troque para traduzir. @default 'Abrir a navegação' */
+    expandLabel?: string;
+    /** Nome acessível do botão de fechar com a barra aberta. Troque para traduzir. @default 'Fechar a navegação' */
+    collapseLabel?: string;
     /** Classes CSS adicionais. */
     className?: string;
     /** Acionado ao clicar num item (recebe o id). */

package/dist/components/AppSidebar/AppSidebar.js

@@ -20,7 +20,9 @@ function AppSidebar(props) {
         return props.ariaLabel || "Navegação principal";
     }
     function rotuloDoBotao() {
-        return props.collapsed ? "Abrir a navegação" : "Fechar a navegação";
+        return props.collapsed
+            ? props.expandLabel || "Abrir a navegação"
+            : props.collapseLabel || "Fechar a navegação";
     }
     function iconeDoBotao() {
         return props.collapsed ? faAngleRight : faAngleLeft;