@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/SegmentedControlContador.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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(_jsx(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");
+        expect(conteudo.lastElementChild).toHaveClass("umds-segmented__count");
+    });
+    it("o contador entra no nome acessível do segmento (o texto visível manda)", () => {
+        render(_jsx(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(_jsx(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(_jsx(SegmentedControl, { label: "x", options: [{ label: "25", value: "25" }] }));
+        expect(container.querySelector(".umds-segmented__count")).toBeNull();
+    });
+});

package/dist/teste/SelectAbertoControladoEFlutuante.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/SelectAbertoControladoEFlutuante.test.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: false }));
+        expect(screen.queryByRole("listbox")).toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true }));
+        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(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: false, onOpenChange: aoAbrir }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(aoAbrir).toHaveBeenCalledWith(true);
+        expect(screen.queryByRole("listbox")).toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, 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(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, onOpenChange: aoAbrir }));
+        fireEvent.click(screen.getAllByRole("option")[0]);
+        expect(aoAbrir).toHaveBeenLastCalledWith(false);
+        aoAbrir.mockClear();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, 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(_jsx(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(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: false, onOpenChange: aoAbrir }));
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, 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(_jsx(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(_jsx(Select, { ariaLabel: "x", options: OPCOES, triggerIcon: faFilter, triggerSwatch: "var(--umds-semantic-color-primary-pure)" }));
+        const icone = container.querySelector(".umds-select__trigger-icon");
+        expect(icone).toHaveAttribute("aria-hidden", "true");
+        expect(icone.querySelector("svg")).toHaveAttribute("data-icon", "filter");
+        const amostra = container.querySelector(".umds-select__swatch");
+        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(_jsx(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(_jsx(Select, { ariaLabel: "x", options: OPCOES, required: true }));
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true");
+        rerender(_jsx(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(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "search" }));
+        expect(container.querySelector(".umds-select--filter.umds-select--filter-search")).not.toBeNull();
+        rerender(_jsx(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(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "search", searchable: true }));
+        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(_jsx("div", { role: "dialog", "aria-label": "Filtros", style: { overflow: "clip" }, children: _jsx(Select, { ariaLabel: "x", options: OPCOES }) }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const lista = container.querySelector(".umds-select__dropdown");
+        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(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const lista = container.querySelector(".umds-select__dropdown");
+        expect(container.querySelector(".umds-select--floating")).toBeNull();
+        expect(lista.style.position).toBe("");
+    });
+    it("aria-modal também conta como diálogo", () => {
+        const { container } = render(_jsx("div", { "aria-modal": "true", children: _jsx(Select, { ariaLabel: "x", options: OPCOES }) }));
+        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 () {
+            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() { } };
+        });
+        Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+        const { container } = render(_jsx("div", { "data-rolante": true, style: { overflowY: "auto" }, children: _jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }) }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+        expect(container.querySelector(".umds-select__dropdown").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() { } }));
+        Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+        const { container } = render(_jsx(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").style.maxHeight).toBe("");
+    });
+});

package/dist/teste/SelectFiltroCorETamanho.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/SelectFiltroCorETamanho.test.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter" }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).toHaveClass("umds-select--sm");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "search" }));
+        expect(raiz()).toHaveClass("umds-select--sm");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "combo" }));
+        expect(raiz()).toHaveClass("umds-select--sm");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", size: "md" }));
+        expect(raiz()).toHaveClass("umds-select--md");
+        rerender(_jsx(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(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores" }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).not.toHaveClass("umds-select--has-value");
+        rerender(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", value: "urgente" }));
+        expect(raiz()).toHaveClass("umds-select--has-value");
+        rerender(_jsx(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(_jsx(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(_jsx(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").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(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", value: "revisao" }));
+        const amostra = container.querySelector(".umds-select__trigger .umds-select__swatch");
+        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(_jsx(Select, { ariaLabel: "x", options: MARCADORES, placeholder: "Marcadores", value: "nenhum" }));
+        expect(container.querySelector(".umds-select__trigger .umds-select__swatch")).toBeNull();
+        rerender(_jsx(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(_jsx(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].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(_jsx(Select, { ariaLabel: "x", options: MARCADORES, multiple: true, 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(_jsx(Select, { ariaLabel: "x", options: MARCADORES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(screen.getByRole("option", { name: "Urgente" })).toBeInTheDocument();
+    });
+});

package/dist/teste/SelectPlacementFiltro.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/SelectPlacementFiltro.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Select from "../components/Select/Select";
+const OPCOES = [
+    { label: "Urgente", value: "urgente" },
+    { label: "Revisão", value: "revisao" },
+];
+afterEach(() => vi.restoreAllMocks());
+/** jsdom não tem layout: o gatilho "mede" o que o teste mandar. */
+function medirGatilho(topo, base, alturaDaTela) {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({ top: topo, bottom: base, left: 0, right: 0, width: 0, height: base - topo, x: 0, y: topo, toJSON() { } }));
+    Object.defineProperty(window, "innerHeight", { value: alturaDaTela, configurable: true });
+}
+describe("Select · placement", () => {
+    it("padrão abre para baixo", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    });
+    it("top abre para cima", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "top" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+    });
+    it("auto abre para cima quando falta espaço embaixo e há mais em cima", () => {
+        medirGatilho(500, 544, 600);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+    });
+    it("auto abre para baixo quando cabe", () => {
+        medirGatilho(20, 64, 900);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    });
+    it("auto abre para baixo quando falta espaço dos dois lados e embaixo é maior", () => {
+        medirGatilho(60, 104, 220);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    });
+});
+describe("Select · variant filter", () => {
+    it("escreve a classe do filtro; sem variant não escreve", () => {
+        const { container, rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter" }));
+        expect(container.querySelector(".umds-select--filter")).not.toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        expect(container.querySelector(".umds-select--filter")).toBeNull();
+    });
+    it("emptyOptionLabel vem no topo, marcada sem seleção; escolher chama onChange com vazio e volta ao placeholder", () => {
+        const aoMudar = vi.fn();
+        const { rerender } = render(_jsx(Select, { ariaLabel: "Marcadores", placeholder: "Marcadores", options: OPCOES, emptyOptionLabel: "Todos os marcadores", onChange: aoMudar }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const opcoes = screen.getAllByRole("option");
+        expect(opcoes[0]).toHaveTextContent("Todos os marcadores");
+        expect(opcoes[0]).toHaveAttribute("aria-selected", "true");
+        fireEvent.click(opcoes[1]);
+        expect(aoMudar).toHaveBeenLastCalledWith("urgente");
+        rerender(_jsx(Select, { ariaLabel: "Marcadores", placeholder: "Marcadores", options: OPCOES, emptyOptionLabel: "Todos os marcadores", value: "urgente", onChange: aoMudar }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+        fireEvent.click(screen.getByRole("combobox"));
+        fireEvent.click(screen.getAllByRole("option")[0]);
+        expect(aoMudar).toHaveBeenLastCalledWith("");
+        rerender(_jsx(Select, { ariaLabel: "Marcadores", placeholder: "Marcadores", options: OPCOES, emptyOptionLabel: "Todos os marcadores", value: "", onChange: aoMudar }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("Marcadores");
+    });
+    it("sem emptyOptionLabel não há opção extra", () => {
+        render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(screen.getAllByRole("option")).toHaveLength(2);
+    });
+    it("footer aparece dentro da lista aberta, e não fecha ao clicar nele", () => {
+        render(_jsx(Select, { ariaLabel: "x", options: OPCOES, footer: _jsx("button", { children: "Gerenciar marcadores" }) }));
+        expect(screen.queryByText("Gerenciar marcadores")).toBeNull();
+        fireEvent.click(screen.getByRole("combobox"));
+        const acao = screen.getByText("Gerenciar marcadores");
+        expect(acao.closest(".umds-select__footer")).not.toBeNull();
+        fireEvent.mouseDown(acao);
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true");
+    });
+    it("sem footer não há rodapé", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select__footer")).toBeNull();
+    });
+});

package/dist/teste/Stack.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/Stack.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Stack from "../components/Stack/Stack";
+const TAGS = ["div", "span", "ul", "ol", "li", "section", "nav", "header", "footer", "form"];
+describe("Stack", () => {
+    it("sem props continua um div vertical com gap xxxs", () => {
+        const { container } = render(_jsx(Stack, { children: "x" }));
+        const el = container.firstElementChild;
+        expect(el.tagName).toBe("DIV");
+        expect(el.className).toBe("umds-stack umds-stack--vertical umds-stack--gap-xxxs");
+    });
+    it("aceita gap none", () => {
+        const { container } = render(_jsx(Stack, { gap: "none", children: "x" }));
+        expect(container.firstElementChild).toHaveClass("umds-stack--gap-none");
+    });
+    it.each(TAGS)("as=%s renderiza o elemento certo", (tag) => {
+        const { container } = render(_jsx(Stack, { as: tag, children: "x" }));
+        expect(container.firstElementChild?.tagName.toLowerCase()).toBe(tag);
+    });
+    it("ul e ol mantêm a semântica de lista", () => {
+        const { container } = render(_jsx(Stack, { as: "ul", "aria-label": "Itens", children: _jsx(Stack, { as: "li", children: "um" }) }));
+        expect(screen.getByRole("list", { name: "Itens" })).toBeInTheDocument();
+        expect(container.querySelectorAll("li")).toHaveLength(1);
+    });
+    it("repassa id, aria-label, title e style ao elemento raiz", () => {
+        const { container } = render(_jsx(Stack, { as: "nav", id: "menu", "aria-label": "Principal", title: "Dica", style: { marginTop: 4 }, children: "x" }));
+        const el = container.firstElementChild;
+        expect(el.id).toBe("menu");
+        expect(el.getAttribute("aria-label")).toBe("Principal");
+        expect(el.getAttribute("title")).toBe("Dica");
+        expect(el.style.marginTop).toBe("4px");
+        expect(screen.getByRole("navigation", { name: "Principal" })).toBe(el);
+    });
+    it("as=form chama onSubmit", () => {
+        const aoEnviar = vi.fn((e) => e.preventDefault());
+        const { container } = render(_jsx(Stack, { as: "form", onSubmit: aoEnviar, children: _jsx("button", { type: "submit", children: "Enviar" }) }));
+        fireEvent.submit(container.querySelector("form"));
+        expect(aoEnviar).toHaveBeenCalledTimes(1);
+    });
+    it("escreve as classes de item flex", () => {
+        const { container } = render(_jsx(Stack, { grow: true, shrink: "0", basis: "50", minWidth: "auto", overflow: "hidden", overflowY: "auto", fullHeight: true, children: "x" }));
+        const el = container.firstElementChild;
+        for (const c of [
+            "umds-stack--grow",
+            "umds-stack--shrink-0",
+            "umds-stack--basis-50",
+            "umds-stack--min-w-auto",
+            "umds-stack--overflow-hidden",
+            "umds-stack--overflow-y-auto",
+            "umds-stack--full-height",
+        ]) {
+            expect(el).toHaveClass(c);
+        }
+        expect(el).not.toHaveClass("umds-stack--full-width");
+    });
+});

package/dist/teste/StatCardRotuloTopo.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/StatCardRotuloTopo.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import StatCard from "../components/StatCard/StatCard";
+const raiz = (c) => c.firstElementChild;
+describe("StatCard · labelPosition", () => {
+    it("top escreve a classe; sem a prop o cartão é o de antes", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", labelPosition: "top" }), _jsx(StatCard, { value: 44, label: "N\u00E3o lidos" })] }));
+        expect(container.children[0]).toHaveClass("umds-stat-card--rotulo-topo");
+        expect(container.children[1]).not.toHaveClass("umds-stat-card--rotulo-topo");
+    });
+    it("o número continua antes do rótulo no HTML (ordem do leitor de tela)", () => {
+        const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", labelPosition: "top" }));
+        const valor = container.querySelector(".umds-stat-card__valor");
+        const rotulo = container.querySelector(".umds-stat-card__rotulo");
+        expect(valor.compareDocumentPosition(rotulo) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+});
+describe("StatCard · infoTooltip", () => {
+    it("mostra o ⓘ como botão nomeado, dentro do rótulo, descrito pelo texto de ajuda", () => {
+        const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", infoTooltip: "Ainda n\u00E3o abertos por voc\u00EA." }));
+        const info = screen.getByRole("button", { name: "Mais informações" });
+        expect(container.querySelector(".umds-stat-card__rotulo")?.contains(info)).toBe(true);
+        expect(info).toHaveAccessibleDescription("Ainda não abertos por você.");
+    });
+    it("infoLabel traduz o nome do ⓘ", () => {
+        render(_jsx(StatCard, { value: 1, label: "Unread", infoTooltip: "Not opened yet.", infoLabel: "More info" }));
+        expect(screen.getByRole("button", { name: "More info" })).toBeInTheDocument();
+    });
+    it("sem infoTooltip não há botão", () => {
+        render(_jsx(StatCard, { value: 1, label: "x" }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+});

package/dist/teste/StatCardSecundariaETom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/StatCardSecundariaETom.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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(_jsx(StatCard, { value: "22,31%", label: "Efici\u00EAncia", description: "Meu Setor", secondaryValue: "14,11%", secondaryLabel: "Geral", labelPosition: "top" }));
+        const filhos = [...container.firstElementChild.children].map((e) => e.className);
+        expect(filhos[filhos.length - 1]).toBe("umds-stat-card__secundaria");
+        const secundaria = container.querySelector(".umds-stat-card__secundaria");
+        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.textContent;
+        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(_jsx(StatCard, { value: "5", label: "x", secondaryValue: 0 }));
+        expect(container.querySelector(".umds-stat-card__valor-secundario")).toHaveTextContent("0");
+        rerender(_jsx(StatCard, { value: "5", label: "x", secondaryValue: "" }));
+        expect(container.querySelector(".umds-stat-card__secundaria")).toBeNull();
+        rerender(_jsx(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(_jsx(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(_jsx(StatCard, { value: "5", label: "x", valueTone: "negative" }));
+        expect(container.firstElementChild).toHaveClass("umds-stat-card--valor-negative");
+        rerender(_jsx(StatCard, { value: "5", label: "x", valueTone: "primary" }));
+        expect(container.firstElementChild).toHaveClass("umds-stat-card--valor-primary");
+        rerender(_jsx(StatCard, { value: "5", label: "x", valueTone: "default" }));
+        expect(container.firstElementChild.className).not.toMatch(/valor-/);
+        rerender(_jsx(StatCard, { value: "5", label: "x" }));
+        expect(container.firstElementChild.className).not.toMatch(/valor-/);
+    });
+    it("valueTone não mexe na variant do ícone", () => {
+        const { container } = render(_jsx(StatCard, { value: "5", label: "x", variant: "positive", valueTone: "negative" }));
+        expect(container.firstElementChild).toHaveClass("umds-stat-card--positive", "umds-stat-card--valor-negative");
+    });
+});

package/dist/teste/TabsContadorFechavel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/TabsContadorFechavel.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Tabs from "../components/Tabs/Tabs";
+import Tab from "../components/Tabs/Tab";
+describe("Tab · count", () => {
+    it("mostra o contador em pílula e ele entra no nome da aba", () => {
+        render(_jsxs(Tabs, { value: "0", ariaLabel: "Tarefas", children: [_jsx(Tab, { label: "Todas", index: "0", count: 31 }), _jsx(Tab, { label: "Atribu\u00EDdas", index: "1", count: 9 })] }));
+        expect(screen.getByRole("tab", { name: "Todas 31" })).toBeInTheDocument();
+        expect(screen.getByRole("tab", { name: "Atribuídas 9" })).toBeInTheDocument();
+    });
+    it("o 0 aparece; sem count, não há pílula", () => {
+        const { container } = render(_jsxs(Tabs, { value: "0", children: [_jsx(Tab, { label: "Conclu\u00EDdas", index: "0", count: 0 }), _jsx(Tab, { label: "Sem contador", index: "1" })] }));
+        const pilulas = container.querySelectorAll(".umds-tabs__count");
+        expect(pilulas).toHaveLength(1);
+        expect(pilulas[0].textContent).toBe("0");
+    });
+    it("a pílula fica dentro da aba selecionada (que a pinta de azul pelo CSS)", () => {
+        const { container } = render(_jsxs(Tabs, { value: "1", children: [_jsx(Tab, { label: "A", index: "0", count: 1 }), _jsx(Tab, { label: "B", index: "1", count: 2 })] }));
+        const selecionada = container.querySelector(".umds-tabs__tab--selected");
+        expect(selecionada?.querySelector(".umds-tabs__count")?.textContent).toBe("2");
+    });
+});
+describe("Tab · closable", () => {
+    it("o × é um botão irmão da aba, com o nome 'Fechar <aba>'", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "Documento 1", index: "0", closable: true }) }));
+        const fechar = screen.getByRole("button", { name: "Fechar Documento 1" });
+        const aba = screen.getByRole("tab");
+        expect(aba.contains(fechar)).toBe(false);
+        expect(fechar.parentElement).toBe(aba.parentElement);
+    });
+    it("o rótulo do × vem por prop", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "Doc 1", index: "0", closable: true, closeLabel: "Close" }) }));
+        expect(screen.getByRole("button", { name: "Close Doc 1" })).toBeInTheDocument();
+    });
+    it("clicar no × chama onClose com o index e não troca de aba", () => {
+        const aoFechar = vi.fn();
+        const aoTrocar = vi.fn();
+        render(_jsxs(Tabs, { value: "0", onChange: aoTrocar, children: [_jsx(Tab, { label: "Um", index: "0" }), _jsx(Tab, { label: "Dois", index: "1", closable: true, onClose: aoFechar })] }));
+        fireEvent.click(screen.getByRole("button", { name: "Fechar Dois" }));
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+        expect(aoFechar.mock.calls[0][0]).toBe("1");
+        expect(aoTrocar).not.toHaveBeenCalled();
+    });
+    it("Delete na aba focada fecha; sem closable, não", () => {
+        const aoFechar = vi.fn();
+        render(_jsxs(Tabs, { value: "0", children: [_jsx(Tab, { label: "Fech\u00E1vel", index: "0", closable: true, onClose: aoFechar }), _jsx(Tab, { label: "Fixa", index: "1", onClose: aoFechar })] }));
+        fireEvent.keyDown(screen.getByRole("tab", { name: "Fechável" }), { key: "Delete" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+        fireEvent.keyDown(screen.getByRole("tab", { name: "Fixa" }), { key: "Delete" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("sem closable não há ×", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "Fixa", index: "0" }) }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("o tablist só tem abas como filhas de papel (o × não é tab)", () => {
+        render(_jsxs(Tabs, { value: "0", children: [_jsx(Tab, { label: "A", index: "0", closable: true }), _jsx(Tab, { label: "B", index: "1", closable: true })] }));
+        expect(screen.getAllByRole("tab")).toHaveLength(2);
+    });
+});
+describe("Tabs · onAdd", () => {
+    it("mostra o + fora do tablist e chama onAdd", () => {
+        const aoAdicionar = vi.fn();
+        render(_jsx(Tabs, { value: "0", onAdd: aoAdicionar, children: _jsx(Tab, { label: "A", index: "0" }) }));
+        const mais = screen.getByRole("button", { name: "Adicionar aba" });
+        expect(screen.getByRole("tablist").contains(mais)).toBe(false);
+        fireEvent.click(mais);
+        expect(aoAdicionar).toHaveBeenCalledTimes(1);
+    });
+    it("o rótulo do + vem por prop", () => {
+        render(_jsx(Tabs, { value: "0", onAdd: () => { }, addLabel: "New tab", children: _jsx(Tab, { label: "A", index: "0" }) }));
+        expect(screen.getByRole("button", { name: "New tab" })).toBeInTheDocument();
+    });
+    it("sem onAdd não há botão", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "A", index: "0" }) }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+});

package/dist/teste/ToastAcaoEDetalhes.test.d.ts

@@ -0,0 +1 @@
+export {};