@1doc/1ds-react 2.9.0 → 2.10.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.10.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,7 +45,7 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.9.0",
+    "@1doc/1ds-core": "2.10.0",
     "@1doc/1ds-tokens": "0.5.0"
   },
   "publishConfig": {

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

@@ -0,0 +1,101 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import Coachmark from "../components/Coachmark/Coachmark";
+
+const PASSOS = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
+
+function Pagina(props: any) {
+  return (
+    <div>
+      <button id="alvo-a">A</button>
+      <button id="fora">Fora</button>
+      <Coachmark steps={PASSOS} open {...props} />
+    </div>
+  );
+}
+
+describe("Coachmark · modal={false}", () => {
+  it("sem véu nem recorte; o cartão é um diálogo não modal e a raiz deixa o ponteiro passar", () => {
+    const { baseElement } = render(<Pagina modal={false} />);
+    expect(baseElement.querySelector(".umds-coachmark__veil")).toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark__cutout")).toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark")).toHaveClass("umds-coachmark--modeless");
+    expect(screen.getByRole("dialog", { name: "Novo: arrastar" })).toHaveAttribute("aria-modal", "false");
+  });
+
+  it("o padrão continua modal: véu, recorte e aria-modal verdadeiro", () => {
+    const { baseElement } = render(<Pagina />);
+    expect(baseElement.querySelector(".umds-coachmark__veil")).not.toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark")).not.toHaveClass("umds-coachmark--modeless");
+    expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+    const { unmount } = render(<Pagina modal />);
+    unmount();
+  });
+
+  it("o foco entra no cartão, mas o Tab não fica preso", async () => {
+    render(<Pagina modal={false} />);
+    const cartao = screen.getByRole("dialog");
+    await waitFor(() => expect(cartao).toHaveFocus());
+    const concluir = screen.getByRole("button", { name: "Concluir" });
+    concluir.focus();
+    const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+    concluir.dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(false);
+  });
+
+  it("no modal o Tab continua preso (o último volta ao primeiro)", () => {
+    render(<Pagina />);
+    const concluir = screen.getByRole("button", { name: "Concluir" });
+    concluir.focus();
+    const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+    concluir.dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(true);
+  });
+
+  it("a página segue clicável: o clique fora não é capturado e o tour não fecha sozinho", () => {
+    const aoFechar = vi.fn();
+    render(<Pagina modal={false} onClose={aoFechar} />);
+    fireEvent.click(screen.getByRole("button", { name: "Fora" }));
+    expect(aoFechar).not.toHaveBeenCalled();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("o Esc fecha de qualquer lugar da página, uma vez só", () => {
+    const aoFechar = vi.fn();
+    render(<Pagina modal={false} onClose={aoFechar} />);
+    const fora = screen.getByRole("button", { name: "Fora" });
+    fora.focus();
+    fireEvent.keyDown(fora, { key: "Escape" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+    expect(aoFechar).toHaveBeenCalledWith("escape");
+  });
+
+  it("o Esc dentro do cartão também fecha uma vez só", async () => {
+    const aoFechar = vi.fn();
+    render(<Pagina modal={false} onClose={aoFechar} />);
+    await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+    fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("depois de fechar, o ouvinte do Esc sai do documento", () => {
+    const aoFechar = vi.fn();
+    const { rerender } = render(<Pagina modal={false} onClose={aoFechar} />);
+    rerender(<Pagina modal={false} open={false} onClose={aoFechar} />);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(aoFechar).not.toHaveBeenCalled();
+  });
+
+  it("ao fechar, o foco volta ao elemento de antes, se a pessoa não foi a outro lugar", async () => {
+    const { rerender } = render(<Pagina modal={false} open={false} />);
+    const gatilho = screen.getByRole("button", { name: "Fora" });
+    gatilho.focus();
+    expect(gatilho).toHaveFocus();
+    rerender(<Pagina modal={false} open />);
+    // O foco entra no cartão depois da montagem (um quadro de animação).
+    await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+    rerender(<Pagina modal={false} open={false} />);
+    await waitFor(() => expect(gatilho).toHaveFocus());
+  });
+});

package/src/teste/ColorPickerXs.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ColorPicker from "../components/ColorPicker/ColorPicker";
+
+describe("ColorPicker · size xs", () => {
+  it("xs escreve a classe do tamanho; sm e md seguem como eram", () => {
+    const { container, rerender } = render(<ColorPicker ariaLabel="Cor" size="xs" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    expect(raiz()).toHaveClass("umds-color-picker--xs");
+    rerender(<ColorPicker ariaLabel="Cor" size="sm" />);
+    expect(raiz()).toHaveClass("umds-color-picker--sm");
+    expect(raiz()).not.toHaveClass("umds-color-picker--xs");
+    rerender(<ColorPicker ariaLabel="Cor" />);
+    expect(raiz()).toHaveClass("umds-color-picker--md");
+  });
+
+  it("no xs a amostra escolhida mantém a marcação e o aria-checked", () => {
+    const { container } = render(<ColorPicker ariaLabel="Cor" size="xs" defaultValue="--umds-primitive-red-pure" />);
+    expect(screen.getByRole("radio", { name: "Vermelho" })).toHaveAttribute("aria-checked", "true");
+    expect(container.querySelectorAll(".umds-color-picker__swatch--selected")).toHaveLength(1);
+  });
+});