@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/utils/html-seguro.js

@@ -5,13 +5,19 @@
  * 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
  * (servidor), devolve o texto escapado.
  */
-const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE"];
+const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE", "IMG", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"];
+/** Blocos que aceitam `text-align`. */
+const ALINHAVEIS = ["P", "DIV", "H1", "H2", "H3", "H4", "LI", "BLOCKQUOTE", "TH", "TD"];
+const ALINHAMENTOS = ["left", "center", "right", "justify"];
 const DESCARTADAS = ["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "LINK", "META", "TEMPLATE", "NOSCRIPT", "SVG", "MATH", "FORM", "INPUT", "BUTTON", "TEXTAREA", "SELECT"];
 const escapar = (texto) => texto.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 /**
@@ -44,6 +50,68 @@ export const normalizarEndereco = (bruto) => {
         return "";
     return "https://" + texto;
 };
+/** 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)\)$/;
+/**
+ * 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 const estiloDeTexto = (propriedade, valor) => {
+    const prop = String(propriedade || "").trim().toLowerCase();
+    const val = String(valor || "").trim();
+    if (prop === "color" && COR_TOKEN.test(val))
+        return "color: " + val + ";";
+    if (prop === "font-size" && TAMANHO_TOKEN.test(val))
+        return "font-size: " + val + ";";
+    if (prop === "font-family" && FAMILIA_TOKEN.test(val))
+        return "font-family: " + val + ";";
+    return "";
+};
+/** As declarações válidas de um atributo `style` (só color, font-size e font-family por token). */
+const estiloDoSpan = (estilo) => {
+    const partes = String(estilo || "").split(";");
+    let saida = "";
+    for (let i = 0; i < partes.length; i++) {
+        const corte = partes[i].indexOf(":");
+        if (corte === -1)
+            continue;
+        const decl = estiloDeTexto(partes[i].slice(0, corte), partes[i].slice(corte + 1));
+        if (decl)
+            saida += (saida ? " " : "") + decl;
+    }
+    return saida;
+};
+/**
+ * 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 const imagemSegura = (bruto) => {
+    const texto = (bruto || "").trim();
+    if (!texto)
+        return "";
+    const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+    if (/^data:image\/(png|jpe?g|gif|webp);base64,[a-z0-9+/]+=*$/i.test(semControle))
+        return semControle;
+    // `//host/x` (sem esquema) carregaria de outro site sem o autor ter pedido: fica de fora.
+    if (/^(https?:\/\/|\/(?!\/)|\.\.?\/)/i.test(semControle))
+        return texto;
+    return "";
+};
+/** O `text-align` de um elemento, pelo `style` ou pelo atributo `align`: left, center, right, justify ou "". */
+const alinhamentoDe = (elemento) => {
+    const estilo = String(elemento.getAttribute("style") || "");
+    const achado = /(?:^|;)\s*text-align\s*:\s*([a-z]+)\s*(?:;|$)/i.exec(estilo);
+    const valor = (achado ? achado[1] : String(elemento.getAttribute("align") || "")).toLowerCase();
+    return ALINHAMENTOS.indexOf(valor) !== -1 ? valor : "";
+};
+/** Número inteiro de 2 a 99 em `colspan`/`rowspan`; o resto some. */
+const vao = (valor) => {
+    const n = parseInt(String(valor || ""), 10);
+    return n >= 2 && n <= 99 ? String(n) : "";
+};
 const limparNo = (no, saida, documento) => {
     const filhos = Array.prototype.slice.call(no.childNodes);
     for (let i = 0; i < filhos.length; i++) {
@@ -62,7 +130,36 @@ const limparNo = (no, saida, documento) => {
             limparNo(filho, saida, documento);
             continue;
         }
+        if (tag === "IMG") {
+            // Imagem sem endereço seguro some inteira (não deixa um <img> quebrado nem carregando de fora).
+            const origem = imagemSegura(filho.getAttribute("src") || "");
+            if (!origem)
+                continue;
+            const imagem = documento.createElement("img");
+            imagem.setAttribute("src", origem);
+            imagem.setAttribute("alt", String(filho.getAttribute("alt") || ""));
+            saida.appendChild(imagem);
+            continue;
+        }
         const novo = documento.createElement(tag.toLowerCase());
+        if (ALINHAVEIS.indexOf(tag) !== -1) {
+            const alinhamento = alinhamentoDe(filho);
+            if (alinhamento)
+                novo.setAttribute("style", "text-align: " + alinhamento + ";");
+        }
+        if (tag === "SPAN") {
+            const estiloValido = estiloDoSpan(filho.getAttribute("style") || "");
+            if (estiloValido)
+                novo.setAttribute("style", estiloValido);
+        }
+        if (tag === "TD" || tag === "TH") {
+            const colunas = vao(filho.getAttribute("colspan"));
+            const linhas = vao(filho.getAttribute("rowspan"));
+            if (colunas)
+                novo.setAttribute("colspan", colunas);
+            if (linhas)
+                novo.setAttribute("rowspan", linhas);
+        }
         if (tag === "A") {
             const href = enderecoSeguro(filho.getAttribute("href") || "");
             if (href) {
@@ -85,8 +182,22 @@ export const sanitizarHtml = (html) => {
     limparNo(molde.content, saida, document);
     return saida.innerHTML;
 };
+/** A tabela vazia que o editor insere: `linhas` × `colunas` células com uma quebra, para o cursor entrar. */
+export const htmlDaTabela = (linhas, colunas) => {
+    let celulas = "";
+    for (let c = 0; c < colunas; c++)
+        celulas += "<td><br></td>";
+    let corpo = "";
+    for (let l = 0; l < linhas; l++)
+        corpo += "<tr>" + celulas + "</tr>";
+    return "<table><tbody>" + corpo + "</tbody></table><p><br></p>";
+};
+/** O `<img>` que o editor insere (endereço já seguro). */
+export const htmlDaImagem = (endereco, alt) => '<img src="' + escapar(endereco) + '" alt="' + escapar(alt || "") + '">';
 /** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
 export const htmlVazio = (html) => {
+    if (/<(img|table)[\s>]/i.test(html || ""))
+        return false;
     const texto = (html || "").replace(/<br\s*\/?>/gi, "").replace(/<\/?(div|p|span)[^>]*>/gi, "").trim();
     return texto === "";
 };

package/dist/utils/toast.d.ts

@@ -21,7 +21,13 @@ export interface ToastOptions {
     description?: string;
     /** Variante semântica @default 'info' */
     variant?: ToastVariant;
-    /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 */
+    /** Linhas de detalhe abaixo da descrição */
+    details?: string[];
+    /** Rótulo do botão de ação ("Desfazer"); só aparece com `onAction` */
+    actionLabel?: string;
+    /** Chamado ao acionar o botão de ação; depois dele o toast fecha */
+    onAction?: (event?: any) => void;
+    /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 (0 quando há ação: dá tempo de agir, WCAG 2.2.1) */
     duration?: number;
     /** Exibe o botão de fechar @default true */
     closable?: boolean;
@@ -30,6 +36,9 @@ export interface ToastData {
     id: number;
     message: string;
     description?: string;
+    details?: string[];
+    actionLabel?: string;
+    onAction?: (event?: any) => void;
     variant: ToastVariant;
     duration: number;
     closable: boolean;

package/dist/utils/toast.js

@@ -26,7 +26,8 @@ export const toast = (options) => {
     const id = sequence;
     items = [...items, {
             variant: "info",
-            duration: 5000,
+            // Toast com ação não some antes de dar tempo de agir.
+            duration: options.actionLabel && options.onAction ? 0 : 5000,
             closable: true,
             ...options,
             id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.9.0",
+  "version": "2.11.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-core": "2.9.0",
-    "@1doc/1ds-tokens": "0.5.0"
+    "@1doc/1ds-core": "2.11.0",
+    "@1doc/1ds-tokens": "0.6.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/AccordionTituloNeutro.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+
+const ITENS = [
+  { id: "a", title: "Prazos", content: "Dez dias úteis." },
+  { id: "b", title: "Anexos", content: "Até 10 MB." },
+];
+
+describe("Accordion · titleVariant", () => {
+  it("neutral liga a classe do título neutro; o padrão e default não", () => {
+    const { container, rerender } = render(<Accordion items={ITENS} titleVariant="neutral" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    expect(raiz()).toHaveClass("umds-accordion--title-neutral");
+    rerender(<Accordion items={ITENS} titleVariant="default" />);
+    expect(raiz()).not.toHaveClass("umds-accordion--title-neutral");
+    rerender(<Accordion items={ITENS} />);
+    expect(raiz()).not.toHaveClass("umds-accordion--title-neutral");
+  });
+
+  it("combina com a variant do accordion", () => {
+    const { container } = render(<Accordion items={ITENS} variant="separated" titleVariant="neutral" />);
+    expect(container.firstElementChild).toHaveClass("umds-accordion--separated", "umds-accordion--title-neutral");
+  });
+});

package/src/teste/AppSubheaderRegiao.test.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import AppSubheader from "../components/AppSubheader/AppSubheader";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+
+/** O jsdom não tem layout: a geometria real é conferida pela story "Só a página atual" (play, no navegador); a regra de CSS, pelo teste do Vue. */
+describe("AppSubheader · região do contexto", () => {
+  it("a trilha só com a página atual não tem nada focável dentro da região", () => {
+    const { container } = render(
+      <AppSubheader>
+        <Breadcrumb items={[{ label: "Painel" }]} />
+      </AppSubheader>,
+    );
+    const contexto = container.querySelector(".umds-app-subheader__contexto") as HTMLElement;
+    expect(contexto.querySelector("a, button, [tabindex]")).toBeNull();
+  });
+});

package/src/teste/AttachmentCardLista.test.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+
+const DETALHES = {
+  description: "Documento legível.",
+  fields: [
+    { label: "Nome completo", value: "Marcos Vinícius Tavares", copyable: true },
+    { label: "CPF", value: "123.456.789-09" },
+  ],
+};
+
+async function abrirPainel() {
+  const usuario = userEvent.setup();
+  render(<AttachmentCard fileName="cnh.pdf" documentType="CNH" status="positive" statusLabel="Pré-aprovado" statusDetails={DETALHES} />);
+  await usuario.click(screen.getByRole("button", { name: /Pré-aprovado/ }));
+  return usuario;
+}
+
+describe("AttachmentCard · o <dl> do painel é válido (axe definition-list)", () => {
+  it("o dl só tem div filhos, e cada div só tem dt e dd, nessa ordem", async () => {
+    await abrirPainel();
+    const dl = document.querySelector(".umds-attachment-card__campos") as HTMLElement;
+    expect(dl.tagName).toBe("DL");
+    const grupos = [...dl.children];
+    expect(grupos).toHaveLength(2);
+    for (const grupo of grupos) {
+      expect(grupo.tagName).toBe("DIV");
+      expect([...grupo.children].map((f) => f.tagName)).toEqual(["DT", "DD"]);
+    }
+  });
+
+  it("o botão de copiar mora dentro do dd, ao lado do valor, e continua com nome", async () => {
+    await abrirPainel();
+    const dd = document.querySelector(".umds-attachment-card__campo-valor") as HTMLElement;
+    expect(dd.tagName).toBe("DD");
+    expect(dd.querySelector(".umds-attachment-card__campo-valor-texto")).toHaveTextContent("Marcos Vinícius Tavares");
+    const botao = dd.querySelector("button") as HTMLElement;
+    expect(botao).toHaveAttribute("aria-label", "Copiar Nome completo");
+    // nenhum botão solto direto num div do dl
+    for (const grupo of document.querySelectorAll(".umds-attachment-card__campo")) {
+      expect(grupo.querySelector(":scope > button")).toBeNull();
+    }
+  });
+
+  it("o campo sem copyable não tem botão e o valor segue no dd", async () => {
+    await abrirPainel();
+    const campos = document.querySelectorAll(".umds-attachment-card__campo");
+    expect(campos[1].querySelector("button")).toBeNull();
+    expect(campos[1].querySelector("dd")).toHaveTextContent("123.456.789-09");
+  });
+});

package/src/teste/AttachmentCardSm.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+
+const tamanho = (el: Element | null) => (el as HTMLElement).style.width;
+
+describe("AttachmentCard · size", () => {
+  it("md (padrão): ícone do preview de 48px e o do rodapé no sm do Icon", () => {
+    const { container } = render(<AttachmentCard fileName="Protocolo 104-2026.pdf" />);
+    expect(container.firstElementChild).not.toHaveClass("umds-attachment-card--sm");
+    expect(tamanho(container.querySelector(".umds-attachment-card__preview .umds-icon"))).toBe("48px");
+    const rodape = container.querySelector(".umds-attachment-card__rodape-icone .umds-icon") as HTMLElement;
+    expect(rodape).toHaveClass("umds-icon--sm");
+    expect(rodape.style.width).toBe("");
+  });
+
+  it("sm: ícone do preview de 40px e o do rodapé de 12px", () => {
+    const { container } = render(<AttachmentCard fileName="Protocolo 104-2026.pdf" size="sm" />);
+    expect(container.firstElementChild).toHaveClass("umds-attachment-card--sm");
+    expect(tamanho(container.querySelector(".umds-attachment-card__preview .umds-icon"))).toBe("40px");
+    expect(tamanho(container.querySelector(".umds-attachment-card__rodape-icone .umds-icon"))).toBe("12px");
+  });
+
+  it("o ícone central escolhido continua valendo no sm", () => {
+    const { container } = render(<AttachmentCard fileName="a.pdf" size="sm" documentType="CNH" status="positive" statusLabel="Pré-aprovado" />);
+    expect(container.querySelector(".umds-attachment-card__tipo-texto")).toHaveTextContent("CNH");
+    expect(container.querySelector(".umds-attachment-card__status-texto")).toHaveTextContent("Pré-aprovado");
+  });
+});

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/BadgeNeutroColado.test.tsx

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+
+/** A cascata de CSS de arquivo não existe no jsdom: a regra é conferida na fonte pelo teste do Vue; aqui, as classes no DOM. */
+describe("Badge attached neutral", () => {
+  it("o neutro colado e sólido leva as três classes que a regra de CSS escolhe", () => {
+    const { container } = render(
+      <Badge attached variant="neutral" appearance="solid">
+        Tarefa manual
+      </Badge>,
+    );
+    expect(container.firstElementChild).toHaveClass("umds-badge--attached", "umds-badge--neutral", "umds-badge--solid");
+  });
+});

package/src/teste/BadgeTag.test.tsx

@@ -62,3 +62,24 @@ describe("Tag compacta, soft, pílula e novidade", () => {
     expect(raiz(container)).toHaveClass("umds-tag--new", "umds-tag--soft");
   });
 });
+
+describe("Badge attachedSide", () => {
+  it("right escreve o modificador do canto direito; left e o padrão não", () => {
+    const { container } = render(
+      <>
+        <Badge attached attachedSide="right">A</Badge>
+        <Badge attached attachedSide="left">B</Badge>
+        <Badge attached>C</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--attached", "umds-badge--attached-right");
+    expect(container.children[1]).not.toHaveClass("umds-badge--attached-right");
+    expect(container.children[2]).not.toHaveClass("umds-badge--attached-right");
+  });
+
+  it("attachedSide sem attached não faz nada", () => {
+    const { container } = render(<Badge attachedSide="right">A</Badge>);
+    expect(raiz(container)).not.toHaveClass("umds-badge--attached-right");
+    expect(raiz(container)).not.toHaveClass("umds-badge--attached");
+  });
+});

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/CalendarCabecalho.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Calendar from "../components/Calendar/Calendar";
+
+describe("Calendar · cabeçalho", () => {
+  it("headerStart e headerEnd (React: props com nó) chegam ao cabeçalho", () => {
+    render(<Calendar events={[]} defaultDate="2026-10-08" headerStart={<span>Todos os documentos</span>} headerEnd={<span>Legenda</span>} />);
+    expect(screen.getByText("Todos os documentos")).toBeInTheDocument();
+    expect(screen.getByText("Legenda")).toBeInTheDocument();
+  });
+});

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/);
+  });
+});