@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/teste/SelectFiltroCorETamanho.test.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Select from "../components/Select/Select";
+const MARCADORES = [
+    { label: "Urgente", value: "urgente", color: "var(--umds-semantic-color-feedback-negative-pure)" },
+    { label: "Revisão", value: "revisao", color: "var(--umds-semantic-color-primary-pure)" },
+    { label: "Sem marcador", value: "nenhum" },
+];
+describe("Select filtro · tamanho e fundo", () => {
+    it("as variantes de filtro nascem no tamanho sm; size explícito manda; o padrão segue md", () => {
+        const { container, rerender } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter" }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).toHaveClass("umds-select--sm");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "search" }));
+        expect(raiz()).toHaveClass("umds-select--sm");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "combo" }));
+        expect(raiz()).toHaveClass("umds-select--sm");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", size: "md" }));
+        expect(raiz()).toHaveClass("umds-select--md");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES }));
+        expect(raiz()).toHaveClass("umds-select--md");
+        expect(raiz()).not.toHaveClass("umds-select--sm");
+    });
+    it("o azul-claro do gatilho só vem com valor escolhido (--has-value); sem valor, não", () => {
+        const { container, rerender } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores" }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).not.toHaveClass("umds-select--has-value");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", value: "urgente" }));
+        expect(raiz()).toHaveClass("umds-select--has-value");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, placeholder: "Marcadores", value: "urgente" }));
+        expect(raiz()).not.toHaveClass("umds-select--has-value");
+    });
+    it("o valor vazio do emptyOptionLabel volta ao estado sem valor", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", emptyOptionLabel: "Todos", value: "" }));
+        expect(container.firstElementChild).not.toHaveClass("umds-select--has-value");
+    });
+});
+describe("Select · cor por opção", () => {
+    it("a lista mostra uma amostra por opção com color; sem color, não", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const opcoes = [...container.querySelectorAll('[role="option"]')];
+        expect(opcoes[0].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
+        expect(opcoes[0].querySelector(".umds-select__swatch").style.background).toContain("--umds-semantic-color-feedback-negative-pure");
+        expect(opcoes[1].querySelector(".umds-select__swatch")).not.toBeNull();
+        expect(opcoes[2].querySelector(".umds-select__swatch")).toBeNull();
+    });
+    it("o gatilho ganha a cor da opção escolhida (seleção única)", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", value: "revisao" }));
+        const amostra = container.querySelector(".umds-select__trigger .umds-select__swatch");
+        expect(amostra.style.background).toContain("--umds-semantic-color-primary-pure");
+    });
+    it("opção escolhida sem color e estado sem valor: o gatilho não tem amostra", () => {
+        const { container, rerender } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, placeholder: "Marcadores", value: "nenhum" }));
+        expect(container.querySelector(".umds-select__trigger .umds-select__swatch")).toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, placeholder: "Marcadores" }));
+        expect(container.querySelector(".umds-select__trigger .umds-select__swatch")).toBeNull();
+    });
+    it("triggerSwatch explícito manda sobre a cor da opção", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, value: "urgente", triggerSwatch: "var(--umds-semantic-color-feedback-positive-pure)" }));
+        const amostras = container.querySelectorAll(".umds-select__trigger .umds-select__swatch");
+        expect(amostras).toHaveLength(1);
+        expect(amostras[0].style.background).toContain("--umds-semantic-color-feedback-positive-pure");
+    });
+    it("na seleção múltipla o gatilho não pinta amostra (são várias), mas a lista mostra as cores", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, multiple: true, value: ["urgente", "revisao"] }));
+        expect(container.querySelector(".umds-select__trigger .umds-select__swatch")).toBeNull();
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelectorAll('[role="option"] .umds-select__swatch')).toHaveLength(2);
+    });
+    it("a cor não vira texto nem entra no nome acessível da opção", () => {
+        render(_jsx(Select, { ariaLabel: "x", options: MARCADORES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(screen.getByRole("option", { name: "Urgente" })).toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/SelectItemComEscopo.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Select from "../components/Select/Select";
+const OPCOES = [
+    { label: "Urgente", value: "urgente", etiqueta: "Prazo hoje" },
+    { label: "Rotina", value: "rotina", etiqueta: "Sem prazo" },
+];
+const item = ({ optionData }) => (_jsxs("span", { "data-testid": "item", children: [_jsx("b", { children: optionData.label }), " ", _jsx("i", { children: optionData.etiqueta })] }));
+describe("Select · item com escopo da opção", () => {
+    it("a lista mostra o item de cada opção, recebendo a opção (optionData e o apelido option)", () => {
+        const vistos = [];
+        render(_jsx(Select, { ariaLabel: "Prioridade", options: OPCOES, item: (escopo) => {
+                vistos.push(escopo);
+                return _jsx("span", { "data-testid": "item", children: escopo.optionData.label });
+            } }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(screen.getAllByTestId("item").map((n) => n.textContent)).toEqual(["Urgente", "Rotina"]);
+        expect(vistos[0].optionData).toBe(OPCOES[0]);
+        expect(vistos[0].option).toBe(OPCOES[0]);
+    });
+    it("o gatilho com a opção escolhida mostra o conteúdo do item, não o texto", () => {
+        render(_jsx(Select, { ariaLabel: "Prioridade", options: OPCOES, value: "urgente", item: item }));
+        const gatilho = screen.getByRole("combobox");
+        expect(gatilho.querySelector(".umds-select__trigger-item")).not.toBeNull();
+        expect(gatilho).toHaveTextContent("Urgente");
+        expect(gatilho).toHaveTextContent("Prazo hoje");
+        expect(gatilho.querySelector(".umds-select__placeholder")).toBeNull();
+    });
+    it("sem valor o gatilho mostra o placeholder; escolher na lista passa o item para o gatilho", () => {
+        function App() {
+            return _jsx(Select, { ariaLabel: "Prioridade", placeholder: "Escolha", options: OPCOES, item: item });
+        }
+        render(_jsx(App, {}));
+        const gatilho = screen.getByRole("combobox");
+        expect(gatilho).toHaveTextContent("Escolha");
+        expect(gatilho.querySelector(".umds-select__trigger-item")).toBeNull();
+        fireEvent.click(gatilho);
+        fireEvent.click(screen.getAllByRole("option")[1]);
+        expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toHaveTextContent("Rotina");
+    });
+    it("seleção múltipla segue com o texto no gatilho", () => {
+        render(_jsx(Select, { ariaLabel: "Prioridade", multiple: true, options: OPCOES, value: ["urgente"], item: item }));
+        expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+    });
+    it("sem item nada muda: o gatilho mostra o rótulo; item como nó solto (legado) não vai ao gatilho", () => {
+        const { rerender } = render(_jsx(Select, { ariaLabel: "Prioridade", options: OPCOES, value: "urgente" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+        expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "Prioridade", options: OPCOES, value: "urgente", item: _jsx("em", { children: "fixo" }) }));
+        expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+        expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+    });
+});

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

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

package/dist/teste/SelectListaFiltro.test.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import Select from "../components/Select/Select";
+import { lerArquivo } from "./lerArquivo";
+const cssSelect = await lerArquivo("../core/src/components/Select/Select.css");
+const OPCOES = [
+    { label: "Urgente", value: "urgente" },
+    { label: "Revisão", value: "revisao" },
+];
+afterEach(() => vi.restoreAllMocks());
+const lista = (container) => container.querySelector(".umds-select__dropdown");
+/** jsdom não tem layout: só a lista "mede" o que o teste mandar. */
+function medirLista(direita, larguraDaJanela) {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function () {
+        const eLista = this.classList.contains("umds-select__dropdown");
+        return { top: 0, bottom: 0, left: 0, right: eLista ? direita : 0, width: 0, height: 0, x: 0, y: 0, toJSON() { } };
+    });
+    Object.defineProperty(window, "innerWidth", { value: larguraDaJanela, configurable: true });
+}
+describe("Select filtro · listMinWidth", () => {
+    it("um número vira px e a lista nunca fica mais estreita que o gatilho", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter", listMinWidth: 220 }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(lista(container).style.minWidth).toBe("max(100%, 220px)");
+    });
+    it("uma medida CSS vale como veio", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter", listMinWidth: "18rem" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(lista(container).style.minWidth).toBe("max(100%, 18rem)");
+    });
+    it("0 é um valor (sem mínimo além do gatilho), não ausência", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter", listMinWidth: 0 }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(lista(container).style.minWidth).toBe("max(100%, 0px)");
+    });
+    it("sem a prop o mínimo é o do CSS (240px), sem estilo inline", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(lista(container).style.minWidth).toBe("");
+    });
+    it("o Select padrão ignora a prop (a lista é a largura do campo)", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, listMinWidth: 220 }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(lista(container).style.minWidth).toBe("");
+    });
+});
+describe("Select filtro · nunca passa da borda da janela", () => {
+    it("a lista que estoura a borda direita se alinha ao fim do gatilho", async () => {
+        medirLista(1457, 1440);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(container.querySelector(".umds-select--list-end")).not.toBeNull());
+    });
+    it("a lista que cabe fica onde está", async () => {
+        medirLista(900, 1440);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(lista(container)).not.toBeNull());
+        expect(container.querySelector(".umds-select--list-end")).toBeNull();
+    });
+    it("deixa 8px de respiro: encostada na borda ainda alinha", async () => {
+        medirLista(1436, 1440);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(container.querySelector(".umds-select--list-end")).not.toBeNull());
+    });
+    it("fechar desliga o alinhamento", async () => {
+        medirLista(1457, 1440);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(container.querySelector(".umds-select--list-end")).not.toBeNull());
+        fireEvent.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(container.querySelector(".umds-select--list-end")).toBeNull());
+    });
+    it("o Select padrão (não filtro) não é movido", async () => {
+        medirLista(1457, 1440);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(lista(container)).not.toBeNull());
+        expect(container.querySelector(".umds-select--list-end")).toBeNull();
+    });
+});
+describe("Select filtro · CSS", () => {
+    const css = cssSelect.replace(/\r\n/g, "\n");
+    const bloco = (seletor) => {
+        const inicio = css.indexOf(seletor + " {");
+        return css.slice(inicio, css.indexOf("}", inicio));
+    };
+    it("o wrapper do filtro é fit-content (o auto o esticava até o pai e a lista herdava essa largura)", () => {
+        expect(bloco(".umds-select--filter")).toMatch(/width:\s*fit-content/);
+    });
+    it("a busca da lista fica fora da conta da largura natural", () => {
+        expect(bloco(".umds-select--filter .umds-select__search-container")).toMatch(/contain:\s*inline-size/);
+        expect(bloco(".umds-select__search-input")).toMatch(/min-width:\s*0/);
+    });
+    it("o alinhamento ao fim ancora a lista pela direita", () => {
+        const b = bloco(".umds-select--filter.umds-select--list-end .umds-select__dropdown");
+        expect(b).toMatch(/left:\s*auto/);
+        expect(b).toMatch(/right:\s*0/);
+    });
+});

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

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

package/dist/teste/StatCardSecundariaETom.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import StatCard from "../components/StatCard/StatCard";
+describe("StatCard · segunda medida e valueTone", () => {
+    it("secondaryValue e secondaryLabel vêm depois do corpo, e o número principal segue antes do rótulo", () => {
+        const { container } = render(_jsx(StatCard, { value: "22,31%", label: "Efici\u00EAncia", description: "Meu Setor", secondaryValue: "14,11%", secondaryLabel: "Geral", labelPosition: "top" }));
+        const filhos = [...container.firstElementChild.children].map((e) => e.className);
+        expect(filhos[filhos.length - 1]).toBe("umds-stat-card__secundaria");
+        const secundaria = container.querySelector(".umds-stat-card__secundaria");
+        expect(secundaria.querySelector(".umds-stat-card__valor-secundario")).toHaveTextContent("14,11%");
+        expect(secundaria.querySelector(".umds-stat-card__rotulo-secundario")).toHaveTextContent("Geral");
+        expect(container.firstElementChild).toHaveClass("umds-stat-card--com-secundaria");
+        const texto = container.firstElementChild.textContent;
+        expect(texto.indexOf("22,31%")).toBeLessThan(texto.indexOf("Eficiência"));
+        expect(texto.indexOf("Eficiência")).toBeLessThan(texto.indexOf("14,11%"));
+    });
+    it("secondaryValue 0 aparece; vazio e ausente não", () => {
+        const { container, rerender } = render(_jsx(StatCard, { value: "5", label: "x", secondaryValue: 0 }));
+        expect(container.querySelector(".umds-stat-card__valor-secundario")).toHaveTextContent("0");
+        rerender(_jsx(StatCard, { value: "5", label: "x", secondaryValue: "" }));
+        expect(container.querySelector(".umds-stat-card__secundaria")).toBeNull();
+        rerender(_jsx(StatCard, { value: "5", label: "x" }));
+        expect(container.querySelector(".umds-stat-card__secundaria")).toBeNull();
+        expect(container.firstElementChild).not.toHaveClass("umds-stat-card--com-secundaria");
+    });
+    it("secondaryValue sem secondaryLabel não desenha o rótulo", () => {
+        const { container } = render(_jsx(StatCard, { value: "5", label: "x", secondaryValue: "9" }));
+        expect(container.querySelector(".umds-stat-card__rotulo-secundario")).toBeNull();
+    });
+    it("valueTone escreve a classe do tom; default e ausente não", () => {
+        const { container, rerender } = render(_jsx(StatCard, { value: "5", label: "x", valueTone: "negative" }));
+        expect(container.firstElementChild).toHaveClass("umds-stat-card--valor-negative");
+        rerender(_jsx(StatCard, { value: "5", label: "x", valueTone: "primary" }));
+        expect(container.firstElementChild).toHaveClass("umds-stat-card--valor-primary");
+        rerender(_jsx(StatCard, { value: "5", label: "x", valueTone: "default" }));
+        expect(container.firstElementChild.className).not.toMatch(/valor-/);
+        rerender(_jsx(StatCard, { value: "5", label: "x" }));
+        expect(container.firstElementChild.className).not.toMatch(/valor-/);
+    });
+    it("valueTone não mexe na variant do ícone", () => {
+        const { container } = render(_jsx(StatCard, { value: "5", label: "x", variant: "positive", valueTone: "negative" }));
+        expect(container.firstElementChild).toHaveClass("umds-stat-card--positive", "umds-stat-card--valor-negative");
+    });
+});

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

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

package/dist/teste/StatCardTamanhoSm.test.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import StatCard from "../components/StatCard/StatCard";
+import { lerArquivo } from "./lerArquivo";
+const cssStatCard = await lerArquivo("../core/src/components/StatCard/StatCard.css");
+const css = cssStatCard.replace(/\r\n/g, "\n");
+const bloco = (seletor) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+};
+describe("StatCard · size", () => {
+    it("sm escreve a classe; sem a prop e com md o cartão é o de antes", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", size: "sm" }), _jsx(StatCard, { value: 44, label: "N\u00E3o lidos" }), _jsx(StatCard, { value: 44, label: "N\u00E3o lidos", size: "md" })] }));
+        expect(container.children[0]).toHaveClass("umds-stat-card--sm");
+        expect(container.children[1]).not.toHaveClass("umds-stat-card--sm");
+        expect(container.children[2]).not.toHaveClass("umds-stat-card--sm");
+    });
+    it("o número do sm é 18px/800, e a regra vence o 32/800 do rótulo no topo", () => {
+        const regra = bloco(".umds-stat-card.umds-stat-card--sm .umds-stat-card__valor");
+        expect(regra).toMatch(/font-size:\s*1\.125rem/);
+        expect(regra).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+        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("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");
+        const rotulo = container.querySelector(".umds-stat-card__rotulo");
+        expect(valor.compareDocumentPosition(rotulo) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+});

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

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

package/dist/teste/TabsCompacta.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import Tabs from "../components/Tabs/Tabs";
+import Tab from "../components/Tabs/Tab";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssTabs = await lerArquivo("../core/src/components/Tabs/Tabs.css");
+const CSS = { Tabs: cssTabs };
+const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+describe("Tabs · density", () => {
+    it("compact escreve a classe na raiz; sem a prop e com default, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Tabs, { value: "0", density: "compact", children: _jsx(Tab, { label: "A", index: "0" }) }), _jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "B", index: "0" }) }), _jsx(Tabs, { value: "0", density: "default", children: _jsx(Tab, { label: "C", index: "0" }) })] }));
+        expect(container.children[0]).toHaveClass("umds-tabs--compact");
+        expect(container.children[1]).not.toHaveClass("umds-tabs--compact");
+        expect(container.children[2]).not.toHaveClass("umds-tabs--compact");
+    });
+    it("CSS: a compacta tem altura mínima de 40px (degrau sm) e padding vertical de 8px; o padrão segue em 48px", () => {
+        const t = css("Tabs");
+        const compacta = bloco(t, ".umds-tabs--compact .umds-tabs__tab");
+        expect(compacta).toMatch(/min-height:\s*var\(--umds-primitive-spacing-sm\)/);
+        expect(compacta).toMatch(/padding-block:\s*var\(--umds-primitive-spacing-nano\)/);
+        expect(bloco(t, ".umds-tabs__tab")).toMatch(/min-height:\s*48px/);
+    });
+    it("a pílula do contador é cinza na aba inativa e azul só na ativa (nas duas densidades)", () => {
+        const t = css("Tabs");
+        expect(bloco(t, ".umds-tabs__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+        expect(bloco(t, ".umds-tabs__tab--selected .umds-tabs__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
+        expect(t).not.toMatch(/--compact[^{]*\.umds-tabs__count/);
+    });
+});

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

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

package/dist/teste/TagPositivoTingido.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Tag from "../components/Tag/Tag";
+import { lerArquivo } from "./lerArquivo";
+const cssTag = await lerArquivo("../core/src/components/Tag/Tag.css");
+const tema1doc = await lerArquivo("../tokens/dist/css/theme-1doc.css");
+const temaEscuro = await lerArquivo("../tokens/dist/css/theme-1doc-dark.css");
+const temaAltoContraste = await lerArquivo("../tokens/dist/css/theme-1doc-high-contrast.css");
+const css = cssTag.replace(/\r\n/g, "\n");
+const bloco = (seletor) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+};
+const TEMAS = { "theme-1doc.css": tema1doc, "theme-1doc-dark.css": temaEscuro, "theme-1doc-high-contrast.css": temaAltoContraste };
+const tema = (arquivo) => {
+    const texto = TEMAS[arquivo];
+    const cor = (nome) => texto.match(new RegExp("--umds-theme-" + nome + ":\\s*(#[0-9A-Fa-f]{6})"))[1];
+    return cor;
+};
+const luz = (hex) => {
+    const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
+    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+const contraste = (a, b) => {
+    const [x, y] = [luz(a), luz(b)].sort((m, n) => n - m);
+    return (x + 0.05) / (y + 0.05);
+};
+describe("Tag positive outlined sobre fundo tingido", () => {
+    it("escreve as classes que a regra de CSS escolhe", () => {
+        const { container } = render(_jsx(Tag, { label: "Entregue", variant: "positive", appearance: "outlined" }));
+        const tag = container.firstElementChild;
+        expect(tag).toHaveClass("umds-tag--outlined", "umds-tag--positive");
+    });
+    it("o texto é positive-dark e o contorno segue positive-pure", () => {
+        const regra = bloco(".umds-tag--outlined.umds-tag--positive");
+        expect(regra).toMatch(/color:\s*var\(--umds-semantic-color-feedback-positive-dark\)/);
+        expect(regra).toMatch(/border-color:\s*var\(--umds-semantic-color-feedback-positive-pure\)/);
+    });
+    it("no tema 1doc, sobre o azul-claro do card o texto passa de 4,5:1 (o pure dava 3,6:1)", () => {
+        const cor = tema("theme-1doc.css");
+        const fundo = cor("primary-light");
+        expect(contraste(cor("feedback-positive-pure"), fundo)).toBeLessThan(4.5);
+        expect(contraste(cor("feedback-positive-dark"), fundo)).toBeGreaterThanOrEqual(4.5);
+    });
+    it("nos temas escuro e de alto contraste o texto também passa de 4,5:1 sobre o fundo tingido e sobre a página", () => {
+        for (const arquivo of ["theme-1doc-dark.css", "theme-1doc-high-contrast.css"]) {
+            const cor = tema(arquivo);
+            for (const fundo of [cor("primary-light"), cor("background-white")]) {
+                expect(contraste(cor("feedback-positive-dark"), fundo)).toBeGreaterThanOrEqual(4.5);
+            }
+        }
+    });
+});

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

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

package/dist/teste/ToastAcaoEDetalhes.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Toast from "../components/Toast/Toast";
+import ToastStack from "../components/Toast/ToastStack";
+import { dismissAllToasts, toast } from "../utils/toast";
+afterEach(() => {
+    act(() => dismissAllToasts());
+});
+describe("Toast · ação e detalhes", () => {
+    it("actionLabel com onAction desenha o botão; acionar chama onAction e fecha", () => {
+        const aoAgir = vi.fn();
+        const aoFechar = vi.fn();
+        render(_jsx(Toast, { open: true, message: "Despacho enviado", actionLabel: "Desfazer", onAction: aoAgir, onClose: aoFechar }));
+        fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+        expect(aoAgir).toHaveBeenCalledTimes(1);
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("a ação roda antes de fechar", () => {
+        const ordem = [];
+        render(_jsx(Toast, { open: true, message: "x", actionLabel: "Ver processo", onAction: () => ordem.push("acao"), onClose: () => ordem.push("fechar") }));
+        fireEvent.click(screen.getByRole("button", { name: "Ver processo" }));
+        expect(ordem).toEqual(["acao", "fechar"]);
+    });
+    it("actionLabel sem onAction, ou onAction sem actionLabel, não desenha botão de ação", () => {
+        const { rerender } = render(_jsx(Toast, { open: true, message: "x", actionLabel: "Desfazer" }));
+        expect(screen.queryByRole("button", { name: "Desfazer" })).toBeNull();
+        rerender(_jsx(Toast, { open: true, message: "x", onAction: () => { } }));
+        expect(document.querySelector(".umds-toast__action")).toBeNull();
+    });
+    it("details vira uma lista de linhas abaixo da descrição", () => {
+        render(_jsx(Toast, { open: true, message: "3 anexos n\u00E3o enviados", description: "Corrija e envie de novo.", details: ["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"] }));
+        const itens = screen.getAllByRole("listitem");
+        expect(itens.map((i) => i.textContent)).toEqual(["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"]);
+    });
+    it("sem details não há lista", () => {
+        render(_jsx(Toast, { open: true, message: "Salvo" }));
+        expect(document.querySelector(".umds-toast__details")).toBeNull();
+    });
+    it("o botão de fechar continua ao lado da ação", () => {
+        render(_jsx(Toast, { open: true, message: "x", actionLabel: "Desfazer", onAction: () => { } }));
+        expect(screen.getByRole("button", { name: "Fechar notificação" })).toBeInTheDocument();
+    });
+});
+describe("toast() imperativo com ação e detalhes", () => {
+    it("passa ação e detalhes ao ToastStack, e acionar a ação fecha o toast", () => {
+        const aoAgir = vi.fn();
+        render(_jsx(ToastStack, {}));
+        act(() => {
+            toast({ message: "Despacho enviado", details: ["SADM", "SOBR"], actionLabel: "Desfazer", onAction: aoAgir });
+        });
+        expect(screen.getByText("Despacho enviado")).toBeInTheDocument();
+        expect(screen.getAllByRole("listitem")).toHaveLength(2);
+        fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+        expect(aoAgir).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText("Despacho enviado")).toBeNull();
+    });
+    it("toast com ação não some sozinho (duration 0); sem ação continua em 5000", () => {
+        vi.useFakeTimers();
+        try {
+            render(_jsx(ToastStack, {}));
+            act(() => {
+                toast({ message: "Com ação", actionLabel: "Desfazer", onAction: () => { } });
+                toast({ message: "Sem ação" });
+            });
+            expect(screen.getByText("Com ação")).toBeInTheDocument();
+            expect(screen.getByText("Sem ação")).toBeInTheDocument();
+            act(() => {
+                vi.advanceTimersByTime(5100);
+            });
+            expect(screen.queryByText("Sem ação")).toBeNull();
+            expect(screen.getByText("Com ação")).toBeInTheDocument();
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it("um duration explícito vale também com ação", () => {
+        vi.useFakeTimers();
+        try {
+            render(_jsx(ToastStack, {}));
+            act(() => {
+                toast({ message: "Curto", actionLabel: "Desfazer", onAction: () => { }, duration: 1000 });
+            });
+            act(() => {
+                vi.advanceTimersByTime(1100);
+            });
+            expect(screen.queryByText("Curto")).toBeNull();
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+});

package/dist/teste/lerArquivo.d.ts

@@ -0,0 +1 @@
+export declare function lerArquivo(relativo: string): Promise<string>;

package/dist/teste/lerArquivo.js

@@ -0,0 +1,12 @@
+/**
+ * Lê um arquivo do pacote (relativo à pasta `packages/react`) para os testes que conferem uma regra de CSS na
+ * fonte: o jsdom não tem cascata de arquivo, e o `css: false` do vitest esvazia o `?raw` do CSS.
+ * O `node:fs` entra por import dinâmico com nome calculado porque o `tsc` do pacote não traz os tipos do Node.
+ */
+const modulo = (nome) => import(/* @vite-ignore */ nome);
+export async function lerArquivo(relativo) {
+    const fs = await modulo("node:fs");
+    const path = await modulo("node:path");
+    const raiz = globalThis.process.cwd();
+    return fs.readFileSync(path.resolve(raiz, relativo), "utf8");
+}

package/dist/utils/html-seguro.d.ts

@@ -5,7 +5,10 @@
  * fora (um valor guardado, um texto colado) pode trazer `<img onerror>`,
  * `<a href="javascript:...">`, `<script>`, `style` e classes de outro site. Este
  * módulo reduz o HTML ao que o editor sabe escrever: negrito, itálico,
- * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação e link.
+ * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação, link,
+ * estilo de texto por token (`color`, `font-size`, `font-family` em `<span>`),
+ * alinhamento de bloco (`text-align`), imagem (`http(s)`, caminho ou `data:image`
+ * em PNG, JPEG, GIF e WebP) e tabela simples.
  *
  * Roda no navegador (precisa de DOM). Dentro de um `<template>` o HTML é inerte:
  * nada executa e nenhuma imagem carrega enquanto se higieniza. Sem DOM
@@ -19,8 +22,23 @@
 export declare const enderecoSeguro: (bruto: string) => string;
 /** Devolve o endereço pronto para `href`: o seguro como veio, ou `https://` + o texto quando não tem esquema. "" se perigoso ou vazio. */
 export declare const normalizarEndereco: (bruto: string) => string;
+/**
+ * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,
+ * cada uma só com um token do DS. Devolve a declaração limpa ("color: var(--x);") ou "".
+ */
+export declare const estiloDeTexto: (propriedade: string, valor: string) => string;
+/**
+ * Endereço de imagem que o editor aceita: `http(s)`, caminho (`/x`, `./x`, `../x`) ou
+ * `data:image` em base64 de PNG, JPEG, GIF ou WebP (SVG fica de fora: carrega script).
+ * Devolve o endereço limpo, ou "" se for perigoso ou vazio.
+ */
+export declare const imagemSegura: (bruto: string) => string;
 /** Reduz `html` ao que o editor escreve. Sem DOM, devolve o texto escapado. */
 export declare const sanitizarHtml: (html: string) => string;
+/** A tabela vazia que o editor insere: `linhas` × `colunas` células com uma quebra, para o cursor entrar. */
+export declare const htmlDaTabela: (linhas: number, colunas: number) => string;
+/** O `<img>` que o editor insere (endereço já seguro). */
+export declare const htmlDaImagem: (endereco: string, alt: string) => string;
 /** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
 export declare const htmlVazio: (html: string) => boolean;
 /** O `<a>` que o editor escreve quando o link não tem texto escolhido: o endereço (já seguro) é o href e o texto. */