@1doc/1ds-react 2.13.0 → 2.15.0

package/dist/components/TimePicker/TimePicker.css

@@ -123,7 +123,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-medium); /* #EBEBEB */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px — protótipo --radius-lg 12px, aproximado para sm (coerente com input e dígitos) */
-  box-shadow: var(--umds-semantic-shadow-md);
+  box-shadow: var(--umds-semantic-shadow-bottom-md);
   padding: var(--umds-primitive-spacing-xxxs); /* 16px — protótipo --space-4 */
   box-sizing: border-box;
   animation: umds-timepicker-in var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard) both;

package/dist/components/Toast/Toast.css

@@ -4,7 +4,7 @@
    Variantes semânticas (prop `variant`): positive, negative, info, neutral
    (warning do protótipo mesclado no info — ambos laranja feedback-info).
    Tokens do protótipo mapeados para os tokens 1DS.
-   Snap 16/07 (decisões novas): sombra → --umds-semantic-shadow-md (token novo,
+   Snap 16/07 (decisões novas): sombra → --umds-semantic-shadow-bottom-md (token novo,
      valor idêntico ao literal do protótipo); radius 12px → md 16px (overlay
      flutuante → md, como Dropdown/Modal); radius 6px → sm 8px; font-size
      11px → xxxs 12px; spacing 12px → xxxs 16px (mesmas decisões do Alert —
@@ -24,7 +24,7 @@
   padding: var(--umds-primitive-spacing-xxxs, 16px); /* era 12px 16px (protótipo --space-3/--space-4) — snap 16/07 */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px universal (rodada ago/2026) — a exceção "overlay flutuante → md" caiu */
   border: 1px solid transparent;
-  box-shadow: var(--umds-semantic-shadow-md); /* protótipo --shadow-md — token novo com valor idêntico */
+  box-shadow: var(--umds-semantic-shadow-bottom-md); /* protótipo --shadow-md — token novo com valor idêntico */
   font-family: var(--umds-semantic-font-family-base);
   box-sizing: border-box;
   /* O Portal usa display: contents e não posiciona nada — o próprio toast

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;
 }
@@ -44,9 +47,12 @@
   flex-direction: column;
   position: relative;
   padding: var(--umds-primitive-spacing-mini); /* protótipo --space-3: sem equivalente 1DS exato */
-  background-color: var(--umds-semantic-color-neutral-light-pure);
+  /* Superfície elevada, como o Card: igual ao branco nos temas claros e no
+     alto contraste; nos escuros é mais clara que a página (o neutral-light-pure
+     de antes era quase da cor do fundo, e o balão sumia). */
+  background-color: var(--umds-semantic-color-background-elevated);
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
-  box-shadow: var(--umds-primitive-shadow-level-2);
+  box-shadow: var(--umds-semantic-shadow-bottom-lg);
   font-family: var(--umds-semantic-font-family-base);
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
   line-height: 1.25;
@@ -90,7 +96,7 @@
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: var(--umds-semantic-color-neutral-light-pure);
+  background-color: var(--umds-semantic-color-background-elevated);
   transform: rotate(45deg);
 }
 
@@ -178,6 +184,20 @@
   border-color: var(--umds-semantic-color-background-dark);
 }
 
+/* ── Temas escuros (1doc-dark e os *-dark da paleta) ──
+   A sombra preta não aparece sobre fundo escuro: o balão ganha o traço do Card
+   (neutral-light-medium), por dentro para não mudar o tamanho. A seta troca o
+   traço das duas faces expostas pelo mesmo tom e continua o contorno. O
+   variant="dark" (balão claro invertido) não precisa: ele contrasta sozinho. */
+[data-theme$="-dark"] .umds-tooltip__bubble:not(.umds-tooltip__bubble--dark) {
+  outline: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  outline-offset: calc(-1 * var(--umds-primitive-border-width-hairline));
+}
+
+[data-theme$="-dark"] .umds-tooltip__bubble:not(.umds-tooltip__bubble--dark) .umds-tooltip__arrow {
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
 /* ── Alto contraste ──
    O balão usa neutral-light-pure, que neste tema é preto como a página, e a
    sombra não aparece: sem traço o balão some. Outline para dentro (não

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/PedidosMatheus2.test.d.ts

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

package/dist/teste/PedidosMatheus2.test.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Avatar from "../components/Avatar/Avatar";
+import Dropdown from "../components/Dropdown/Dropdown";
+import EmptyState from "../components/EmptyState/EmptyState";
+import List from "../components/List/List";
+import ListItem from "../components/List/ListItem";
+import { lerArquivo } from "./lerArquivo";
+describe("Avatar · fallback e name", () => {
+    it("a foto que falha volta para as iniciais do name", () => {
+        const onError = vi.fn();
+        const { container } = render(_jsx(Avatar, { src: "/quebrada.png", name: "Cris Lima", onError: onError }));
+        fireEvent.error(container.querySelector("img"));
+        expect(container.querySelector("img")).toBeNull();
+        expect(container.textContent).toBe("CL");
+        expect(container.firstElementChild).toHaveClass("umds-avatar--letter");
+        expect(onError).toHaveBeenCalledTimes(1);
+    });
+    it("sem name, a falha mostra o children", () => {
+        const { container } = render(_jsx(Avatar, { src: "/quebrada.png", children: "ML" }));
+        fireEvent.error(container.querySelector("img"));
+        expect(container.textContent).toBe("ML");
+    });
+    it("um src novo tenta a foto de novo", () => {
+        const { container, rerender } = render(_jsx(Avatar, { src: "/quebrada.png", name: "Cris Lima" }));
+        fireEvent.error(container.querySelector("img"));
+        rerender(_jsx(Avatar, { src: "/boa.png", name: "Cris Lima" }));
+        expect(container.querySelector("img")).toHaveAttribute("src", "/boa.png");
+    });
+    it("name gera as iniciais (primeiro e último nome) e o nome acessível", () => {
+        const { container } = render(_jsx(Avatar, { name: "Matheus de Souza" }));
+        expect(container.textContent).toBe("MS");
+        expect(container.firstElementChild).toHaveAttribute("aria-label", "Matheus de Souza");
+        expect(container.firstElementChild).toHaveAttribute("role", "img");
+    });
+});
+describe("Dropdown · onSelect no item", () => {
+    it("chama a ação do item com os campos próprios, e depois o onSelect do Dropdown", async () => {
+        const ordem = [];
+        const doItem = vi.fn((item) => ordem.push("item:" + item.command));
+        const doMenu = vi.fn(() => ordem.push("menu"));
+        render(_jsx(Dropdown, { ariaLabel: "A\u00E7\u00F5es", onSelect: doMenu, items: [{ key: "a", label: "Assinar", command: "assinar", onSelect: doItem }], children: _jsx("button", { type: "button", children: "Abrir" }) }));
+        fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+        fireEvent.click(await screen.findByRole("menuitem", { name: "Assinar" }));
+        expect(ordem).toEqual(["item:assinar", "menu"]);
+    });
+});
+describe("ListItem · variant e li", () => {
+    it("variant primary marca a classe sem aria-current", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { variant: "primary", href: "#c", title: "Circular" }) }));
+        const link = screen.getByRole("link", { name: "Circular" });
+        expect(link).toHaveClass("umds-list-item--primary");
+        expect(link).not.toHaveAttribute("aria-current");
+    });
+    it("liClassName e liStyle vão para o li", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando", liClassName: "entra", liStyle: { "--ordem": 2 }, onClick: () => { } }) }));
+        const li = container.querySelector("li");
+        expect(li).toHaveClass("umds-list__item");
+        expect(li).toHaveClass("entra");
+        expect(li.style.getPropertyValue("--ordem")).toBe("2");
+    });
+});
+describe("EmptyState · fill e List · emptyFill", () => {
+    it("fill escreve a classe; List repassa emptyFill", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(EmptyState, { title: "Vazio", fill: true }), _jsx(List, { ariaLabel: "Docs", isEmpty: true, emptyFill: true })] }));
+        expect(container.querySelector(".umds-empty-state--fill")).not.toBeNull();
+        expect(container.querySelector(".umds-list--empty-fill .umds-empty-state--fill")).not.toBeNull();
+    });
+});
+describe("AppShell e StatCard · CSS", () => {
+    it("o AppShell dá a cor de texto do tema a quem herda", async () => {
+        const css = (await lerArquivo("../core/src/components/AppShell/AppShell.css")).replace(/\r\n/g, "\n");
+        const bloco = css.slice(css.indexOf(".umds-app-shell {"), css.indexOf("}", css.indexOf(".umds-app-shell {")));
+        expect(bloco).toContain("color: var(--umds-semantic-color-neutral-dark-pure)");
+    });
+    it("a StatCard com segunda medida empilha em largura pequena", async () => {
+        const css = (await lerArquivo("../core/src/components/StatCard/StatCard.css")).replace(/\r\n/g, "\n");
+        expect(css).toContain("container-type: inline-size");
+        expect(css).toMatch(/@container \(max-width: 240px\)/);
+    });
+});

package/dist/teste/SegmentedControlSuperficie.test.js

@@ -27,7 +27,7 @@ describe("SegmentedControl · variant surface", () => {
         const escolhido = bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,\n.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover");
         expect(escolhido).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
         expect(escolhido).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-bold\)/);
-        expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-md\)/);
+        expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-bottom-md\)/);
         expect(bloco(t, ".umds-segmented--surface .umds-segmented__track")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
         expect(t).toMatch(/\.umds-segmented__input:checked \+ \.umds-segmented__item,\n\.umds-segmented__input:checked \+ \.umds-segmented__item:hover \{\n\s*background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
     });

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.15.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.15.0",
+    "@1doc/1ds-tokens": "0.8.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-");
+  });
+});