@1doc/1ds-react 2.10.0 → 2.11.1

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

@@ -53,7 +53,7 @@ export const normalizarEndereco = (bruto) => {
 /** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
 const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
 const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
-const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-base\)$/;
 /**
  * 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 "".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.10.0",
+  "version": "2.11.1",
   "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-core": "2.10.0",
-    "@1doc/1ds-tokens": "0.5.0"
+    "@1doc/1ds-core": "2.11.1",
+    "@1doc/1ds-tokens": "0.7.0"
   },
   "publishConfig": {
     "access": "public"

package/src/teste/AccordionControlado.test.tsx

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+
+const ITENS = [
+  { id: "prazos", title: "Prazos", content: "Dez dias úteis.", defaultOpen: true },
+  { id: "anexos", title: "Anexos", content: "Até 10 MB." },
+  { id: "sigilo", title: "Sigilo", content: "Só o setor." },
+];
+const aberto = (nome: string) => screen.getByRole("button", { name: nome }).getAttribute("aria-expanded") === "true";
+
+describe("Accordion · não controlado (como antes)", () => {
+  it("começa pelos defaultOpen e o clique abre e fecha; onOpenChange avisa a nova lista", () => {
+    const aoMudar = vi.fn();
+    render(<Accordion items={ITENS} multiple onOpenChange={aoMudar} />);
+    expect(aberto("Prazos")).toBe(true);
+    fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+    expect(aberto("Anexos")).toBe(true);
+    expect(aoMudar).toHaveBeenLastCalledWith(["prazos", "anexos"]);
+    fireEvent.click(screen.getByRole("button", { name: "Prazos" }));
+    expect(aberto("Prazos")).toBe(false);
+    expect(aoMudar).toHaveBeenLastCalledWith(["anexos"]);
+  });
+
+  it("sem multiple, abrir um fecha o outro", () => {
+    render(<Accordion items={ITENS} />);
+    fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+    expect(aberto("Anexos")).toBe(true);
+    expect(aberto("Prazos")).toBe(false);
+  });
+});
+
+describe("Accordion · controlado (open e onOpenChange)", () => {
+  it("open manda: o que está em open está aberto, ignorando defaultOpen", () => {
+    render(<Accordion items={ITENS} open={["sigilo"]} />);
+    expect(aberto("Sigilo")).toBe(true);
+    expect(aberto("Prazos")).toBe(false);
+  });
+
+  it("o clique só pede (onOpenChange); sem o app mudar open, nada abre", () => {
+    const aoMudar = vi.fn();
+    render(<Accordion items={ITENS} multiple open={["prazos"]} onOpenChange={aoMudar} />);
+    fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+    expect(aoMudar).toHaveBeenCalledWith(["prazos", "anexos"]);
+    expect(aberto("Anexos")).toBe(false);
+  });
+
+  it("o app guarda a escolha: com o estado dele, abre, fecha e a lista chega em ordem", () => {
+    let ultima: string[] = [];
+    function App() {
+      const [abertos, setAbertos] = useState<string[]>([]);
+      return (
+        <Accordion
+          items={ITENS}
+          multiple
+          open={abertos}
+          onOpenChange={(ids: string[]) => {
+            ultima = ids;
+            setAbertos(ids);
+          }}
+        />
+      );
+    }
+    render(<App />);
+    expect(aberto("Prazos")).toBe(false);
+    fireEvent.click(screen.getByRole("button", { name: "Sigilo" }));
+    fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+    expect(ultima).toEqual(["sigilo", "anexos"]);
+    expect(aberto("Sigilo") && aberto("Anexos")).toBe(true);
+    fireEvent.click(screen.getByRole("button", { name: "Sigilo" }));
+    expect(ultima).toEqual(["anexos"]);
+    expect(aberto("Sigilo")).toBe(false);
+  });
+
+  it("open vazio é controlado (tudo fechado), não ausência", () => {
+    render(<Accordion items={ITENS} open={[]} />);
+    expect(aberto("Prazos")).toBe(false);
+  });
+
+  it("item desabilitado não pede nada", () => {
+    const aoMudar = vi.fn();
+    render(<Accordion items={[{ id: "x", title: "Bloqueado", content: "...", disabled: true }]} open={[]} onOpenChange={aoMudar} />);
+    fireEvent.click(screen.getByRole("button", { name: "Bloqueado" }));
+    expect(aoMudar).not.toHaveBeenCalled();
+  });
+});

package/src/teste/BadgeAttachedTomEPadding.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+import { lerArquivo } from "./lerArquivo";
+
+const cssBadge = await lerArquivo("../core/src/components/Badge/Badge.css");
+
+const css = cssBadge.replace(/\r\n/g, "\n");
+const bloco = (seletor: string) => {
+  const inicio = css.indexOf(seletor + " {");
+  return css.slice(inicio, css.indexOf("}", inicio));
+};
+
+describe("Badge 2xs · padding lateral de 8px", () => {
+  it("a regra do 2xs usa o degrau nano (8px) dos lados e o micro (2px) em cima e embaixo", () => {
+    expect(bloco(".umds-badge--2xs")).toMatch(
+      /padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-nano\)/,
+    );
+  });
+
+  it("os outros tamanhos não mudam de padding", () => {
+    expect(bloco(".umds-badge--xs")).toMatch(/padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-quarck\)/);
+    expect(bloco(".umds-badge--md")).toMatch(/padding:\s*var\(--umds-primitive-spacing-quarck\)\s+var\(--umds-primitive-spacing-nano\)/);
+  });
+});
+
+describe("Badge attached · 22px e tom escuro", () => {
+  it("o rótulo colado tem altura mínima de 22px (24 - 2), de qualquer tamanho", () => {
+    expect(bloco(".umds-badge--attached")).toMatch(
+      /min-height:\s*calc\(var\(--umds-primitive-spacing-xxs\)\s*-\s*var\(--umds-primitive-spacing-micro\)\)/,
+    );
+    const { container } = render(<Badge attached size="xs" variant="neutral" appearance="solid">Tarefa manual</Badge>);
+    expect(container.firstElementChild).toHaveClass("umds-badge--attached", "umds-badge--xs");
+  });
+
+  it("attachedTone dark escreve a classe; sem ela e com light, não", () => {
+    const { container } = render(
+      <>
+        <Badge attached attachedTone="dark" variant="neutral" appearance="solid">A</Badge>
+        <Badge attached variant="neutral" appearance="solid">B</Badge>
+        <Badge attached attachedTone="light" variant="neutral" appearance="solid">C</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--attached-dark");
+    expect(container.children[1]).not.toHaveClass("umds-badge--attached-dark");
+    expect(container.children[2]).not.toHaveClass("umds-badge--attached-dark");
+  });
+
+  it("sem attached o tom é ignorado", () => {
+    const { container } = render(<Badge attachedTone="dark" variant="neutral" appearance="solid">A</Badge>);
+    expect(container.firstElementChild).not.toHaveClass("umds-badge--attached-dark");
+  });
+
+  it("CSS: o escuro é neutral-dark-down com texto branco, só no neutro sólido colado", () => {
+    const regra = bloco(".umds-badge--attached.umds-badge--neutral.umds-badge--solid.umds-badge--attached-dark");
+    expect(regra).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-dark-down\)/);
+    expect(regra).toMatch(/color:\s*var\(--umds-semantic-color-neutral-light-pure\)/);
+    expect(bloco(".umds-badge--attached.umds-badge--neutral.umds-badge--solid")).toMatch(/neutral-light-medium/);
+  });
+});

package/src/teste/ButtonDensidade.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Button from "../components/Button/Button";
+import { lerArquivo } from "./lerArquivo";
+
+const cssButton = await lerArquivo("../core/src/components/Button/Button.css");
+
+const css = cssButton.replace(/\r\n/g, "\n");
+const bloco = (seletor: string) => {
+  const inicio = css.indexOf(seletor + " {");
+  return css.slice(inicio, css.indexOf("}", inicio));
+};
+
+describe("Button · density", () => {
+  it("comfortable escreve a classe; sem a prop e com default o botão é o de antes", () => {
+    render(
+      <>
+        <Button size="sm" density="comfortable">A</Button>
+        <Button size="sm">B</Button>
+        <Button size="sm" density="default">C</Button>
+      </>,
+    );
+    expect(screen.getByRole("button", { name: "A" })).toHaveClass("umds-button--sm", "umds-button--comfortable");
+    expect(screen.getByRole("button", { name: "B" })).not.toHaveClass("umds-button--comfortable");
+    expect(screen.getByRole("button", { name: "C" })).not.toHaveClass("umds-button--comfortable");
+  });
+
+  it("CSS: o sm confortável tem 12px de padding lateral; o sm de antes segue em 8px; o só-ícone fica de fora", () => {
+    expect(bloco(".umds-button--sm.umds-button--comfortable:not(.umds-button--icon)")).toMatch(
+      /padding:\s*0\s+var\(--umds-primitive-spacing-mini\)/,
+    );
+    expect(bloco(".umds-button--sm")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-nano\)/);
+  });
+
+  it("os outros tamanhos mantêm o padding (a densidade só mexe no sm)", () => {
+    expect(bloco(".umds-button--xs")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-mini\)/);
+    expect(bloco(".umds-button--md")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-xxxs\)/);
+    expect(bloco(".umds-button--lg")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-xxs\)/);
+  });
+});

package/src/teste/CalendarCompacto.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import Calendar from "../components/Calendar/Calendar";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssCalendar = await lerArquivo("../core/src/components/Calendar/Calendar.css");
+
+const CSS: Record<string, string> = { Calendar: cssCalendar };
+const css = (componente: string) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto: string, seletor: string) => {
+  const inicio = texto.indexOf(seletor + " {");
+  expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+  return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+
+describe("Calendar · density compact", () => {
+  it("compact escreve a classe na raiz; sem a prop, não", () => {
+    const { container } = render(
+      <>
+        <Calendar today="2026-05-15" defaultDate="2026-05-15" density="compact" />
+        <Calendar today="2026-05-15" defaultDate="2026-05-15" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-calendar--compact", "umds-calendar--month");
+    expect(container.children[1]).not.toHaveClass("umds-calendar--compact");
+  });
+
+  it("CSS: evento de 20px (16 + 4), 4px de padding lateral e linha de 16px; o título só é cortado quando passa da largura", () => {
+    const t = css("Calendar");
+    const compacto = bloco(t, ".umds-calendar--compact .umds-calendar__event");
+    expect(compacto).toMatch(/min-height:\s*calc\(var\(--umds-primitive-spacing-xxxs\)\s*\+\s*var\(--umds-primitive-spacing-quarck\)\)/);
+    expect(compacto).toMatch(/padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-quarck\)/);
+    expect(compacto).toMatch(/line-height:\s*var\(--umds-primitive-spacing-xxxs\)/);
+    const titulo = bloco(t, ".umds-calendar__event-title");
+    expect(titulo).toMatch(/text-overflow:\s*ellipsis/);
+  });
+});

package/src/teste/CoachmarkUmPasso.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Coachmark from "../components/Coachmark/Coachmark";
+
+const UM = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
+const DOIS = [...UM, { title: "Pronto", content: "Sem alvo." }];
+
+function Pagina({ passos, ...resto }: any) {
+  return (
+    <div>
+      <button id="alvo-a">A</button>
+      <Coachmark steps={passos} open {...resto} />
+    </div>
+  );
+}
+
+describe("Coachmark · contador", () => {
+  it("com um passo só não há contador, nem visível nem na região aria-live", () => {
+    const { baseElement } = render(<Pagina passos={UM} />);
+    expect(screen.queryByText("1 de 1")).toBeNull();
+    expect(baseElement.textContent).not.toContain("1 de 1");
+    expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("Novo: arrastar");
+  });
+
+  it("com um passo e modal={false} também não (a dica pontual)", () => {
+    const { baseElement } = render(<Pagina passos={UM} modal={false} />);
+    expect(baseElement.textContent).not.toContain("1 de 1");
+  });
+
+  it("com dois passos o contador aparece e o leitor de tela o ouve", () => {
+    const { baseElement } = render(<Pagina passos={DOIS} />);
+    expect(screen.getByText("1 de 2")).toBeInTheDocument();
+    expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("1 de 2: Novo: arrastar");
+  });
+
+  it("counterLabel segue valendo com mais de um passo", () => {
+    render(<Pagina passos={DOIS} counterLabel="Step {current} of {total}" />);
+    expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
+  });
+
+  it("o botão do último passo continua sendo Concluir", () => {
+    render(<Pagina passos={UM} />);
+    expect(screen.getByRole("button", { name: "Concluir" })).toBeInTheDocument();
+  });
+});

package/src/teste/DataTableCompactaETom.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import DataTable from "../components/DataTable/DataTable";
+import { lerArquivo } from "./lerArquivo";
+
+const cssDataTable = await lerArquivo("../core/src/components/DataTable/DataTable.css");
+
+const COLUNAS = [
+  { key: "nome", label: "Nome" },
+  { key: "situacao", label: "Situação" },
+];
+const DADOS = [
+  { nome: "Ana Souza", situacao: "Ativa", tom: "positive" },
+  { nome: "Carlos Lima", situacao: "Bloqueado", tom: "negative" },
+  { nome: "Marina Alves", situacao: "Licença", tom: "info" },
+  { nome: "Rafael Pereira", situacao: "Desligado", tom: "muted" },
+  { nome: "Beatriz Lima", situacao: "Ativa" },
+];
+
+const linhas = (c: HTMLElement) => [...c.querySelectorAll("tbody tr")] as HTMLElement[];
+
+describe("DataTable · rowTone", () => {
+  it("o nome de um campo da linha traz o tom", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={DADOS} rowTone="tom" />);
+    const l = linhas(container);
+    expect(l[0]).toHaveClass("umds-datatable__row--positive");
+    expect(l[1]).toHaveClass("umds-datatable__row--negative");
+    expect(l[2]).toHaveClass("umds-datatable__row--info");
+    expect(l[3]).toHaveClass("umds-datatable__row--muted");
+    expect(l[4].className).toBe("umds-datatable__row");
+  });
+
+  it("uma função (row, rowIndex) devolve o tom", () => {
+    const { container } = render(
+      <DataTable columns={COLUNAS} data={DADOS} rowTone={(row, i) => (row.situacao === "Bloqueado" || i === 4 ? "negative" : undefined)} />,
+    );
+    const l = linhas(container);
+    expect(l[1]).toHaveClass("umds-datatable__row--negative");
+    expect(l[4]).toHaveClass("umds-datatable__row--negative");
+    expect(l[0].className).toBe("umds-datatable__row");
+  });
+
+  it("tom desconhecido ou vazio não vira classe", () => {
+    const { container } = render(
+      <DataTable columns={COLUNAS} data={[{ nome: "A", situacao: "x", tom: "rosa" }, { nome: "B", situacao: "y", tom: "" }]} rowTone="tom" />,
+    );
+    for (const l of linhas(container)) expect(l.className).toBe("umds-datatable__row");
+  });
+
+  it("sem rowTone nada muda", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={DADOS} />);
+    for (const l of linhas(container)) expect(l.className).toBe("umds-datatable__row");
+  });
+
+  it("o tom convive com a linha selecionada e a zebra (as classes ficam; o CSS faz a selecionada vencer)", () => {
+    const { container } = render(
+      <DataTable columns={COLUNAS} data={DADOS} rowTone="tom" striped rowKey="nome" selectedRowKeys={["Carlos Lima"]} />,
+    );
+    const l = linhas(container);
+    expect(l[1]).toHaveClass("umds-datatable__row--negative", "umds-datatable__row--selected", "umds-datatable__row--striped");
+  });
+});
+
+describe("DataTable · compacta, 44px e CSS do tom", () => {
+  const css = cssDataTable.replace(/\r\n/g, "\n");
+  const bloco = (seletor: string) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+  };
+
+  it("a densidade compacta fixa cabeçalho e linha na altura de campo (44px); o documento fica de fora", () => {
+    expect(bloco(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__td")).toMatch(
+      /height:\s*var\(--umds-semantic-field-height\)/,
+    );
+    expect(css).toContain(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__th,");
+    const { container } = render(<DataTable density="compact" columns={COLUNAS} data={DADOS} />);
+    expect(container.querySelector(".umds-datatable--compact")).not.toBeNull();
+  });
+
+  it("a linha selecionada vence o tom (o :not) e o tom vence a zebra", () => {
+    expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)/);
+    expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)\.umds-datatable__row--striped/);
+    expect(bloco(".umds-datatable__row--muted .umds-datatable__td")).toMatch(/neutral-dark-down/);
+  });
+});