@1doc/1ds-react 2.9.0 → 2.10.0

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

@@ -0,0 +1,180 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import Select from "../components/Select/Select";
+
+const OPCOES = [
+  { label: "Urgente", value: "urgente" },
+  { label: "Revisão", value: "revisao" },
+];
+
+afterEach(() => vi.restoreAllMocks());
+
+describe("Select · open e onOpenChange", () => {
+  it("open controlado mostra a lista sem clique; fechado, não mostra", () => {
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open={false} />);
+    expect(screen.queryByRole("listbox")).toBeNull();
+    rerender(<Select ariaLabel="x" options={OPCOES} open />);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("controlado: o clique só avisa; quem abre é o pai", () => {
+    const aoAbrir = vi.fn();
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open={false} onOpenChange={aoAbrir} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(aoAbrir).toHaveBeenCalledWith(true);
+    expect(screen.queryByRole("listbox")).toBeNull();
+    rerender(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("controlado aberto: escolher uma opção, Esc e clique fora pedem para fechar", () => {
+    const aoAbrir = vi.fn();
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    fireEvent.click(screen.getAllByRole("option")[0]);
+    expect(aoAbrir).toHaveBeenLastCalledWith(false);
+
+    aoAbrir.mockClear();
+    rerender(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "Escape" });
+    expect(aoAbrir).toHaveBeenLastCalledWith(false);
+
+    aoAbrir.mockClear();
+    fireEvent.mouseDown(document.body);
+    expect(aoAbrir).toHaveBeenCalledWith(false);
+  });
+
+  it("o clique fora não avisa quando a lista está fechada", () => {
+    const aoAbrir = vi.fn();
+    render(<Select ariaLabel="x" options={OPCOES} open={false} onOpenChange={aoAbrir} />);
+    fireEvent.mouseDown(document.body);
+    expect(aoAbrir).not.toHaveBeenCalled();
+  });
+
+  it("clique fora vê o open de agora, não o do primeiro render", () => {
+    const aoAbrir = vi.fn();
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open={false} onOpenChange={aoAbrir} />);
+    rerender(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    fireEvent.mouseDown(document.body);
+    expect(aoAbrir).toHaveBeenCalledWith(false);
+  });
+
+  it("sem open, o Select abre e fecha sozinho e também avisa", () => {
+    const aoAbrir = vi.fn();
+    render(<Select ariaLabel="x" options={OPCOES} onOpenChange={aoAbrir} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(aoAbrir).toHaveBeenLastCalledWith(true);
+    fireEvent.click(screen.getAllByRole("option")[1]);
+    expect(screen.queryByRole("listbox")).toBeNull();
+    expect(aoAbrir).toHaveBeenLastCalledWith(false);
+  });
+});
+
+describe("Select · gatilho com ícone, amostra e aria-required", () => {
+  it("triggerIcon e triggerSwatch aparecem no gatilho, decorativos", () => {
+    const { container } = render(
+      <Select ariaLabel="x" options={OPCOES} triggerIcon={faFilter} triggerSwatch="var(--umds-semantic-color-primary-pure)" />,
+    );
+    const icone = container.querySelector(".umds-select__trigger-icon") as HTMLElement;
+    expect(icone).toHaveAttribute("aria-hidden", "true");
+    expect(icone.querySelector("svg")).toHaveAttribute("data-icon", "filter");
+    const amostra = container.querySelector(".umds-select__swatch") as HTMLElement;
+    expect(amostra).toHaveAttribute("aria-hidden", "true");
+    expect(amostra.style.background).toContain("--umds-semantic-color-primary-pure");
+    expect(container.querySelector(".umds-select--has-trigger-icon")).not.toBeNull();
+  });
+
+  it("sem as props, não há ícone nem amostra", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} />);
+    expect(container.querySelector(".umds-select__trigger-icon")).toBeNull();
+    expect(container.querySelector(".umds-select__swatch")).toBeNull();
+  });
+
+  it("required repassa aria-required ao combobox", () => {
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} required />);
+    expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true");
+    rerender(<Select ariaLabel="x" options={OPCOES} />);
+    expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-required");
+  });
+});
+
+describe("Select · variantes de filtro", () => {
+  it("search e combo escrevem a classe do filtro e a própria", () => {
+    const { container, rerender } = render(<Select ariaLabel="x" options={OPCOES} variant="search" />);
+    expect(container.querySelector(".umds-select--filter.umds-select--filter-search")).not.toBeNull();
+    rerender(<Select ariaLabel="x" options={OPCOES} variant="combo" />);
+    expect(container.querySelector(".umds-select--filter.umds-select--filter-combo")).not.toBeNull();
+    expect(container.querySelector(".umds-select--filter-search")).toBeNull();
+  });
+
+  it("search foca a busca ao abrir, como o filter", async () => {
+    render(<Select ariaLabel="x" options={OPCOES} variant="search" searchable />);
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByRole("textbox")));
+  });
+});
+
+describe("Select · por cima do diálogo", () => {
+  it("dentro de role=dialog a lista vira fixed, ancorada no gatilho", async () => {
+    const { container } = render(
+      <div role="dialog" aria-label="Filtros" style={{ overflow: "clip" }}>
+        <Select ariaLabel="x" options={OPCOES} />
+      </div>,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    const lista = container.querySelector(".umds-select__dropdown") as HTMLElement;
+    expect(container.querySelector(".umds-select--floating")).not.toBeNull();
+    expect(lista.style.position).toBe("fixed");
+    await waitFor(() => expect(lista.style.visibility).toBe("visible"));
+  });
+
+  it("fora de diálogo a lista continua posicionada pelo CSS (sem fixed)", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const lista = container.querySelector(".umds-select__dropdown") as HTMLElement;
+    expect(container.querySelector(".umds-select--floating")).toBeNull();
+    expect(lista.style.position).toBe("");
+  });
+
+  it("aria-modal também conta como diálogo", () => {
+    const { container } = render(
+      <div aria-modal="true">
+        <Select ariaLabel="x" options={OPCOES} />
+      </div>,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select--floating")).not.toBeNull();
+  });
+});
+
+describe("Select · placement auto mede o ancestral que rola", () => {
+  it("abre para cima e limita a altura da lista ao espaço do ancestral", () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) {
+      const rolante = this.getAttribute("data-rolante") !== null;
+      const [topo, base] = rolante ? [100, 300] : [200, 244];
+      return { top: topo, bottom: base, left: 0, right: 0, width: 0, height: base - topo, x: 0, y: topo, toJSON() {} } as any;
+    });
+    Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+    const { container } = render(
+      <div data-rolante style={{ overflowY: "auto" }}>
+        <Select ariaLabel="x" options={OPCOES} placement="auto" />
+      </div>,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+    expect((container.querySelector(".umds-select__dropdown") as HTMLElement).style.maxHeight).toBe("96px");
+  });
+
+  it("sem ancestral que corta, só a janela conta e a lista não ganha teto", () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      () => ({ top: 20, bottom: 64, left: 0, right: 0, width: 0, height: 44, x: 0, y: 20, toJSON() {} }) as any,
+    );
+    Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} placement="auto" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    expect((container.querySelector(".umds-select__dropdown") as HTMLElement).style.maxHeight).toBe("");
+  });
+});

package/src/teste/SelectFiltroCorETamanho.test.tsx

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

package/src/teste/StatCardSecundariaETom.test.tsx

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

package/src/teste/ToastAcaoEDetalhes.test.tsx

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