@1doc/1ds-react 2.10.0 → 2.11.1

package/src/teste/InputGhost.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import Input from "../components/Input/Input";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssInput = await lerArquivo("../core/src/components/Input/Input.css");
+
+const CSS: Record<string, string> = { Input: cssInput };
+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("Input · variant ghost", () => {
+  it("ghost escreve a classe; sem a prop e com default, não", () => {
+    const { container } = render(
+      <>
+        <Input ariaLabel="a" variant="ghost" />
+        <Input ariaLabel="b" />
+        <Input ariaLabel="c" variant="default" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-input--ghost");
+    expect(container.children[1]).not.toHaveClass("umds-input--ghost");
+    expect(container.children[2]).not.toHaveClass("umds-input--ghost");
+  });
+
+  it("CSS: só o repouso muda (fundo claro, borda clara) e com baixa especificidade, para o hover e o foco vencerem", () => {
+    const t = css("Input");
+    const ghost = bloco(t, ".umds-input--ghost:where(:not(.umds-input--error):not(.umds-input--disabled):not(.umds-input--readonly)) .umds-input__container");
+    expect(ghost).toMatch(/background-color:\s*var\(--umds-semantic-color-background-light\)/);
+    expect(ghost).toMatch(/border-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+    expect(t.indexOf(".umds-input__container:focus-within:not(")).toBeGreaterThanOrEqual(0);
+  });
+
+  it("o foco, o erro e o desabilitado do campo ghost seguem as classes do padrão", () => {
+    const { container } = render(<Input ariaLabel="d" variant="ghost" errorMessage="Obrigatório" />);
+    expect(container.firstElementChild).toHaveClass("umds-input--ghost", "umds-input--error");
+  });
+});

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

@@ -29,7 +29,7 @@ describe("html-seguro: estilo de texto por token", () => {
     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);");
+    expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-base)")).toBe("font-family: var(--umds-semantic-font-family-base);");
     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("");
     }
@@ -43,8 +43,8 @@ describe("html-seguro: estilo de texto por token", () => {
     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="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe(
+      '<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm);">a</span>',
     );
     expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
   });
@@ -74,15 +74,15 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
     expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
   });
 
-  it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+  it("a fonte do DS 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>');
+    await usuario.click(screen.getByRole("option", { name: "Padrão" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-base);">Parecer</span>');
     expect(aoMudar).toHaveBeenCalled();
     expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
   });
@@ -121,11 +121,11 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
 
   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" } });
+    abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyBase: "Default", 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();
+    expect(screen.getByRole("option", { name: "Default" })).toBeInTheDocument();
     await usuario.keyboard("{Escape}");
     expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
   });

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

package/src/teste/SelectItemComEscopo.test.tsx

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Select from "../components/Select/Select";
+
+const OPCOES = [
+  { label: "Urgente", value: "urgente", etiqueta: "Prazo hoje" },
+  { label: "Rotina", value: "rotina", etiqueta: "Sem prazo" },
+];
+const item = ({ optionData }: any) => (
+  <span data-testid="item">
+    <b>{optionData.label}</b> <i>{optionData.etiqueta}</i>
+  </span>
+);
+
+describe("Select · item com escopo da opção", () => {
+  it("a lista mostra o item de cada opção, recebendo a opção (optionData e o apelido option)", () => {
+    const vistos: any[] = [];
+    render(
+      <Select
+        ariaLabel="Prioridade"
+        options={OPCOES}
+        item={(escopo: any) => {
+          vistos.push(escopo);
+          return <span data-testid="item">{escopo.optionData.label}</span>;
+        }}
+      />,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(screen.getAllByTestId("item").map((n) => n.textContent)).toEqual(["Urgente", "Rotina"]);
+    expect(vistos[0].optionData).toBe(OPCOES[0]);
+    expect(vistos[0].option).toBe(OPCOES[0]);
+  });
+
+  it("o gatilho com a opção escolhida mostra o conteúdo do item, não o texto", () => {
+    render(<Select ariaLabel="Prioridade" options={OPCOES} value="urgente" item={item} />);
+    const gatilho = screen.getByRole("combobox");
+    expect(gatilho.querySelector(".umds-select__trigger-item")).not.toBeNull();
+    expect(gatilho).toHaveTextContent("Urgente");
+    expect(gatilho).toHaveTextContent("Prazo hoje");
+    expect(gatilho.querySelector(".umds-select__placeholder")).toBeNull();
+  });
+
+  it("sem valor o gatilho mostra o placeholder; escolher na lista passa o item para o gatilho", () => {
+    function App() {
+      return <Select ariaLabel="Prioridade" placeholder="Escolha" options={OPCOES} item={item} />;
+    }
+    render(<App />);
+    const gatilho = screen.getByRole("combobox");
+    expect(gatilho).toHaveTextContent("Escolha");
+    expect(gatilho.querySelector(".umds-select__trigger-item")).toBeNull();
+    fireEvent.click(gatilho);
+    fireEvent.click(screen.getAllByRole("option")[1]);
+    expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toHaveTextContent("Rotina");
+  });
+
+  it("seleção múltipla segue com o texto no gatilho", () => {
+    render(<Select ariaLabel="Prioridade" multiple options={OPCOES} value={["urgente"]} item={item} />);
+    expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+  });
+
+  it("sem item nada muda: o gatilho mostra o rótulo; item como nó solto (legado) não vai ao gatilho", () => {
+    const { rerender } = render(<Select ariaLabel="Prioridade" options={OPCOES} value="urgente" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+    expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+    rerender(<Select ariaLabel="Prioridade" options={OPCOES} value="urgente" item={<em>fixo</em>} />);
+    expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+    expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+  });
+});

package/src/teste/SelectListaFiltro.test.tsx

@@ -0,0 +1,120 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import Select from "../components/Select/Select";
+import { lerArquivo } from "./lerArquivo";
+
+const cssSelect = await lerArquivo("../core/src/components/Select/Select.css");
+
+const OPCOES = [
+  { label: "Urgente", value: "urgente" },
+  { label: "Revisão", value: "revisao" },
+];
+
+afterEach(() => vi.restoreAllMocks());
+
+const lista = (container: HTMLElement) => container.querySelector(".umds-select__dropdown") as HTMLElement;
+
+/** jsdom não tem layout: só a lista "mede" o que o teste mandar. */
+function medirLista(direita: number, larguraDaJanela: number) {
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) {
+    const eLista = this.classList.contains("umds-select__dropdown");
+    return { top: 0, bottom: 0, left: 0, right: eLista ? direita : 0, width: 0, height: 0, x: 0, y: 0, toJSON() {} } as any;
+  });
+  Object.defineProperty(window, "innerWidth", { value: larguraDaJanela, configurable: true });
+}
+
+describe("Select filtro · listMinWidth", () => {
+  it("um número vira px e a lista nunca fica mais estreita que o gatilho", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" listMinWidth={220} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(lista(container).style.minWidth).toBe("max(100%, 220px)");
+  });
+
+  it("uma medida CSS vale como veio", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" listMinWidth="18rem" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(lista(container).style.minWidth).toBe("max(100%, 18rem)");
+  });
+
+  it("0 é um valor (sem mínimo além do gatilho), não ausência", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" listMinWidth={0} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(lista(container).style.minWidth).toBe("max(100%, 0px)");
+  });
+
+  it("sem a prop o mínimo é o do CSS (240px), sem estilo inline", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(lista(container).style.minWidth).toBe("");
+  });
+
+  it("o Select padrão ignora a prop (a lista é a largura do campo)", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} listMinWidth={220} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(lista(container).style.minWidth).toBe("");
+  });
+});
+
+describe("Select filtro · nunca passa da borda da janela", () => {
+  it("a lista que estoura a borda direita se alinha ao fim do gatilho", async () => {
+    medirLista(1457, 1440);
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(container.querySelector(".umds-select--list-end")).not.toBeNull());
+  });
+
+  it("a lista que cabe fica onde está", async () => {
+    medirLista(900, 1440);
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(lista(container)).not.toBeNull());
+    expect(container.querySelector(".umds-select--list-end")).toBeNull();
+  });
+
+  it("deixa 8px de respiro: encostada na borda ainda alinha", async () => {
+    medirLista(1436, 1440);
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(container.querySelector(".umds-select--list-end")).not.toBeNull());
+  });
+
+  it("fechar desliga o alinhamento", async () => {
+    medirLista(1457, 1440);
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} variant="filter" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(container.querySelector(".umds-select--list-end")).not.toBeNull());
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(container.querySelector(".umds-select--list-end")).toBeNull());
+  });
+
+  it("o Select padrão (não filtro) não é movido", async () => {
+    medirLista(1457, 1440);
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(lista(container)).not.toBeNull());
+    expect(container.querySelector(".umds-select--list-end")).toBeNull();
+  });
+});
+
+describe("Select filtro · CSS", () => {
+  const css = cssSelect.replace(/\r\n/g, "\n");
+  const bloco = (seletor: string) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+  };
+
+  it("o wrapper do filtro é fit-content (o auto o esticava até o pai e a lista herdava essa largura)", () => {
+    expect(bloco(".umds-select--filter")).toMatch(/width:\s*fit-content/);
+  });
+
+  it("a busca da lista fica fora da conta da largura natural", () => {
+    expect(bloco(".umds-select--filter .umds-select__search-container")).toMatch(/contain:\s*inline-size/);
+    expect(bloco(".umds-select__search-input")).toMatch(/min-width:\s*0/);
+  });
+
+  it("o alinhamento ao fim ancora a lista pela direita", () => {
+    const b = bloco(".umds-select--filter.umds-select--list-end .umds-select__dropdown");
+    expect(b).toMatch(/left:\s*auto/);
+    expect(b).toMatch(/right:\s*0/);
+  });
+});

package/src/teste/StatCardTamanhoSm.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import StatCard from "../components/StatCard/StatCard";
+import { lerArquivo } from "./lerArquivo";
+
+const cssStatCard = await lerArquivo("../core/src/components/StatCard/StatCard.css");
+
+const css = cssStatCard.replace(/\r\n/g, "\n");
+const bloco = (seletor: string) => {
+  const inicio = css.indexOf(seletor + " {");
+  return css.slice(inicio, css.indexOf("}", inicio));
+};
+
+describe("StatCard · size", () => {
+  it("sm escreve a classe; sem a prop e com md o cartão é o de antes", () => {
+    const { container } = render(
+      <>
+        <StatCard value={44} label="Não lidos" size="sm" />
+        <StatCard value={44} label="Não lidos" />
+        <StatCard value={44} label="Não lidos" size="md" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-stat-card--sm");
+    expect(container.children[1]).not.toHaveClass("umds-stat-card--sm");
+    expect(container.children[2]).not.toHaveClass("umds-stat-card--sm");
+  });
+
+  it("o número do sm é 18px/800, e a regra vence o 32/800 do rótulo no topo", () => {
+    const regra = bloco(".umds-stat-card.umds-stat-card--sm .umds-stat-card__valor");
+    expect(regra).toMatch(/font-size:\s*1\.125rem/);
+    expect(regra).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+    const { container } = render(<StatCard value={44} label="Não lidos" size="sm" labelPosition="top" />);
+    expect(container.firstElementChild).toHaveClass("umds-stat-card--sm", "umds-stat-card--rotulo-topo");
+  });
+
+  it("o número continua antes do rótulo no HTML", () => {
+    const { container } = render(<StatCard value={44} label="Não lidos" size="sm" />);
+    const valor = container.querySelector(".umds-stat-card__valor") as HTMLElement;
+    const rotulo = container.querySelector(".umds-stat-card__rotulo") as HTMLElement;
+    expect(valor.compareDocumentPosition(rotulo) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});

package/src/teste/TabsCompacta.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import Tabs from "../components/Tabs/Tabs";
+import Tab from "../components/Tabs/Tab";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssTabs = await lerArquivo("../core/src/components/Tabs/Tabs.css");
+
+const CSS: Record<string, string> = { Tabs: cssTabs };
+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("Tabs · density", () => {
+  it("compact escreve a classe na raiz; sem a prop e com default, não", () => {
+    const { container } = render(
+      <>
+        <Tabs value="0" density="compact"><Tab label="A" index="0" /></Tabs>
+        <Tabs value="0"><Tab label="B" index="0" /></Tabs>
+        <Tabs value="0" density="default"><Tab label="C" index="0" /></Tabs>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-tabs--compact");
+    expect(container.children[1]).not.toHaveClass("umds-tabs--compact");
+    expect(container.children[2]).not.toHaveClass("umds-tabs--compact");
+  });
+
+  it("CSS: a compacta tem altura mínima de 40px (degrau sm) e padding vertical de 8px; o padrão segue em 48px", () => {
+    const t = css("Tabs");
+    const compacta = bloco(t, ".umds-tabs--compact .umds-tabs__tab");
+    expect(compacta).toMatch(/min-height:\s*var\(--umds-primitive-spacing-sm\)/);
+    expect(compacta).toMatch(/padding-block:\s*var\(--umds-primitive-spacing-nano\)/);
+    expect(bloco(t, ".umds-tabs__tab")).toMatch(/min-height:\s*48px/);
+  });
+
+  it("a pílula do contador é cinza na aba inativa e azul só na ativa (nas duas densidades)", () => {
+    const t = css("Tabs");
+    expect(bloco(t, ".umds-tabs__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+    expect(bloco(t, ".umds-tabs__tab--selected .umds-tabs__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
+    expect(t).not.toMatch(/--compact[^{]*\.umds-tabs__count/);
+  });
+});

package/src/teste/TagPositivoTingido.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Tag from "../components/Tag/Tag";
+import { lerArquivo } from "./lerArquivo";
+
+const cssTag = await lerArquivo("../core/src/components/Tag/Tag.css");
+const tema1doc = await lerArquivo("../tokens/dist/css/theme-1doc.css");
+const temaEscuro = await lerArquivo("../tokens/dist/css/theme-1doc-dark.css");
+const temaAltoContraste = await lerArquivo("../tokens/dist/css/theme-1doc-high-contrast.css");
+
+const css = cssTag.replace(/\r\n/g, "\n");
+const bloco = (seletor: string) => {
+  const inicio = css.indexOf(seletor + " {");
+  return css.slice(inicio, css.indexOf("}", inicio));
+};
+
+const TEMAS: Record<string, string> = { "theme-1doc.css": tema1doc, "theme-1doc-dark.css": temaEscuro, "theme-1doc-high-contrast.css": temaAltoContraste };
+const tema = (arquivo: string) => {
+  const texto = TEMAS[arquivo];
+  const cor = (nome: string) => (texto.match(new RegExp("--umds-theme-" + nome + ":\\s*(#[0-9A-Fa-f]{6})")) as RegExpMatchArray)[1];
+  return cor;
+};
+const luz = (hex: string) => {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+const contraste = (a: string, b: string) => {
+  const [x, y] = [luz(a), luz(b)].sort((m, n) => n - m);
+  return (x + 0.05) / (y + 0.05);
+};
+
+describe("Tag positive outlined sobre fundo tingido", () => {
+  it("escreve as classes que a regra de CSS escolhe", () => {
+    const { container } = render(<Tag label="Entregue" variant="positive" appearance="outlined" />);
+    const tag = container.firstElementChild as HTMLElement;
+    expect(tag).toHaveClass("umds-tag--outlined", "umds-tag--positive");
+  });
+
+  it("o texto é positive-dark e o contorno segue positive-pure", () => {
+    const regra = bloco(".umds-tag--outlined.umds-tag--positive");
+    expect(regra).toMatch(/color:\s*var\(--umds-semantic-color-feedback-positive-dark\)/);
+    expect(regra).toMatch(/border-color:\s*var\(--umds-semantic-color-feedback-positive-pure\)/);
+  });
+
+  it("no tema 1doc, sobre o azul-claro do card o texto passa de 4,5:1 (o pure dava 3,6:1)", () => {
+    const cor = tema("theme-1doc.css");
+    const fundo = cor("primary-light");
+    expect(contraste(cor("feedback-positive-pure"), fundo)).toBeLessThan(4.5);
+    expect(contraste(cor("feedback-positive-dark"), fundo)).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("nos temas escuro e de alto contraste o texto também passa de 4,5:1 sobre o fundo tingido e sobre a página", () => {
+    for (const arquivo of ["theme-1doc-dark.css", "theme-1doc-high-contrast.css"]) {
+      const cor = tema(arquivo);
+      for (const fundo of [cor("primary-light"), cor("background-white")]) {
+        expect(contraste(cor("feedback-positive-dark"), fundo)).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+});

package/src/teste/lerArquivo.ts

@@ -0,0 +1,13 @@
+/**
+ * Lê um arquivo do pacote (relativo à pasta `packages/react`) para os testes que conferem uma regra de CSS na
+ * fonte: o jsdom não tem cascata de arquivo, e o `css: false` do vitest esvazia o `?raw` do CSS.
+ * O `node:fs` entra por import dinâmico com nome calculado porque o `tsc` do pacote não traz os tipos do Node.
+ */
+const modulo = (nome: string): Promise<any> => import(/* @vite-ignore */ nome);
+
+export async function lerArquivo(relativo: string): Promise<string> {
+  const fs = await modulo("node:fs");
+  const path = await modulo("node:path");
+  const raiz: string = (globalThis as any).process.cwd();
+  return fs.readFileSync(path.resolve(raiz, relativo), "utf8");
+}

package/src/utils/html-seguro.ts

@@ -51,7 +51,7 @@ export const normalizarEndereco = (bruto: string): string => {
 /** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
 const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
 const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
-const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-base\)$/;
 
 /**
  * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,