@1doc/1ds-react 2.10.0 → 2.11.1

package/dist/teste/AccordionControlado.test.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+const ITENS = [
+    { id: "prazos", title: "Prazos", content: "Dez dias úteis.", defaultOpen: true },
+    { id: "anexos", title: "Anexos", content: "Até 10 MB." },
+    { id: "sigilo", title: "Sigilo", content: "Só o setor." },
+];
+const aberto = (nome) => screen.getByRole("button", { name: nome }).getAttribute("aria-expanded") === "true";
+describe("Accordion · não controlado (como antes)", () => {
+    it("começa pelos defaultOpen e o clique abre e fecha; onOpenChange avisa a nova lista", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Accordion, { items: ITENS, multiple: true, onOpenChange: aoMudar }));
+        expect(aberto("Prazos")).toBe(true);
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(aberto("Anexos")).toBe(true);
+        expect(aoMudar).toHaveBeenLastCalledWith(["prazos", "anexos"]);
+        fireEvent.click(screen.getByRole("button", { name: "Prazos" }));
+        expect(aberto("Prazos")).toBe(false);
+        expect(aoMudar).toHaveBeenLastCalledWith(["anexos"]);
+    });
+    it("sem multiple, abrir um fecha o outro", () => {
+        render(_jsx(Accordion, { items: ITENS }));
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(aberto("Anexos")).toBe(true);
+        expect(aberto("Prazos")).toBe(false);
+    });
+});
+describe("Accordion · controlado (open e onOpenChange)", () => {
+    it("open manda: o que está em open está aberto, ignorando defaultOpen", () => {
+        render(_jsx(Accordion, { items: ITENS, open: ["sigilo"] }));
+        expect(aberto("Sigilo")).toBe(true);
+        expect(aberto("Prazos")).toBe(false);
+    });
+    it("o clique só pede (onOpenChange); sem o app mudar open, nada abre", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Accordion, { items: ITENS, multiple: true, open: ["prazos"], onOpenChange: aoMudar }));
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(aoMudar).toHaveBeenCalledWith(["prazos", "anexos"]);
+        expect(aberto("Anexos")).toBe(false);
+    });
+    it("o app guarda a escolha: com o estado dele, abre, fecha e a lista chega em ordem", () => {
+        let ultima = [];
+        function App() {
+            const [abertos, setAbertos] = useState([]);
+            return (_jsx(Accordion, { items: ITENS, multiple: true, open: abertos, onOpenChange: (ids) => {
+                    ultima = ids;
+                    setAbertos(ids);
+                } }));
+        }
+        render(_jsx(App, {}));
+        expect(aberto("Prazos")).toBe(false);
+        fireEvent.click(screen.getByRole("button", { name: "Sigilo" }));
+        fireEvent.click(screen.getByRole("button", { name: "Anexos" }));
+        expect(ultima).toEqual(["sigilo", "anexos"]);
+        expect(aberto("Sigilo") && aberto("Anexos")).toBe(true);
+        fireEvent.click(screen.getByRole("button", { name: "Sigilo" }));
+        expect(ultima).toEqual(["anexos"]);
+        expect(aberto("Sigilo")).toBe(false);
+    });
+    it("open vazio é controlado (tudo fechado), não ausência", () => {
+        render(_jsx(Accordion, { items: ITENS, open: [] }));
+        expect(aberto("Prazos")).toBe(false);
+    });
+    it("item desabilitado não pede nada", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Accordion, { items: [{ id: "x", title: "Bloqueado", content: "...", disabled: true }], open: [], onOpenChange: aoMudar }));
+        fireEvent.click(screen.getByRole("button", { name: "Bloqueado" }));
+        expect(aoMudar).not.toHaveBeenCalled();
+    });
+});

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

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

package/dist/teste/BadgeAttachedTomEPadding.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+import { lerArquivo } from "./lerArquivo";
+const cssBadge = await lerArquivo("../core/src/components/Badge/Badge.css");
+const css = cssBadge.replace(/\r\n/g, "\n");
+const bloco = (seletor) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+};
+describe("Badge 2xs · padding lateral de 8px", () => {
+    it("a regra do 2xs usa o degrau nano (8px) dos lados e o micro (2px) em cima e embaixo", () => {
+        expect(bloco(".umds-badge--2xs")).toMatch(/padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-nano\)/);
+    });
+    it("os outros tamanhos não mudam de padding", () => {
+        expect(bloco(".umds-badge--xs")).toMatch(/padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-quarck\)/);
+        expect(bloco(".umds-badge--md")).toMatch(/padding:\s*var\(--umds-primitive-spacing-quarck\)\s+var\(--umds-primitive-spacing-nano\)/);
+    });
+});
+describe("Badge attached · 22px e tom escuro", () => {
+    it("o rótulo colado tem altura mínima de 22px (24 - 2), de qualquer tamanho", () => {
+        expect(bloco(".umds-badge--attached")).toMatch(/min-height:\s*calc\(var\(--umds-primitive-spacing-xxs\)\s*-\s*var\(--umds-primitive-spacing-micro\)\)/);
+        const { container } = render(_jsx(Badge, { attached: true, size: "xs", variant: "neutral", appearance: "solid", children: "Tarefa manual" }));
+        expect(container.firstElementChild).toHaveClass("umds-badge--attached", "umds-badge--xs");
+    });
+    it("attachedTone dark escreve a classe; sem ela e com light, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Badge, { attached: true, attachedTone: "dark", variant: "neutral", appearance: "solid", children: "A" }), _jsx(Badge, { attached: true, variant: "neutral", appearance: "solid", children: "B" }), _jsx(Badge, { attached: true, attachedTone: "light", variant: "neutral", appearance: "solid", children: "C" })] }));
+        expect(container.children[0]).toHaveClass("umds-badge--attached-dark");
+        expect(container.children[1]).not.toHaveClass("umds-badge--attached-dark");
+        expect(container.children[2]).not.toHaveClass("umds-badge--attached-dark");
+    });
+    it("sem attached o tom é ignorado", () => {
+        const { container } = render(_jsx(Badge, { attachedTone: "dark", variant: "neutral", appearance: "solid", children: "A" }));
+        expect(container.firstElementChild).not.toHaveClass("umds-badge--attached-dark");
+    });
+    it("CSS: o escuro é neutral-dark-down com texto branco, só no neutro sólido colado", () => {
+        const regra = bloco(".umds-badge--attached.umds-badge--neutral.umds-badge--solid.umds-badge--attached-dark");
+        expect(regra).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-dark-down\)/);
+        expect(regra).toMatch(/color:\s*var\(--umds-semantic-color-neutral-light-pure\)/);
+        expect(bloco(".umds-badge--attached.umds-badge--neutral.umds-badge--solid")).toMatch(/neutral-light-medium/);
+    });
+});

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

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

package/dist/teste/ButtonDensidade.test.js

@@ -0,0 +1,28 @@
+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 Button from "../components/Button/Button";
+import { lerArquivo } from "./lerArquivo";
+const cssButton = await lerArquivo("../core/src/components/Button/Button.css");
+const css = cssButton.replace(/\r\n/g, "\n");
+const bloco = (seletor) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+};
+describe("Button · density", () => {
+    it("comfortable escreve a classe; sem a prop e com default o botão é o de antes", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", density: "comfortable", children: "A" }), _jsx(Button, { size: "sm", children: "B" }), _jsx(Button, { size: "sm", density: "default", children: "C" })] }));
+        expect(screen.getByRole("button", { name: "A" })).toHaveClass("umds-button--sm", "umds-button--comfortable");
+        expect(screen.getByRole("button", { name: "B" })).not.toHaveClass("umds-button--comfortable");
+        expect(screen.getByRole("button", { name: "C" })).not.toHaveClass("umds-button--comfortable");
+    });
+    it("CSS: o sm confortável tem 12px de padding lateral; o sm de antes segue em 8px; o só-ícone fica de fora", () => {
+        expect(bloco(".umds-button--sm.umds-button--comfortable:not(.umds-button--icon)")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-mini\)/);
+        expect(bloco(".umds-button--sm")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-nano\)/);
+    });
+    it("os outros tamanhos mantêm o padding (a densidade só mexe no sm)", () => {
+        expect(bloco(".umds-button--xs")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-mini\)/);
+        expect(bloco(".umds-button--md")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-xxxs\)/);
+        expect(bloco(".umds-button--lg")).toMatch(/padding:\s*0\s+var\(--umds-primitive-spacing-xxs\)/);
+    });
+});

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

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

package/dist/teste/CalendarCompacto.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import Calendar from "../components/Calendar/Calendar";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssCalendar = await lerArquivo("../core/src/components/Calendar/Calendar.css");
+const CSS = { Calendar: cssCalendar };
+const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+describe("Calendar · density compact", () => {
+    it("compact escreve a classe na raiz; sem a prop, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Calendar, { today: "2026-05-15", defaultDate: "2026-05-15", density: "compact" }), _jsx(Calendar, { today: "2026-05-15", defaultDate: "2026-05-15" })] }));
+        expect(container.children[0]).toHaveClass("umds-calendar--compact", "umds-calendar--month");
+        expect(container.children[1]).not.toHaveClass("umds-calendar--compact");
+    });
+    it("CSS: evento de 20px (16 + 4), 4px de padding lateral e linha de 16px; o título só é cortado quando passa da largura", () => {
+        const t = css("Calendar");
+        const compacto = bloco(t, ".umds-calendar--compact .umds-calendar__event");
+        expect(compacto).toMatch(/min-height:\s*calc\(var\(--umds-primitive-spacing-xxxs\)\s*\+\s*var\(--umds-primitive-spacing-quarck\)\)/);
+        expect(compacto).toMatch(/padding:\s*var\(--umds-primitive-spacing-micro\)\s+var\(--umds-primitive-spacing-quarck\)/);
+        expect(compacto).toMatch(/line-height:\s*var\(--umds-primitive-spacing-xxxs\)/);
+        const titulo = bloco(t, ".umds-calendar__event-title");
+        expect(titulo).toMatch(/text-overflow:\s*ellipsis/);
+    });
+});

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

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

package/dist/teste/CoachmarkUmPasso.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Coachmark from "../components/Coachmark/Coachmark";
+const UM = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
+const DOIS = [...UM, { title: "Pronto", content: "Sem alvo." }];
+function Pagina({ passos, ...resto }) {
+    return (_jsxs("div", { children: [_jsx("button", { id: "alvo-a", children: "A" }), _jsx(Coachmark, { steps: passos, open: true, ...resto })] }));
+}
+describe("Coachmark · contador", () => {
+    it("com um passo só não há contador, nem visível nem na região aria-live", () => {
+        const { baseElement } = render(_jsx(Pagina, { passos: UM }));
+        expect(screen.queryByText("1 de 1")).toBeNull();
+        expect(baseElement.textContent).not.toContain("1 de 1");
+        expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("Novo: arrastar");
+    });
+    it("com um passo e modal={false} também não (a dica pontual)", () => {
+        const { baseElement } = render(_jsx(Pagina, { passos: UM, modal: false }));
+        expect(baseElement.textContent).not.toContain("1 de 1");
+    });
+    it("com dois passos o contador aparece e o leitor de tela o ouve", () => {
+        const { baseElement } = render(_jsx(Pagina, { passos: DOIS }));
+        expect(screen.getByText("1 de 2")).toBeInTheDocument();
+        expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("1 de 2: Novo: arrastar");
+    });
+    it("counterLabel segue valendo com mais de um passo", () => {
+        render(_jsx(Pagina, { passos: DOIS, counterLabel: "Step {current} of {total}" }));
+        expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
+    });
+    it("o botão do último passo continua sendo Concluir", () => {
+        render(_jsx(Pagina, { passos: UM }));
+        expect(screen.getByRole("button", { name: "Concluir" })).toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/DataTableCompactaETom.test.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import DataTable from "../components/DataTable/DataTable";
+import { lerArquivo } from "./lerArquivo";
+const cssDataTable = await lerArquivo("../core/src/components/DataTable/DataTable.css");
+const COLUNAS = [
+    { key: "nome", label: "Nome" },
+    { key: "situacao", label: "Situação" },
+];
+const DADOS = [
+    { nome: "Ana Souza", situacao: "Ativa", tom: "positive" },
+    { nome: "Carlos Lima", situacao: "Bloqueado", tom: "negative" },
+    { nome: "Marina Alves", situacao: "Licença", tom: "info" },
+    { nome: "Rafael Pereira", situacao: "Desligado", tom: "muted" },
+    { nome: "Beatriz Lima", situacao: "Ativa" },
+];
+const linhas = (c) => [...c.querySelectorAll("tbody tr")];
+describe("DataTable · rowTone", () => {
+    it("o nome de um campo da linha traz o tom", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowTone: "tom" }));
+        const l = linhas(container);
+        expect(l[0]).toHaveClass("umds-datatable__row--positive");
+        expect(l[1]).toHaveClass("umds-datatable__row--negative");
+        expect(l[2]).toHaveClass("umds-datatable__row--info");
+        expect(l[3]).toHaveClass("umds-datatable__row--muted");
+        expect(l[4].className).toBe("umds-datatable__row");
+    });
+    it("uma função (row, rowIndex) devolve o tom", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowTone: (row, i) => (row.situacao === "Bloqueado" || i === 4 ? "negative" : undefined) }));
+        const l = linhas(container);
+        expect(l[1]).toHaveClass("umds-datatable__row--negative");
+        expect(l[4]).toHaveClass("umds-datatable__row--negative");
+        expect(l[0].className).toBe("umds-datatable__row");
+    });
+    it("tom desconhecido ou vazio não vira classe", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: [{ nome: "A", situacao: "x", tom: "rosa" }, { nome: "B", situacao: "y", tom: "" }], rowTone: "tom" }));
+        for (const l of linhas(container))
+            expect(l.className).toBe("umds-datatable__row");
+    });
+    it("sem rowTone nada muda", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS }));
+        for (const l of linhas(container))
+            expect(l.className).toBe("umds-datatable__row");
+    });
+    it("o tom convive com a linha selecionada e a zebra (as classes ficam; o CSS faz a selecionada vencer)", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowTone: "tom", striped: true, rowKey: "nome", selectedRowKeys: ["Carlos Lima"] }));
+        const l = linhas(container);
+        expect(l[1]).toHaveClass("umds-datatable__row--negative", "umds-datatable__row--selected", "umds-datatable__row--striped");
+    });
+});
+describe("DataTable · compacta, 44px e CSS do tom", () => {
+    const css = cssDataTable.replace(/\r\n/g, "\n");
+    const bloco = (seletor) => {
+        const inicio = css.indexOf(seletor + " {");
+        return css.slice(inicio, css.indexOf("}", inicio));
+    };
+    it("a densidade compacta fixa cabeçalho e linha na altura de campo (44px); o documento fica de fora", () => {
+        expect(bloco(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__td")).toMatch(/height:\s*var\(--umds-semantic-field-height\)/);
+        expect(css).toContain(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__th,");
+        const { container } = render(_jsx(DataTable, { density: "compact", columns: COLUNAS, data: DADOS }));
+        expect(container.querySelector(".umds-datatable--compact")).not.toBeNull();
+    });
+    it("a linha selecionada vence o tom (o :not) e o tom vence a zebra", () => {
+        expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)/);
+        expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)\.umds-datatable__row--striped/);
+        expect(bloco(".umds-datatable__row--muted .umds-datatable__td")).toMatch(/neutral-dark-down/);
+    });
+});

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

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

package/dist/teste/InputGhost.test.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import Input from "../components/Input/Input";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssInput = await lerArquivo("../core/src/components/Input/Input.css");
+const CSS = { Input: cssInput };
+const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+describe("Input · variant ghost", () => {
+    it("ghost escreve a classe; sem a prop e com default, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Input, { ariaLabel: "a", variant: "ghost" }), _jsx(Input, { ariaLabel: "b" }), _jsx(Input, { ariaLabel: "c", variant: "default" })] }));
+        expect(container.children[0]).toHaveClass("umds-input--ghost");
+        expect(container.children[1]).not.toHaveClass("umds-input--ghost");
+        expect(container.children[2]).not.toHaveClass("umds-input--ghost");
+    });
+    it("CSS: só o repouso muda (fundo claro, borda clara) e com baixa especificidade, para o hover e o foco vencerem", () => {
+        const t = css("Input");
+        const ghost = bloco(t, ".umds-input--ghost:where(:not(.umds-input--error):not(.umds-input--disabled):not(.umds-input--readonly)) .umds-input__container");
+        expect(ghost).toMatch(/background-color:\s*var\(--umds-semantic-color-background-light\)/);
+        expect(ghost).toMatch(/border-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+        expect(t.indexOf(".umds-input__container:focus-within:not(")).toBeGreaterThanOrEqual(0);
+    });
+    it("o foco, o erro e o desabilitado do campo ghost seguem as classes do padrão", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "d", variant: "ghost", errorMessage: "Obrigat\u00F3rio" }));
+        expect(container.firstElementChild).toHaveClass("umds-input--ghost", "umds-input--error");
+    });
+});

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

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

package/dist/teste/ModalProporcoes1Doc.test.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import Modal from "../components/Modal/Modal";
+import { render, screen } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssModal = await lerArquivo("../core/src/components/Modal/Modal.css");
+const CSS = { Modal: cssModal };
+const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+describe("Modal · density 1doc", () => {
+    it("escreve a classe e convive com variant primary; sem a prop, não", () => {
+        render(_jsx(Modal, { open: true, inline: true, density: "1doc", variant: "primary", title: "Resolver tarefa" }));
+        expect(screen.getByRole("dialog", { name: "Resolver tarefa" })).toHaveClass("umds-modal--1doc", "umds-modal--primary", "umds-modal--base");
+    });
+    it("sem density o modal é o de antes", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "Padr\u00E3o" }));
+        expect(screen.getByRole("dialog", { name: "Padrão" })).not.toHaveClass("umds-modal--1doc");
+    });
+    it("CSS: cabeçalho de 67px, rodapé de 65px (padding 12px 24px) e raio de 12px; o padrão (8px) não muda", () => {
+        const t = css("Modal");
+        expect(bloco(t, ".umds-modal--1doc.umds-modal--base .umds-modal__header")).toMatch(/min-height:\s*67px/);
+        const rodape = bloco(t, ".umds-modal--1doc.umds-modal--base .umds-modal__footer");
+        expect(rodape).toMatch(/min-height:\s*65px/);
+        expect(rodape).toMatch(/padding:\s*var\(--umds-primitive-spacing-mini\)\s+var\(--umds-primitive-spacing-xxs\)/);
+        expect(t).toMatch(/\.umds-modal--1doc:not\(\.umds-modal--fullscreen\):not\(\.umds-modal--janela-fullscreen\):not\(\.umds-modal--sheet\) \{\n(?:\s*\/\*.*\*\/\n)?\s*border-radius:\s*12px/);
+        expect(bloco(t, ".umds-modal")).toMatch(/border-radius:\s*var\(--umds-primitive-border-radius-sm\)/);
+    });
+});

package/dist/teste/RichTextEditorEstiloDeTexto.test.js

@@ -25,7 +25,7 @@ describe("html-seguro: estilo de texto por token", () => {
         expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
         expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
         expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
-        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-base)")).toBe("font-family: var(--umds-semantic-font-family-base);");
         for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
             expect(estiloDeTexto("color", mau)).toBe("");
         }
@@ -36,7 +36,7 @@ describe("html-seguro: estilo de texto por token", () => {
     });
     it("o span guarda só as declarações válidas; o resto do style sai", () => {
         expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe('<span style="color: var(--umds-primitive-red-pure);">a</span>');
-        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>');
+        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm);">a</span>');
         expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
     });
     it("estilo só vale em span: em outras tags sai", () => {
@@ -62,15 +62,15 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
         fireEvent.keyDown(screen.getByRole("group", { name: "Cor do texto" }), { key: "Escape" });
         expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
     });
-    it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+    it("a fonte do DS embrulha o texto selecionado num span com o token", async () => {
         const usuario = userEvent.setup();
         const aoMudar = vi.fn();
         abrir(["fontFamily"], { onChange: aoMudar });
         selecionarTexto();
         await usuario.click(screen.getByRole("button", { name: "Fonte" }));
         await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
-        await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
-        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+        await usuario.click(screen.getByRole("option", { name: "Padrão" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-base);">Parecer</span>');
         expect(aoMudar).toHaveBeenCalled();
         expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
     });
@@ -105,11 +105,11 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
     });
     it("os textos vêm por labels", async () => {
         const usuario = userEvent.setup();
-        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyBase: "Default", styleClose: "Close" } });
         selecionarTexto();
         await usuario.click(screen.getByRole("button", { name: "Font" }));
         await usuario.click(screen.getByRole("combobox", { name: "Font" }));
-        expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+        expect(screen.getByRole("option", { name: "Default" })).toBeInTheDocument();
         await usuario.keyboard("{Escape}");
         expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
     });

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

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

package/dist/teste/SegmentedControlSuperficie.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssSegmentedControl = await lerArquivo("../core/src/components/SegmentedControl/SegmentedControl.css");
+const CSS = { SegmentedControl: cssSegmentedControl };
+const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+describe("SegmentedControl · variant surface", () => {
+    const OPCOES = [
+        { label: "Individual", value: "individual", count: 12 },
+        { label: "Em lote", value: "lote" },
+    ];
+    it("surface escreve a classe; sem a prop e com default, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(SegmentedControl, { options: OPCOES, variant: "surface", defaultValue: "individual" }), _jsx(SegmentedControl, { options: OPCOES, defaultValue: "individual" }), _jsx(SegmentedControl, { options: OPCOES, variant: "default", defaultValue: "individual" })] }));
+        expect(container.children[0]).toHaveClass("umds-segmented--surface");
+        expect(container.children[1]).not.toHaveClass("umds-segmented--surface");
+        expect(container.children[2]).not.toHaveClass("umds-segmented--surface");
+    });
+    it("CSS: o escolhido é branco, em negrito e com sombra; o trilho é cinza claro; o azul cheio do padrão segue", () => {
+        const t = css("SegmentedControl");
+        const escolhido = bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,\n.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover");
+        expect(escolhido).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
+        expect(escolhido).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-bold\)/);
+        expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-md\)/);
+        expect(bloco(t, ".umds-segmented--surface .umds-segmented__track")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+        expect(t).toMatch(/\.umds-segmented__input:checked \+ \.umds-segmented__item,\n\.umds-segmented__input:checked \+ \.umds-segmented__item:hover \{\n\s*background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
+    });
+    it("o contador do escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho", () => {
+        const t = css("SegmentedControl");
+        expect(bloco(t, ".umds-segmented--surface .umds-segmented__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
+        expect(bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item .umds-segmented__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+    });
+});

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

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

package/dist/teste/SelectItemComEscopo.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 OPCOES = [
+    { label: "Urgente", value: "urgente", etiqueta: "Prazo hoje" },
+    { label: "Rotina", value: "rotina", etiqueta: "Sem prazo" },
+];
+const item = ({ optionData }) => (_jsxs("span", { "data-testid": "item", children: [_jsx("b", { children: optionData.label }), " ", _jsx("i", { children: optionData.etiqueta })] }));
+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 = [];
+        render(_jsx(Select, { ariaLabel: "Prioridade", options: OPCOES, item: (escopo) => {
+                vistos.push(escopo);
+                return _jsx("span", { "data-testid": "item", children: escopo.optionData.label });
+            } }));
+        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(_jsx(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 _jsx(Select, { ariaLabel: "Prioridade", placeholder: "Escolha", options: OPCOES, item: item });
+        }
+        render(_jsx(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(_jsx(Select, { ariaLabel: "Prioridade", multiple: true, 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(_jsx(Select, { ariaLabel: "Prioridade", options: OPCOES, value: "urgente" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+        expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "Prioridade", options: OPCOES, value: "urgente", item: _jsx("em", { children: "fixo" }) }));
+        expect(screen.getByRole("combobox").querySelector(".umds-select__trigger-item")).toBeNull();
+        expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+    });
+});

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

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