@1doc/1ds-react 0.0.1 → 2.7.1

package/README.md

@@ -1,6 +1,8 @@
 # @1doc/1ds-react
 
-Biblioteca de componentes React do 1ds Design System.
+Biblioteca de componentes React do 1DS Design System.
+
+📚 **Documentação viva (Storybook):** https://1dsux.vercel.app
 
 ## Instalação
 
@@ -8,17 +10,24 @@ Biblioteca de componentes React do 1ds Design System.
 pnpm add @1doc/1ds-react @1doc/1ds-tokens
 ```
 
+`@1doc/1ds-tokens` é **peerDependency** — o app instala e importa os CSS de
+tokens diretamente (ver abaixo).
+
 ## Configuração
 
-Importe o CSS dos tokens no seu arquivo principal (`App.tsx` ou `main.tsx`):
+> [!IMPORTANT]
+> Importe o CSS dos tokens no ponto de entrada da aplicação (`main.tsx`),
+> **nesta ordem**. Sem esses imports, os componentes ficam sem estilo.
 
 ```tsx
-import "@1doc/1ds-tokens/dist/css/primitives.css";
-import "@1doc/1ds-tokens/dist/css/semantic.css";
-import "@1doc/1ds-tokens/dist/css/theme-1doc.css";
-import "iconoir/css/iconoir.css";
+import "@1doc/1ds-tokens/css/primitives.css";
+import "@1doc/1ds-tokens/css/semantic.css";
+import "@1doc/1ds-tokens/css/theme-1doc.css"; // tema da sua marca (ver Temas)
 ```
 
+Os caminhos `dist/css/...` continuam funcionando, mas prefira os subpaths
+estáveis `css/...` acima.
+
 ## Uso
 
 ```tsx
@@ -32,3 +41,126 @@ function App() {
   );
 }
 ```
+
+## Componentes
+
+Accordion · Alert · Avatar/AvatarGroup · Badge · Breadcrumb · Button · Card ·
+Checkbox · Chips · ConfirmDialog · DataTable · DatePicker · Divider · Dropdown ·
+EmptyState · FileInput · Grid · Icon · Input · Link · Logo · Modal · MultiSelect ·
+PageHeader · Pagination · PhoneInput · Portal · ProgressBar · Radio · Select ·
+Skeleton · Spinner · Stepper · Switch · Tabs · Tag · Text · Textarea ·
+TimePicker · Toast/ToastStack · Tooltip
+
+Props e exemplos de cada componente: Storybook (link acima) ou os `.d.ts`
+(JSDoc em português em todas as props).
+
+> [!NOTE]
+> As interfaces de props são **estritas** (sem `[key: string]: any`): typo de
+> prop é erro de compilação. Atributos arbitrários (`data-*` etc.) **não são
+> repassados ao DOM** pelos componentes — antes compilavam mas eram
+> silenciosamente descartados; agora o TypeScript avisa.
+
+## Ícones
+
+Os ícones **internos** dos componentes (chevrons, calendário, setas de
+ordenação, ×, etc.) funcionam **out-of-the-box** — cada componente importa
+seus glifos diretamente (tree-shakeable, só o que é usado entra no bundle).
+
+Para ícones do **seu app** (`<Icon icon="...">`, `startIcon`, `Tab.icon`...),
+há dois caminhos:
+
+```tsx
+// 1) Recomendado: objeto importado (tree-shakeable, typo = erro de compilação)
+import { faHouse } from "@fortawesome/free-solid-svg-icons";
+<Icon icon={faHouse} />;
+
+// 2) Por nome (string): exige registrar os ícones na library UMA vez no bootstrap
+import { library } from "@1doc/1ds-react";
+import { faHouse, faGear } from "@fortawesome/free-solid-svg-icons";
+library.add(faHouse, faGear);
+<Icon icon="house" />;
+```
+
+> [!WARNING]
+> Evite `library.add(fas)` (pacote inteiro): adiciona ~900 kB ao bundle.
+> Registre apenas os ícones que o app usa, ou prefira objetos importados.
+> Use packs FontAwesome na faixa **6.x** (compatível com o svg-core do DS).
+
+## Temas
+
+Tema via atributo `data-theme` no `<html>`. Utilitários em `@1doc/1ds-react`:
+`setTheme` · `getTheme` · `initTheme` · `onThemeChange` · `registerTheme` ·
+`getAvailableThemes`.
+
+| Marca | Light (arquivo / setTheme) | Dark |
+|---|---|---|
+| 1Doc | `theme-1doc.css` / `"1doc"` | `theme-1doc-dark.css` / `"1doc-dark"` |
+| Green | `theme-1ds-green.css` / `"1ds-green"` | `theme-1ds-green-dark.css` / `"1ds-green-dark"` |
+| Orange | `theme-1ds-orange.css` / `"1ds-orange"` | `theme-1ds-orange-dark.css` / `"1ds-orange-dark"` |
+| Purple | `theme-1ds-purple.css` / `"1ds-purple"` | `theme-1ds-purple-dark.css` / `"1ds-purple-dark"` |
+| Red | `theme-1ds-red.css` / `"1ds-red"` | `theme-1ds-red-dark.css` / `"1ds-red-dark"` |
+| Yellow | `theme-1ds-yellow.css` / `"1ds-yellow"` | `theme-1ds-yellow-dark.css` / `"1ds-yellow-dark"` |
+
+Alto contraste (acessibilidade, fora da matriz de marcas): `theme-1doc-high-contrast.css` /
+`"1doc-high-contrast"` — fundo preto, texto branco, interativo amarelo. O DS não o aplica
+sozinho; ver a seção "Alto contraste" do README de `@1doc/1ds-tokens` para seguir
+`prefers-contrast: more`.
+
+> O CSS do tema escolhido precisa estar **importado** para o `setTheme` ter
+> efeito. Todos os temas podem ser carregados juntos (cada um é escopado em
+> `[data-theme="..."]`) — a troca em runtime é atômica.
+
+### Tema de marca própria (white-label)
+
+Crie um CSS com `[data-theme="minha-marca"]` sobrescrevendo os 25 tokens
+`--umds-theme-*` (contrato idêntico aos 12 temas oficiais — o mínimo para a
+cor de marca são os 4 `primary-*`), carregue-o após o `semantic.css` e
+registre o tema para o utilitário aceitá-lo (validação + persistência):
+
+```tsx
+import { registerTheme, initTheme, setTheme } from "@1doc/1ds-react";
+
+registerTheme("minha-marca");
+registerTheme("minha-marca-dark");
+initTheme(); // restaura tema persistido (inclusive custom, já registrado)
+setTheme("minha-marca");
+```
+
+## Formulários
+
+Todos os campos participam do submit nativo (`<form>` + `FormData`) via prop
+`name` — Select/DatePicker/TimePicker/MultiSelect emitem hidden inputs;
+PhoneInput emite também `{name}_ddi`; FileInput mantém os `File` no input.
+Contrato de validação uniforme: `invalid`/`errorMessage`/`helperText`
+(com `aria-describedby`).
+
+Em viewports ≤640px os campos de texto sobem automaticamente para fonte 16px
+(evita o zoom do Safari iOS ao focar).
+
+## Modo touch (densidade)
+
+Para apps mobile/touch, ative o modo touch — os alvos de toque dos controles
+interativos (botões, campos, checkboxes, paginação, calendário…) sobem para
+≥44px, aumentando controle e espaçamento juntos:
+
+```tsx
+import { setDensity } from "@1doc/1ds-react";
+
+setDensity("touch");   // <html data-density="touch">
+setDensity("default"); // volta ao padrão desktop
+```
+
+Elementos inline compactos (Tag, Chips) mantêm o tamanho — em contextos touch,
+dê espaçamento entre eles no layout.
+
+## Toasts
+
+```tsx
+import { ToastStack, toast } from "@1doc/1ds-react";
+
+// 1× na raiz do app:
+<ToastStack position="top-right" />;
+
+// em qualquer handler:
+toast({ message: "Salvo!", variant: "positive" });
+```

package/package.json

@@ -1,26 +1,59 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "0.0.1",
+  "version": "2.7.1",
   "main": "dist/index.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./utils/theme": {
+      "types": "./dist/utils/theme.d.ts",
+      "default": "./dist/utils/theme.js"
+    },
+    "./utils/toast": {
+      "types": "./dist/utils/toast.d.ts",
+      "default": "./dist/utils/toast.js"
+    },
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
   "dependencies": {
-    "iconoir": "^7.11.0",
-    "@1doc/1ds-tokens": "0.0.1"
+    "@floating-ui/dom": "^1.7.6",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.0"
+  },
+  "peerDependencies": {
+    "@1doc/1ds-tokens": ">=0.1.0",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "jsdom": "^26.1.0",
     "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
-    "@1doc/1ds-core": "0.0.1"
-  },
-  "peerDependencies": {
-    "react": ">=18"
+    "vitest": "^3.2.7",
+    "@1doc/1ds-core": "2.7.2",
+    "@1doc/1ds-tokens": "0.4.1"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "scripts": {
-    "build": "tsc && node scripts/postbuild.js"
+    "build": "tsc && node scripts/postbuild.js",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/src/index.ts

@@ -1,28 +1,173 @@
 // Theme utilities
 export * from "./utils/theme";
 
+// Fila imperativa de toasts (toast/dismissToast/subscribeToasts) — host: <ToastStack/>
+export * from "./utils/toast";
+// Densidade global (modo touch ≥44px via data-density)
+export * from "./utils/density";
+// FontAwesome
+export { library } from "@fortawesome/fontawesome-svg-core";
+
 // Components
-export { default as Button } from "./components/Button/Button";
-export { default as Icon } from "./components/Icon/Icon";
-export { default as Spinner } from "./components/Spinner/Spinner";
-export { default as Divider } from "./components/Divider/Divider";
-export { default as Badge } from "./components/Badge/Badge";
+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 ConfirmAIAction } from "./components/ConfirmAIAction/ConfirmAIAction";
+export { default as Alert } from "./components/Alert/Alert";
+export { default as AppHeader } from "./components/AppHeader/AppHeader";
+export { default as AppHeaderAction } from "./components/AppHeaderAction/AppHeaderAction";
+export { default as AppNavItem } from "./components/AppNavItem/AppNavItem";
+export { default as AppShell } from "./components/AppShell/AppShell";
+export { default as AppSidebar } from "./components/AppSidebar/AppSidebar";
+export { default as AppSubheader } from "./components/AppSubheader/AppSubheader";
+export { default as AttachmentCard } from "./components/AttachmentCard/AttachmentCard";
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as AvatarGroup } from "./components/Avatar/AvatarGroup";
-export { default as Logo } from "./components/Logo/Logo";
-export { default as Link } from "./components/Link/Link";
-export { default as Switch } from "./components/Switch/Switch";
+export { default as Badge } from "./components/Badge/Badge";
+export { default as BarChart } from "./components/Chart/BarChart";
+export { default as BottomNavigation } from "./components/BottomNavigation/BottomNavigation";
+export { default as BottomSheet } from "./components/BottomSheet/BottomSheet";
+export { default as Box } from "./components/Box/Box";
+export { default as Breadcrumb } from "./components/Breadcrumb/Breadcrumb";
+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 Radio } from "./components/Radio/Radio";
-export { default as Input } from "./components/Input/Input";
+export { default as Chips } from "./components/Chips/Chips";
+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 Divider } from "./components/Divider/Divider";
+export { default as DonutChart } from "./components/Chart/DonutChart";
+export { default as Drawer } from "./components/Drawer/Drawer";
+export { default as Dropdown } from "./components/Dropdown/Dropdown";
+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 Textarea } from "./components/Textarea/Textarea";
+export { default as Icon } from "./components/Icon/Icon";
+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 Link } from "./components/Link/Link";
+export { default as LineChart } from "./components/Chart/LineChart";
+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 PageHeader } from "./components/PageHeader/PageHeader";
+export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as PhoneInput } from "./components/PhoneInput/PhoneInput";
+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 SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
 export { default as Select } from "./components/Select/Select";
-export { default as Text } from "./components/Text/Text";
-export { default as Tabs } from "./components/Tabs/Tabs";
+export { default as SidePanel } from "./components/SidePanel/SidePanel";
+export { default as SidePanelItem } from "./components/SidePanelItem/SidePanelItem";
+export { default as SidePanelSearch } from "./components/SidePanelSearch/SidePanelSearch";
+export { default as SidePanelSection } from "./components/SidePanelSection/SidePanelSection";
+export { default as Skeleton } from "./components/Skeleton/Skeleton";
+export { default as Spinner } from "./components/Spinner/Spinner";
+export { default as Stack } from "./components/Stack/Stack";
+export { default as StatCard } from "./components/StatCard/StatCard";
+export { default as Stepper } from "./components/Stepper/Stepper";
+export { default as Switch } from "./components/Switch/Switch";
 export { default as Tab } from "./components/Tabs/Tab";
-export { default as TabsContent } from "./components/Tabs/TabsContent";
 export { default as TabContent } from "./components/Tabs/TabContent";
+export { default as Tabs } from "./components/Tabs/Tabs";
+export { default as TabsContent } from "./components/Tabs/TabsContent";
 export { default as Tag } from "./components/Tag/Tag";
-export { default as Modal } from "./components/Modal/Modal";
-export { default as Alert } from "./components/Alert/Alert";
+export { default as Text } from "./components/Text/Text";
+export { default as Textarea } from "./components/Textarea/Textarea";
+export { default as TimePicker } from "./components/TimePicker/TimePicker";
+export { default as Timeline } from "./components/Timeline/Timeline";
+export { default as Toast } from "./components/Toast/Toast";
+export { default as ToastStack } from "./components/Toast/ToastStack";
+export { default as Tooltip } from "./components/Tooltip/Tooltip";
+export { default as Popover } from "./components/Popover/Popover";
+export { default as Portal } from "./components/Portal/Portal";
+export { default as Tree } from "./components/Tree/Tree";
+
+// Component Props Types
+export type * from "./components/Accordion/Accordion";
+export type * from "./components/AILabel/AILabel";
+export type * from "./components/AIContent/AIContent";
+export type * from "./components/ConfirmAIAction/ConfirmAIAction";
+export type * from "./components/Alert/Alert";
+export type * from "./components/AppHeader/AppHeader";
+export type * from "./components/AppHeaderAction/AppHeaderAction";
+export type * from "./components/AppNavItem/AppNavItem";
+export type * from "./components/AppShell/AppShell";
+export type * from "./components/AppSidebar/AppSidebar";
+export type * from "./components/AppSubheader/AppSubheader";
+export type * from "./components/AttachmentCard/AttachmentCard";
+export type * from "./components/Avatar/Avatar";
+export type * from "./components/Avatar/AvatarGroup";
+export type * from "./components/Badge/Badge";
+export type * from "./components/Chart/BarChart";
+export type * from "./components/BottomNavigation/BottomNavigation";
+export type * from "./components/BottomSheet/BottomSheet";
+export type * from "./components/Box/Box";
+export type * from "./components/Breadcrumb/Breadcrumb";
+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/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/Divider/Divider";
+export type * from "./components/Chart/DonutChart";
+export type * from "./components/Drawer/Drawer";
+export type * from "./components/Dropdown/Dropdown";
+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/Input/Input";
+export type * from "./components/Kanban/Kanban";
+export type * from "./components/Kanban/KanbanCard";
+export type * from "./components/Kanban/KanbanColumn";
+export type * from "./components/Link/Link";
+export type * from "./components/Chart/LineChart";
+export type * from "./components/Logo/Logo";
+export type * from "./components/Modal/Modal";
+export type * from "./components/MultiSelect/MultiSelect";
+export type * from "./components/PageHeader/PageHeader";
+export type * from "./components/Pagination/Pagination";
+export type * from "./components/PhoneInput/PhoneInput";
+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/SegmentedControl/SegmentedControl";
+export type * from "./components/Select/Select";
+export type * from "./components/SidePanel/SidePanel";
+export type * from "./components/SidePanelItem/SidePanelItem";
+export type * from "./components/SidePanelSearch/SidePanelSearch";
+export type * from "./components/SidePanelSection/SidePanelSection";
+export type * from "./components/Skeleton/Skeleton";
+export type * from "./components/Spinner/Spinner";
+export type * from "./components/Stack/Stack";
+export type * from "./components/StatCard/StatCard";
+export type * from "./components/Stepper/Stepper";
+export type * from "./components/Switch/Switch";
+export type * from "./components/Tabs/Tab";
+export type * from "./components/Tabs/TabContent";
+export type * from "./components/Tabs/Tabs";
+export type * from "./components/Tabs/TabsContent";
+export type * from "./components/Tag/Tag";
+export type * from "./components/Text/Text";
+export type * from "./components/Textarea/Textarea";
+export type * from "./components/TimePicker/TimePicker";
+export type * from "./components/Timeline/Timeline";
+export type * from "./components/Toast/Toast";
+export type * from "./components/Toast/ToastStack";
+export type * from "./components/Tooltip/Tooltip";
+export type * from "./components/Popover/Popover";
+export type * from "./components/Portal/Portal";
+export type * from "./components/Tree/Tree"

package/src/teste/AttachmentCard.test.tsx

@@ -0,0 +1,161 @@
+import { 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";
+
+/**
+ * O que precisa ser provado:
+ *  - com `onOpen` existe UM alvo de foco, com nome que diz o que abre;
+ *  - sem `onOpen` o cartão é leitura — nenhum botão finge ação;
+ *  - "obrigatório" chega ao leitor de tela como texto, não só como asterisco;
+ *  - sem `status` ou sem `statusLabel`, o selo não aparece vazio.
+ */
+
+describe("AttachmentCard · abrir", () => {
+  it("o nome do arquivo é o único botão, e o clique chama onOpen", async () => {
+    const usuario = userEvent.setup();
+    const aoAbrir = vi.fn();
+    render(
+      <AttachmentCard
+        fileName="cnh frente e verso.pdf"
+        documentType="CNH"
+        onOpen={aoAbrir}
+      />,
+    );
+
+    const botoes = screen.getAllByRole("button");
+    expect(botoes).toHaveLength(1);
+    expect(botoes[0]).toHaveAccessibleName("Abrir CNH: cnh frente e verso.pdf");
+
+    await usuario.click(botoes[0]);
+    expect(aoAbrir).toHaveBeenCalledTimes(1);
+  });
+
+  it("abre pelo teclado", async () => {
+    const usuario = userEvent.setup();
+    const aoAbrir = vi.fn();
+    render(<AttachmentCard fileName="parecer.pdf" onOpen={aoAbrir} />);
+
+    await usuario.tab();
+    expect(screen.getByRole("button", { name: "Abrir parecer.pdf" })).toHaveFocus();
+    await usuario.keyboard("{Enter}");
+    expect(aoAbrir).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem onOpen não há botão", () => {
+    render(<AttachmentCard fileName="parecer.pdf" documentType="Parecer" />);
+    expect(screen.queryByRole("button")).toBeNull();
+    expect(screen.getByText("parecer.pdf")).toBeInTheDocument();
+  });
+});
+
+describe("AttachmentCard · conteúdo", () => {
+  it("obrigatório vira texto para leitor de tela", () => {
+    render(<AttachmentCard fileName="rg.pdf" documentType="RG" required />);
+    expect(screen.getByText("(obrigatório)")).toBeInTheDocument();
+  });
+
+  it("mostra o selo de situação só com status e rótulo", () => {
+    const { rerender } = render(
+      <AttachmentCard fileName="t.pdf" status="negative" statusLabel="Rejeitado" />,
+    );
+    expect(screen.getByText("Rejeitado").closest(".umds-attachment-card__status"))
+      .toHaveClass("umds-attachment-card__status--negative");
+
+    rerender(<AttachmentCard fileName="t.pdf" status="negative" />);
+    expect(document.querySelector(".umds-attachment-card__status")).toBeNull();
+  });
+});
+
+const CONFERENCIA = {
+  description: "Dados pessoais confirmados com sucesso.",
+  fields: [
+    { label: "Nº do CPF", value: "384.221.760-05", copyable: true },
+    { label: "Situação cadastral", value: "Regular" },
+  ],
+};
+
+function renderComPainel(extra: Record<string, any> = {}) {
+  return render(
+    <AttachmentCard
+      fileName="comprovante_cpf.pdf"
+      documentType="CPF"
+      status="positive"
+      statusLabel="Pré-aprovado"
+      statusDetails={CONFERENCIA}
+      onOpen={() => {}}
+      {...extra}
+    />,
+  );
+}
+
+describe("AttachmentCard · painel de conferência", () => {
+  it("hover abre sem tirar o foco de onde está, e sair fecha", async () => {
+    const usuario = userEvent.setup();
+    renderComPainel();
+    const selo = screen.getByRole("button", { name: /^Pré-aprovado/ });
+
+    await usuario.hover(selo);
+    const painel = await screen.findByRole("dialog", { name: "comprovante_cpf.pdf" });
+    expect(painel).toHaveTextContent("Dados pessoais confirmados com sucesso.");
+    expect(painel).toHaveTextContent("384.221.760-05");
+    expect(document.activeElement).toBe(document.body);
+
+    await usuario.unhover(selo);
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("clique fixa o painel, leva o foco para dentro e Esc devolve ao selo", async () => {
+    const usuario = userEvent.setup();
+    const aoAbrir = vi.fn();
+    renderComPainel({ onOpen: aoAbrir });
+    const selo = screen.getByRole("button", { name: /^Pré-aprovado/ });
+
+    await usuario.click(selo);
+    expect(selo).toHaveAttribute("aria-expanded", "true");
+    // Clicar no selo NÃO abre o arquivo — o selo fica acima do alvo esticado.
+    expect(aoAbrir).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Copiar Nº do CPF" })).toHaveFocus(),
+    );
+
+    // Fixo: tirar o ponteiro não fecha.
+    await usuario.unhover(selo);
+    await new Promise((r) => setTimeout(r, 200));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    await usuario.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(selo).toHaveFocus();
+    expect(selo).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("copiar só aparece em campo copiável e avisa o campo", async () => {
+    const usuario = userEvent.setup();
+    const aoCopiar = vi.fn();
+    renderComPainel({ onCopyField: aoCopiar });
+
+    await usuario.click(screen.getByRole("button", { name: /^Pré-aprovado/ }));
+    expect(screen.queryByRole("button", { name: "Copiar Situação cadastral" })).toBeNull();
+
+    await usuario.click(screen.getByRole("button", { name: "Copiar Nº do CPF" }));
+    expect(aoCopiar).toHaveBeenCalledWith(CONFERENCIA.fields[0]);
+    expect(screen.getByRole("button", { name: "Nº do CPF copiado" })).toBeInTheDocument();
+  });
+
+  it("clique fora fecha", async () => {
+    const usuario = userEvent.setup();
+    renderComPainel();
+    await usuario.click(screen.getByRole("button", { name: /^Pré-aprovado/ }));
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+
+    await usuario.click(document.body);
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("sem statusDetails o selo é só leitura", () => {
+    renderComPainel({ statusDetails: undefined });
+    expect(screen.queryByRole("button", { name: /^Pré-aprovado/ })).toBeNull();
+    expect(screen.getByText("Pré-aprovado")).toBeInTheDocument();
+  });
+});