@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/FileInputTrigger.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import FileInput from "../components/FileInput/FileInput";
+const arquivo = (nome) => new File(["conteudo"], nome, { type: "application/pdf" });
+describe("FileInput · variant trigger", () => {
+    it("renderiza o conteúdo como gatilho, sem a caixa de arrastar", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", children: _jsx("button", { type: "button", children: "Anexar arquivo" }) }));
+        expect(screen.getByRole("button", { name: "Anexar arquivo" })).toBeInTheDocument();
+        expect(container.querySelector(".umds-file-input__drop-zone")).toBeNull();
+        expect(container.querySelector(".umds-file-input--trigger")).not.toBeNull();
+    });
+    it("clicar no conteúdo abre o seletor (clique no input nativo)", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", children: _jsx("button", { type: "button", children: "Anexar arquivo" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        const clique = vi.spyOn(nativo, "click");
+        fireEvent.click(screen.getByRole("button", { name: "Anexar arquivo" }));
+        expect(clique).toHaveBeenCalledTimes(1);
+    });
+    it("disabled não abre o seletor", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", disabled: true, children: _jsx("span", { children: "Alterar foto" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        const clique = vi.spyOn(nativo, "click");
+        fireEvent.click(screen.getByText("Alterar foto"));
+        expect(clique).not.toHaveBeenCalled();
+    });
+    it("escolher arquivos chama onChange, e accept e multiple chegam ao input", () => {
+        const aoMudar = vi.fn();
+        const { container } = render(_jsx(FileInput, { variant: "trigger", accept: ".pdf", multiple: true, onChange: aoMudar, children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        expect(nativo).toHaveAttribute("accept", ".pdf");
+        expect(nativo).toHaveAttribute("multiple");
+        fireEvent.change(nativo, { target: { files: [arquivo("a.pdf"), arquivo("b.pdf")] } });
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+        expect(aoMudar.mock.calls[0][0].map((f) => f.name)).toEqual(["a.pdf", "b.pdf"]);
+    });
+    it("o input nativo não entra no Tab e tem nome acessível", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", label: "Anexar arquivo", children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        expect(nativo).toHaveAttribute("tabindex", "-1");
+        expect(nativo).toHaveAttribute("aria-label", "Anexar arquivo");
+        // o rótulo visível não aparece: o gatilho é o conteúdo
+        expect(container.querySelector(".umds-file-input__label")).toBeNull();
+    });
+    it("a lista de arquivos continua aparecendo no modo trigger", () => {
+        render(_jsx(FileInput, { variant: "trigger", files: [{ name: "oficio.pdf", size: 2048 }], children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        expect(screen.getByText("oficio.pdf")).toBeInTheDocument();
+    });
+    it("as variantes base e card seguem com a caixa", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(FileInput, { variant: "base" }), _jsx(FileInput, { variant: "card" })] }));
+        expect(container.querySelectorAll(".umds-file-input__drop-zone")).toHaveLength(2);
+    });
+});

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

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

package/dist/teste/IconPicker.test.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { faBuilding, faFileLines, faFolder, faGavel, faUser } from "@fortawesome/free-solid-svg-icons";
+import IconPicker from "../components/IconPicker/IconPicker";
+const ICONES = [
+    faUser,
+    faFolder,
+    faFileLines,
+    { icon: faBuilding, label: "Prédio", keywords: ["prefeitura", "órgão"] },
+    { icon: faGavel, label: "Martelo", keywords: ["jurídico", "decisão"] },
+];
+const radios = () => screen.getAllByRole("radio");
+describe("IconPicker", () => {
+    it("é um radiogroup com um radio por ícone, nomeado pelo iconName sem hífen", () => {
+        render(_jsx(IconPicker, { ariaLabel: "\u00CDcone da categoria", icons: ICONES }));
+        expect(screen.getByRole("radiogroup", { name: "Ícone da categoria" })).toBeInTheDocument();
+        expect(radios()).toHaveLength(5);
+        expect(screen.getByRole("radio", { name: "user" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "file lines" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "Prédio" })).toBeInTheDocument();
+    });
+    it("iconLabel traduz os nomes que não vêm com label", () => {
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: [faUser, faFolder], iconLabel: (n) => ({ user: "Pessoa", folder: "Pasta" }[n]) }));
+        expect(screen.getByRole("radio", { name: "Pessoa" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "Pasta" })).toBeInTheDocument();
+    });
+    it("clicar escolhe e entrega o NOME do ícone e o item em onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, onChange: aoMudar }));
+        await usuario.click(screen.getByRole("radio", { name: "folder" }));
+        expect(aoMudar).toHaveBeenCalledWith("folder", faFolder);
+        expect(screen.getByRole("radio", { name: "folder" })).toHaveAttribute("aria-checked", "true");
+        await usuario.click(screen.getByRole("radio", { name: "Prédio" }));
+        expect(aoMudar).toHaveBeenLastCalledWith("building", ICONES[3]);
+    });
+    it("defaultValue marca o escolhido; só ele entra na ordem de Tab", () => {
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, defaultValue: "file-lines" }));
+        expect(screen.getByRole("radio", { name: "file lines" })).toHaveAttribute("aria-checked", "true");
+        const comTab = radios().filter((r) => r.getAttribute("tabindex") === "0");
+        expect(comTab).toHaveLength(1);
+        expect(comTab[0]).toHaveAccessibleName("file lines");
+    });
+    it("sem valor, Tab entra no primeiro", () => {
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES }));
+        expect(radios()[0]).toHaveAttribute("tabindex", "0");
+    });
+    it("a busca filtra por nome, rótulo e palavras-chave, sem acento nem caixa", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES }));
+        const campo = screen.getByRole("searchbox", { name: "Buscar ícone" });
+        await usuario.type(campo, "PREFEITURA");
+        expect(radios()).toHaveLength(1);
+        expect(radios()[0]).toHaveAccessibleName("Prédio");
+        await usuario.clear(campo);
+        await usuario.type(campo, "juridico");
+        expect(radios().map((r) => r.getAttribute("aria-label"))).toEqual(["Martelo"]);
+        await usuario.clear(campo);
+        await usuario.type(campo, "fol");
+        expect(radios().map((r) => r.getAttribute("aria-label"))).toEqual(["folder"]);
+    });
+    it("a quantidade de resultados é anunciada e resultsLabel traduz", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, resultsLabel: "{count} icons" }));
+        expect(screen.getByRole("status")).toHaveTextContent("5 icons");
+        await usuario.type(screen.getByRole("searchbox"), "user");
+        expect(screen.getByRole("status")).toHaveTextContent("1 icons");
+    });
+    it("sem resultado mostra o texto e some a grade", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, emptyText: "Nada por aqui" }));
+        await usuario.type(screen.getByRole("searchbox"), "zzz");
+        expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
+        expect(screen.queryByRole("radiogroup")).toBeNull();
+    });
+    it("setas movem a escolha e o foco; cima e baixo andam uma linha (columns)", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, columns: 2, defaultValue: "user", onChange: aoMudar }));
+        radios()[0].focus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(aoMudar).toHaveBeenLastCalledWith("folder", faFolder);
+        expect(radios()[1]).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(radios()[3]).toHaveFocus();
+        await usuario.keyboard("{ArrowUp}");
+        expect(radios()[1]).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(radios()[4]).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(radios()[0]).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}");
+        expect(radios()[4]).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(radios()[0]).toHaveFocus();
+    });
+    it("seta para baixo no campo de busca leva à grade", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, defaultValue: "folder" }));
+        await usuario.click(screen.getByRole("searchbox"));
+        await usuario.keyboard("{ArrowDown}");
+        expect(screen.getByRole("radio", { name: "folder" })).toHaveFocus();
+    });
+    it("hideSearch tira o campo; disabled desabilita tudo", () => {
+        const { rerender } = render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, hideSearch: true }));
+        expect(screen.queryByRole("searchbox")).toBeNull();
+        rerender(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, disabled: true }));
+        for (const r of radios())
+            expect(r).toBeDisabled();
+    });
+    it("textos da busca por prop; label visível nomeia o grupo; columns vira o grid", () => {
+        const { container } = render(_jsx(IconPicker, { label: "\u00CDcone", id: "ip", icons: ICONES, searchLabel: "Search icon", searchPlaceholder: "Search...", columns: 4, maxHeight: 120 }));
+        expect(screen.getByRole("radiogroup", { name: "Ícone" })).toBeInTheDocument();
+        expect(screen.getByRole("searchbox", { name: "Search icon" })).toHaveAttribute("placeholder", "Search...");
+        const grade = container.querySelector(".umds-icon-picker__grid");
+        expect(grade.style.gridTemplateColumns).toBe("repeat(4, var(--umds-icon-picker-tile))");
+        expect(grade.style.maxHeight).toBe("120px");
+    });
+    it("controlado: reflete o value", () => {
+        function Pai() {
+            const [valor, setValor] = useState("gavel");
+            return _jsx(IconPicker, { ariaLabel: "x", icons: ICONES, value: valor, onChange: setValor });
+        }
+        render(_jsx(Pai, {}));
+        expect(screen.getByRole("radio", { name: "Martelo" })).toHaveAttribute("aria-checked", "true");
+    });
+});

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

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

package/dist/teste/InputAgrupado.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Input from "../components/Input/Input";
+describe("Input · grouped", () => {
+    it("grouped liga a classe própria e a do borderless; sem a prop, nenhuma das duas", () => {
+        const { container, rerender } = render(_jsx(Input, { ariaLabel: "Adicionar setor", grouped: true }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).toHaveClass("umds-input--grouped");
+        expect(raiz()).toHaveClass("umds-input--borderless");
+        rerender(_jsx(Input, { ariaLabel: "Adicionar setor" }));
+        expect(raiz()).not.toHaveClass("umds-input--grouped");
+        expect(raiz()).not.toHaveClass("umds-input--borderless");
+    });
+    it("borderless sozinho não ganha a classe do grupo (segue com altura de campo e foco próprio)", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "x", borderless: true }));
+        expect(container.firstElementChild).toHaveClass("umds-input--borderless");
+        expect(container.firstElementChild).not.toHaveClass("umds-input--grouped");
+    });
+    it("o campo continua digitável dentro do grupo", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "Adicionar setor", grouped: true, placeholder: "SADM, SOBR..." }));
+        expect(container.querySelector("input")).toHaveAttribute("placeholder", "SADM, SOBR...");
+    });
+});

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

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

package/dist/teste/InputMascaraEAfins.test.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import Input from "../components/Input/Input";
+describe("Input · onChange a cada tecla, uma vez só", () => {
+    it("digitar chama onChange uma vez por tecla, com o valor novo", async () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Nome", onChange: aoMudar }));
+        await userEvent.type(screen.getByLabelText("Nome"), "ab");
+        expect(aoMudar.mock.calls.map((c) => c[0])).toEqual(["a", "ab"]);
+    });
+    it("change disparado à mão também chega (testes de quem consome)", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Nome", onChange: aoMudar }));
+        fireEvent.change(screen.getByLabelText("Nome"), { target: { value: "xyz" } });
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+        expect(aoMudar).toHaveBeenCalledWith("xyz");
+    });
+    it("onBlur continua sendo o evento de saída do campo", async () => {
+        const aoSair = vi.fn();
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Nome", onBlur: aoSair, onChange: aoMudar }));
+        const campo = screen.getByLabelText("Nome");
+        await userEvent.type(campo, "a");
+        expect(aoSair).not.toHaveBeenCalled();
+        await userEvent.tab();
+        expect(aoSair).toHaveBeenCalledTimes(1);
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Input · mask", () => {
+    async function digitar(mask, texto) {
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Campo", mask: mask, onChange: aoMudar }));
+        const campo = screen.getByLabelText("Campo");
+        await userEvent.type(campo, texto);
+        return { campo, aoMudar };
+    }
+    it("cpf", async () => {
+        const { campo, aoMudar } = await digitar("cpf", "12345678901");
+        expect(campo.value).toBe("123.456.789-01");
+        expect(aoMudar).toHaveBeenLastCalledWith("123.456.789-01");
+    });
+    it("cnpj", async () => {
+        const { campo } = await digitar("cnpj", "12345678000190");
+        expect(campo.value).toBe("12.345.678/0001-90");
+    });
+    it("cep", async () => {
+        const { campo } = await digitar("cep", "80010000");
+        expect(campo.value).toBe("80010-000");
+    });
+    it("phone troca de formato com 10 ou 11 dígitos", async () => {
+        expect((await digitar("phone", "4133334444")).campo.value).toBe("(41) 3333-4444");
+    });
+    it("phone de 11 dígitos", async () => {
+        expect((await digitar("phone", "41999998888")).campo.value).toBe("(41) 99999-8888");
+    });
+    it("ignora letras e passa do tamanho, sem estourar", async () => {
+        const { campo } = await digitar("cpf", "12a3.4b5-678901999");
+        expect(campo.value).toBe("123.456.789-01");
+    });
+    it("valor controlado com dígitos aparece formatado", () => {
+        render(_jsx(Input, { label: "CPF", mask: "cpf", value: "12345678901", onChange: () => { } }));
+        expect(screen.getByLabelText("CPF").value).toBe("123.456.789-01");
+    });
+    it("abre o teclado numérico e limita o tamanho; sem máscara, nenhum dos dois", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Input, { label: "Com", mask: "cep" }), _jsx(Input, { label: "Sem" })] }));
+        expect(screen.getByLabelText("Com")).toHaveAttribute("inputmode", "numeric");
+        expect(screen.getByLabelText("Com")).toHaveAttribute("maxlength", "9");
+        expect(screen.getByLabelText("Sem")).not.toHaveAttribute("inputmode");
+        expect(screen.getByLabelText("Sem")).not.toHaveAttribute("maxlength");
+    });
+});
+describe("Input · iconRight e borderless", () => {
+    it("iconRight é decorativo: aparece, não é botão e fica fora da árvore de acessibilidade", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "N\u00FAmero", iconRight: faMagnifyingGlass }));
+        const icone = container.querySelector(".umds-input__icon-right");
+        expect(icone).not.toBeNull();
+        expect(icone).toHaveAttribute("aria-hidden", "true");
+        expect(icone.querySelector("svg")).not.toBeNull();
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("sem iconRight não há ícone à direita", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "x" }));
+        expect(container.querySelector(".umds-input__icon-right")).toBeNull();
+    });
+    it("borderless escreve a classe; sem a prop não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Input, { ariaLabel: "a", borderless: true }), _jsx(Input, { ariaLabel: "b" })] }));
+        expect(container.children[0]).toHaveClass("umds-input--borderless");
+        expect(container.children[1]).not.toHaveClass("umds-input--borderless");
+    });
+    it("borderless com erro continua marcando o erro", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "a", borderless: true, errorMessage: "Obrigat\u00F3rio" }));
+        expect(container.firstElementChild).toHaveClass("umds-input--borderless", "umds-input--error");
+        expect(screen.getByLabelText("a")).toHaveAttribute("aria-invalid", "true");
+    });
+});

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

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

package/dist/teste/KbdCodeBlock.test.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Kbd from "../components/Kbd/Kbd";
+import CodeBlock from "../components/CodeBlock/CodeBlock";
+describe("Kbd", () => {
+    it("uma tecla é um kbd com o texto", () => {
+        const { container } = render(_jsx(Kbd, { children: "Esc" }));
+        const tecla = container.querySelector("kbd");
+        expect(tecla).toHaveTextContent("Esc");
+        expect(tecla).toHaveClass("umds-kbd", "umds-kbd--md");
+        expect(container.querySelectorAll("kbd")).toHaveLength(1);
+    });
+    it("keys desenha uma tecla por item, com o separador entre elas", () => {
+        const { container } = render(_jsx(Kbd, { keys: ["Ctrl", "Shift", "P"] }));
+        const conjunto = container.querySelector("kbd.umds-kbd-combo");
+        expect(conjunto).not.toBeNull();
+        expect(conjunto.querySelectorAll("kbd.umds-kbd")).toHaveLength(3);
+        expect(conjunto.textContent).toBe("Ctrl+Shift+P");
+    });
+    it("separator troca o texto entre as teclas; size vira classe", () => {
+        const { container } = render(_jsx(Kbd, { keys: ["Ctrl", "K"], separator: " + ", size: "sm" }));
+        expect(container.querySelector("kbd")).toHaveClass("umds-kbd--sm");
+        expect(container.textContent).toBe("Ctrl + K");
+    });
+    it("atributos HTML vão para o kbd", () => {
+        const { container } = render(_jsx(Kbd, { title: "Atalho", "data-x": "1", children: "Tab" }));
+        const tecla = container.querySelector("kbd");
+        expect(tecla).toHaveAttribute("title", "Atalho");
+        expect(tecla).toHaveAttribute("data-x", "1");
+    });
+});
+describe("CodeBlock", () => {
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    it("mostra o código em pre/code, mantendo as quebras, numa região focável e nomeada", () => {
+        const { container } = render(_jsx(CodeBlock, { code: '{\n  "ok": true\n}', ariaLabel: "Resposta" }));
+        const regiao = screen.getByRole("region", { name: "Resposta" });
+        expect(regiao.tagName).toBe("PRE");
+        expect(regiao).toHaveAttribute("tabindex", "0");
+        expect(container.querySelector("code")?.textContent).toBe('{\n  "ok": true\n}');
+    });
+    it("o texto também vem como conteúdo; o nome padrão é a linguagem, ou Código", () => {
+        const { rerender } = render(_jsx(CodeBlock, { language: "JSON", children: "{}" }));
+        expect(screen.getByRole("region", { name: "JSON" })).toHaveTextContent("{}");
+        expect(screen.getByText("JSON", { selector: ".umds-code-block__language" })).toBeInTheDocument();
+        rerender(_jsx(CodeBlock, { code: "x" }));
+        expect(screen.getByRole("region", { name: "Código" })).toBeInTheDocument();
+    });
+    it("wrap e maxHeight", () => {
+        const { container } = render(_jsx(CodeBlock, { code: "linha longa", wrap: true, maxHeight: 120 }));
+        expect(container.querySelector(".umds-code-block--wrap")).not.toBeNull();
+        expect(container.querySelector("pre").style.maxHeight).toBe("120px");
+    });
+    it("sem copyable e sem linguagem, não há cabeçalho nem botão", () => {
+        render(_jsx(CodeBlock, { code: "x" }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("copiar manda o texto inteiro à área de transferência, confirma e volta depois de 2 s", async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        const escrever = vi.fn(() => Promise.resolve());
+        const aoCopiar = vi.fn();
+        const usuario = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        // O userEvent.setup instala a própria área de transferência: o espião entra depois.
+        Object.defineProperty(navigator, "clipboard", { value: { writeText: escrever }, configurable: true });
+        render(_jsx(CodeBlock, { code: '{"a":1}', copyable: true, onCopy: aoCopiar }));
+        await usuario.click(screen.getByRole("button", { name: "Copiar" }));
+        expect(escrever).toHaveBeenCalledWith('{"a":1}');
+        expect(await screen.findByRole("button", { name: "Copiado" })).toBeInTheDocument();
+        expect(aoCopiar).toHaveBeenCalledWith('{"a":1}');
+        expect(screen.getByRole("status")).toHaveTextContent("Copiado");
+        await act(async () => {
+            vi.advanceTimersByTime(2100);
+        });
+        expect(screen.getByRole("button", { name: "Copiar" })).toBeInTheDocument();
+    });
+    it("copiar com o texto vindo como conteúdo lê o texto do bloco", async () => {
+        const escrever = vi.fn(() => Promise.resolve());
+        const usuario = userEvent.setup();
+        Object.defineProperty(navigator, "clipboard", { value: { writeText: escrever }, configurable: true });
+        render(_jsx(CodeBlock, { copyable: true, children: "npm run build" }));
+        await usuario.click(screen.getByRole("button", { name: "Copiar" }));
+        expect(escrever).toHaveBeenCalledWith("npm run build");
+    });
+    it("copyLabel e copiedLabel por prop", async () => {
+        const usuario = userEvent.setup();
+        Object.defineProperty(navigator, "clipboard", { value: { writeText: () => Promise.resolve() }, configurable: true });
+        render(_jsx(CodeBlock, { code: "x", copyable: true, copyLabel: "Copy", copiedLabel: "Copied" }));
+        await usuario.click(screen.getByRole("button", { name: "Copy" }));
+        expect(await screen.findByRole("button", { name: "Copied" })).toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/List.test.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { faInbox } from "@fortawesome/free-solid-svg-icons";
+import List from "../components/List/List";
+import ListItem from "../components/List/ListItem";
+describe("ListItem", () => {
+    it("sem as nem href é um button dentro de um li", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando 114/2025" }) }));
+        const botao = screen.getByRole("button", { name: /Memorando 114\/2025/ });
+        expect(botao.tagName).toBe("BUTTON");
+        expect(botao).toHaveAttribute("type", "button");
+        expect(botao.parentElement?.tagName).toBe("LI");
+        expect(container.querySelectorAll("li")).toHaveLength(1);
+    });
+    it("com href vira link; target _blank ganha rel seguro", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Of\u00EDcio", href: "/oficios/31", target: "_blank" }) }));
+        const link = screen.getByRole("link", { name: /Ofício/ });
+        expect(link).toHaveAttribute("href", "/oficios/31");
+        expect(link).toHaveAttribute("rel", "noopener noreferrer");
+    });
+    it("as='div' sem onClick é só leitura: sem role nem tabindex", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { as: "div", title: "Somente leitura" }) }));
+        const linha = container.querySelector(".umds-list-item");
+        expect(linha.tagName).toBe("DIV");
+        expect(linha).not.toHaveAttribute("role");
+        expect(linha).not.toHaveAttribute("tabindex");
+        expect(linha).not.toHaveClass("umds-list-item--interactive");
+    });
+    it("as='div' com onClick é acionável por Enter e Espaço", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx("ul", { children: _jsx(ListItem, { as: "div", title: "Acion\u00E1vel", onClick: aoClicar }) }));
+        const linha = screen.getByRole("button", { name: /Acionável/ });
+        linha.focus();
+        await usuario.keyboard("{Enter}");
+        await usuario.keyboard(" ");
+        expect(aoClicar).toHaveBeenCalledTimes(2);
+    });
+    it("monta título, subtítulo, meta, início e fim nos lugares certos", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando 114/2025", subtitle: "Novo contrato - Governo", meta: "23 de agosto de 2025", start: _jsx("span", { "data-testid": "inicio", children: "AV" }), end: _jsx("span", { "data-testid": "fim", children: "novo" }), children: _jsx("span", { "data-testid": "livre", children: "conte\u00FAdo livre" }) }) }));
+        expect(container.querySelector(".umds-list-item__title")).toHaveTextContent("Memorando 114/2025");
+        expect(container.querySelector(".umds-list-item__subtitle")).toHaveTextContent("Novo contrato - Governo");
+        expect(container.querySelector(".umds-list-item__meta")).toHaveTextContent("23 de agosto de 2025");
+        expect(container.querySelector(".umds-list-item__start")).toContainElement(screen.getByTestId("inicio"));
+        expect(container.querySelector(".umds-list-item__end")).toContainElement(screen.getByTestId("fim"));
+        expect(container.querySelector(".umds-list-item__body")).toContainElement(screen.getByTestId("livre"));
+    });
+    it("title aceita nó e não vira o atributo title do HTML", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: _jsx("b", { "data-testid": "rico", children: "Rico" }) }) }));
+        expect(screen.getByTestId("rico")).toBeInTheDocument();
+        expect(container.querySelector("[title]")).toBeNull();
+    });
+    it("sem start, end e textos, não desenha as regiões vazias", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "S\u00F3 t\u00EDtulo" }) }));
+        expect(container.querySelector(".umds-list-item__start")).toBeNull();
+        expect(container.querySelector(".umds-list-item__end")).toBeNull();
+        expect(container.querySelector(".umds-list-item__subtitle")).toBeNull();
+        expect(container.querySelector(".umds-list-item__meta")).toBeNull();
+    });
+    it("selected marca aria-current e a classe de seleção", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Atual", selected: true }) }));
+        const botao = screen.getByRole("button", { name: /Atual/ });
+        expect(botao).toHaveAttribute("aria-current", "true");
+        expect(botao).toHaveClass("umds-list-item--selected");
+    });
+    it("disabled bloqueia o clique e o foco do botão", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Bloqueada", disabled: true, onClick: aoClicar }) }));
+        const botao = screen.getByRole("button", { name: /Bloqueada/ });
+        expect(botao).toBeDisabled();
+        await usuario.click(botao);
+        expect(aoClicar).not.toHaveBeenCalled();
+    });
+    it("link disabled perde o href e declara aria-disabled", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Link bloqueado", href: "/x", disabled: true }) }));
+        const link = screen.getByText("Link bloqueado").closest("a");
+        expect(link).not.toHaveAttribute("href");
+        expect(link).toHaveAttribute("aria-disabled", "true");
+    });
+    it("clique chama onClick com o evento", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Abrir", onClick: aoClicar }) }));
+        await usuario.click(screen.getByRole("button", { name: /Abrir/ }));
+        expect(aoClicar).toHaveBeenCalledTimes(1);
+    });
+    it("repassa aria-label, id, data-* e style ao elemento interativo", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { "aria-label": "Abrir memorando", id: "item-1", "data-origem": "home", style: { marginTop: 4 } }) }));
+        const botao = screen.getByRole("button", { name: "Abrir memorando" });
+        expect(botao).toHaveAttribute("id", "item-1");
+        expect(botao).toHaveAttribute("data-origem", "home");
+        expect(botao).toHaveStyle({ marginTop: "4px" });
+    });
+});
+describe("List", () => {
+    it("é uma ul com role list, nome acessível e gap padrão", () => {
+        render(_jsxs(List, { ariaLabel: "Documentos n\u00E3o lidos", children: [_jsx(ListItem, { title: "A" }), _jsx(ListItem, { title: "B" })] }));
+        const lista = screen.getByRole("list", { name: "Documentos não lidos" });
+        expect(lista.tagName).toBe("UL");
+        expect(lista).toHaveClass("umds-list--gap-quarck");
+        expect(screen.getAllByRole("listitem")).toHaveLength(2);
+    });
+    it("as='ol' e gap trocam o elemento e a classe", () => {
+        render(_jsx(List, { as: "ol", gap: "nano", ariaLabel: "Passos", children: _jsx(ListItem, { title: "A" }) }));
+        const lista = screen.getByRole("list", { name: "Passos" });
+        expect(lista.tagName).toBe("OL");
+        expect(lista).toHaveClass("umds-list--gap-nano");
+    });
+    it("ariaLabelledby aponta para o título visível", () => {
+        render(_jsxs(_Fragment, { children: [_jsx("h2", { id: "titulo", children: "Prazos a vencer" }), _jsx(List, { ariaLabelledby: "titulo", children: _jsx(ListItem, { title: "A" }) })] }));
+        expect(screen.getByRole("list", { name: "Prazos a vencer" })).toBeInTheDocument();
+    });
+    it("sem isEmpty mostra os itens e nunca o estado vazio", () => {
+        render(_jsx(List, { ariaLabel: "Lista", emptyTitle: "Nada aqui", children: _jsx(ListItem, { title: "A" }) }));
+        expect(screen.queryByText("Nada aqui")).toBeNull();
+    });
+    it("isEmpty troca os itens pelo EmptyState dentro da própria lista", () => {
+        const aoAgir = vi.fn();
+        const { container } = render(_jsx(List, { ariaLabel: "Lista", isEmpty: true, emptyTitle: "Nenhum documento", emptyDescription: "Tudo em dia.", emptyIcon: faInbox, emptyActionLabel: "Atualizar", onEmptyAction: aoAgir, children: _jsx(ListItem, { title: "N\u00E3o aparece" }) }));
+        expect(screen.queryByRole("list")).toBeNull();
+        expect(screen.queryByText("Não aparece")).toBeNull();
+        const raiz = container.firstElementChild;
+        expect(raiz).toHaveAttribute("role", "status");
+        expect(raiz).toHaveClass("umds-list--empty");
+        expect(raiz.querySelector(".umds-empty-state")).not.toBeNull();
+        expect(screen.getByText("Nenhum documento")).toBeInTheDocument();
+        expect(screen.getByText("Tudo em dia.")).toBeInTheDocument();
+        expect(raiz.querySelector(".umds-empty-state--sm")).not.toBeNull();
+        screen.getByRole("button", { name: "Atualizar" }).click();
+        expect(aoAgir).toHaveBeenCalledTimes(1);
+    });
+    it("isEmpty sem título usa o texto padrão", () => {
+        render(_jsx(List, { ariaLabel: "Lista", isEmpty: true }));
+        expect(screen.getByText("Nenhum item encontrado")).toBeInTheDocument();
+    });
+    it("o conteúdo ao redor da lista não é desmontado ao esvaziar", () => {
+        const Tela = ({ vazia }) => (_jsxs("section", { children: [_jsx("h2", { children: "Documentos" }), _jsx("input", { "aria-label": "Buscar" }), _jsx(List, { ariaLabel: "Documentos", isEmpty: vazia, children: _jsx(ListItem, { title: "A" }) }), _jsx("nav", { "aria-label": "Pagina\u00E7\u00E3o", children: "p\u00E1g. 1" })] }));
+        const { rerender } = render(_jsx(Tela, { vazia: false }));
+        const busca = screen.getByLabelText("Buscar");
+        rerender(_jsx(Tela, { vazia: true }));
+        expect(screen.getByLabelText("Buscar")).toBe(busca);
+        expect(screen.getByRole("heading", { name: "Documentos" })).toBeInTheDocument();
+        expect(screen.getByRole("navigation", { name: "Paginação" })).toBeInTheDocument();
+    });
+    it("slot empty (prop empty no React) substitui o EmptyState", () => {
+        render(_jsx(List, { ariaLabel: "Lista", isEmpty: true, empty: _jsx("p", { "data-testid": "vazio", children: "Nada por aqui" }) }));
+        expect(screen.getByTestId("vazio")).toBeInTheDocument();
+        expect(document.querySelector(".umds-empty-state")).toBeNull();
+    });
+});

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

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

package/dist/teste/ListItemTooltipStandalone.test.js

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

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

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