@1doc/1ds-react 2.12.2 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @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
+
+- ab0ee2b: feat(breadcrumb): `truncate`, a trilha numa linha só
+
+  O `Breadcrumb` ganha `truncate`. A trilha passa a ocupar uma linha só e, quando não cabe, a página atual (o último item) encolhe
+  primeiro, com reticências, até 80px (separador incluído); só então os níveis anteriores encolhem. O separador nunca encolhe e o rótulo inteiro fica no
+  `title` de cada item. Feito para barras de altura fixa, como o `AppSubheader`, quando o último nível é um texto longo: o CrisDoc
+  mostra ali o número e o assunto do processo aberto, e sem isto a trilha quebrava em três linhas no celular. Sem a prop, nada muda.
+
+  ```vue
+  <Breadcrumb
+    truncate
+    :items="[
+      { label: '1Doc', href: '/' },
+      { label: 'Proc. Administrativo 412/2026' },
+      { label: assunto },
+    ]"
+  />
+  ```
+
 ## 2.12.2
 
 ### Patch Changes

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -70,3 +70,53 @@
   font-weight: 600;
   cursor: default;
 }
+
+/* ── truncate: uma linha só, com reticências ──
+   A página atual encolhe primeiro: o `flex-shrink` alto faz o algoritmo do
+   flex tirar dela quase todo o espaço que falta, até a largura mínima; dali
+   em diante o que ainda falta se divide entre os níveis anteriores. O 100000
+   é uma razão de encolhimento, não uma medida, e precisa ser enorme: o flex
+   reparte o encolhimento na proporção (razão × largura), e com 100 os níveis
+   anteriores ainda levavam de 0,1 a 0,8px, o bastante para virar "1D…" e
+   "Emiss…" com espaço sobrando. O separador nunca encolhe.
+   Com rótulo final mais curto que o mínimo, o item ocupa o mínimo e a sobra
+   fica depois do texto, no fim da trilha, onde não aparece. */
+.umds-breadcrumb--truncate {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__list {
+  flex-wrap: nowrap;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item {
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item:last-child {
+  flex-shrink: 100000;
+  min-width: var(--umds-primitive-spacing-xxl); /* 80px com o separador: "Reforma…" ainda se lê */
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item:only-child {
+  min-width: 0;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__sep {
+  flex-shrink: 0;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__link,
+.umds-breadcrumb--truncate .umds-breadcrumb__current {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Em bloco, o alvo de 24px vem da altura da linha, e o texto fica centrado. */
+.umds-breadcrumb--truncate .umds-breadcrumb__link {
+  line-height: var(--umds-primitive-spacing-xxs); /* 24px */
+}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -14,6 +14,7 @@ export interface BreadcrumbItem {
  * Breadcrumb component — navegação estrutural (trilha de páginas).
  * @property {BreadcrumbItem[]} items - Lista de itens da trilha; o último é a página atual
  * @property {string} separator - Separador entre itens (padrão '/')
+ * @property {boolean} truncate - Trilha numa linha só, com reticências quando não cabe
  * @property {string} className - Classes CSS adicionais
  * @quandoUsar Mostrar ONDE o usuário está na hierarquia do sistema e permitir subir de nível. Use em páginas com profundidade 2 ou mais.
  * @quandoNaoUsar Para progresso dentro de um fluxo de etapas — use `Stepper`. Para navegar entre seções da mesma página, use `Tabs`.
@@ -23,6 +24,14 @@ export interface BreadcrumbProps {
     ariaLabel?: string;
     items: BreadcrumbItem[];
     separator?: string;
+    /**
+     * Mantém a trilha numa linha só. Quando não cabe, a página atual (último item)
+     * encolhe primeiro, com reticências, até uma largura mínima; só então os
+     * níveis anteriores encolhem. O rótulo inteiro fica no `title` de cada item.
+     * Use em barras de altura fixa (subheader) e quando o último nível é um texto
+     * longo, como o assunto de um processo. @default false
+     */
+    truncate?: boolean;
     className?: string;
 }
 declare function Breadcrumb(props: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -6,11 +6,20 @@ function Breadcrumb(props) {
         return props.separator || "/";
     }
     function classes() {
-        return ["umds-breadcrumb", props.className].filter(Boolean).join(" ");
+        return [
+            "umds-breadcrumb",
+            props.truncate ? "umds-breadcrumb--truncate" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
     }
     function itemList() {
         return props.items || [];
     }
+    function titleOf(item) {
+        return props.truncate ? item.label : undefined;
+    }
     function isLast(index) {
         return index === (props.items || []).length - 1;
     }
@@ -24,6 +33,6 @@ function Breadcrumb(props) {
             }
         }
     }
-    return (_jsx("nav", { "aria-label": props.ariaLabel || "Navegação estrutural", className: classes(), children: _jsx("ol", { className: "umds-breadcrumb__list", children: itemList()?.map((item, index) => (_jsxs("li", { className: "umds-breadcrumb__item", children: [index > 0 ? (_jsx("span", { "aria-hidden": "true", className: "umds-breadcrumb__sep", children: sep() })) : null, !isLast(index) && !!item.href ? (_jsx("a", { className: "umds-breadcrumb__link", href: item.href, children: item.label })) : null, !isLast(index) && !item.href ? (_jsx("span", { role: "button", className: "umds-breadcrumb__link", tabIndex: 0, onClick: (event) => item.onClick && item.onClick(), onKeyDown: (event) => handleItemKey(event, item), children: item.label })) : null, isLast(index) ? (_jsx("span", { "aria-current": "page", className: "umds-breadcrumb__current", children: item.label })) : null] }, index))) }) }));
+    return (_jsx("nav", { "aria-label": props.ariaLabel || "Navegação estrutural", className: classes(), children: _jsx("ol", { className: "umds-breadcrumb__list", children: itemList()?.map((item, index) => (_jsxs("li", { className: "umds-breadcrumb__item", children: [index > 0 ? (_jsx("span", { "aria-hidden": "true", className: "umds-breadcrumb__sep", children: sep() })) : null, !isLast(index) && !!item.href ? (_jsx("a", { className: "umds-breadcrumb__link", href: item.href, title: titleOf(item), children: item.label })) : null, !isLast(index) && !item.href ? (_jsx("span", { role: "button", className: "umds-breadcrumb__link", tabIndex: 0, title: titleOf(item), onClick: (event) => item.onClick && item.onClick(), onKeyDown: (event) => handleItemKey(event, item), children: item.label })) : null, isLast(index) ? (_jsx("span", { "aria-current": "page", className: "umds-breadcrumb__current", title: titleOf(item), children: item.label })) : null] }, index))) }) }));
 }
 export default Breadcrumb;

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. */