@1doc/1ds-react 2.9.0 → 2.10.0

package/dist/components/StatCard/StatCard.d.ts

@@ -23,6 +23,9 @@ import './StatCard.css';
  * @property {string} trendLabel - Texto da variação (ex.: '12% em relação ao mês anterior')
  * @property {string} description - Texto auxiliar abaixo do rótulo
  * @property {string} labelPosition - Onde o rótulo aparece: 'bottom' (padrão, embaixo do número) | 'top' (no topo do cartão, acima do ícone e do número, com o número em 32/800). No HTML o número continua vindo antes do rótulo, então o leitor de tela anuncia igual.
+ * @property {string|number} secondaryValue - Segunda medida do cartão, menor, à direita da principal ("22,31%" do setor e "14,11%" do geral). Vem depois do resto no HTML. `0` aparece; vazio e ausente não.
+ * @property {string} secondaryLabel - O que a segunda medida significa ("Geral")
+ * @property {string} valueTone - Cor do número principal: 'default' (cor do texto) | 'primary' | 'positive' | 'negative' | 'info'. Usa as variantes escuras (contraste AA sobre o branco). Não confunda com `variant`, que pinta o ícone e a variação.
  * @property {string} infoTooltip - Texto de ajuda: mostra um ⓘ ao lado do rótulo com um Tooltip escuro. É um botão dentro do cartão; com `onClick` no cartão, evite (botão dentro de botão).
  * @property {string} infoLabel - Nome acessível do ⓘ. Troque para traduzir. Padrão: "Mais informações".
  * @property {string} align - Alinhamento do conteúdo
@@ -66,6 +69,12 @@ export interface StatCardProps {
      * @default 'bottom'
      */
     labelPosition?: "bottom" | "top";
+    /** Segunda medida, menor, à direita da principal. 0 aparece; vazio e ausente não. */
+    secondaryValue?: string | number;
+    /** O que a segunda medida significa. */
+    secondaryLabel?: string;
+    /** Cor do número principal. @default 'default' */
+    valueTone?: "default" | "primary" | "positive" | "negative" | "info";
     /**
      * Texto de ajuda: mostra o ⓘ ao lado do rótulo, com um Tooltip escuro. É um
      * botão focável dentro do cartão; com `onClick` no cartão, evite.

package/dist/components/StatCard/StatCard.js

@@ -11,6 +11,10 @@ function StatCard(props) {
             `umds-stat-card--${props.variant || "neutral"}`,
             props.align === "center" ? "umds-stat-card--centro" : "",
             props.labelPosition === "top" ? "umds-stat-card--rotulo-topo" : "",
+            temSecundaria() ? "umds-stat-card--com-secundaria" : "",
+            props.valueTone && props.valueTone !== "default"
+                ? "umds-stat-card--valor-" + props.valueTone
+                : "",
             props.onClick ? "umds-stat-card--acionavel" : "",
             props.className,
         ]
@@ -38,6 +42,11 @@ function StatCard(props) {
             return "↓";
         return "→";
     }
+    function temSecundaria() {
+        return (props.secondaryValue !== undefined &&
+            props.secondaryValue !== null &&
+            props.secondaryValue !== "");
+    }
     function ehAcionavel() {
         return !!props.onClick;
     }
@@ -48,6 +57,6 @@ function StatCard(props) {
         if (props.onClick)
             props.onClick();
     }
-    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsx("span", { className: "umds-stat-card__valor", children: props.value }), _jsxs("span", { className: "umds-stat-card__rotulo", children: [props.label, props.infoTooltip ? (_jsx(Tooltip, { variant: "dark", side: "top", content: props.infoTooltip, children: _jsx("button", { type: "button", className: "umds-stat-card__info", "aria-label": props.infoLabel || "Mais informações", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faCircleInfo }) }) })) : null] }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] })] }));
+    return (_jsxs("div", { className: classes(), onClick: (event) => aoClicar(), role: ehAcionavel() ? "button" : undefined, tabIndex: ehAcionavel() ? 0 : undefined, children: [props.icon ? (_jsx("span", { className: "umds-stat-card__icone", "aria-hidden": "true", children: _jsx(Icon, { size: "md", variant: "inherit", icon: props.icon }) })) : null, _jsxs("div", { className: "umds-stat-card__corpo", children: [_jsx("span", { className: "umds-stat-card__valor", children: props.value }), _jsxs("span", { className: "umds-stat-card__rotulo", children: [props.label, props.infoTooltip ? (_jsx(Tooltip, { variant: "dark", side: "top", content: props.infoTooltip, children: _jsx("button", { type: "button", className: "umds-stat-card__info", "aria-label": props.infoLabel || "Mais informações", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faCircleInfo }) }) })) : null] }), props.description ? (_jsx("span", { className: "umds-stat-card__descricao", children: props.description })) : null, props.trendLabel ? (_jsxs("span", { className: classesDaVariacao(), children: [_jsx("span", { "aria-hidden": "true", children: simboloDaVariacao() }), props.trendLabel] })) : null] }), temSecundaria() ? (_jsxs("div", { className: "umds-stat-card__secundaria", children: [_jsx("span", { className: "umds-stat-card__valor-secundario", children: props.secondaryValue }), props.secondaryLabel ? (_jsx("span", { className: "umds-stat-card__rotulo-secundario", children: props.secondaryLabel })) : null] })) : null] }));
 }
 export default StatCard;

package/dist/components/Toast/Toast.css

@@ -123,6 +123,38 @@
   line-height: 1.5;
 }
 
+/* ── Detalhes (details) e ação (actionLabel) ── */
+.umds-toast__details {
+  margin: 0;
+  padding-left: var(--umds-primitive-spacing-xxxs); /* 16px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  line-height: 1.5;
+}
+
+.umds-toast__action {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  /* Alvo mínimo de 24px (WCAG 2.5.8). */
+  min-height: var(--umds-primitive-spacing-xxs);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.umds-toast__action:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: var(--umds-primitive-border-radius-xs);
+}
+
 /* ── Fechar ── */
 .umds-toast__close {
   display: flex;

package/dist/components/Toast/Toast.d.ts

@@ -4,6 +4,12 @@ import './Toast.css';
  * na raiz do documento (não fica presa ao overflow do elemento pai).
  * Comunica o resultado de uma ação (sucesso, erro, aviso ou informação) e pode
  * fechar automaticamente após um tempo.
+ *
+ * Com `actionLabel` e `onAction`, o toast ganha uma ação ("Desfazer", "Ver * processo"): um botão depois do texto. Acioná-la chama `onAction` e fecha o
+ * toast. Toast com ação não deve sumir sozinho antes de dar tempo de agir
+ * (WCAG 2.2.1): no `toast()` imperativo o padrão passa a ser `duration: 0`, e no
+ * declarativo vale o que você passar. `details` é uma lista de linhas
+ * curtas abaixo da descrição (o que deu errado, item a item).
  * @quandoUsar Retorno TRANSITÓRIO e não-bloqueante de uma ação recém-executada: "Processo salvo", "Link copiado". Aparece sobreposto e some sozinho.
  * @quandoNaoUsar Para mensagem que precisa continuar visível ou ser relida — use `Alert`. Para erro que impede o usuário de prosseguir, use `Alert` junto ao campo.
  */
@@ -28,6 +34,18 @@ export interface ToastProps {
      * Descrição adicional exibida abaixo da mensagem.
      */
     description?: string;
+    /**
+     * Lista de detalhes, uma linha por item, abaixo da descrição ("Anexo 3 acima   * de 10 MB", "Despacho sem assunto").
+     */
+    details?: string[];
+    /**
+     * Rótulo do botão de ação ("Desfazer"). O botão só aparece com `onAction`.
+     */
+    actionLabel?: string;
+    /**
+     * Chamado ao acionar o botão de ação. Depois dele o toast fecha (`onClose`).
+     */
+    onAction?: (event?: any) => void;
     /**
      * Posição na tela onde o toast é fixado.
      * @default 'top-right'

package/dist/components/Toast/Toast.js

@@ -31,6 +31,19 @@ function Toast(props) {
             return faCircleXmark;
         return faCircleInfo;
     }
+    function detailList() {
+        return props.details || [];
+    }
+    function hasAction() {
+        return !!(props.actionLabel && props.onAction);
+    }
+    function handleAction(event) {
+        if (event)
+            event.stopPropagation();
+        if (props.onAction)
+            props.onAction(event);
+        handleClose(event);
+    }
     function handleClose(event) {
         if (event)
             event.stopPropagation();
@@ -58,6 +71,6 @@ function Toast(props) {
             }
         };
     }, []);
-    return (_jsx(Portal, { container: props.portalContainer, children: _jsx("div", { role: liveRole(), "aria-live": ariaLive(), children: props.open ? (_jsxs("div", { className: toastClasses(), children: [_jsx("div", { className: "umds-toast__icon-wrap", children: _jsx("span", { "aria-hidden": "true", className: "umds-toast__icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: iconName() }) }) }), _jsxs("div", { className: "umds-toast__body", children: [_jsx("span", { className: "umds-toast__message", children: props.message }), props.description ? (_jsx("span", { className: "umds-toast__description", children: props.description })) : null] }), props.closable !== false ? (_jsx("button", { type: "button", className: "umds-toast__close", onClick: (event) => handleClose(event), "aria-label": props.closeLabel || "Fechar notificação", children: _jsx(Icon, { variant: "inherit", customSize: "18px", icon: faXmark }) })) : null] })) : null }) }));
+    return (_jsx(Portal, { container: props.portalContainer, children: _jsx("div", { role: liveRole(), "aria-live": ariaLive(), children: props.open ? (_jsxs("div", { className: toastClasses(), children: [_jsx("div", { className: "umds-toast__icon-wrap", children: _jsx("span", { "aria-hidden": "true", className: "umds-toast__icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: iconName() }) }) }), _jsxs("div", { className: "umds-toast__body", children: [_jsx("span", { className: "umds-toast__message", children: props.message }), props.description ? (_jsx("span", { className: "umds-toast__description", children: props.description })) : null, detailList().length > 0 ? (_jsx("ul", { className: "umds-toast__details", children: detailList()?.map((detalhe) => (_jsx("li", { children: detalhe }, detalhe))) })) : null, hasAction() ? (_jsx("button", { type: "button", className: "umds-toast__action", onClick: (event) => handleAction(event), children: props.actionLabel })) : null] }), props.closable !== false ? (_jsx("button", { type: "button", className: "umds-toast__close", onClick: (event) => handleClose(event), "aria-label": props.closeLabel || "Fechar notificação", children: _jsx(Icon, { variant: "inherit", customSize: "18px", icon: faXmark }) })) : null] })) : null }) }));
 }
 export default Toast;

package/dist/components/Toast/ToastStack.js

@@ -17,6 +17,13 @@ function ToastStack(props) {
             .filter(Boolean)
             .join(" ");
     }
+    function actionLabelOf(item) {
+        return item.onAction ? item.actionLabel : undefined;
+    }
+    function handleItemAction(item) {
+        if (item.onAction)
+            item.onAction();
+    }
     function handleItemClose(id) {
         dismissToast(id);
     }
@@ -33,6 +40,6 @@ function ToastStack(props) {
             }
         };
     }, []);
-    return (_jsx("div", { ref: stackRef, className: stackClasses(), children: items?.map((item) => (_jsx(Toast, { open: true, message: item.message, description: item.description, variant: item.variant, duration: item.duration, closable: item.closable, portalContainer: stackRef.current, onClose: (event) => handleItemClose(item.id) }, item.id))) }));
+    return (_jsx("div", { ref: stackRef, className: stackClasses(), children: items?.map((item) => (_jsx(Toast, { open: true, message: item.message, description: item.description, details: item.details, actionLabel: actionLabelOf(item), onAction: (event) => handleItemAction(item), variant: item.variant, duration: item.duration, closable: item.closable, portalContainer: stackRef.current, onClose: (event) => handleItemClose(item.id) }, item.id))) }));
 }
 export default ToastStack;

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

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

package/dist/teste/AccordionTituloNeutro.test.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+const ITENS = [
+    { id: "a", title: "Prazos", content: "Dez dias úteis." },
+    { id: "b", title: "Anexos", content: "Até 10 MB." },
+];
+describe("Accordion · titleVariant", () => {
+    it("neutral liga a classe do título neutro; o padrão e default não", () => {
+        const { container, rerender } = render(_jsx(Accordion, { items: ITENS, titleVariant: "neutral" }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).toHaveClass("umds-accordion--title-neutral");
+        rerender(_jsx(Accordion, { items: ITENS, titleVariant: "default" }));
+        expect(raiz()).not.toHaveClass("umds-accordion--title-neutral");
+        rerender(_jsx(Accordion, { items: ITENS }));
+        expect(raiz()).not.toHaveClass("umds-accordion--title-neutral");
+    });
+    it("combina com a variant do accordion", () => {
+        const { container } = render(_jsx(Accordion, { items: ITENS, variant: "separated", titleVariant: "neutral" }));
+        expect(container.firstElementChild).toHaveClass("umds-accordion--separated", "umds-accordion--title-neutral");
+    });
+});

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

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

package/dist/teste/AppSubheaderRegiao.test.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import AppSubheader from "../components/AppSubheader/AppSubheader";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+/** O jsdom não tem layout: a geometria real é conferida pela story "Só a página atual" (play, no navegador); a regra de CSS, pelo teste do Vue. */
+describe("AppSubheader · região do contexto", () => {
+    it("a trilha só com a página atual não tem nada focável dentro da região", () => {
+        const { container } = render(_jsx(AppSubheader, { children: _jsx(Breadcrumb, { items: [{ label: "Painel" }] }) }));
+        const contexto = container.querySelector(".umds-app-subheader__contexto");
+        expect(contexto.querySelector("a, button, [tabindex]")).toBeNull();
+    });
+});

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

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

package/dist/teste/AttachmentCardLista.test.js

@@ -0,0 +1,49 @@
+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 AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+const DETALHES = {
+    description: "Documento legível.",
+    fields: [
+        { label: "Nome completo", value: "Marcos Vinícius Tavares", copyable: true },
+        { label: "CPF", value: "123.456.789-09" },
+    ],
+};
+async function abrirPainel() {
+    const usuario = userEvent.setup();
+    render(_jsx(AttachmentCard, { fileName: "cnh.pdf", documentType: "CNH", status: "positive", statusLabel: "Pr\u00E9-aprovado", statusDetails: DETALHES }));
+    await usuario.click(screen.getByRole("button", { name: /Pré-aprovado/ }));
+    return usuario;
+}
+describe("AttachmentCard · o <dl> do painel é válido (axe definition-list)", () => {
+    it("o dl só tem div filhos, e cada div só tem dt e dd, nessa ordem", async () => {
+        await abrirPainel();
+        const dl = document.querySelector(".umds-attachment-card__campos");
+        expect(dl.tagName).toBe("DL");
+        const grupos = [...dl.children];
+        expect(grupos).toHaveLength(2);
+        for (const grupo of grupos) {
+            expect(grupo.tagName).toBe("DIV");
+            expect([...grupo.children].map((f) => f.tagName)).toEqual(["DT", "DD"]);
+        }
+    });
+    it("o botão de copiar mora dentro do dd, ao lado do valor, e continua com nome", async () => {
+        await abrirPainel();
+        const dd = document.querySelector(".umds-attachment-card__campo-valor");
+        expect(dd.tagName).toBe("DD");
+        expect(dd.querySelector(".umds-attachment-card__campo-valor-texto")).toHaveTextContent("Marcos Vinícius Tavares");
+        const botao = dd.querySelector("button");
+        expect(botao).toHaveAttribute("aria-label", "Copiar Nome completo");
+        // nenhum botão solto direto num div do dl
+        for (const grupo of document.querySelectorAll(".umds-attachment-card__campo")) {
+            expect(grupo.querySelector(":scope > button")).toBeNull();
+        }
+    });
+    it("o campo sem copyable não tem botão e o valor segue no dd", async () => {
+        await abrirPainel();
+        const campos = document.querySelectorAll(".umds-attachment-card__campo");
+        expect(campos[1].querySelector("button")).toBeNull();
+        expect(campos[1].querySelector("dd")).toHaveTextContent("123.456.789-09");
+    });
+});

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

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

package/dist/teste/AttachmentCardSm.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+const tamanho = (el) => el.style.width;
+describe("AttachmentCard · size", () => {
+    it("md (padrão): ícone do preview de 48px e o do rodapé no sm do Icon", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "Protocolo 104-2026.pdf" }));
+        expect(container.firstElementChild).not.toHaveClass("umds-attachment-card--sm");
+        expect(tamanho(container.querySelector(".umds-attachment-card__preview .umds-icon"))).toBe("48px");
+        const rodape = container.querySelector(".umds-attachment-card__rodape-icone .umds-icon");
+        expect(rodape).toHaveClass("umds-icon--sm");
+        expect(rodape.style.width).toBe("");
+    });
+    it("sm: ícone do preview de 40px e o do rodapé de 12px", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "Protocolo 104-2026.pdf", size: "sm" }));
+        expect(container.firstElementChild).toHaveClass("umds-attachment-card--sm");
+        expect(tamanho(container.querySelector(".umds-attachment-card__preview .umds-icon"))).toBe("40px");
+        expect(tamanho(container.querySelector(".umds-attachment-card__rodape-icone .umds-icon"))).toBe("12px");
+    });
+    it("o ícone central escolhido continua valendo no sm", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "a.pdf", size: "sm", documentType: "CNH", status: "positive", statusLabel: "Pr\u00E9-aprovado" }));
+        expect(container.querySelector(".umds-attachment-card__tipo-texto")).toHaveTextContent("CNH");
+        expect(container.querySelector(".umds-attachment-card__status-texto")).toHaveTextContent("Pré-aprovado");
+    });
+});

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

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

package/dist/teste/BadgeNeutroColado.test.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+/** A cascata de CSS de arquivo não existe no jsdom: a regra é conferida na fonte pelo teste do Vue; aqui, as classes no DOM. */
+describe("Badge attached neutral", () => {
+    it("o neutro colado e sólido leva as três classes que a regra de CSS escolhe", () => {
+        const { container } = render(_jsx(Badge, { attached: true, variant: "neutral", appearance: "solid", children: "Tarefa manual" }));
+        expect(container.firstElementChild).toHaveClass("umds-badge--attached", "umds-badge--neutral", "umds-badge--solid");
+    });
+});

package/dist/teste/BadgeTag.test.js

@@ -40,3 +40,16 @@ describe("Tag compacta, soft, pílula e novidade", () => {
         expect(raiz(container)).toHaveClass("umds-tag--new", "umds-tag--soft");
     });
 });
+describe("Badge attachedSide", () => {
+    it("right escreve o modificador do canto direito; left e o padrão não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Badge, { attached: true, attachedSide: "right", children: "A" }), _jsx(Badge, { attached: true, attachedSide: "left", children: "B" }), _jsx(Badge, { attached: true, children: "C" })] }));
+        expect(container.children[0]).toHaveClass("umds-badge--attached", "umds-badge--attached-right");
+        expect(container.children[1]).not.toHaveClass("umds-badge--attached-right");
+        expect(container.children[2]).not.toHaveClass("umds-badge--attached-right");
+    });
+    it("attachedSide sem attached não faz nada", () => {
+        const { container } = render(_jsx(Badge, { attachedSide: "right", children: "A" }));
+        expect(raiz(container)).not.toHaveClass("umds-badge--attached-right");
+        expect(raiz(container)).not.toHaveClass("umds-badge--attached");
+    });
+});

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

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

package/dist/teste/CalendarCabecalho.test.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Calendar from "../components/Calendar/Calendar";
+describe("Calendar · cabeçalho", () => {
+    it("headerStart e headerEnd (React: props com nó) chegam ao cabeçalho", () => {
+        render(_jsx(Calendar, { events: [], defaultDate: "2026-10-08", headerStart: _jsx("span", { children: "Todos os documentos" }), headerEnd: _jsx("span", { children: "Legenda" }) }));
+        expect(screen.getByText("Todos os documentos")).toBeInTheDocument();
+        expect(screen.getByText("Legenda")).toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/CoachmarkSemVeu.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import Coachmark from "../components/Coachmark/Coachmark";
+const PASSOS = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
+function Pagina(props) {
+    return (_jsxs("div", { children: [_jsx("button", { id: "alvo-a", children: "A" }), _jsx("button", { id: "fora", children: "Fora" }), _jsx(Coachmark, { steps: PASSOS, open: true, ...props })] }));
+}
+describe("Coachmark · modal={false}", () => {
+    it("sem véu nem recorte; o cartão é um diálogo não modal e a raiz deixa o ponteiro passar", () => {
+        const { baseElement } = render(_jsx(Pagina, { modal: false }));
+        expect(baseElement.querySelector(".umds-coachmark__veil")).toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark__cutout")).toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark")).toHaveClass("umds-coachmark--modeless");
+        expect(screen.getByRole("dialog", { name: "Novo: arrastar" })).toHaveAttribute("aria-modal", "false");
+    });
+    it("o padrão continua modal: véu, recorte e aria-modal verdadeiro", () => {
+        const { baseElement } = render(_jsx(Pagina, {}));
+        expect(baseElement.querySelector(".umds-coachmark__veil")).not.toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark")).not.toHaveClass("umds-coachmark--modeless");
+        expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+        const { unmount } = render(_jsx(Pagina, { modal: true }));
+        unmount();
+    });
+    it("o foco entra no cartão, mas o Tab não fica preso", async () => {
+        render(_jsx(Pagina, { modal: false }));
+        const cartao = screen.getByRole("dialog");
+        await waitFor(() => expect(cartao).toHaveFocus());
+        const concluir = screen.getByRole("button", { name: "Concluir" });
+        concluir.focus();
+        const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+        concluir.dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(false);
+    });
+    it("no modal o Tab continua preso (o último volta ao primeiro)", () => {
+        render(_jsx(Pagina, {}));
+        const concluir = screen.getByRole("button", { name: "Concluir" });
+        concluir.focus();
+        const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+        concluir.dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+    });
+    it("a página segue clicável: o clique fora não é capturado e o tour não fecha sozinho", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        fireEvent.click(screen.getByRole("button", { name: "Fora" }));
+        expect(aoFechar).not.toHaveBeenCalled();
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    it("o Esc fecha de qualquer lugar da página, uma vez só", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        const fora = screen.getByRole("button", { name: "Fora" });
+        fora.focus();
+        fireEvent.keyDown(fora, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+        expect(aoFechar).toHaveBeenCalledWith("escape");
+    });
+    it("o Esc dentro do cartão também fecha uma vez só", async () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+        fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("depois de fechar, o ouvinte do Esc sai do documento", () => {
+        const aoFechar = vi.fn();
+        const { rerender } = render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        rerender(_jsx(Pagina, { modal: false, open: false, onClose: aoFechar }));
+        fireEvent.keyDown(document, { key: "Escape" });
+        expect(aoFechar).not.toHaveBeenCalled();
+    });
+    it("ao fechar, o foco volta ao elemento de antes, se a pessoa não foi a outro lugar", async () => {
+        const { rerender } = render(_jsx(Pagina, { modal: false, open: false }));
+        const gatilho = screen.getByRole("button", { name: "Fora" });
+        gatilho.focus();
+        expect(gatilho).toHaveFocus();
+        rerender(_jsx(Pagina, { modal: false, open: true }));
+        // O foco entra no cartão depois da montagem (um quadro de animação).
+        await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+        rerender(_jsx(Pagina, { modal: false, open: false }));
+        await waitFor(() => expect(gatilho).toHaveFocus());
+    });
+});

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

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

package/dist/teste/ColorPickerXs.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ColorPicker from "../components/ColorPicker/ColorPicker";
+describe("ColorPicker · size xs", () => {
+    it("xs escreve a classe do tamanho; sm e md seguem como eram", () => {
+        const { container, rerender } = render(_jsx(ColorPicker, { ariaLabel: "Cor", size: "xs" }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).toHaveClass("umds-color-picker--xs");
+        rerender(_jsx(ColorPicker, { ariaLabel: "Cor", size: "sm" }));
+        expect(raiz()).toHaveClass("umds-color-picker--sm");
+        expect(raiz()).not.toHaveClass("umds-color-picker--xs");
+        rerender(_jsx(ColorPicker, { ariaLabel: "Cor" }));
+        expect(raiz()).toHaveClass("umds-color-picker--md");
+    });
+    it("no xs a amostra escolhida mantém a marcação e o aria-checked", () => {
+        const { container } = render(_jsx(ColorPicker, { ariaLabel: "Cor", size: "xs", defaultValue: "--umds-primitive-red-pure" }));
+        expect(screen.getByRole("radio", { name: "Vermelho" })).toHaveAttribute("aria-checked", "true");
+        expect(container.querySelectorAll(".umds-color-picker__swatch--selected")).toHaveLength(1);
+    });
+});

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

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