@1doc/1ds-react 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @1doc/1ds-react
 
+## 2.14.0
+
+### Minor Changes
+
+- aca81ec: Ajustes pedidos na migração de produto para o 1DS, e um componente novo.
+
+  - **Counter** (novo): número que conta até o valor, para KPI de painel e total de páginas. Formato do `Intl.NumberFormat` (pt-BR por padrão), `prefix`/`suffix`/`decimals`, largura do valor final reservada, leitor de tela ouvindo só o valor final e respeito a `prefers-reduced-motion`.
+  - **ListItem**: slot `actions`, renderizado no `li` ao lado do elemento clicável (o ⋮ de menu deixa de ficar dentro do link). No Vue, o ListItem com `li` passa a ter raiz única, então funciona dentro de `TransitionGroup`.
+  - **Tooltip**: a cópia escondida do texto não escapa mais de área com rolagem (o wrapper ganhou `position: relative`), e a seta acompanha o gatilho quando o balão é empurrado para caber perto da borda.
+  - **Dropdown**: `href`, `target` e `rel` no `DropdownItem`. Com `href`, o item é um `<a role="menuitem">` (Ctrl+clique e nova aba funcionam), e o `onSelect` continua sendo chamado.
+  - **Button**: `href`, `target` e `rel`. Com `href`, o Button é um `<a>` com a mesma aparência; desabilitado, volta a ser `<button disabled>`. O hover do `variant="icon"` virou uma camada translúcida da cor do ícone: no fundo claro o cinza é o mesmo de antes, e sobre fundo colorido não vira mais um quadrado branco.
+  - **StatCard**: `secondaryTone` (cor da segunda medida), `loading` (os números viram Skeleton e o cartão ganha `aria-busy`) e `value` aceitando um nó, como um `Counter` (slot `value` no Vue).
+
+## 2.13.1
+
+### Patch Changes
+
+- 1a927c5: StatCard: a segunda medida (`secondaryValue`) passa a ter o mesmo tamanho e peso do número principal, em todas as combinações (`md`, `sm` e `labelPosition="top"`). Com o rótulo no topo, o `secondaryLabel` fica na mesma linha da `description` ("Geral" ao lado de "Meu Setor"), em vez de colado embaixo do número.
+
 ## 2.13.0
 
 ### Minor Changes

package/dist/components/Button/Button.css

@@ -22,6 +22,7 @@
   line-height: 1;
   white-space: nowrap;
   text-decoration: none;
+  box-sizing: border-box; /* com href o Button é <a>, que nasce content-box */
 
   transition:
     background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
@@ -210,8 +211,12 @@
 .umds-button--icon.umds-button--md { width: var(--umds-primitive-spacing-sm); }  /* 40px */
 .umds-button--icon.umds-button--lg { width: var(--umds-primitive-spacing-md); }  /* 48px */
 
+/* Camada de estado translúcida, da cor do próprio ícone: funciona sobre
+   qualquer fundo (o ⋮ num item azul selecionado não vira um quadrado branco).
+   12% de neutral-dark-down (#565656) sobre o branco dá #EBEBEB, o mesmo
+   neutral-light-medium de antes: no fundo claro o visual não muda. */
 .umds-button--icon:hover:not(:disabled) {
-  background-color: var(--umds-semantic-color-neutral-light-medium);
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 .umds-button--icon:disabled {

package/dist/components/Button/Button.d.ts

@@ -22,8 +22,11 @@ import './Button.css';
  * @property {boolean} autoFocus - Foca o botão automaticamente ao montar
  * @property {number} tabIndex - Ordem de tabulação nativa
  * @property {object} style - Estilos inline aplicados ao botão (objeto no React, string/objeto no Vue)
- * @quandoUsar AÇÃO que muda estado: salvar, enviar, abrir modal, confirmar. Use `variant="icon"` para ação só com ícone (sempre com `ariaLabel`).
- * @quandoNaoUsar Para NAVEGAR para outra página ou recurso — use `Link`, que gera `<a>` e permite abrir em nova aba. A regra: se o usuário pode querer "abrir em nova aba", é `Link`.
+ * @property {string} href - Botão que NAVEGA: com `href` o Button vira `<a>` com a mesma aparência (Ctrl+clique e "abrir em nova aba" funcionam). Desabilitado, volta a ser `<button disabled>`.
+ * @property {string} target - Destino do link (`_blank` ganha `rel="noopener noreferrer"`)
+ * @property {string} rel - Relação do link; sobrescreve o padrão do `target`
+ * @quandoUsar AÇÃO que muda estado: salvar, enviar, abrir modal, confirmar. Use `variant="icon"` para ação só com ícone (sempre com `ariaLabel`). Para navegação com cara de botão (o "Ver todos" de um rodapé de card), passe `href`: sai um `<a>` de verdade.
+ * @quandoNaoUsar Para navegar com cara de texto, no meio de uma frase, use `Link`. Nunca navegue por `onClick`: sem `href` não há Ctrl+clique nem "abrir em nova aba".
  */
 export interface ButtonProps {
     variant?: "primary" | "secondary" | "neutral" | "neutral-text" | "text" | "negative" | "negative-outlined" | "icon";
@@ -48,6 +51,12 @@ export interface ButtonProps {
     form?: string;
     autoFocus?: boolean;
     tabIndex?: number;
+    /** Botão que navega: vira `<a>` com a mesma aparência. Desabilitado, volta a ser `<button>`. */
+    href?: string;
+    /** Destino do link. `_blank` ganha `rel="noopener noreferrer"`. */
+    target?: string;
+    /** Relação do link. Sobrescreve o padrão do `target`. */
+    rel?: string;
 }
 import { IconProp } from "../Icon/Icon";
 declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -63,15 +63,27 @@ function Button(props) {
     function endIconIsIcon() {
         return isIconValue(props.endIcon);
     }
+    function isLink() {
+        return !!props.href && !props.disabled;
+    }
+    function relValue() {
+        if (props.rel)
+            return props.rel;
+        return props.target === "_blank" ? "noopener noreferrer" : undefined;
+    }
     function handleClick(event) {
         // Clique bloqueado durante o carregamento — evita dupla submissão
-        // sem mudar o visual (o botão não fica disabled).
-        if (props.loading)
+        // sem mudar o visual (o botão não fica disabled). No `<a>`, segura
+        // também a navegação.
+        if (props.loading) {
+            if (event && event.preventDefault)
+                event.preventDefault();
             return;
+        }
         if (props.onClick) {
             props.onClick(event);
         }
     }
-    return (_jsxs("button", { type: props.type || "button", disabled: props.disabled, id: props.id, name: props.name, value: props.value, form: props.form, autoFocus: props.autoFocus || undefined, tabIndex: props.tabIndex, "aria-label": props.ariaLabel, "aria-busy": props.loading, onClick: (event) => handleClick(event), className: classes(), children: [showLoadingAtStart() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showStartIcon() ? (_jsx(_Fragment, { children: startIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.startIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.startIcon }) })) })) : null, showLoadingAtCenter() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showLoadingAtCenter() ? (_jsx("span", { className: "umds-button__visually-hidden", children: props.children })) : null, showChildren() ? _jsx(_Fragment, { children: props.children }) : null, showEndIcon() ? (_jsx(_Fragment, { children: endIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.endIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.endIcon }) })) })) : null, showLoadingAtEnd() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null] }));
+    return (_jsx(_Fragment, { children: isLink() ? (_jsx(_Fragment, { children: _jsxs("a", { href: props.href, target: props.target, rel: relValue(), id: props.id, tabIndex: props.tabIndex, "aria-label": props.ariaLabel, "aria-busy": props.loading, onClick: (event) => handleClick(event), className: classes(), children: [showLoadingAtStart() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showStartIcon() ? (_jsx(_Fragment, { children: startIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.startIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.startIcon }) })) })) : null, showLoadingAtCenter() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showLoadingAtCenter() ? (_jsx("span", { className: "umds-button__visually-hidden", children: props.children })) : null, showChildren() ? _jsx(_Fragment, { children: props.children }) : null, showEndIcon() ? (_jsx(_Fragment, { children: endIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.endIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.endIcon }) })) })) : null, showLoadingAtEnd() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null] }) })) : (_jsx(_Fragment, { children: _jsxs("button", { type: props.type || "button", disabled: props.disabled, id: props.id, name: props.name, value: props.value, form: props.form, autoFocus: props.autoFocus || undefined, tabIndex: props.tabIndex, "aria-label": props.ariaLabel, "aria-busy": props.loading, onClick: (event) => handleClick(event), className: classes(), children: [showLoadingAtStart() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showStartIcon() ? (_jsx(_Fragment, { children: startIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.startIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.startIcon }) })) })) : null, showLoadingAtCenter() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showLoadingAtCenter() ? (_jsx("span", { className: "umds-button__visually-hidden", children: props.children })) : null, showChildren() ? _jsx(_Fragment, { children: props.children }) : null, showEndIcon() ? (_jsx(_Fragment, { children: endIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.endIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.endIcon }) })) })) : null, showLoadingAtEnd() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null] }) })) }));
 }
 export default Button;

package/dist/components/Counter/Counter.css

@@ -0,0 +1,43 @@
+/* ─────────────────────────────────────────────
+   COUNTER
+   Número que conta até o valor. Herda fonte, tamanho e cor de onde está.
+   A reserva (cópia invisível do valor final) e o número que corre ocupam a
+   mesma célula da grade: a largura é a do valor final desde o primeiro quadro.
+───────────────────────────────────────────── */
+
+.umds-counter {
+  /* Contém a cópia escondida (__leitura, absolute): sem isso ela escapa do
+     overflow de uma área que rola (o mesmo bug corrigido no Tooltip). */
+  position: relative;
+  display: inline-grid;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.umds-counter__reserva,
+.umds-counter__numero {
+  grid-area: 1 / 1;
+}
+
+.umds-counter__reserva {
+  visibility: hidden;
+}
+
+.umds-counter__numero {
+  justify-self: end;
+}
+
+/* Valor final para o leitor de tela. Receita visually-hidden; os 1px não são
+   medida de design. */
+.umds-counter__leitura {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/dist/components/Counter/Counter.d.ts

@@ -0,0 +1,57 @@
+import './Counter.css';
+/**
+ * Counter — número que conta até o valor.
+ *
+ * Ao aparecer, o número sobe de `from` (0) até `value`; quando `value` muda,
+ * conta do valor atual até o novo. É o número do painel ("1.284 processos") e o
+ * total de páginas da caixa de entrada. Herda fonte, tamanho e cor de onde
+ * está, então serve dentro de um título, de um `StatCard` ou no meio do texto.
+ *
+ * Três decisões que valem saber:
+ *
+ * - **O leitor de tela lê só o valor final.** O número que corre é
+ *   `aria-hidden`; uma cópia escondida com o valor final é o que se anuncia.
+ *   Ninguém ouve "1, 37, 210, 1.284".
+ * - **A largura não pula.** Uma cópia invisível do valor final reserva o
+ *   espaço, e os algarismos são tabulares: o texto em volta não dança enquanto
+ *   o número conta.
+ * - **Movimento reduzido é respeitado.** Com `prefers-reduced-motion` (ou
+ *   `disableAnimation`) o número aparece direto no valor final.
+ *
+ * O formato é o do `Intl.NumberFormat` em `locale` (pt-BR: "1.284", "22,31").
+ * As casas decimais seguem as do `value`, a menos que `decimals` diga outra
+ * coisa.
+ * @property {number} value - Valor final (número ou texto numérico)
+ * @property {number} from - De onde a contagem começa ao montar (padrão 0)
+ * @property {number} duration - Duração da contagem em ms (padrão 1000)
+ * @property {number} decimals - Casas decimais (padrão: as do `value`)
+ * @property {string} locale - Idioma do formato (padrão "pt-BR")
+ * @property {string} prefix - Texto antes do número ("R$ ")
+ * @property {string} suffix - Texto depois do número ("%", " páginas")
+ * @property {boolean} disableAnimation - Mostra o valor final direto, sem contar
+ * @property {string} className - Classes CSS adicionais
+ * @quandoUsar Número de destaque que merece atenção ao aparecer: KPI de painel, total de páginas ou de itens de uma caixa de entrada, contadores de resultado.
+ * @quandoNaoUsar Para contagem pequena presa a outro elemento (não lidos de uma aba), use `Badge`. Para número que muda o tempo todo (cronômetro, campo editável), mostre o texto direto: a animação a cada mudança cansa. Em tabela (`DataTable`), número não anima.
+ */
+export interface CounterProps {
+    /** Valor final. Aceita número ou texto numérico ("1284", "22.31"). */
+    value: number | string;
+    /** De onde a contagem começa ao montar. @default 0 */
+    from?: number;
+    /** Duração da contagem, em milissegundos. @default 1000 */
+    duration?: number;
+    /** Casas decimais. Sem a prop, as do `value`. */
+    decimals?: number;
+    /** Idioma do formato do número. @default 'pt-BR' */
+    locale?: string;
+    /** Texto antes do número ("R$ "). */
+    prefix?: string;
+    /** Texto depois do número ("%", " páginas"). */
+    suffix?: string;
+    /** Mostra o valor final direto, sem contar. @default false */
+    disableAnimation?: boolean;
+    /** Classes CSS adicionais. */
+    className?: string;
+}
+declare function Counter(props: CounterProps): import("react/jsx-runtime").JSX.Element;
+export default Counter;

package/dist/components/Counter/Counter.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Counter.css';
+import { useState, useRef, useEffect } from "react";
+function Counter(props) {
+    const quadroRef = useRef(null);
+    const ultimoRef = useRef(null);
+    const alvoRef = useRef(null);
+    const [exibido, setExibido] = useState(() => null);
+    function alvo() {
+        const numero = Number(props.value);
+        return isFinite(numero) ? numero : 0;
+    }
+    function casas() {
+        if (typeof props.decimals === "number")
+            return props.decimals;
+        const texto = String(props.value);
+        const ponto = texto.indexOf(".");
+        return ponto < 0 ? 0 : Math.min(texto.length - ponto - 1, 4);
+    }
+    function formatar(numero) {
+        const digitos = casas();
+        const formatado = new Intl.NumberFormat(props.locale || "pt-BR", {
+            minimumFractionDigits: digitos,
+            maximumFractionDigits: digitos,
+        }).format(numero);
+        return (props.prefix || "") + formatado + (props.suffix || "");
+    }
+    function semAnimacao() {
+        if (props.disableAnimation)
+            return true;
+        if (typeof window === "undefined" || !window.matchMedia)
+            return false;
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    function parar() {
+        if (quadroRef.current !== null && typeof window !== "undefined") {
+            window.cancelAnimationFrame(quadroRef.current);
+        }
+        quadroRef.current = null;
+    }
+    function animar(de, para) {
+        parar();
+        const duracao = typeof props.duration === "number" ? props.duration : 1000;
+        if (semAnimacao() ||
+            duracao <= 0 ||
+            de === para ||
+            typeof window === "undefined") {
+            ultimoRef.current = para;
+            setExibido(para);
+            return;
+        }
+        const inicio = performance.now();
+        const passo = (agora) => {
+            const progresso = Math.min(1, (agora - inicio) / duracao);
+            // ease-out cúbico: rápido no começo, assenta devagar no valor.
+            const suave = 1 - Math.pow(1 - progresso, 3);
+            const atual = progresso >= 1 ? para : de + (para - de) * suave;
+            ultimoRef.current = atual;
+            setExibido(atual);
+            quadroRef.current =
+                progresso < 1 ? window.requestAnimationFrame(passo) : null;
+        };
+        quadroRef.current = window.requestAnimationFrame(passo);
+    }
+    function textoNaTela() {
+        if (exibido !== null)
+            return formatar(exibido);
+        if (props.disableAnimation)
+            return formatar(alvo());
+        return formatar(typeof props.from === "number" ? props.from : 0);
+    }
+    function textoFinal() {
+        return formatar(alvo());
+    }
+    function classes() {
+        return ["umds-counter", props.className].filter(Boolean).join(" ");
+    }
+    useEffect(() => {
+        const para = alvo();
+        alvoRef.current = para;
+        animar(typeof props.from === "number" ? props.from : 0, para);
+    }, []);
+    useEffect(() => {
+        const para = alvo();
+        // O React roda este efeito também na montagem: o onMount já cuidou dela.
+        if (ultimoRef.current === null || alvoRef.current === para)
+            return;
+        alvoRef.current = para;
+        animar(ultimoRef.current, para);
+    }, [props.value]);
+    useEffect(() => {
+        return () => {
+            parar();
+        };
+    }, []);
+    return (_jsxs("span", { className: classes(), children: [_jsx("span", { className: "umds-counter__reserva", "aria-hidden": "true", children: textoFinal() }), _jsx("span", { className: "umds-counter__numero", "aria-hidden": "true", children: textoNaTela() }), _jsx("span", { className: "umds-counter__leitura", children: textoFinal() })] }));
+}
+export default Counter;

package/dist/components/Dropdown/Dropdown.css

@@ -55,10 +55,12 @@
   align-items: center;
   gap: var(--umds-primitive-spacing-nano); /* 8px */
   width: 100%;
+  box-sizing: border-box; /* o item com href é <a>, que nasce content-box */
   padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* 8px 16px */
   background: none;
   border: none;
   text-align: left;
+  text-decoration: none;
   font-family: var(--umds-semantic-font-family-base);
   font-size: var(--umds-primitive-font-size-xxs); /* 14px */
   font-weight: 400;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -7,6 +7,9 @@ import './Dropdown.css';
  * @property {boolean} disabled - Desabilita o item (não selecionável).
  * @property {boolean} danger - Aplica o estilo destrutivo (vermelho).
  * @property {boolean} dividerAfter - Adiciona um divisor abaixo do item.
+ * @property {string} href - Item que navega: vira `<a>` de verdade (Ctrl+clique e "abrir em nova aba" funcionam). O `onSelect` continua sendo chamado.
+ * @property {string} target - Destino do link (`_blank` ganha `rel="noopener noreferrer"`).
+ * @property {string} rel - Relação do link; sobrescreve o padrão do `target`.
  */
 export interface DropdownItem {
     key: string;
@@ -15,6 +18,12 @@ export interface DropdownItem {
     disabled?: boolean;
     danger?: boolean;
     dividerAfter?: boolean;
+    /** Item que navega: vira `<a>` (Ctrl+clique e nova aba funcionam). Desabilitado, volta a ser botão. */
+    href?: string;
+    /** Destino do link. `_blank` ganha `rel="noopener noreferrer"`. */
+    target?: string;
+    /** Relação do link. Sobrescreve o padrão do `target`. */
+    rel?: string;
 }
 /**
  * Dropdown component — menu de ações ancorado a um trigger.

package/dist/components/Dropdown/Dropdown.js

@@ -302,8 +302,21 @@ function Dropdown(props) {
             activateIndex(nextEnabledIndex(total, -1));
         }
         else if (key === "Enter" || key === " ") {
-            event.preventDefault();
             const item = itemList()[focusedIndex()];
+            // Item com href é <a>: o Enter fica com o navegador, que dispara o
+            // clique do link (e respeita Ctrl/Shift para nova aba/janela). O
+            // onClick do <a> chama o handleSelect. Espaço não ativa link no
+            // navegador, então vira um clique de verdade.
+            if (item && item.href && !item.disabled) {
+                if (key === " ") {
+                    event.preventDefault();
+                    const alvo = event.target;
+                    if (alvo && alvo.click)
+                        alvo.click();
+                }
+                return;
+            }
+            event.preventDefault();
             if (item)
                 handleSelect(item);
         }
@@ -312,6 +325,11 @@ function Dropdown(props) {
             close();
         }
     }
+    function relDoItem(item) {
+        if (item.rel)
+            return item.rel;
+        return item.target === "_blank" ? "noopener noreferrer" : undefined;
+    }
     function itemClasses(item) {
         return [
             "umds-dropdown__item",
@@ -370,6 +388,6 @@ function Dropdown(props) {
     }, []);
     return (_jsxs("span", { ref: triggerRef, className: triggerClasses(), style: {
             display: "inline-flex",
-        }, children: [_jsx("span", { className: "umds-dropdown__trigger", ref: triggerButtonRef, role: triggerIsInteractive ? undefined : "button", tabIndex: triggerIsInteractive ? undefined : 0, "aria-haspopup": triggerIsInteractive ? undefined : "menu", "aria-expanded": triggerIsInteractive ? undefined : ariaExpandedText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeydown(event), children: _jsx(_Fragment, { children: props.children }) }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-dropdown__floating", ref: floatingRef, style: floatingStyle(), children: _jsx("ul", { className: "umds-dropdown__menu", role: "menu", ref: menuRef, "aria-label": props.ariaLabel, tabIndex: -1, style: menuStyle(), onKeyDown: (event) => handleMenuKeydown(event), children: itemList()?.map((item, index) => (_jsx("li", { role: "none", children: _jsxs("button", { type: "button", role: "menuitem", className: itemClasses(item), tabIndex: index === activeIndex ? 0 : -1, "data-active": index === activeIndex, disabled: item.disabled, onClick: (event) => handleSelect(item), children: [item.icon ? (_jsx("span", { className: "umds-dropdown__item-icon", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: item.icon }) })) : null, _jsx("span", { className: "umds-dropdown__item-label", children: item.label })] }) }, item.key))) }) })) : null })] }));
+        }, children: [_jsx("span", { className: "umds-dropdown__trigger", ref: triggerButtonRef, role: triggerIsInteractive ? undefined : "button", tabIndex: triggerIsInteractive ? undefined : 0, "aria-haspopup": triggerIsInteractive ? undefined : "menu", "aria-expanded": triggerIsInteractive ? undefined : ariaExpandedText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeydown(event), children: _jsx(_Fragment, { children: props.children }) }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-dropdown__floating", ref: floatingRef, style: floatingStyle(), children: _jsx("ul", { className: "umds-dropdown__menu", role: "menu", ref: menuRef, "aria-label": props.ariaLabel, tabIndex: -1, style: menuStyle(), onKeyDown: (event) => handleMenuKeydown(event), children: itemList()?.map((item, index) => (_jsx("li", { role: "none", children: item.href && !item.disabled ? (_jsxs("a", { role: "menuitem", href: item.href, target: item.target, rel: relDoItem(item), className: itemClasses(item), tabIndex: index === activeIndex ? 0 : -1, "data-active": index === activeIndex, onClick: (event) => handleSelect(item), children: [item.icon ? (_jsx("span", { className: "umds-dropdown__item-icon", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: item.icon }) })) : null, _jsx("span", { className: "umds-dropdown__item-label", children: item.label })] })) : (_jsx(_Fragment, { children: _jsxs("button", { type: "button", role: "menuitem", className: itemClasses(item), tabIndex: index === activeIndex ? 0 : -1, "data-active": index === activeIndex, disabled: item.disabled, onClick: (event) => handleSelect(item), children: [item.icon ? (_jsx("span", { className: "umds-dropdown__item-icon", "aria-hidden": "true", children: _jsx(Icon, { size: "sm", variant: "inherit", icon: item.icon }) })) : null, _jsx("span", { className: "umds-dropdown__item-label", children: item.label })] }) })) }, item.key))) }) })) : null })] }));
 }
 export default Dropdown;

package/dist/components/List/List.css

@@ -134,3 +134,50 @@ ol.umds-list {
   display: block;
   color: var(--umds-semantic-color-neutral-dark-down);
 }
+
+/* ── Ações da linha (slot `actions`) ──
+   O controle fica no `li`, AO LADO do elemento clicável: clicar no ⋮ não
+   aciona a linha, e não há botão dentro de link. O `li` vira a linha visual
+   (flex), e o hover e a seleção passam do elemento para o `li`, para o fundo
+   cobrir as ações também. */
+.umds-list__item:has(> .umds-list-item__actions) {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  padding-right: var(--umds-primitive-spacing-nano); /* 8px */
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
+  transition: background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-list__item:has(> .umds-list-item__actions) > .umds-list-item {
+  flex: 1 1 auto;
+  width: auto;
+}
+
+.umds-list__item:has(> .umds-list-item__actions) > .umds-list-item,
+.umds-list__item:has(> .umds-list-item__actions) > .umds-list-item.umds-list-item--interactive:hover {
+  background: transparent;
+}
+
+.umds-list__item:has(> .umds-list-item--interactive:not(.umds-list-item--disabled)):has(> .umds-list-item__actions):hover {
+  background: var(--umds-semantic-color-background-light);
+}
+
+.umds-list__item:has(> .umds-list-item--selected):has(> .umds-list-item__actions) {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list__item:has(> .umds-list-item--selected.umds-list-item--interactive):has(> .umds-list-item__actions):hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-light) 85%,
+    var(--umds-semantic-color-background-white)
+  );
+}
+
+.umds-list-item__actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+}

package/dist/components/List/ListItem.d.ts

@@ -27,6 +27,12 @@ export type ListItemTag = "button" | "a" | "div";
  * HTML: é o título da linha. O atributo `title` (a dica nativa do navegador) é a
  * prop `tooltip`.
  *
+ * `actions` é o lugar de controles da linha (o ⋮ de um menu, um botão de
+ * excluir): fica no `li`, AO LADO do elemento clicável e não dentro dele, então
+ * o clique no controle não aciona a linha e o HTML continua válido. A linha toda
+ * (com as ações) ganha o fundo de hover e de seleção. Só existe com o `li`
+ * (sem `standalone`).
+ *
  * `standalone` tira o `li`: o ListItem vira só o elemento interativo, para uso
  * fora de um `List` (botão de número de página, item de carrossel, linha dentro
  * de um `div`). Fora de `ul`/`ol`, o `li` é HTML inválido.
@@ -43,6 +49,7 @@ export type ListItemTag = "button" | "a" | "div";
  * @property {any} meta - Terceira linha, menor (data, contexto): texto, ou slot `meta` (nó)
  * @property {any} start - Slot `start`: conteúdo antes do texto (avatar, ícone)
  * @property {any} end - Slot `end`: conteúdo no fim da linha (badge, seta, valor)
+ * @property {any} actions - Slot `actions`: controles da linha (menu ⋮, botão), fora do elemento clicável
  * @property {function} onClick - Callback do clique (ou de Enter/Espaço no as="div")
  * @property {string} className - Classes CSS adicionais, no elemento interativo
  * @slot start - Conteúdo antes do texto.
@@ -50,6 +57,7 @@ export type ListItemTag = "button" | "a" | "div";
  * @slot subtitle - Segunda linha (substitui a prop `subtitle`).
  * @slot meta - Terceira linha (substitui a prop `meta`).
  * @slot end - Conteúdo no fim da linha.
+ * @slot actions - Controles da linha, ao lado do elemento clicável (não dentro dele).
  * @quandoUsar Itens de uma lista em que a linha toda é a ação: documentos não lidos, notificações, resultados de busca, opções de menu de filtro, itens de navegação secundária. Hover, foco visível e seleção já vêm resolvidos.
  * @quandoNaoUsar Para dados comparados coluna a coluna, use `DataTable`. Para um cartão com título, ações e elevação própria, use `Card`. Para um botão solto fora de lista, use `Button`. Para a navegação principal do produto, use `SidePanelItem` ou `AppNavItem`.
  */
@@ -81,6 +89,8 @@ export interface ListItemProps {
     start?: any;
     /** Conteúdo no fim da linha (badge, seta, valor). No Vue, slot `end`. */
     end?: any;
+    /** Controles da linha (menu ⋮, botão), fora do elemento clicável. Só com o `li`. No Vue, slot `actions`. */
+    actions?: any;
     /** Chamado no clique da linha (ou em Enter/Espaço no `as="div"`). */
     onClick?: (event: any) => void;
     /** Classes CSS adicionais, no elemento interativo. */

package/dist/components/List/ListItem.js

@@ -77,6 +77,6 @@ function ListItem(props) {
         }
         return out;
     }
-    return (_jsxs(_Fragment, { children: [!props.standalone ? (_jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null, !!props.standalone ? (_jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null] }));
+    return (_jsx(_Fragment, { children: !props.standalone ? (_jsx(_Fragment, { children: _jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, props.actions ? (_jsx("div", { className: "umds-list-item__actions", children: _jsx(_Fragment, { children: props.actions }) })) : null] }) })) : (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] }) })) }));
 }
 export default ListItem;

package/dist/components/StatCard/StatCard.css

@@ -243,8 +243,25 @@
   color: var(--umds-semantic-color-feedback-info-dark);
 }
 
+/* ── secondaryTone: cor da segunda medida (mesmas variantes do valueTone) ── */
+.umds-stat-card--secundario-primary .umds-stat-card__valor-secundario {
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-stat-card--secundario-positive .umds-stat-card__valor-secundario {
+  color: var(--umds-semantic-color-feedback-positive-dark);
+}
+
+.umds-stat-card--secundario-negative .umds-stat-card__valor-secundario {
+  color: var(--umds-semantic-color-feedback-negative-dark);
+}
+
+.umds-stat-card--secundario-info .umds-stat-card__valor-secundario {
+  color: var(--umds-semantic-color-feedback-info-dark);
+}
+
 /* ── Segunda medida (secondaryValue, secondaryLabel) ──
-   Menor, à direita da principal, separada por um filete. Vem depois do corpo no HTML. */
+   À direita da principal, separada por um filete. Vem depois do corpo no HTML. */
 .umds-stat-card__secundaria {
   display: flex;
   flex-direction: column;
@@ -263,8 +280,9 @@
   text-align: center;
 }
 
+/* Mesmo tamanho e peso do número principal: as duas medidas se comparam lado a lado. */
 .umds-stat-card__valor-secundario {
-  font-size: var(--umds-primitive-font-size-sm); /* 20px */
+  font-size: var(--umds-primitive-font-size-md);
   font-weight: var(--umds-primitive-font-weight-bold);
   line-height: 1.15;
   font-variant-numeric: tabular-nums;
@@ -285,6 +303,30 @@
 .umds-stat-card--rotulo-topo .umds-stat-card__secundaria {
   grid-column: 3;
   grid-row: 2;
+  /* A grade não tem vão entre colunas: o filete ganha o mesmo respiro dos dois lados. */
+  margin-left: var(--umds-primitive-spacing-xxxs);
+}
+
+.umds-stat-card--rotulo-topo .umds-stat-card__valor-secundario {
+  font-size: var(--umds-primitive-font-size-lg); /* 32px, como o principal */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}
+
+/* Com rótulo na segunda medida, ela ocupa as linhas do número e da descrição
+   (subgrid): o rótulo dela fica na linha da descrição ("Geral" ao lado de
+   "Meu Setor") e o valor na linha do número principal. */
+.umds-stat-card--rotulo-topo .umds-stat-card__secundaria:has(.umds-stat-card__rotulo-secundario) {
+  grid-row: 2 / span 2;
+  display: grid;
+  grid-template-rows: subgrid;
+  /* `normal` usa o vão da grade do cartão; o `micro` da regra base deslocaria a linha em 1,5px. */
+  row-gap: normal;
+  align-items: center;
+}
+
+.umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria .umds-stat-card__descricao {
+  grid-column: 1 / 3;
+  grid-row: 3;
 }
 
 .umds-stat-card--rotulo-topo.umds-stat-card--com-secundaria:not(:has(.umds-stat-card__icone)) .umds-stat-card__valor {
@@ -298,3 +340,16 @@
   font-size: 1.125rem; /* 18px */
   font-weight: var(--umds-primitive-font-weight-extrabold);
 }
+
+/* A segunda medida acompanha o número principal. */
+.umds-stat-card.umds-stat-card--sm .umds-stat-card__valor-secundario {
+  font-size: 1.125rem; /* 18px */
+  font-weight: var(--umds-primitive-font-weight-extrabold);
+}
+
+/* ── loading: o Skeleton ocupa a altura do número (1em da fonte dele) ── */
+.umds-stat-card[aria-busy="true"] .umds-stat-card__valor,
+.umds-stat-card[aria-busy="true"] .umds-stat-card__valor-secundario {
+  display: inline-flex;
+  align-items: center;
+}

package/dist/components/StatCard/StatCard.d.ts

@@ -14,7 +14,7 @@ import './StatCard.css';
  *   pessoa a segurar o rótulo na cabeça esperando o valor.
  * - **A variação não depende só da cor.** Sobe e desce vêm com seta, porque
  *   verde e vermelho sozinhos não comunicam para quem não distingue cores.
- * @property {string} value - O número ou medida em destaque
+ * @property {any} value - O número ou medida em destaque. Aceita um nó, como um `Counter` para o número contar até o valor (no Vue, slot `value`)
  * @property {string} label - O que o número significa
  * @property {IconProp} icon - Ícone Font Awesome como objeto importado
  * @property {string} variant - Cor de apoio do ícone e da variação
@@ -24,20 +24,22 @@ import './StatCard.css';
  * @property {string} description - Texto auxiliar abaixo do rótulo
  * @property {string} size - 'md' (padrão) | 'sm': o `sm` leva o número a 18px/800, o tamanho dos KPIs da home do CrisDoc (fora da escala de fonte do DS, que vai de 16 a 20). Vale também com `labelPosition="top"`.
  * @property {string} labelPosition - Onde o rótulo aparece: 'bottom' (padrão, embaixo do número) | 'top' (no topo do cartão, acima do ícone e do número, com o número em 32/800). No HTML o número continua vindo antes do rótulo, então o leitor de tela anuncia igual.
- * @property {string|number} secondaryValue - Segunda medida do cartão, menor, à direita da principal ("22,31%" do setor e "14,11%" do geral). Vem depois do resto no HTML. `0` aparece; vazio e ausente não.
+ * @property {string|number} secondaryValue - Segunda medida do cartão, no mesmo tamanho da principal, à direita dela ("22,31%" do setor e "14,11%" do geral). Com `labelPosition="top"`, o `secondaryLabel` fica na linha da `description`. Vem depois do resto no HTML. `0` aparece; vazio e ausente não.
  * @property {string} secondaryLabel - O que a segunda medida significa ("Geral")
  * @property {string} valueTone - Cor do número principal: 'default' (cor do texto) | 'primary' | 'positive' | 'negative' | 'info'. Usa as variantes escuras (contraste AA sobre o branco). Não confunda com `variant`, que pinta o ícone e a variação.
+ * @property {string} secondaryTone - Cor da segunda medida, com as mesmas opções de `valueTone` ("Meu Setor" em azul e "Geral" em verde, por exemplo).
+ * @property {boolean} loading - Carregando: os números viram Skeleton do tamanho deles (rótulos e ⓘ continuam), a variação some e o cartão ganha `aria-busy`. Dispensa montar o Skeleton por fora.
  * @property {string} infoTooltip - Texto de ajuda: mostra um ⓘ ao lado do rótulo com um Tooltip escuro. É um botão dentro do cartão; com `onClick` no cartão, evite (botão dentro de botão).
  * @property {string} infoLabel - Nome acessível do ⓘ. Troque para traduzir. Padrão: "Mais informações".
  * @property {string} align - Alinhamento do conteúdo
  * @property {string} className - Classes CSS adicionais
  * @property {function} onClick - Torna o cartão acionável (vira botão)
  * @quandoUsar Painel e visão geral: destacar UMA medida por cartão, em linha com outras. O número é o protagonista da leitura.
- * @quandoNaoUsar Para listar dados comparáveis — use `DataTable`. Para um bloco com título e conteúdo livre, `Card`. Para um rótulo curto de estado, `Tag` ou `Badge`. Não empilhe vários números num StatCard só: um cartão, uma medida.
+ * @quandoNaoUsar Para listar dados comparáveis — use `DataTable`. Para um bloco com título e conteúdo livre, `Card`. Para um rótulo curto de estado, `Tag` ou `Badge`. Não empilhe vários números num StatCard só: uma medida, ou duas comparadas (`secondaryValue`).
  */
 export interface StatCardProps {
-    /** O número ou medida em destaque. */
-    value?: string | number;
+    /** O número ou medida em destaque. Texto, número ou nó (um `Counter`); no Vue, slot `value`. */
+    value?: any;
     /** O que o número significa. */
     label?: string;
     /** Ícone Font Awesome como objeto importado. */
@@ -70,7 +72,7 @@ export interface StatCardProps {
      * @default 'bottom'
      */
     labelPosition?: "bottom" | "top";
-    /** Segunda medida, menor, à direita da principal. 0 aparece; vazio e ausente não. */
+    /** Segunda medida, no tamanho da principal, à direita dela. 0 aparece; vazio e ausente não. */
     secondaryValue?: string | number;
     /** O que a segunda medida significa. */
     secondaryLabel?: string;
@@ -78,6 +80,10 @@ export interface StatCardProps {
     size?: "md" | "sm";
     /** Cor do número principal. @default 'default' */
     valueTone?: "default" | "primary" | "positive" | "negative" | "info";
+    /** Cor da segunda medida. Mesmas opções de `valueTone`. @default 'default' */
+    secondaryTone?: "default" | "primary" | "positive" | "negative" | "info";
+    /** Carregando: números viram Skeleton, a variação some, `aria-busy` no cartão. @default false */
+    loading?: boolean;
     /**
      * Texto de ajuda: mostra o ⓘ ao lado do rótulo, com um Tooltip escuro. É um
      * botão focável dentro do cartão; com `onClick` no cartão, evite.

package/dist/components/StatCard/StatCard.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './StatCard.css';
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
+import Skeleton from "../Skeleton/Skeleton";
 function StatCard(props) {
     function classes() {
         return [
@@ -16,6 +17,9 @@ function StatCard(props) {
             props.valueTone && props.valueTone !== "default"
                 ? "umds-stat-card--valor-" + props.valueTone
                 : "",
+            props.secondaryTone && props.secondaryTone !== "default"
+                ? "umds-stat-card--secundario-" + props.secondaryTone
+                : "",
             props.onClick ? "umds-stat-card--acionavel" : "",
             props.className,
         ]
@@ -58,6 +62,6 @@ function StatCard(props) {
         if (props.onClick)
             props.onClick();
     }
-    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsx("span", { className: "umds-stat-card__valor", children: props.value }), _jsxs("span", { className: "umds-stat-card__rotulo", children: [props.label, props.infoTooltip ? (_jsx(Tooltip, { variant: "dark", side: "top", content: props.infoTooltip, children: _jsx("button", { type: "button", className: "umds-stat-card__info", "aria-label": props.infoLabel || "Mais informações", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faCircleInfo }) }) })) : null] }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] }), temSecundaria() ? (_jsxs("div", { className: "umds-stat-card__secundaria", children: [_jsx("span", { className: "umds-stat-card__valor-secundario", children: props.secondaryValue }), props.secondaryLabel ? (_jsx("span", { className: "umds-stat-card__rotulo-secundario", children: props.secondaryLabel })) : null] })) : null] }));
+    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, "aria-busy": props.loading ? "true" : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsxs("span", { className: "umds-stat-card__valor", children: [props.loading ? _jsx(Skeleton, { width: "3em", height: "1em" }) : null, !props.loading ? _jsx(_Fragment, { children: props.value }) : null] }), _jsxs("span", { className: "umds-stat-card__rotulo", children: [props.label, props.infoTooltip ? (_jsx(Tooltip, { variant: "dark", side: "top", content: props.infoTooltip, children: _jsx("button", { type: "button", className: "umds-stat-card__info", "aria-label": props.infoLabel || "Mais informações", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faCircleInfo }) }) })) : null] }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel && !props.loading ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] }), temSecundaria() ? (_jsxs("div", { className: "umds-stat-card__secundaria", children: [_jsxs("span", { className: "umds-stat-card__valor-secundario", children: [props.loading ? _jsx(Skeleton, { width: "3em", height: "1em" }) : null, !props.loading ? _jsx(_Fragment, { children: props.secondaryValue }) : null] }), props.secondaryLabel ? (_jsx("span", { className: "umds-stat-card__rotulo-secundario", children: props.secondaryLabel })) : null] })) : null] }));
 }
 export default StatCard;

package/dist/components/Tooltip/Tooltip.css

@@ -8,6 +8,9 @@
 ───────────────────────────────────────────── */
 
 .umds-tooltip {
+  /* Bloco de contenção da cópia escondida (__descricao, absolute): sem ele,
+     ela escapa do overflow de uma área que rola e estica a página. */
+  position: relative;
   display: inline-flex;
   height: fit-content;
 }

package/dist/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Tooltip.css';
 import { useState, useRef, useEffect } from "react";
-import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
+import { computePosition, autoUpdate, offset, flip, shift, arrow, } from "@floating-ui/dom";
 import Icon from "../Icon/Icon";
 import Portal from "../Portal/Portal";
 import { gerarId } from "../../utils/id";
@@ -28,6 +28,7 @@ function Tooltip(props) {
     const [posY, setPosY] = useState(() => 0);
     const [finalSide, setFinalSide] = useState(() => "top");
     const [finalAlign, setFinalAlign] = useState(() => "center");
+    const [arrowOffset, setArrowOffset] = useState(() => -1);
     const [bubbleId, setBubbleId] = useState(() => "");
     const [descId, setDescId] = useState(() => "");
     function bubbleIdText() {
@@ -92,6 +93,12 @@ function Tooltip(props) {
                 padding: 8,
             }),
         ];
+        // A seta acompanha o gatilho quando o balão é empurrado para caber.
+        if (arrowRef.current)
+            middlewares.push(arrow({
+                element: arrowRef.current,
+                padding: 8,
+            }));
         computePosition(triggerRef.current, floatingRef.current, {
             placement,
             strategy: "fixed",
@@ -105,6 +112,14 @@ function Tooltip(props) {
             const parts = position.placement.split("-");
             setFinalSide(parts[0]);
             setFinalAlign(parts[1] || "center");
+            // Só quando o shift deslocou o balão a seta sai da posição estática
+            // (as 12 classes side×align): nos outros casos o visual não muda.
+            const deslocamento = position.middlewareData.shift;
+            const seta = position.middlewareData.arrow;
+            const empurrado = !!deslocamento && (deslocamento.x !== 0 || deslocamento.y !== 0);
+            const vertical = parts[0] === "left" || parts[0] === "right";
+            const eixo = seta ? (vertical ? seta.y : seta.x) : undefined;
+            setArrowOffset(empurrado && typeof eixo === "number" ? eixo : -1);
             setPositioned(true);
         });
     }
@@ -273,6 +288,22 @@ function Tooltip(props) {
             "umds-tooltip__arrow--align-" + finalAlign,
         ].join(" ");
     }
+    function arrowStyle() {
+        if (arrowOffset < 0)
+            return undefined;
+        if (finalSide === "left" || finalSide === "right") {
+            return {
+                top: arrowOffset + "px",
+                bottom: "auto",
+                transform: "rotate(45deg)",
+            };
+        }
+        return {
+            left: arrowOffset + "px",
+            right: "auto",
+            transform: "rotate(45deg)",
+        };
+    }
     useEffect(() => {
         if (!triggerRef.current)
             return;
@@ -315,6 +346,6 @@ function Tooltip(props) {
             stopKeydownWatch();
         };
     }, []);
-    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsxs("span", { className: "umds-tooltip__descricao", "aria-hidden": "true", id: descIdText(), children: [props.title ? _jsx(_Fragment, { children: tituloDescrito() }) : null, props.content ? _jsx(_Fragment, { children: props.content }) : null] }), _jsx(Portal, { children: mounted ? (_jsx("span", { ref: floatingRef, className: floatingClasses(), style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleIdText(), "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses() })] }) })) : null })] }));
+    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsxs("span", { className: "umds-tooltip__descricao", "aria-hidden": "true", id: descIdText(), children: [props.title ? _jsx(_Fragment, { children: tituloDescrito() }) : null, props.content ? _jsx(_Fragment, { children: props.content }) : null] }), _jsx(Portal, { children: mounted ? (_jsx("span", { ref: floatingRef, className: floatingClasses(), style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleIdText(), "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses(), style: arrowStyle() })] }) })) : null })] }));
 }
 export default Tooltip;

package/dist/index.d.ts

@@ -50,6 +50,8 @@ export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Counter } from "./components/Counter/Counter";
+export type * from "./components/Counter/Counter";
 export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";

package/dist/index.js

@@ -56,6 +56,7 @@ export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Counter } from "./components/Counter/Counter";
 export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";

package/dist/teste/PedidosMatheus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/PedidosMatheus.test.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Button from "../components/Button/Button";
+import Counter from "../components/Counter/Counter";
+import Dropdown from "../components/Dropdown/Dropdown";
+import ListItem from "../components/List/ListItem";
+import StatCard from "../components/StatCard/StatCard";
+describe("Counter", () => {
+    it("sem animação mostra o valor final formatado em pt-BR", () => {
+        const { container } = render(_jsx(Counter, { value: 1284, disableAnimation: true }));
+        expect(container.querySelector(".umds-counter__numero")).toHaveTextContent("1.284");
+        expect(container.querySelector(".umds-counter__numero")).toHaveAttribute("aria-hidden", "true");
+        expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("1.284");
+    });
+    it("casas decimais seguem o value; prefixo e sufixo entram no texto", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Counter, { value: 22.31, suffix: "%", disableAnimation: true }), _jsx(Counter, { value: 15890.5, prefix: "R$ ", decimals: 2, disableAnimation: true })] }));
+        const leituras = container.querySelectorAll(".umds-counter__leitura");
+        expect(leituras[0]).toHaveTextContent("22,31%");
+        expect(leituras[1].textContent).toBe("R$ 15.890,50");
+    });
+    it("conta do from até o valor e termina no valor exato", async () => {
+        vi.useFakeTimers();
+        const { container } = render(_jsx(Counter, { value: 500, duration: 100 }));
+        const numero = () => container.querySelector(".umds-counter__numero").textContent;
+        expect(numero()).toBe("0");
+        await act(async () => {
+            vi.advanceTimersByTime(500);
+        });
+        expect(numero()).toBe("500");
+        // A reserva e a leitura já nascem com o valor final.
+        expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("500");
+        vi.useRealTimers();
+    });
+});
+describe("ListItem · actions", () => {
+    it("as ações ficam no li, fora do elemento clicável", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { href: "#doc", title: "Memorando", actions: _jsx("button", { type: "button", children: "Mais" }) }) }));
+        const acao = screen.getByRole("button", { name: "Mais" });
+        expect(acao.closest("a")).toBeNull();
+        expect(acao.parentElement).toHaveClass("umds-list-item__actions");
+        expect(container.querySelector("li > a")).toHaveAttribute("href", "#doc");
+    });
+});
+describe("Button · href", () => {
+    it("com href é um link; desabilitado volta a ser botão", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { href: "#inbox", children: "Inbox" }), _jsx(Button, { href: "#cal", target: "_blank", children: "Calend\u00E1rio" }), _jsx(Button, { href: "#fila", disabled: true, children: "Fila" })] }));
+        expect(screen.getByRole("link", { name: "Inbox" })).toHaveAttribute("href", "#inbox");
+        expect(screen.getByRole("link", { name: "Calendário" })).toHaveAttribute("rel", "noopener noreferrer");
+        expect(screen.getByRole("button", { name: "Fila" })).toBeDisabled();
+    });
+    it("loading segura a navegação do link", () => {
+        render(_jsx(Button, { href: "#inbox", loading: true, loadingPosition: "start", children: "Inbox" }));
+        const link = screen.getByRole("link", { name: "Inbox" });
+        const evento = new MouseEvent("click", { bubbles: true, cancelable: true });
+        link.dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+    });
+});
+describe("Dropdown · href", () => {
+    it("item com href vira <a role=menuitem>, e o onSelect continua", async () => {
+        const onSelect = vi.fn();
+        render(_jsx(Dropdown, { ariaLabel: "A\u00E7\u00F5es", onSelect: onSelect, items: [
+                { key: "assinar", label: "Assinar", href: "#assinar" },
+                { key: "arquivar", label: "Arquivar" },
+            ], children: _jsx("button", { type: "button", children: "Abrir" }) }));
+        fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+        const assinar = await screen.findByRole("menuitem", { name: "Assinar" });
+        expect(assinar.tagName).toBe("A");
+        expect(assinar).toHaveAttribute("href", "#assinar");
+        expect(screen.getByRole("menuitem", { name: "Arquivar" }).tagName).toBe("BUTTON");
+        fireEvent.click(assinar);
+        expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: "assinar" }));
+    });
+});
+describe("StatCard · loading e secondaryTone", () => {
+    it("loading troca os números por Skeleton e marca aria-busy", () => {
+        const { container } = render(_jsx(StatCard, { value: "22,31%", label: "Qualidade", secondaryValue: "14,11%", trendLabel: "+2%", trend: "up", loading: true }));
+        const cartao = container.querySelector(".umds-stat-card");
+        expect(cartao).toHaveAttribute("aria-busy", "true");
+        expect(cartao.textContent).not.toContain("22,31%");
+        expect(cartao.textContent).not.toContain("14,11%");
+        expect(cartao.textContent).not.toContain("+2%");
+        expect(cartao.textContent).toContain("Qualidade");
+    });
+    it("secondaryTone escreve a classe; default não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(StatCard, { value: "1", secondaryValue: "2", secondaryTone: "positive" }), _jsx(StatCard, { value: "1", secondaryValue: "2", secondaryTone: "default" })] }));
+        expect(container.children[0]).toHaveClass("umds-stat-card--secundario-positive");
+        expect(container.children[1].className).not.toContain("secundario-");
+    });
+});

package/dist/teste/StatCardTamanhoSm.test.js

@@ -23,6 +23,14 @@ describe("StatCard · size", () => {
         const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", size: "sm", labelPosition: "top" }));
         expect(container.firstElementChild).toHaveClass("umds-stat-card--sm", "umds-stat-card--rotulo-topo");
     });
+    it("a segunda medida tem o mesmo tamanho e peso do número, no sm e no rótulo no topo", () => {
+        const sm = bloco(".umds-stat-card.umds-stat-card--sm .umds-stat-card__valor-secundario");
+        expect(sm).toMatch(/font-size:\s*1\.125rem/);
+        expect(sm).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+        const topo = bloco(".umds-stat-card--rotulo-topo .umds-stat-card__valor-secundario");
+        expect(topo).toMatch(/font-size:\s*var\(--umds-primitive-font-size-lg\)/);
+        expect(topo).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+    });
     it("o número continua antes do rótulo no HTML", () => {
         const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", size: "sm" }));
         const valor = container.querySelector(".umds-stat-card__valor");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,8 +45,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-tokens": "0.7.0",
-    "@1doc/1ds-core": "2.13.0"
+    "@1doc/1ds-core": "2.14.0",
+    "@1doc/1ds-tokens": "0.7.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -58,6 +58,8 @@ export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Counter } from "./components/Counter/Counter";
+export type * from "./components/Counter/Counter";
 export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";

package/src/teste/PedidosMatheus.test.tsx

@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Button from "../components/Button/Button";
+import Counter from "../components/Counter/Counter";
+import Dropdown from "../components/Dropdown/Dropdown";
+import ListItem from "../components/List/ListItem";
+import StatCard from "../components/StatCard/StatCard";
+
+describe("Counter", () => {
+  it("sem animação mostra o valor final formatado em pt-BR", () => {
+    const { container } = render(<Counter value={1284} disableAnimation />);
+    expect(container.querySelector(".umds-counter__numero")).toHaveTextContent("1.284");
+    expect(container.querySelector(".umds-counter__numero")).toHaveAttribute("aria-hidden", "true");
+    expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("1.284");
+  });
+
+  it("casas decimais seguem o value; prefixo e sufixo entram no texto", () => {
+    const { container } = render(
+      <>
+        <Counter value={22.31} suffix="%" disableAnimation />
+        <Counter value={15890.5} prefix="R$ " decimals={2} disableAnimation />
+      </>,
+    );
+    const leituras = container.querySelectorAll(".umds-counter__leitura");
+    expect(leituras[0]).toHaveTextContent("22,31%");
+    expect(leituras[1].textContent).toBe("R$ 15.890,50");
+  });
+
+  it("conta do from até o valor e termina no valor exato", async () => {
+    vi.useFakeTimers();
+    const { container } = render(<Counter value={500} duration={100} />);
+    const numero = () => container.querySelector(".umds-counter__numero")!.textContent;
+    expect(numero()).toBe("0");
+    await act(async () => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(numero()).toBe("500");
+    // A reserva e a leitura já nascem com o valor final.
+    expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("500");
+    vi.useRealTimers();
+  });
+});
+
+describe("ListItem · actions", () => {
+  it("as ações ficam no li, fora do elemento clicável", () => {
+    const { container } = render(
+      <ul>
+        <ListItem href="#doc" title="Memorando" actions={<button type="button">Mais</button>} />
+      </ul>,
+    );
+    const acao = screen.getByRole("button", { name: "Mais" });
+    expect(acao.closest("a")).toBeNull();
+    expect(acao.parentElement).toHaveClass("umds-list-item__actions");
+    expect(container.querySelector("li > a")).toHaveAttribute("href", "#doc");
+  });
+});
+
+describe("Button · href", () => {
+  it("com href é um link; desabilitado volta a ser botão", () => {
+    render(
+      <>
+        <Button href="#inbox">Inbox</Button>
+        <Button href="#cal" target="_blank">Calendário</Button>
+        <Button href="#fila" disabled>Fila</Button>
+      </>,
+    );
+    expect(screen.getByRole("link", { name: "Inbox" })).toHaveAttribute("href", "#inbox");
+    expect(screen.getByRole("link", { name: "Calendário" })).toHaveAttribute("rel", "noopener noreferrer");
+    expect(screen.getByRole("button", { name: "Fila" })).toBeDisabled();
+  });
+
+  it("loading segura a navegação do link", () => {
+    render(<Button href="#inbox" loading loadingPosition="start">Inbox</Button>);
+    const link = screen.getByRole("link", { name: "Inbox" });
+    const evento = new MouseEvent("click", { bubbles: true, cancelable: true });
+    link.dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(true);
+  });
+});
+
+describe("Dropdown · href", () => {
+  it("item com href vira <a role=menuitem>, e o onSelect continua", async () => {
+    const onSelect = vi.fn();
+    render(
+      <Dropdown
+        ariaLabel="Ações"
+        onSelect={onSelect}
+        items={[
+          { key: "assinar", label: "Assinar", href: "#assinar" },
+          { key: "arquivar", label: "Arquivar" },
+        ]}
+      >
+        <button type="button">Abrir</button>
+      </Dropdown>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+    const assinar = await screen.findByRole("menuitem", { name: "Assinar" });
+    expect(assinar.tagName).toBe("A");
+    expect(assinar).toHaveAttribute("href", "#assinar");
+    expect(screen.getByRole("menuitem", { name: "Arquivar" }).tagName).toBe("BUTTON");
+    fireEvent.click(assinar);
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: "assinar" }));
+  });
+});
+
+describe("StatCard · loading e secondaryTone", () => {
+  it("loading troca os números por Skeleton e marca aria-busy", () => {
+    const { container } = render(
+      <StatCard value="22,31%" label="Qualidade" secondaryValue="14,11%" trendLabel="+2%" trend="up" loading />,
+    );
+    const cartao = container.querySelector(".umds-stat-card")!;
+    expect(cartao).toHaveAttribute("aria-busy", "true");
+    expect(cartao.textContent).not.toContain("22,31%");
+    expect(cartao.textContent).not.toContain("14,11%");
+    expect(cartao.textContent).not.toContain("+2%");
+    expect(cartao.textContent).toContain("Qualidade");
+  });
+
+  it("secondaryTone escreve a classe; default não", () => {
+    const { container } = render(
+      <>
+        <StatCard value="1" secondaryValue="2" secondaryTone="positive" />
+        <StatCard value="1" secondaryValue="2" secondaryTone="default" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-stat-card--secundario-positive");
+    expect(container.children[1].className).not.toContain("secundario-");
+  });
+});

package/src/teste/StatCardTamanhoSm.test.tsx

@@ -33,6 +33,15 @@ describe("StatCard · size", () => {
     expect(container.firstElementChild).toHaveClass("umds-stat-card--sm", "umds-stat-card--rotulo-topo");
   });
 
+  it("a segunda medida tem o mesmo tamanho e peso do número, no sm e no rótulo no topo", () => {
+    const sm = bloco(".umds-stat-card.umds-stat-card--sm .umds-stat-card__valor-secundario");
+    expect(sm).toMatch(/font-size:\s*1\.125rem/);
+    expect(sm).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+    const topo = bloco(".umds-stat-card--rotulo-topo .umds-stat-card__valor-secundario");
+    expect(topo).toMatch(/font-size:\s*var\(--umds-primitive-font-size-lg\)/);
+    expect(topo).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+  });
+
   it("o número continua antes do rótulo no HTML", () => {
     const { container } = render(<StatCard value={44} label="Não lidos" size="sm" />);
     const valor = container.querySelector(".umds-stat-card__valor") as HTMLElement;