@1doc/1ds-react 2.8.0 → 2.10.0

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/AccordionTituloNeutro.test.tsx

@@ -0,0 +1,25 @@
+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(<Accordion items={ITENS} titleVariant="neutral" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    expect(raiz()).toHaveClass("umds-accordion--title-neutral");
+    rerender(<Accordion items={ITENS} titleVariant="default" />);
+    expect(raiz()).not.toHaveClass("umds-accordion--title-neutral");
+    rerender(<Accordion items={ITENS} />);
+    expect(raiz()).not.toHaveClass("umds-accordion--title-neutral");
+  });
+
+  it("combina com a variant do accordion", () => {
+    const { container } = render(<Accordion items={ITENS} variant="separated" titleVariant="neutral" />);
+    expect(container.firstElementChild).toHaveClass("umds-accordion--separated", "umds-accordion--title-neutral");
+  });
+});

package/src/teste/AppSubheaderRegiao.test.tsx

@@ -0,0 +1,17 @@
+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(
+      <AppSubheader>
+        <Breadcrumb items={[{ label: "Painel" }]} />
+      </AppSubheader>,
+    );
+    const contexto = container.querySelector(".umds-app-subheader__contexto") as HTMLElement;
+    expect(contexto.querySelector("a, button, [tabindex]")).toBeNull();
+  });
+});

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/AttachmentCardLista.test.tsx

@@ -0,0 +1,53 @@
+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(<AttachmentCard fileName="cnh.pdf" documentType="CNH" status="positive" statusLabel="Pré-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") as HTMLElement;
+    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") as HTMLElement;
+    expect(dd.tagName).toBe("DD");
+    expect(dd.querySelector(".umds-attachment-card__campo-valor-texto")).toHaveTextContent("Marcos Vinícius Tavares");
+    const botao = dd.querySelector("button") as HTMLElement;
+    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/src/teste/AttachmentCardSm.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+
+const tamanho = (el: Element | null) => (el as HTMLElement).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(<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") as HTMLElement;
+    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(<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(<AttachmentCard fileName="a.pdf" size="sm" documentType="CNH" status="positive" statusLabel="Pré-aprovado" />);
+    expect(container.querySelector(".umds-attachment-card__tipo-texto")).toHaveTextContent("CNH");
+    expect(container.querySelector(".umds-attachment-card__status-texto")).toHaveTextContent("Pré-aprovado");
+  });
+});

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/BadgeNeutroColado.test.tsx

@@ -0,0 +1,15 @@
+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(
+      <Badge attached variant="neutral" appearance="solid">
+        Tarefa manual
+      </Badge>,
+    );
+    expect(container.firstElementChild).toHaveClass("umds-badge--attached", "umds-badge--neutral", "umds-badge--solid");
+  });
+});