@1doc/1ds-react 2.9.0 → 2.11.0

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