@1doc/1ds-react 2.9.0 → 2.11.0

package/src/teste/ListItemTooltipStandalone.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ListItem from "../components/List/ListItem";
+
+describe("ListItem: tooltip, standalone e atributos só no elemento interativo", () => {
+  it("tooltip vira o atributo title do elemento interativo, e o li fica limpo", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Memorando 114/2025" tooltip="Abrir o memorando" aria-label="Memorando" role="menuitem" data-origem="home" />
+      </ul>,
+    );
+    const li = container.querySelector("li") as HTMLElement;
+    const botao = screen.getByRole("menuitem");
+    expect(botao).toHaveAttribute("title", "Abrir o memorando");
+    expect(botao).toHaveAttribute("aria-label", "Memorando");
+    expect(botao).toHaveAttribute("data-origem", "home");
+    for (const atributo of ["title", "aria-label", "role", "data-origem"]) expect(li).not.toHaveAttribute(atributo);
+  });
+
+  it("tooltip funciona no link e na linha div; sem tooltip não há title", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Link" href="/x" tooltip="Dica do link" />
+        <ListItem as="div" title="Div" tooltip="Dica da div" />
+        <ListItem title="Sem dica" />
+      </ul>,
+    );
+    const titulos = [...container.querySelectorAll(".umds-list-item")].map((e) => e.getAttribute("title"));
+    expect(titulos).toEqual(["Dica do link", "Dica da div", null]);
+  });
+
+  it("o título da linha continua sendo texto, não o atributo", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Só o título" />
+      </ul>,
+    );
+    expect(container.querySelector("[title]")).toBeNull();
+  });
+
+  it("standalone renderiza sem li, só o elemento interativo", () => {
+    const aoClicar = vi.fn();
+    const { container } = render(
+      <div>
+        <ListItem standalone title="12" tooltip="Página 12" onClick={aoClicar} />
+      </div>,
+    );
+    expect(container.querySelector("li")).toBeNull();
+    const botao = screen.getByRole("button", { name: /12/ });
+    expect(botao.parentElement?.tagName).toBe("DIV");
+    expect(botao).toHaveAttribute("title", "Página 12");
+    fireEvent.click(botao);
+    expect(aoClicar).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem standalone o li continua lá", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Normal" />
+      </ul>,
+    );
+    expect(container.querySelectorAll("li")).toHaveLength(1);
+  });
+});

package/src/teste/ModalProporcoes1Doc.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import Modal from "../components/Modal/Modal";
+import { render, screen } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssModal = await lerArquivo("../core/src/components/Modal/Modal.css");
+
+const CSS: Record<string, string> = { Modal: cssModal };
+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("Modal · density 1doc", () => {
+  it("escreve a classe e convive com variant primary; sem a prop, não", () => {
+    render(<Modal open inline density="1doc" variant="primary" title="Resolver tarefa" />);
+    expect(screen.getByRole("dialog", { name: "Resolver tarefa" })).toHaveClass("umds-modal--1doc", "umds-modal--primary", "umds-modal--base");
+  });
+
+  it("sem density o modal é o de antes", () => {
+    render(<Modal open inline title="Padrão" />);
+    expect(screen.getByRole("dialog", { name: "Padrão" })).not.toHaveClass("umds-modal--1doc");
+  });
+
+  it("CSS: cabeçalho de 67px, rodapé de 65px (padding 12px 24px) e raio de 12px; o padrão (8px) não muda", () => {
+    const t = css("Modal");
+    expect(bloco(t, ".umds-modal--1doc.umds-modal--base .umds-modal__header")).toMatch(/min-height:\s*67px/);
+    const rodape = bloco(t, ".umds-modal--1doc.umds-modal--base .umds-modal__footer");
+    expect(rodape).toMatch(/min-height:\s*65px/);
+    expect(rodape).toMatch(/padding:\s*var\(--umds-primitive-spacing-mini\)\s+var\(--umds-primitive-spacing-xxs\)/);
+    expect(t).toMatch(/\.umds-modal--1doc:not\(\.umds-modal--fullscreen\):not\(\.umds-modal--janela-fullscreen\):not\(\.umds-modal--sheet\) \{\n(?:\s*\/\*.*\*\/\n)?\s*border-radius:\s*12px/);
+    expect(bloco(t, ".umds-modal")).toMatch(/border-radius:\s*var\(--umds-primitive-border-radius-sm\)/);
+  });
+});

package/src/teste/RichTextEditorAlinhaImagemTabela.test.tsx

@@ -0,0 +1,238 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { htmlDaTabela, htmlVazio, imagemSegura, sanitizarHtml } from "../utils/html-seguro";
+
+let execCommand: ReturnType<typeof vi.fn>;
+let estados: Record<string, boolean>;
+
+beforeEach(() => {
+  estados = {};
+  execCommand = vi.fn(() => true);
+  (document as any).execCommand = execCommand;
+  (document as any).queryCommandState = (comando: string) => !!estados[comando];
+});
+
+const area = () => screen.getByRole("textbox") as HTMLElement;
+const PNG = "data:image/png;base64,iVBORw0KGgo=";
+
+describe("html-seguro: alinhamento, imagem e tabela", () => {
+  it("text-align fica nos blocos, em style ou em align; o resto do style sai", () => {
+    expect(sanitizarHtml('<p style="text-align: center; color: red">a</p>')).toBe('<p style="text-align: center;">a</p>');
+    expect(sanitizarHtml('<div align="right">a</div>')).toBe('<div style="text-align: right;">a</div>');
+    expect(sanitizarHtml('<p style="text-align: expression(alert(1))">a</p>')).toBe("<p>a</p>");
+    expect(sanitizarHtml('<li style="text-align:justify">a</li>')).toBe('<li style="text-align: justify;">a</li>');
+    expect(sanitizarHtml('<b style="text-align:center">a</b>')).toBe("<b>a</b>");
+  });
+
+  it("imagem: http(s), caminho e data:image em PNG, JPEG, GIF e WebP ficam; o resto some inteiro", () => {
+    expect(sanitizarHtml('<img src="https://a.com/x.png" alt="Brasão" onerror="x()">')).toBe('<img src="https://a.com/x.png" alt="Brasão">');
+    expect(sanitizarHtml('<img src="/img/x.png">')).toBe('<img src="/img/x.png" alt="">');
+    expect(sanitizarHtml(`<img src="${PNG}" alt="a">`)).toBe(`<img src="${PNG}" alt="a">`);
+    for (const mau of ["javascript:alert(1)", "x", "data:image/svg+xml;base64,PHN2Zz4=", "data:text/html;base64,PGI+", "//evil.com/x.png", "ftp://a/x.png"]) {
+      expect(sanitizarHtml(`<p>a<img src="${mau}">b</p>`)).toBe("<p>ab</p>");
+    }
+  });
+
+  it("imagemSegura devolve vazio para o perigoso", () => {
+    expect(imagemSegura("java\nscript:alert(1)")).toBe("");
+    expect(imagemSegura("https://a.com/x.png")).toBe("https://a.com/x.png");
+    expect(imagemSegura("")).toBe("");
+  });
+
+  it("tabela simples: tags e colspan/rowspan ficam; atributos soltos saem", () => {
+    const html = '<table class="x" onclick="a()"><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3" style="color:red">a</td><td colspan="x">b</td></tr></tbody></table>';
+    expect(sanitizarHtml(html)).toBe('<table><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3">a</td><td>b</td></tr></tbody></table>');
+  });
+
+  it("htmlVazio: imagem e tabela contam como conteúdo", () => {
+    expect(htmlVazio("<img src='/a.png'>")).toBe(false);
+    expect(htmlVazio(htmlDaTabela(1, 1))).toBe(false);
+    expect(htmlVazio("<p><br></p>")).toBe(true);
+  });
+
+  it("htmlDaTabela faz linhas × colunas de células com quebra", () => {
+    const celulas = (htmlDaTabela(2, 3).match(/<td><br><\/td>/g) || []).length;
+    expect(celulas).toBe(6);
+    expect((htmlDaTabela(2, 3).match(/<tr>/g) || []).length).toBe(2);
+  });
+});
+
+describe("RichTextEditor: alinhamento", () => {
+  it("as quatro ferramentas de alinhamento pedem o comando e seguem o cursor", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["alignLeft", "alignCenter", "alignRight", "alignJustify"]} defaultValue="<p>x</p>" />);
+    const esperado: Record<string, string> = {
+      "Alinhar à esquerda": "justifyLeft",
+      Centralizar: "justifyCenter",
+      "Alinhar à direita": "justifyRight",
+      Justificar: "justifyFull",
+    };
+    for (const [nome, comando] of Object.entries(esperado)) {
+      execCommand.mockClear();
+      await usuario.click(screen.getByRole("button", { name: nome }));
+      expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+    }
+    estados.justifyCenter = true;
+    const faixa = document.createRange();
+    faixa.selectNodeContents(area());
+    window.getSelection()!.removeAllRanges();
+    window.getSelection()!.addRange(faixa);
+    fireEvent(document, new Event("selectionchange"));
+    expect(screen.getByRole("button", { name: "Centralizar" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Justificar" })).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("a barra padrão não ganha as ferramentas novas", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    for (const nome of ["Centralizar", "Imagem", "Tabela"]) expect(screen.queryByRole("button", { name: nome })).toBeNull();
+  });
+});
+
+describe("RichTextEditor: imagem", () => {
+  const abrirImagem = async (props: any = {}, botao = "Imagem") => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["image"]} defaultValue="<p>texto</p>" {...props} />);
+    await usuario.click(screen.getByRole("button", { name: botao }));
+    return usuario;
+  };
+
+  it("o botão abre o painel com foco no endereço; Esc fecha", async () => {
+    const usuario = await abrirImagem();
+    expect(screen.getByLabelText("Endereço da imagem")).toHaveFocus();
+    expect(screen.getByLabelText("Texto alternativo")).toBeInTheDocument();
+    await usuario.keyboard("{Escape}");
+    expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+  });
+
+  it("endereço e texto alternativo inserem o img com alt", async () => {
+    const aoMudar = vi.fn();
+    const usuario = await abrirImagem({ onChange: aoMudar });
+    await usuario.type(screen.getByLabelText("Endereço da imagem"), "exemplo.com.br/brasao.png");
+    await usuario.type(screen.getByLabelText("Texto alternativo"), "Brasão da prefeitura");
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<img src="https://exemplo.com.br/brasao.png" alt="Brasão da prefeitura">');
+    expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+    expect(aoMudar).toHaveBeenCalled();
+  });
+
+  it("endereço perigoso mostra o erro e o painel continua aberto", async () => {
+    const usuario = await abrirImagem();
+    await usuario.type(screen.getByLabelText("Endereço da imagem"), "javascript:alert(1)");
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    expect(screen.getByText("Use um endereço http ou https, ou escolha um arquivo.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+    expect(screen.getByLabelText("Endereço da imagem")).toBeInTheDocument();
+  });
+
+  it("arquivo vira data URL e entra no img", async () => {
+    const usuario = await abrirImagem();
+    const entrada = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const arquivo = new File([new Uint8Array([137, 80, 78, 71])], "brasao.png", { type: "image/png" });
+    fireEvent.change(entrada, { target: { files: [arquivo] } });
+    await waitFor(() => expect(screen.getByText("brasao.png")).toBeInTheDocument());
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+    expect(chamada![2]).toMatch(/^<img src="data:image\/png;base64,[A-Za-z0-9+/=]+" alt="">$/);
+  });
+
+  it("arquivo que não é PNG, JPEG, GIF ou WebP é recusado; acima de 2 MB também", async () => {
+    await abrirImagem();
+    const entrada = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(entrada, { target: { files: [new File(["x"], "a.svg", { type: "image/svg+xml" })] } });
+    expect(await screen.findByText("Use uma imagem PNG, JPEG, GIF ou WebP.")).toBeInTheDocument();
+    const grande = new File(["x"], "g.png", { type: "image/png" });
+    Object.defineProperty(grande, "size", { value: 3 * 1024 * 1024 });
+    fireEvent.change(entrada, { target: { files: [grande] } });
+    expect(await screen.findByText("A imagem passa de 2 MB.")).toBeInTheDocument();
+  });
+
+  it("os textos do painel vêm por labels", async () => {
+    await abrirImagem({ labels: { image: "Image", imageUrl: "Image address", imageAlt: "Alt text", imageApply: "Insert image", imageCancel: "Cancel", imageFile: "Choose file" } }, "Image");
+    expect(screen.getByLabelText("Image address")).toBeInTheDocument();
+    expect(screen.getByLabelText("Alt text")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Insert image" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Choose file" })).toBeInTheDocument();
+  });
+});
+
+describe("RichTextEditor: tabela", () => {
+  it("o painel insere linhas × colunas; o padrão é 3 × 3", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} />);
+    await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+    expect(screen.getByLabelText("Linhas")).toHaveFocus();
+    await usuario.clear(screen.getByLabelText("Linhas"));
+    await usuario.type(screen.getByLabelText("Linhas"), "2");
+    await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+    const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+    expect(chamada![2]).toBe(htmlDaTabela(2, 3));
+  });
+
+  it("fora de 1 a 20 linhas e 1 a 10 colunas mostra o erro e não insere", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} />);
+    await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+    await usuario.clear(screen.getByLabelText("Colunas"));
+    await usuario.type(screen.getByLabelText("Colunas"), "11");
+    await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+    expect(screen.getByText("Use de 1 a 20 linhas e de 1 a 10 colunas.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+  });
+
+  const TABELA = "<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>";
+  const cursorNaCelula = (indice: number) => {
+    const celula = area().querySelectorAll("td")[indice];
+    const faixa = document.createRange();
+    faixa.selectNodeContents(celula);
+    window.getSelection()!.removeAllRanges();
+    window.getSelection()!.addRange(faixa);
+    fireEvent(document, new Event("selectionchange"));
+  };
+
+  it("com o cursor numa célula aparece a barra; sem tabela na toolbar, não aparece", async () => {
+    const { rerender } = render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue={TABELA} />);
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+    cursorNaCelula(0);
+    expect(await screen.findByRole("group", { name: "Tabela" })).toBeInTheDocument();
+    rerender(<RichTextEditor ariaLabel="x" toolbar={["bold"]} defaultValue={TABELA} />);
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+  });
+
+  it("adiciona e remove linha e coluna na célula do cursor e avisa onChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue={TABELA} onChange={aoMudar} />);
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Adicionar coluna" }));
+    expect(area().querySelectorAll("tr")[0].cells.length).toBe(3);
+    expect(area().querySelectorAll("tr")[1].cells.length).toBe(3);
+    expect(aoMudar).toHaveBeenCalled();
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Adicionar linha" }));
+    expect(area().querySelectorAll("tr")).toHaveLength(3);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+    expect(area().querySelectorAll("tr")).toHaveLength(2);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover coluna" }));
+    expect(area().querySelectorAll("tr")[0].cells.length).toBe(2);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover tabela" }));
+    expect(area().querySelector("table")).toBeNull();
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+  });
+
+  it("remover a única linha ou coluna remove a tabela", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue="<table><tbody><tr><td>a</td></tr></tbody></table>" />);
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+    expect(area().querySelector("table")).toBeNull();
+  });
+});

package/src/teste/RichTextEditorEstiloDeTexto.test.tsx

@@ -0,0 +1,137 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { estiloDeTexto, sanitizarHtml } from "../utils/html-seguro";
+
+let execCommand: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  execCommand = vi.fn(() => true);
+  (document as any).execCommand = execCommand;
+  (document as any).queryCommandState = () => false;
+});
+
+const area = () => screen.getByRole("textbox") as HTMLElement;
+const selecionarTexto = () => {
+  const alvo = area().querySelector("p")!.firstChild as Text;
+  const faixa = document.createRange();
+  faixa.setStart(alvo, 0);
+  faixa.setEnd(alvo, alvo.length);
+  window.getSelection()!.removeAllRanges();
+  window.getSelection()!.addRange(faixa);
+};
+const abrir = (toolbar: string[], props: any = {}) =>
+  render(<RichTextEditor ariaLabel="x" toolbar={toolbar as any} defaultValue="<p>Parecer</p>" {...props} />);
+
+describe("html-seguro: estilo de texto por token", () => {
+  it("estiloDeTexto só aceita token do DS", () => {
+    expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
+    expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
+    expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
+    expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+    for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
+      expect(estiloDeTexto("color", mau)).toBe("");
+    }
+    expect(estiloDeTexto("font-size", "12px")).toBe("");
+    expect(estiloDeTexto("font-size", "var(--umds-primitive-red-pure)")).toBe("");
+    expect(estiloDeTexto("font-family", "Comic Sans MS")).toBe("");
+    expect(estiloDeTexto("background", "var(--umds-primitive-red-pure)")).toBe("");
+  });
+
+  it("o span guarda só as declarações válidas; o resto do style sai", () => {
+    expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe(
+      '<span style="color: var(--umds-primitive-red-pure);">a</span>',
+    );
+    expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe(
+      '<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>',
+    );
+    expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
+  });
+
+  it("estilo só vale em span: em outras tags sai", () => {
+    expect(sanitizarHtml('<b style="color: var(--umds-primitive-red-pure)">a</b>')).toBe("<b>a</b>");
+    expect(sanitizarHtml('<p style="color: var(--umds-primitive-red-pure)">a</p>')).toBe("<p>a</p>");
+  });
+});
+
+describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
+  it("a barra padrão não ganha as ferramentas novas", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    for (const nome of ["Fonte", "Tamanho da fonte", "Cor do texto"]) expect(screen.queryByRole("button", { name: nome })).toBeNull();
+  });
+
+  it("cada ferramenta abre um painel nomeado abaixo da barra; Fechar e Esc fecham", async () => {
+    const usuario = userEvent.setup();
+    abrir(["fontFamily", "fontSize", "textColor"]);
+    await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+    expect(screen.getByRole("group", { name: "Tamanho da fonte" })).toBeInTheDocument();
+    await usuario.click(screen.getByRole("button", { name: "Fechar" }));
+    expect(screen.queryByRole("group", { name: "Tamanho da fonte" })).toBeNull();
+    await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+    expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByRole("group", { name: "Cor do texto" }), { key: "Escape" });
+    expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
+  });
+
+  it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    abrir(["fontFamily"], { onChange: aoMudar });
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Fonte" }));
+    await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
+    await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+    expect(aoMudar).toHaveBeenCalled();
+    expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
+  });
+
+  it("o tamanho usa os degraus da escala do DS", async () => {
+    const usuario = userEvent.setup();
+    abrir(["fontSize"]);
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+    await usuario.click(screen.getByRole("combobox", { name: "Tamanho da fonte" }));
+    const opcoes = screen.getAllByRole("option").map((o) => o.textContent);
+    expect(opcoes).toEqual(["12", "14", "16", "20", "24"]);
+    await usuario.click(screen.getByRole("option", { name: "20" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-size: var(--umds-primitive-font-size-sm);">Parecer</span>');
+  });
+
+  it("a cor vem da paleta do DS e vira var() do token", async () => {
+    const usuario = userEvent.setup();
+    abrir(["textColor"]);
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+    await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="color: var(--umds-primitive-red-pure);">Parecer</span>');
+  });
+
+  it("sem texto selecionado o painel pede a seleção e não aplica nada", async () => {
+    const usuario = userEvent.setup();
+    abrir(["textColor"]);
+    window.getSelection()!.removeAllRanges();
+    await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+    await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+    expect(screen.getByText("Selecione o texto antes de aplicar.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+    expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+  });
+
+  it("os textos vêm por labels", async () => {
+    const usuario = userEvent.setup();
+    abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Font" }));
+    await usuario.click(screen.getByRole("combobox", { name: "Font" }));
+    expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+    await usuario.keyboard("{Escape}");
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+  });
+
+  it("o valor volta higienizado com o estilo por token", () => {
+    abrir(["textColor"], { defaultValue: '<p><span style="color: var(--umds-primitive-blue-pure); background: red">a</span></p>' });
+    expect(area().innerHTML).toBe('<p><span style="color: var(--umds-primitive-blue-pure);">a</span></p>');
+  });
+});

package/src/teste/SegmentedControlContador.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+
+const FILA = [
+  { label: "Todas", value: "todas", count: 31 },
+  { label: "Minhas", value: "minhas", count: 0 },
+  { label: "Arquivadas", value: "arquivadas" },
+  { label: "Vazias", value: "vazias", count: "" },
+];
+
+describe("SegmentedControl · count", () => {
+  it("desenha a pílula do contador depois do texto; 0 aparece, vazio e ausente não", () => {
+    const { container } = render(<SegmentedControl label="Fila" options={FILA} />);
+    const itens = [...container.querySelectorAll(".umds-segmented__item")];
+    expect(itens[0].querySelector(".umds-segmented__count")).toHaveTextContent("31");
+    expect(itens[1].querySelector(".umds-segmented__count")).toHaveTextContent("0");
+    expect(itens[2].querySelector(".umds-segmented__count")).toBeNull();
+    expect(itens[3].querySelector(".umds-segmented__count")).toBeNull();
+    const conteudo = itens[0].querySelector(".umds-segmented__conteudo") as HTMLElement;
+    expect(conteudo.lastElementChild).toHaveClass("umds-segmented__count");
+  });
+
+  it("o contador entra no nome acessível do segmento (o texto visível manda)", () => {
+    render(<SegmentedControl label="Fila" id="fila" options={FILA} />);
+    expect(screen.getByRole("radio", { name: /Todas\s*31/ })).toBeInTheDocument();
+  });
+
+  it("o contador acompanha a escolha e a escolha segue funcionando", async () => {
+    const usuario = userEvent.setup();
+    const { container } = render(<SegmentedControl label="Fila" options={FILA} defaultValue="todas" />);
+    expect(screen.getByRole("radio", { name: /Todas/ })).toBeChecked();
+    await usuario.click(screen.getByText("Minhas"));
+    expect(screen.getByRole("radio", { name: /Minhas/ })).toBeChecked();
+    expect(container.querySelectorAll(".umds-segmented__count")).toHaveLength(2);
+  });
+
+  it("sem count em nenhum segmento, nada muda", () => {
+    const { container } = render(<SegmentedControl label="x" options={[{ label: "25", value: "25" }]} />);
+    expect(container.querySelector(".umds-segmented__count")).toBeNull();
+  });
+});

package/src/teste/SegmentedControlSuperficie.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssSegmentedControl = await lerArquivo("../core/src/components/SegmentedControl/SegmentedControl.css");
+
+const CSS: Record<string, string> = { SegmentedControl: cssSegmentedControl };
+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("SegmentedControl · variant surface", () => {
+  const OPCOES = [
+    { label: "Individual", value: "individual", count: 12 },
+    { label: "Em lote", value: "lote" },
+  ];
+
+  it("surface escreve a classe; sem a prop e com default, não", () => {
+    const { container } = render(
+      <>
+        <SegmentedControl options={OPCOES} variant="surface" defaultValue="individual" />
+        <SegmentedControl options={OPCOES} defaultValue="individual" />
+        <SegmentedControl options={OPCOES} variant="default" defaultValue="individual" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-segmented--surface");
+    expect(container.children[1]).not.toHaveClass("umds-segmented--surface");
+    expect(container.children[2]).not.toHaveClass("umds-segmented--surface");
+  });
+
+  it("CSS: o escolhido é branco, em negrito e com sombra; o trilho é cinza claro; o azul cheio do padrão segue", () => {
+    const t = css("SegmentedControl");
+    const escolhido = bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,\n.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover");
+    expect(escolhido).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
+    expect(escolhido).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-bold\)/);
+    expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-md\)/);
+    expect(bloco(t, ".umds-segmented--surface .umds-segmented__track")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+    expect(t).toMatch(/\.umds-segmented__input:checked \+ \.umds-segmented__item,\n\.umds-segmented__input:checked \+ \.umds-segmented__item:hover \{\n\s*background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
+  });
+
+  it("o contador do escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho", () => {
+    const t = css("SegmentedControl");
+    expect(bloco(t, ".umds-segmented--surface .umds-segmented__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
+    expect(bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item .umds-segmented__count")).toMatch(
+      /background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/,
+    );
+  });
+});