@1doc/1ds-react 2.13.0 → 2.15.0

package/dist/components/BottomNavigation/BottomNavigation.css

@@ -104,7 +104,7 @@
   box-sizing: border-box;
   padding-bottom: var(--umds-primitive-spacing-quarck); /* 4px */
   border-top: none;
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-top-sm);
   /* o disco ultrapassa o topo da barra: sem isto ele seria recortado */
   overflow: visible;
 }
@@ -131,7 +131,7 @@
      espaço, para o rótulo não descer junto e a linha de rótulos ficar reta. */
   margin-top: -12px;
   margin-bottom: -4px;
-  box-shadow: var(--umds-semantic-shadow-sm);
+  box-shadow: var(--umds-semantic-shadow-bottom-sm);
   flex-shrink: 0;
 }
 

package/dist/components/BottomSheet/BottomSheet.css

@@ -45,7 +45,7 @@
   background-color: var(--umds-semantic-color-background-elevated);
   border-top-left-radius: var(--umds-primitive-border-radius-sm);
   border-top-right-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-lg);
+  box-shadow: var(--umds-semantic-shadow-top-sm);
   outline: none;
   animation: umds-bottomsheet-entrada var(--umds-semantic-motion-duration-base)
     var(--umds-semantic-motion-easing-standard);
@@ -153,7 +153,7 @@
   margin: 0 calc(-1 * var(--umds-primitive-spacing-xxxs))
     calc(-1 * var(--umds-primitive-spacing-xxxs));
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-top-sm);
   flex-shrink: 0;
 }
 

package/dist/components/Box/Box.css

@@ -96,9 +96,9 @@
 .umds-box--radius-circular { border-radius: var(--umds-primitive-border-radius-circular); }
 
 /* ── Elevação ── */
-.umds-box--shadow-level1 { box-shadow: var(--umds-primitive-shadow-level-1); }
-.umds-box--shadow-level2 { box-shadow: var(--umds-primitive-shadow-level-2); }
-.umds-box--shadow-level3 { box-shadow: var(--umds-primitive-shadow-level-3); }
+.umds-box--shadow-level1 { box-shadow: var(--umds-semantic-shadow-bottom-md); }
+.umds-box--shadow-level2 { box-shadow: var(--umds-semantic-shadow-bottom-lg); }
+.umds-box--shadow-level3 { box-shadow: var(--umds-semantic-shadow-bottom-xl); }
 
 /* ── Layout flex (direction, gap, align, justify, wrap) ──
    Liga quando qualquer uma das props é passada; mesmos nomes e valores do Stack. */

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

@@ -15,10 +15,10 @@
 
 /* ── Sombras (tokens semânticos oficiais — TOKEN-MAP §3b) ── */
 .umds-card--shadow-none { box-shadow: none; }
-.umds-card--shadow-xs   { box-shadow: var(--umds-semantic-shadow-xs); }
-.umds-card--shadow-sm   { box-shadow: var(--umds-semantic-shadow-sm); }
-.umds-card--shadow-md   { box-shadow: var(--umds-semantic-shadow-md); }
-.umds-card--shadow-lg   { box-shadow: var(--umds-semantic-shadow-lg); }
+.umds-card--shadow-xs   { box-shadow: var(--umds-semantic-shadow-bottom-xs); }
+.umds-card--shadow-sm   { box-shadow: var(--umds-semantic-shadow-bottom-sm); }
+.umds-card--shadow-md   { box-shadow: var(--umds-semantic-shadow-bottom-md); }
+.umds-card--shadow-lg   { box-shadow: var(--umds-semantic-shadow-bottom-lg); }
 
 /* ── Padding ── */
 .umds-card--padding-none { padding: 0; }
@@ -37,7 +37,7 @@
 
 .umds-card--hoverable:hover {
   border-color: var(--umds-semantic-color-primary-medium); /* #6393DB */
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md */
   transform: translateY(-1px);
 }
 

package/dist/components/Chart/Chart.css

@@ -215,7 +215,7 @@
   border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
   border-radius: var(--umds-primitive-border-radius-sm);
   background-color: var(--umds-semantic-color-neutral-light-pure);
-  box-shadow: var(--umds-primitive-shadow-level-2);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
   line-height: var(--umds-primitive-font-line-height-lg);
   white-space: nowrap;

package/dist/components/Coachmark/Coachmark.css

@@ -64,7 +64,7 @@
   background: var(--umds-semantic-color-background-white);
   color: var(--umds-semantic-color-neutral-dark-pure);
   border-radius: var(--umds-primitive-border-radius-md); /* 16px */
-  box-shadow: var(--umds-primitive-shadow-level-3);
+  box-shadow: var(--umds-semantic-shadow-bottom-xl);
   outline: none;
 }
 

package/dist/components/Combobox/Combobox.css

@@ -231,7 +231,7 @@
   background-color: var(--umds-semantic-color-background-elevated);
   border: 1px solid var(--umds-semantic-color-neutral-light-down);
   border-radius: var(--umds-primitive-border-radius-sm);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   z-index: var(--umds-semantic-layer-popover);
   max-height: 300px; /* literal, igual ao Select — candidato a novo token */
   display: flex;

package/dist/components/ConfirmDialog/ConfirmDialog.css

@@ -39,7 +39,7 @@
 .umds-confirm-dialog {
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px universal (rodada ago/2026) — era md */
-  box-shadow: var(--umds-semantic-shadow-lg); /* protótipo --shadow-lg */
+  box-shadow: var(--umds-semantic-shadow-center-xl); /* modal: mesma sombra do Modal */
   width: 100%;
   max-width: 440px;
   overflow: hidden;

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

@@ -178,7 +178,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   padding: var(--umds-primitive-spacing-xxxs); /* 16px */
   gap: var(--umds-primitive-spacing-xxxs); /* 16px */
   box-sizing: border-box;

package/dist/components/Drawer/Drawer.css

@@ -71,7 +71,7 @@
   box-sizing: border-box;
   padding: var(--umds-primitive-spacing-xxxs);
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-lg);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
   outline: none;
 }
 
@@ -189,7 +189,7 @@
   margin: 0 calc(-1 * var(--umds-primitive-spacing-xxxs))
     calc(-1 * var(--umds-primitive-spacing-xxxs));
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   flex-shrink: 0;
 }
 

package/dist/components/Dropdown/Dropdown.css

@@ -35,7 +35,7 @@
   background: var(--umds-semantic-color-background-elevated); /* superfície elevada: igual ao white no light; mais clara no dark (decisão 25/07) */
   border: 1px solid var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
   border-radius: var(--umds-primitive-border-radius-sm); /* era 12px (protótipo --radius-lg) — snap 14/07: painel overlay → md */
-  box-shadow: var(--umds-semantic-shadow-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* era 0 4px 16px rgba(0,0,0,0.12) — mapeado para shadow-md 14/07 */
   font-family: var(--umds-semantic-font-family-base);
   min-width: 160px; /* dimensão do protótipo sem token 1DS */
   transition: opacity var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
@@ -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,14 +7,31 @@ 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`.
+ * @property {function} onSelect - Ação deste item: chamada ao escolhê-lo, antes do `onSelect` do Dropdown. Dispensa o switch por `key` e o cast para um tipo próprio.
+ *
+ * O item aceita campos próprios (`command`, `id`, `payload`...), que voltam
+ * intactos no `onSelect`: não é preciso converter para outro tipo.
  */
 export interface DropdownItem {
+    /** Ação deste item, chamada ao escolhê-lo (antes do `onSelect` do Dropdown). */
+    onSelect?: (item: DropdownItem) => void;
+    /** Campos próprios do produto (`command`, `payload`...) voltam intactos no `onSelect`. */
+    [campo: string]: any;
     key: string;
     label: string;
     icon?: IconProp;
     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

@@ -211,6 +211,8 @@ function Dropdown(props) {
     function handleSelect(item) {
         if (item.disabled)
             return;
+        if (item.onSelect)
+            item.onSelect(item);
         if (props.onSelect) {
             props.onSelect(item);
         }
@@ -302,8 +304,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 +327,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 +390,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/EmptyState/EmptyState.css

@@ -130,3 +130,15 @@
   outline: 2px solid var(--umds-semantic-color-primary-pure);
   outline-offset: 2px;
 }
+
+/* ── fill: ocupa e centraliza no espaço disponível ──
+   Para o vazio de uma coluna que rola: cresce no pai flex (flex: 1) e, num pai
+   com altura definida, ocupa a altura toda (min-height). O conteúdo continua
+   centralizado pela regra base. */
+.umds-empty-state--fill {
+  flex: 1 1 auto;
+  align-self: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+}

package/dist/components/EmptyState/EmptyState.d.ts

@@ -11,6 +11,7 @@ import './EmptyState.css';
  * @property {function} onAction - Callback acionado ao clicar no botão de ação
  * @property {string} size - Tamanho do bloco: 'sm' | 'md' | 'lg'
  * @property {string} className - Classes CSS adicionais
+ * @property {boolean} fill - Ocupa e centraliza no espaço disponível: cresce no pai flex e, num pai com altura definida, fica no meio dele (o vazio de uma coluna que rola)
  * @quandoUsar Quando NÃO HÁ dados para mostrar: lista vazia, busca sem resultado, área ainda não configurada. Traz ícone, mensagem e ação opcional.
  * @quandoNaoUsar Enquanto os dados ainda estão CARREGANDO — use `Skeleton` ou `Spinner`. Estado vazio é resposta definitiva, não espera.
  */
@@ -22,6 +23,8 @@ export interface EmptyStateProps {
     actionLabel?: string;
     onAction?: () => void;
     size?: "sm" | "md" | "lg";
+    /** Ocupa e centraliza no espaço disponível (coluna que rola, painel). @default false */
+    fill?: boolean;
     className?: string;
 }
 import { IconProp } from "../Icon/Icon";

package/dist/components/EmptyState/EmptyState.js

@@ -7,6 +7,7 @@ function EmptyState(props) {
         return [
             "umds-empty-state",
             `umds-empty-state--${props.size || "md"}`,
+            props.fill ? "umds-empty-state--fill" : "",
             props.className,
         ]
             .filter(Boolean)

package/dist/components/Kanban/Kanban.css

@@ -65,7 +65,7 @@
 
 .umds-kanban__handle:hover .umds-kanban-card {
   border-color: var(--umds-semantic-color-primary-medium);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-kanban__handle:focus {
@@ -80,7 +80,7 @@
 /* Pego pelo teclado: o cartão "levanta". */
 .umds-kanban__item--pego .umds-kanban-card {
   border-color: var(--umds-semantic-color-primary-pure);
-  box-shadow: var(--umds-semantic-shadow-lg);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
 }
 
 /* Origem do arrasto com o ponteiro: fica o lugar, esmaecido. */

package/dist/components/Kanban/KanbanCard.css

@@ -18,7 +18,7 @@
   border: 1px solid var(--umds-semantic-color-neutral-light-medium);
   border-radius: var(--umds-primitive-border-radius-sm);
   background-color: var(--umds-semantic-color-background-elevated);
-  box-shadow: var(--umds-semantic-shadow-xs);
+  box-shadow: var(--umds-semantic-shadow-bottom-xs);
   font-family: var(--umds-semantic-font-family-base);
   color: var(--umds-semantic-color-neutral-dark-pure);
   text-align: left;
@@ -33,7 +33,7 @@
 
 .umds-kanban-card--interativo:hover {
   border-color: var(--umds-semantic-color-primary-medium);
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
 }
 
 .umds-kanban-card--interativo:focus-visible {