@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/utils/paleta-de-cores.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Paleta de cor categórica do 1DS: os primitivos `--umds-primitive-<família>-<tom>`.
+ *
+ * É a lista que o `ColorPicker` mostra por padrão. Ela existe como constante
+ * exportada para o app mapear o valor guardado (o nome do token) de volta para
+ * um rótulo, ou montar a própria lista a partir dela (`COLOR_PALETTE.filter(...)`).
+ *
+ * Primitivo não muda com o tema: é o certo para cor de DADO (marcador, tipo de
+ * documento, setor), que precisa ser a mesma no claro e no escuro. Para cor com
+ * PAPEL (primário, erro, sucesso) use os semânticos `--umds-semantic-color-*`,
+ * que não entram aqui.
+ */
+export type PaletteColor = {
+    /** Nome da variável CSS, ex.: `--umds-primitive-blue-pure`. Use como `var(${value})`. */
+    value: string;
+    /** Nome em português, ex.: "Azul escuro". */
+    label: string;
+    /** Família: blue, red, green, orange, yellow, purple ou gray. */
+    family: string;
+    /** Tom claro o bastante para o ícone de marcação sair escuro (contraste mínimo de 3:1). */
+    onLight: boolean;
+};
+/** Os 31 primitivos de cor (6 famílias x 4 tons + 7 cinzas), do mais escuro ao mais claro. */
+export declare const COLOR_PALETTE: PaletteColor[];
+/** `#RRGGBB` completo (o `#` é opcional). Hexadecimal curto (`#FFF`) não vale. */
+export declare const isHexColor: (texto: string) => boolean;

package/dist/utils/paleta-de-cores.js

@@ -0,0 +1,10 @@
+const cor = (family, tone, label, onLight) => ({
+    value: "--umds-primitive-" + family + "-" + tone,
+    label,
+    family,
+    onLight
+});
+/** Os 31 primitivos de cor (6 famílias x 4 tons + 7 cinzas), do mais escuro ao mais claro. */
+export const COLOR_PALETTE = [cor("blue", "dark", "Azul escuro", false), cor("blue", "pure", "Azul", false), cor("blue", "medium", "Azul médio", false), cor("blue", "light", "Azul claro", true), cor("red", "dark", "Vermelho escuro", false), cor("red", "pure", "Vermelho", false), cor("red", "medium", "Vermelho médio", false), cor("red", "light", "Vermelho claro", true), cor("green", "dark", "Verde escuro", false), cor("green", "pure", "Verde", false), cor("green", "medium", "Verde médio", false), cor("green", "light", "Verde claro", true), cor("orange", "dark", "Laranja escuro", false), cor("orange", "pure", "Laranja", false), cor("orange", "medium", "Laranja médio", true), cor("orange", "light", "Laranja claro", true), cor("yellow", "dark", "Amarelo escuro", false), cor("yellow", "pure", "Amarelo", true), cor("yellow", "medium", "Amarelo médio", true), cor("yellow", "light", "Amarelo claro", true), cor("purple", "dark", "Roxo escuro", false), cor("purple", "pure", "Roxo", false), cor("purple", "medium", "Roxo médio", false), cor("purple", "light", "Roxo claro", true), cor("gray", "darkest", "Cinza muito escuro", false), cor("gray", "darker", "Cinza escuro", false), cor("gray", "dark", "Cinza", false), cor("gray", "medium", "Cinza médio", true), cor("gray", "light", "Cinza claro", true), cor("gray", "lighter", "Cinza mais claro", true), cor("gray", "lightest", "Cinza muito claro", true)];
+/** `#RRGGBB` completo (o `#` é opcional). Hexadecimal curto (`#FFF`) não vale. */
+export const isHexColor = (texto) => /^#?[0-9a-fA-F]{6}$/.test((texto || "").trim());

package/dist/utils/texto.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Texto para comparar: minúsculo, sem acento e sem espaço nas pontas. É o que a
+ * busca do `IconPicker` usa para achar "usuario" em "Usuário".
+ */
+export declare const semAcento: (texto: string) => string;

package/dist/utils/texto.js

@@ -0,0 +1,5 @@
+/**
+ * Texto para comparar: minúsculo, sem acento e sem espaço nas pontas. É o que a
+ * busca do `IconPicker` usa para achar "usuario" em "Usuário".
+ */
+export const semAcento = (texto) => String(texto || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.7.2",
+  "version": "2.9.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,8 +45,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.7.3",
-    "@1doc/1ds-tokens": "0.4.1"
+    "@1doc/1ds-core": "2.9.0",
+    "@1doc/1ds-tokens": "0.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -5,6 +5,8 @@ export * from "./utils/theme";
 export * from "./utils/toast";
 // Densidade global (modo touch ≥44px via data-density)
 export * from "./utils/density";
+// Paleta de cor categórica (primitivos) do ColorPicker
+export * from "./utils/paleta-de-cores";
 // FontAwesome
 export { library } from "@fortawesome/fontawesome-svg-core";
 
@@ -12,6 +14,9 @@ export { library } from "@fortawesome/fontawesome-svg-core";
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as AILabel } from "./components/AILabel/AILabel";
 export { default as AIContent } from "./components/AIContent/AIContent";
+export { default as Calendar } from "./components/Calendar/Calendar";
+export { default as Coachmark } from "./components/Coachmark/Coachmark";
+export { default as CodeBlock } from "./components/CodeBlock/CodeBlock";
 export { default as ConfirmAIAction } from "./components/ConfirmAIAction/ConfirmAIAction";
 export { default as Alert } from "./components/Alert/Alert";
 export { default as AppHeader } from "./components/AppHeader/AppHeader";
@@ -33,11 +38,13 @@ export { default as Button } from "./components/Button/Button";
 export { default as Card } from "./components/Card/Card";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as Chips } from "./components/Chips/Chips";
+export { default as ColorPicker } from "./components/ColorPicker/ColorPicker";
 export { default as Combobox } from "./components/Combobox/Combobox";
 export { default as ConfirmDialog } from "./components/ConfirmDialog/ConfirmDialog";
 export { default as Container } from "./components/Container/Container";
 export { default as DataTable } from "./components/DataTable/DataTable";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as DescriptionList } from "./components/DescriptionList/DescriptionList";
 export { default as Divider } from "./components/Divider/Divider";
 export { default as DonutChart } from "./components/Chart/DonutChart";
 export { default as Drawer } from "./components/Drawer/Drawer";
@@ -46,15 +53,21 @@ export { default as EmptyState } from "./components/EmptyState/EmptyState";
 export { default as FileInput } from "./components/FileInput/FileInput";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as Icon } from "./components/Icon/Icon";
+export { default as IconPicker } from "./components/IconPicker/IconPicker";
 export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";
+export { default as List } from "./components/List/List";
+export { default as ListItem } from "./components/List/ListItem";
 export { default as Logo } from "./components/Logo/Logo";
 export { default as Modal } from "./components/Modal/Modal";
 export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+export { default as OrgChart } from "./components/OrgChart/OrgChart";
+export { default as OtpInput } from "./components/OtpInput/OtpInput";
 export { default as PageHeader } from "./components/PageHeader/PageHeader";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as PhoneInput } from "./components/PhoneInput/PhoneInput";
@@ -62,6 +75,7 @@ export { default as Podium } from "./components/Podium/Podium";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/Radio/RadioGroup";
+export { default as RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { default as SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
 export { default as Select } from "./components/Select/Select";
 export { default as SidePanel } from "./components/SidePanel/SidePanel";
@@ -94,6 +108,9 @@ export { default as Tree } from "./components/Tree/Tree";
 export type * from "./components/Accordion/Accordion";
 export type * from "./components/AILabel/AILabel";
 export type * from "./components/AIContent/AIContent";
+export type * from "./components/Calendar/Calendar";
+export type * from "./components/Coachmark/Coachmark";
+export type * from "./components/CodeBlock/CodeBlock";
 export type * from "./components/ConfirmAIAction/ConfirmAIAction";
 export type * from "./components/Alert/Alert";
 export type * from "./components/AppHeader/AppHeader";
@@ -115,11 +132,13 @@ export type * from "./components/Button/Button";
 export type * from "./components/Card/Card";
 export type * from "./components/Checkbox/Checkbox";
 export type * from "./components/Chips/Chips";
+export type * from "./components/ColorPicker/ColorPicker";
 export type * from "./components/Combobox/Combobox";
 export type * from "./components/ConfirmDialog/ConfirmDialog";
 export type * from "./components/Container/Container";
 export type * from "./components/DataTable/DataTable";
 export type * from "./components/DatePicker/DatePicker";
+export type * from "./components/DescriptionList/DescriptionList";
 export type * from "./components/Divider/Divider";
 export type * from "./components/Chart/DonutChart";
 export type * from "./components/Drawer/Drawer";
@@ -128,15 +147,21 @@ export type * from "./components/EmptyState/EmptyState";
 export type * from "./components/FileInput/FileInput";
 export type * from "./components/Grid/Grid";
 export type * from "./components/Icon/Icon";
+export type * from "./components/IconPicker/IconPicker";
 export type * from "./components/Input/Input";
 export type * from "./components/Kanban/Kanban";
 export type * from "./components/Kanban/KanbanCard";
 export type * from "./components/Kanban/KanbanColumn";
+export type * from "./components/Kbd/Kbd";
 export type * from "./components/Link/Link";
 export type * from "./components/Chart/LineChart";
+export type * from "./components/List/List";
+export type * from "./components/List/ListItem";
 export type * from "./components/Logo/Logo";
 export type * from "./components/Modal/Modal";
 export type * from "./components/MultiSelect/MultiSelect";
+export type * from "./components/OrgChart/OrgChart";
+export type * from "./components/OtpInput/OtpInput";
 export type * from "./components/PageHeader/PageHeader";
 export type * from "./components/Pagination/Pagination";
 export type * from "./components/PhoneInput/PhoneInput";
@@ -144,6 +169,7 @@ export type * from "./components/Podium/Podium";
 export type * from "./components/ProgressBar/ProgressBar";
 export type * from "./components/Radio/Radio";
 export type * from "./components/Radio/RadioGroup";
+export type * from "./components/RichTextEditor/RichTextEditor";
 export type * from "./components/SegmentedControl/SegmentedControl";
 export type * from "./components/Select/Select";
 export type * from "./components/SidePanel/SidePanel";

package/src/teste/AILabel.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AILabel from "../components/AILabel/AILabel";
+
+/**
+ * `defaultOpen` era declarado e documentado, mas nunca lido: o painel nascia
+ * fechado de qualquer jeito, e a story "Em inglês" usava `open` (controlado)
+ * para contornar — o que travava o clique.
+ */
+describe("AILabel · defaultOpen", () => {
+  it("abre o painel na montagem", () => {
+    render(<AILabel explanation="Resumo dos despachos." defaultOpen />);
+    expect(screen.getByRole("region")).toHaveTextContent("Resumo dos despachos.");
+    expect(screen.getByRole("button", { name: "Conteúdo gerado por IA" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+  });
+
+  it("continua não-controlado: o clique fecha e avisa", async () => {
+    const usuario = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <AILabel explanation="Resumo." defaultOpen onOpenChange={onOpenChange} />,
+    );
+    await usuario.click(screen.getByRole("button", { name: "Conteúdo gerado por IA" }));
+    expect(screen.queryByRole("region")).not.toBeInTheDocument();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("sem defaultOpen nasce fechado", () => {
+    render(<AILabel explanation="Resumo." />);
+    expect(screen.queryByRole("region")).not.toBeInTheDocument();
+  });
+
+  it("`open` controlado vence o defaultOpen", () => {
+    render(<AILabel explanation="Resumo." defaultOpen open={false} />);
+    expect(screen.queryByRole("region")).not.toBeInTheDocument();
+  });
+});

package/src/teste/AccordionConteudoLivre.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+
+describe("Accordion · conteúdo livre por item (React)", () => {
+  it("o content do item aceita qualquer nó (campos, botões)", () => {
+    render(
+      <Accordion
+        items={[
+          {
+            id: "s1",
+            title: "Seção 01",
+            defaultOpen: true,
+            content: (
+              <label>
+                Nome <input defaultValue="Maria" />
+              </label>
+            ),
+          },
+          { id: "s2", title: "Seção 02", content: <button type="button">Anexar arquivo</button> },
+        ]}
+      />,
+    );
+    expect(screen.getByDisplayValue("Maria")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Anexar arquivo", hidden: true })).toBeInTheDocument();
+  });
+
+  it("o título do item é o botão do painel, sem cor própria (herda a neutra do gatilho)", () => {
+    const { container } = render(<Accordion items={[{ id: "a", title: "Seção", content: "x" }]} />);
+    const titulo = container.querySelector(".umds-accordion__title") as HTMLElement;
+    expect(titulo.closest("button")).toHaveClass("umds-accordion__trigger");
+    expect(titulo.getAttribute("style")).toBeNull();
+  });
+
+  it("o texto simples continua funcionando", () => {
+    render(<Accordion items={[{ id: "a", title: "Seção", content: "Texto do painel", defaultOpen: true }]} />);
+    expect(screen.getByText("Texto do painel")).toBeInTheDocument();
+  });
+});

package/src/teste/Alert.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Alert from "../components/Alert/Alert";
+
+/**
+ * O Alert anunciava toda variante com `role="alert"`, que é assertivo: um
+ * aviso informativo ou de sucesso cortava o que o leitor de tela estava
+ * lendo. Só o erro (`negative`) pode interromper; o resto é `role="status"`.
+ */
+describe("Alert · anúncio ao leitor de tela", () => {
+  it("negative interrompe: role=alert e aria-live=assertive", () => {
+    render(<Alert variant="negative" title="Falhou" />);
+    const alerta = screen.getByRole("alert");
+    expect(alerta).toHaveAttribute("aria-live", "assertive");
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
+  it.each(["positive", "info", "neutral"] as const)(
+    "%s é educado: role=status e aria-live=polite",
+    (variant) => {
+      render(<Alert variant={variant} title="Aviso" />);
+      const alerta = screen.getByRole("status");
+      expect(alerta).toHaveAttribute("aria-live", "polite");
+      expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    },
+  );
+
+  it("sem variant cai no neutral, educado", () => {
+    render(<Alert title="Aviso" />);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+});

package/src/teste/AtributosRepassados.test.tsx

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Text from "../components/Text/Text";
+import Grid from "../components/Grid/Grid";
+import Logo from "../components/Logo/Logo";
+import Button from "../components/Button/Button";
+import DataTable from "../components/DataTable/DataTable";
+
+/**
+ * Paridade com o Vue: no Vue gerado, Text, Grid e Logo descartavam
+ * `title`, `style` e `aria-*`, o Button escrevia `autofocus="false"` e o
+ * DataTable a classe `--selected.value`. O React nunca teve o defeito; o teste
+ * garante que a correção do Vue não o introduza aqui (mesma fonte Mitosis).
+ */
+describe("atributos repassados ao elemento raiz", () => {
+  it("Text repassa title, style e aria-*", () => {
+    const { container } = render(
+      <Text title="Dica" style={{ marginTop: 4 }} aria-live="polite" data-x="1">
+        Olá
+      </Text>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.getAttribute("title")).toBe("Dica");
+    expect(el.style.marginTop).toBe("4px");
+    expect(el.getAttribute("aria-live")).toBe("polite");
+    expect(el.getAttribute("data-x")).toBe("1");
+  });
+
+  it("Grid repassa title, style e aria-*", () => {
+    const { container } = render(
+      <Grid container spacing="xxxs" title="Dica" style={{ marginTop: 4 }} aria-label="Área">
+        x
+      </Grid>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.getAttribute("title")).toBe("Dica");
+    expect(el.style.marginTop).toBe("4px");
+    expect(el.getAttribute("aria-label")).toBe("Área");
+  });
+
+  it("Logo repassa title, style e aria-*", () => {
+    const { container } = render(
+      <Logo title="Dica" style={{ width: 80 }} aria-hidden="true" />,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.getAttribute("title")).toBe("Dica");
+    expect(el.style.width).toBe("80px");
+    expect(el.getAttribute("aria-hidden")).toBe("true");
+  });
+});
+
+describe("Button · autoFocus", () => {
+  it("não escreve autofocus quando falso ou ausente", () => {
+    const { container } = render(<Button>Salvar</Button>);
+    expect(container.querySelector("[autofocus]")).toBeNull();
+  });
+});
+
+describe("DataTable · linha selecionada", () => {
+  it("a classe --selected vai limpa, só na linha selecionada", () => {
+    const { container } = render(
+      <DataTable
+        columns={[{ key: "nome", label: "Nome" }]}
+        data={[{ nome: "Cris Lima" }, { nome: "Ana Paula" }]}
+        selectable
+        selectedRows={[0]}
+      />,
+    );
+    const marcadas = container.querySelectorAll(".umds-datatable__row--selected");
+    expect(marcadas).toHaveLength(1);
+    expect(container.innerHTML).not.toContain(".value");
+  });
+});

package/src/teste/AttachmentCardIA.test.tsx

@@ -0,0 +1,126 @@
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+
+beforeAll(() => {
+  if (!(globalThis as any).ResizeObserver) {
+    (globalThis as any).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+function cartaoDeIA(extra: Record<string, any> = {}) {
+  const aoAplicar = vi.fn();
+  const ui = (
+    <AttachmentCard
+      fileName="protocolo.pdf"
+      documentType="Protocolo"
+      status="ai"
+      statusLabel="Recursos IA"
+      onOpen={() => {}}
+      panel={
+        <div>
+          <p>A IA sugere um assunto.</p>
+          <button type="button" onClick={aoAplicar}>
+            Aplicar sugestão
+          </button>
+        </div>
+      }
+      {...extra}
+    />
+  );
+  return { aoAplicar, ...render(ui) };
+}
+
+describe("AttachmentCard · status ai", () => {
+  it("escreve a classe do selo de IA e usa a varinha por padrão", () => {
+    const { container } = render(<AttachmentCard fileName="x.pdf" status="ai" statusLabel="Recursos IA" />);
+    const selo = container.querySelector(".umds-attachment-card__status") as HTMLElement;
+    expect(selo).toHaveClass("umds-attachment-card__status--ai");
+    expect(selo.querySelector("svg")).not.toBeNull();
+  });
+
+  it("só o selo de IA ganha ícone por padrão", () => {
+    const { container } = render(
+      <AttachmentCard fileName="x.pdf" status="positive" statusLabel="Ok" />,
+    );
+    expect(container.querySelector(".umds-attachment-card__status svg")).toBeNull();
+  });
+});
+
+describe("AttachmentCard · slot panel", () => {
+  it("o painel livre substitui o resultado da conferência, e o selo vira botão sem statusDetails", async () => {
+    const usuario = userEvent.setup();
+    cartaoDeIA();
+    const selo = screen.getByRole("button", { name: /^Recursos IA/ });
+    expect(selo).toHaveAttribute("aria-haspopup", "dialog");
+    await usuario.click(selo);
+    const painel = await screen.findByRole("dialog");
+    expect(painel).toHaveTextContent("A IA sugere um assunto.");
+    expect(screen.getByRole("button", { name: "Aplicar sugestão" })).toBeInTheDocument();
+    // sem título interno: o painel é nomeado pelo selo
+    expect(painel).not.toHaveAttribute("aria-labelledby");
+    expect(painel).toHaveAccessibleName(/Recursos IA/);
+  });
+
+  it("sem panel nem statusDetails o selo não é botão", () => {
+    render(<AttachmentCard fileName="x.pdf" status="ai" statusLabel="Recursos IA" />);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("panelWidth escreve a largura do painel; sem ela não há style", async () => {
+    const usuario = userEvent.setup();
+    cartaoDeIA({ panelWidth: 280 });
+    await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+    expect((await screen.findByRole("dialog")).style.width).toBe("280px");
+  });
+
+  it("sem panelWidth o painel não leva style", async () => {
+    const usuario = userEvent.setup();
+    cartaoDeIA();
+    await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+    expect((await screen.findByRole("dialog")).getAttribute("style")).toBeNull();
+  });
+});
+
+describe("AttachmentCard · closePanelOnAction", () => {
+  it("acionar um botão do painel fecha, devolve o foco ao selo e a ação chega ao app", async () => {
+    const usuario = userEvent.setup();
+    const { aoAplicar } = cartaoDeIA({ closePanelOnAction: true });
+    const selo = screen.getByRole("button", { name: /^Recursos IA/ });
+    await usuario.click(selo);
+    await usuario.click(await screen.findByRole("button", { name: "Aplicar sugestão" }));
+    expect(aoAplicar).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(selo).toHaveFocus();
+  });
+
+  it("sem a prop o painel continua aberto depois da ação", async () => {
+    const usuario = userEvent.setup();
+    const { aoAplicar } = cartaoDeIA();
+    await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+    await usuario.click(await screen.findByRole("button", { name: "Aplicar sugestão" }));
+    expect(aoAplicar).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("o botão de copiar um campo não fecha o painel", async () => {
+    const usuario = userEvent.setup();
+    render(
+      <AttachmentCard
+        fileName="cpf.pdf"
+        status="positive"
+        statusLabel="Pré-aprovado"
+        closePanelOnAction
+        statusDetails={{ fields: [{ label: "CPF", value: "384.221.760-05", copyable: true }] }}
+      />,
+    );
+    await usuario.click(screen.getByRole("button", { name: /^Pré-aprovado/ }));
+    await usuario.click(await screen.findByRole("button", { name: "Copiar CPF" }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+});

package/src/teste/AvatarGroupOverlap.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import AvatarGroup from "../components/Avatar/AvatarGroup";
+
+const PESSOAS = [
+  { name: "Ana Souza" },
+  { name: "Bruno Lima" },
+  { name: "Carla Dias" },
+  { name: "Diego Ferraz" },
+  { name: "Eduarda Neves" },
+];
+
+const grupo = (c: HTMLElement) => c.firstElementChild as HTMLElement;
+
+describe("AvatarGroup · overflowCount", () => {
+  it("sem a prop, o +N é o que passou de max (como antes)", () => {
+    render(<AvatarGroup avatars={PESSOAS} max={3} />);
+    expect(screen.getByText("+2")).toBeInTheDocument();
+  });
+
+  it("overflowCount vira o +N sem itens-fantasma", () => {
+    render(<AvatarGroup avatars={PESSOAS.slice(0, 3)} max={3} overflowCount={12} />);
+    expect(screen.getByText("+12")).toBeInTheDocument();
+  });
+
+  it("soma com o que passou de max dentro de avatars", () => {
+    render(<AvatarGroup avatars={PESSOAS} max={3} overflowCount={10} />);
+    expect(screen.getByText("+12")).toBeInTheDocument();
+  });
+
+  it("o rótulo traduzido recebe o total escondido", () => {
+    render(
+      <AvatarGroup
+        avatars={PESSOAS.slice(0, 2)}
+        max={2}
+        overflowCount={7}
+        overflowTitle={(n) => n + " others"}
+        overflowAriaLabel={(n) => n + " more avatars"}
+      />,
+    );
+    expect(screen.getByTitle("7 others")).toBeInTheDocument();
+  });
+
+  it("sem excedente nenhum, não há +N", () => {
+    render(<AvatarGroup avatars={PESSOAS.slice(0, 2)} max={4} />);
+    expect(screen.queryByText(/^\+/)).toBeNull();
+  });
+
+  it("overflowCount 0 não cria +0", () => {
+    render(<AvatarGroup avatars={PESSOAS.slice(0, 2)} max={4} overflowCount={0} />);
+    expect(screen.queryByText(/^\+/)).toBeNull();
+  });
+});
+
+describe("AvatarGroup · overlap e ring", () => {
+  it("escrevem as variáveis do grupo em px", () => {
+    const { container } = render(<AvatarGroup avatars={PESSOAS} overlap={6} ring={1} />);
+    const el = grupo(container);
+    expect(el.style.getPropertyValue("--umds-avatar-group-overlap")).toBe("6px");
+    expect(el.style.getPropertyValue("--umds-avatar-group-ring")).toBe("1px");
+  });
+
+  it("só overlap não mexe no anel", () => {
+    const { container } = render(<AvatarGroup avatars={PESSOAS} overlap={4} />);
+    const el = grupo(container);
+    expect(el.style.getPropertyValue("--umds-avatar-group-overlap")).toBe("4px");
+    expect(el.style.getPropertyValue("--umds-avatar-group-ring")).toBe("");
+  });
+
+  it("sem as props, nenhum style: valem os padrões do CSS", () => {
+    const { container } = render(<AvatarGroup avatars={PESSOAS} />);
+    expect(grupo(container).getAttribute("style")).toBeNull();
+  });
+});

package/src/teste/BadgeTag.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+import Tag from "../components/Tag/Tag";
+
+const raiz = (c: HTMLElement) => c.firstElementChild as HTMLElement;
+
+describe("Badge compacto, novidade e colado", () => {
+  it("size 2xs escreve a classe; sem size continua md", () => {
+    const { container } = render(
+      <>
+        <Badge size="2xs">A</Badge>
+        <Badge>B</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--2xs");
+    expect(container.children[1]).toHaveClass("umds-badge--md");
+  });
+
+  it("variant new escreve a classe da variante", () => {
+    const { container } = render(<Badge variant="new">Novidade</Badge>);
+    expect(raiz(container)).toHaveClass("umds-badge--new");
+  });
+
+  it("attached escreve o modificador; sem ele não há", () => {
+    const { container } = render(
+      <>
+        <Badge attached>A</Badge>
+        <Badge>B</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--attached");
+    expect(container.children[1]).not.toHaveClass("umds-badge--attached");
+  });
+});
+
+describe("Tag compacta, soft, pílula e novidade", () => {
+  it("size xs escreve a classe e sm continua", () => {
+    const { container } = render(
+      <>
+        <Tag label="a" size="xs" />
+        <Tag label="b" size="sm" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-tag--xs");
+    expect(container.children[1]).toHaveClass("umds-tag--sm");
+  });
+
+  it("appearance soft e pill escrevem as classes", () => {
+    const { container } = render(<Tag label="SOBR" appearance="soft" variant="primary" pill />);
+    expect(raiz(container)).toHaveClass("umds-tag--soft", "umds-tag--primary", "umds-tag--pill");
+  });
+
+  it("sem pill não há a classe; padrão segue outlined", () => {
+    const { container } = render(<Tag label="x" />);
+    expect(raiz(container)).toHaveClass("umds-tag--outlined");
+    expect(raiz(container)).not.toHaveClass("umds-tag--pill");
+  });
+
+  it("variant new escreve a classe", () => {
+    const { container } = render(<Tag label="Dado simulado" variant="new" appearance="soft" />);
+    expect(raiz(container)).toHaveClass("umds-tag--new", "umds-tag--soft");
+  });
+});