@aurea-uds/react 0.1.0 → 0.2.0

package/dist/inputs.d.ts

@@ -26,6 +26,32 @@ export declare function Switch({ label, className, ...props }: InputHTMLAttribut
     label: ReactNode;
 }): React.JSX.Element;
 export declare function Range(props: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>): React.JSX.Element;
+export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, className }: {
+    value?: number | null;
+    defaultValue?: number;
+    onValueChange?: (v: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    label?: string;
+    id?: string;
+    className?: string;
+}): React.JSX.Element;
+export declare function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, required, label, id, className }: {
+    length: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    mask?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    id?: string;
+    className?: string;
+}): React.JSX.Element;
 export declare function SegmentedControl({ items, value, onChange, label }: {
     items: Array<{
         value: string;

package/dist/inputs.js

@@ -1,10 +1,15 @@
+"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 import React, { forwardRef } from "react";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import { cx, useAureaStrings } from "./internal.js";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
 import { Icon } from "./system.js";
 import { IconButton } from "./actions.js";
 // FileInput mora em arquivo próprio (132 linhas — upload real, aborto, progresso) e é público
@@ -41,21 +46,81 @@ export function Checkbox({ label, labelHidden, description, className, ...props
 export function Radio({ label, className, ...props }) { return _jsxs("label", { className: cx("radio", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: "control-mark" }), label] }); }
 export function Switch({ label, className, ...props }) { return _jsxs("label", { className: cx("switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: "switch-track" }), _jsx("span", { children: label })] }); }
 export function Range(props) { return _jsx("input", { className: cx("range", props.className), type: "range", ...props }); }
-export function SegmentedControl({ items, value, onChange, label }) { const s = useAureaStrings(); return _jsx("div", { className: "segmented", role: "group", "aria-label": label ?? s.optionsLabel, children: items.map(i => _jsx("button", { className: i.value === value ? "active" : undefined, "aria-pressed": i.value === value, onClick: () => onChange(i.value), children: i.label }, i.value)) }); }
+// NumberField (Lote 1 do BUILDING.md). Um `<input type="number">` cru tem três problemas que
+// este resolve, e todos vieram do motor, não de nós: as setas nativas são alvos minúsculos e
+// somem no Safari; a roda do mouse altera o valor por acidente sobre o campo focado; e o valor
+// digitado não é formatado por locale. O Base UI trata os três.
+// A anatomia (menos · campo · mais numa peça só) é a que as referências convergem.
+// Fora de propósito: o ScrubArea do Base UI — arrastar o rótulo para variar o número. É gesto
+// que ninguém descobre sozinho e que não tem equivalente por teclado.
+export function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, className }) {
+    const s = useAureaStrings();
+    return _jsx(BaseNumberField.Root, { id: id, value: value, defaultValue: defaultValue, onValueChange: onValueChange, min: min, max: max, step: step, disabled: disabled, readOnly: readOnly, required: required, className: cx("number-field", className), children: _jsxs(BaseNumberField.Group, { className: "number-field-group", children: [_jsx(BaseNumberField.Decrement, { className: "btn btn-ghost btn-icon", "aria-label": s.decrement, children: _jsx(Icon, { name: "subtract" }) }), _jsx(BaseNumberField.Input, { className: "input number-field-input", "aria-label": label }), _jsx(BaseNumberField.Increment, { className: "btn btn-ghost btn-icon", "aria-label": s.increment, children: _jsx(Icon, { name: "add" }) })] }) });
+}
+// OTPField (Lote 1 do BUILDING.md). Um campo por dígito, com o comportamento que ninguém acerta
+// à mão: colar o código inteiro distribui pelos campos, Backspace volta um, e o
+// `autocomplete="one-time-code"` deixa o iOS oferecer o código do SMS. Tudo do motor.
+// Uma referência resolve isto com um pacote npm separado; aqui não entra dependência nova —
+// o `@base-ui/react`, que já é a única dependência de runtime da biblioteca, tem `otp-field`.
+// `length` é obrigatório de propósito: sem ele o campo não sabe quando está completo.
+// CADA caixa leva nome próprio, e não só o grupo. O `catalog-sweep` pegou isto no primeiro
+// lote: com `aria-label` só na raiz, o axe acusou `label` em todas as seis — seis campos de
+// formulário anônimos. Um leitor de tela anunciaria "editar texto" seis vezes seguidas sem
+// dizer qual é qual. O grupo continua nomeado (`role="group"`), que é o que diz para que serve
+// o código; o nome de cada caixa é o que diz onde você está.
+export function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, required, label, id, className }) {
+    const s = useAureaStrings();
+    return _jsx(BaseOTPField.Root, { id: id, length: length, value: value, defaultValue: defaultValue, onValueChange: onValueChange, mask: mask, disabled: disabled, required: required, role: "group", "aria-label": label, className: cx("otp-field", className), children: Array.from({ length }, (_, i) => _jsx(BaseOTPField.Input, { render: _jsx("input", { "aria-label": `${s.otpDigit} ${i + 1}` }), className: "input otp-slot" }, i)) });
+}
+// SegmentedControl — achado M20, fechado na Parte C do PLANO-1.0 em 07/08/2026.
+//
+// O DEFEITO: era `role="group"` com N botões de `aria-pressed`. Isso descreve N alternâncias
+// INDEPENDENTES — cada botão anuncia "pressionado/não pressionado", nada diz que só um pode
+// valer, e nunca se ouve "1 de 2". Para escolha única entre poucas opções o padrão APG é
+// `radiogroup`, e a diferença é o que o leitor de tela consegue prometer.
+// A troca mudou a semântica de um componente publicado, então foi registrada: ADR-0016.
+//
+// O MOTOR ENTREGA, ENTÃO NÃO ESCREVEMOS (BUILDING.md §1). O `RadioGroup` do Base UI 1.6 traz o
+// padrão inteiro: roving tabindex, setas que movem E selecionam, Home/End, e `aria-checked`.
+// Escrever isso à mão seria reimplementar um composite que já está testado.
+//
+// `render={<button type="button"/>}` não é enfeite, e a medição de 07/08 é que disse: o
+// `Radio.Root` renderiza um `<span>` por padrão, e a pele da Aurea é `.segmented button`. Sem
+// isso o componente perderia a pele inteira — e o check 18 não veria, porque ele olha CLASSE.
+// O motor também emite um `<input type="radio">` escondido por item (para envio de formulário);
+// ele é `position:fixed` e `aria-hidden`, então não entra no flex nem na árvore de acessibilidade.
+//
+// E `nativeButton` é o par obrigatório do `render` acima — medido em 11/08/2026. O `Radio.Root`
+// declara `nativeButton = false` por padrão (é o valor certo para o `<span>` que ele renderiza
+// sozinho), e o `useButton` do motor CONFERE isso no DOM montado, dentro de um efeito: sem esta
+// palavra sai um `console.error` do Base UI a cada montagem de CLIENTE. Não no catálogo, que é
+// HTML estático — no console de quem INSTALA.
+// O DOM foi medido nos dois lados antes da troca. O `role="button"` que a mensagem ameaça NÃO
+// aparecia (o `role="radio"` do motor já vencia a fusão); o que muda de fato é o `<input>`
+// escondido perder o `id`, que migra para este botão — e migra para o lado certo, porque o botão
+// é o rádio e o input é `aria-hidden`. Comportamento idêntico: Enter não seleciona, Espaço
+// seleciona, a seta move E seleciona. O que sai é a camada sintética que o motor punha por cima
+// da ativação nativa do `<button>`.
+export function SegmentedControl({ items, value, onChange, label }) {
+    const s = useAureaStrings();
+    return _jsx(BaseRadioGroup, { className: "segmented", "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
+}
 export function Combobox({ items, value, onValueChange, placeholder, label, id, className }) {
     const s = useAureaStrings();
+    const portal = usePortalContainer();
     const autoId = React.useId();
     const inputId = id ?? autoId;
-    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: onValueChange, itemToStringLabel: (i) => i.label, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-group", children: [_jsx(BaseCombobox.Input, { id: inputId, placeholder: placeholder, className: "input" }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value) })] }) }) })] });
+    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: onValueChange, itemToStringLabel: (i) => i.label, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-group", children: [_jsx(BaseCombobox.Input, { id: inputId, placeholder: placeholder, className: "input" }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value) })] }) }) })] });
 }
 const isGrouped = (items) => items.length > 0 && "items" in items[0];
 export function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, id, className }) {
     const s = useAureaStrings();
+    const portal = usePortalContainer();
     const autoId = React.useId();
     const inputId = id ?? autoId;
     const renderItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
     return _jsxs(BaseCombobox.Root, { multiple: true, items: items, value: value, onValueChange: onValueChange, itemToStringLabel: (i) => i.label, filter: onInputChange ? null : undefined, onInputValueChange: onInputChange ? ((v, d) => { if (d.reason !== "item-press")
-            onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input" })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: isGrouped(items)
+            onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input" })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: isGrouped(items)
                                     ? (group) => _jsxs(BaseCombobox.Group, { items: group.items, className: "combobox-section", children: [_jsx(BaseCombobox.GroupLabel, { className: "combobox-group-label", children: group.label }), _jsx(BaseCombobox.Collection, { children: renderItem })] }, group.label)
                                     : renderItem })] }) }) })] });
 }

package/dist/internal.d.ts

@@ -1,72 +1,10 @@
 import { type HTMLAttributes, type RefAttributes } from "react";
-export declare const cx: (...v: Array<string | false | null | undefined>) => string;
-export interface AureaStrings {
-    close: string;
-    paginationLabel: string;
-    previous: string;
-    next: string;
-    breadcrumbLabel: string;
-    tabsLabel: string;
-    optionsLabel: string;
-    tableLabel: string;
-    commandLabel: string;
-    commandPlaceholder: string;
-    dismissNotification: string;
-    toolbarLabel: string;
-    comboboxEmpty: string;
-    comboboxClear: string;
-    comboboxOpen: string;
-    comboboxRemove: string;
-    comboboxLoading: string;
-    fileDropPrompt: string;
-    fileAdded: string;
-    fileRemoved: string;
-    fileRemove: string;
-    fileTooLarge: string;
-    fileWrongType: string;
-    treeLabel: string;
-    notificationsLabel: string;
-    notificationMarkAll: string;
-    notificationEmpty: string;
-    notificationUnread: string;
-    notificationNew: string;
-    dataGridFilter: string;
-    dataGridEmpty: string;
-    dataGridSelectAll: string;
-    dataGridSelectRow: string;
-    mediaPlayer: string;
-    mediaPlay: string;
-    mediaPause: string;
-    mediaMute: string;
-    mediaUnmute: string;
-    mediaSeek: string;
-    mediaVolume: string;
-    mediaCaptionsShow: string;
-    mediaCaptionsHide: string;
-    mediaSkipBack: string;
-    mediaSkipForward: string;
-    mediaFullscreenEnter: string;
-    mediaFullscreenExit: string;
-    uploadSending: string;
-    uploadCancel: string;
-    uploadRetry: string;
-    uploadError: string;
-    uploadCanceled: string;
-    uploadComplete: string;
-    codeEditor: string;
-    chatLabel: string;
-    chatMessage: string;
-    chatSend: string;
-    qrCode: string;
-    copyCode: string;
-    tocLabel: string;
-    navigationToggle: string;
-}
-export declare const defaultStrings: AureaStrings;
-export declare const ptBR: AureaStrings;
+import { type AureaStrings } from "./pure.js";
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity, type AureaStrings, type UniversalState } from "./pure.js";
 export declare const StringsContext: import("react").Context<AureaStrings>;
 export declare const useAureaStrings: () => AureaStrings;
-export declare const defaultSpriteUrl = "/aurea-icons.svg";
 export declare const SpriteContext: import("react").Context<string>;
 export declare const useSpriteUrl: () => string;
+export declare const PortalContext: import("react").Context<HTMLElement | null | undefined>;
+export declare const usePortalContainer: () => HTMLElement | null | undefined;
 export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): import("react").JSX.Element;

package/dist/internal.js

@@ -1,29 +1,40 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+// A diretiva na LINHA 1, como as referências a escrevem (Base UI e shadcn/ui, medidos em
+// 06/08/2026) — Parte A do PLANO-1.0. Este módulo chama `createContext`, que é API só de
+// cliente: sem a diretiva, `import {Button} from "@aurea-uds/react"` dentro de um componente
+// de servidor quebrava na hora, e quebrava no consumidor.
+//
+// O que NÃO tem estado saiu daqui para o `pure.tsx` — está explicado lá. A reexportação abaixo
+// existe para os 18 módulos de cliente seguirem importando `cx` de "./internal.js" sem mudança.
+//
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
-// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+// pure → internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 // INTERNO: o que todo módulo precisa e ninguém publica como componente próprio.
 // NÃO é subpath — `@aurea-uds/react/internal` não existe, de propósito.
 // Kbd mora aqui por dependência, não por categoria: o Button precisa dele e ele não precisa de
 // ninguém. A casa pública dele continua sendo `/data-display`, que o reexporta.
 import { createContext, useContext } from "react";
-export const cx = (...v) => v.filter(Boolean).join(" ");
-export const defaultStrings = { close: "Close", paginationLabel: "Pagination", previous: "Previous", next: "Next", breadcrumbLabel: "Breadcrumb", tabsLabel: "Tabs", optionsLabel: "Options", tableLabel: "Table", commandLabel: "Command palette", commandPlaceholder: "Type a command…", dismissNotification: "Dismiss notification", toolbarLabel: "Toolbar", comboboxEmpty: "No results", comboboxClear: "Clear selection", comboboxOpen: "Open list", comboboxRemove: "Remove", comboboxLoading: "Loading…", fileDropPrompt: "Drag files here or click to select", fileAdded: "File added", fileRemoved: "File removed", fileRemove: "Remove", fileTooLarge: "File exceeds the size limit", fileWrongType: "File type not allowed", treeLabel: "Tree", notificationsLabel: "Notifications", notificationMarkAll: "Mark all as read", notificationEmpty: "No notifications", notificationUnread: "Unread", notificationNew: "new notifications", dataGridFilter: "Filter", dataGridEmpty: "No results", dataGridSelectAll: "Select all rows", dataGridSelectRow: "Select row", mediaPlayer: "Media player", mediaPlay: "Play", mediaPause: "Pause", mediaMute: "Mute", mediaUnmute: "Unmute", mediaSeek: "Seek", mediaVolume: "Volume", mediaCaptionsShow: "Show captions", mediaCaptionsHide: "Hide captions", mediaSkipBack: "Skip back 10 seconds", mediaSkipForward: "Skip forward 10 seconds", mediaFullscreenEnter: "Enter full screen", mediaFullscreenExit: "Exit full screen", uploadSending: "Uploading", uploadCancel: "Cancel upload", uploadRetry: "Retry upload", uploadError: "Upload failed", uploadCanceled: "Upload canceled", uploadComplete: "Upload complete", codeEditor: "Code editor", chatLabel: "Conversation", chatMessage: "Message", chatSend: "Send", qrCode: "QR code", copyCode: "Copy code", tocLabel: "On this page", navigationToggle: "Navigation" };
-// pt-BR preservado como locale (mesmos valores que já eram o default): passe
-// <AureaProvider strings={ptBR}> para restaurar português.
-export const ptBR = { close: "Fechar", paginationLabel: "Paginação", previous: "Anterior", next: "Próxima", breadcrumbLabel: "Breadcrumb", tabsLabel: "Abas", optionsLabel: "Opções", tableLabel: "Tabela", commandLabel: "Paleta de comandos", commandPlaceholder: "Digite um comando…", dismissNotification: "Dispensar notificação", toolbarLabel: "Barra de ferramentas", comboboxEmpty: "Nenhum resultado", comboboxClear: "Limpar seleção", comboboxOpen: "Abrir lista", comboboxRemove: "Remover", comboboxLoading: "Carregando…", fileDropPrompt: "Arraste arquivos aqui ou clique para selecionar", fileAdded: "Arquivo adicionado", fileRemoved: "Arquivo removido", fileRemove: "Remover", fileTooLarge: "Arquivo maior que o limite", fileWrongType: "Tipo de arquivo não aceito", treeLabel: "Árvore", notificationsLabel: "Notificações", notificationMarkAll: "Marcar todas como lidas", notificationEmpty: "Nenhuma notificação", notificationUnread: "Não lida", notificationNew: "novas notificações", dataGridFilter: "Filtrar", dataGridEmpty: "Nenhum resultado", dataGridSelectAll: "Selecionar todas as linhas", dataGridSelectRow: "Selecionar linha", mediaPlayer: "Reprodutor de mídia", mediaPlay: "Reproduzir", mediaPause: "Pausar", mediaMute: "Silenciar", mediaUnmute: "Ativar som", mediaSeek: "Posição da reprodução", mediaVolume: "Volume", mediaCaptionsShow: "Ativar legendas", mediaCaptionsHide: "Desativar legendas", mediaSkipBack: "Voltar 10 segundos", mediaSkipForward: "Avançar 10 segundos", mediaFullscreenEnter: "Tela cheia", mediaFullscreenExit: "Sair da tela cheia", uploadSending: "Enviando", uploadCancel: "Cancelar envio", uploadRetry: "Tentar envio novamente", uploadError: "Falha no envio", uploadCanceled: "Envio cancelado", uploadComplete: "Envio concluído", codeEditor: "Editor de código", chatLabel: "Conversa", chatMessage: "Mensagem", chatSend: "Enviar", qrCode: "Código QR", copyCode: "Copiar código", tocLabel: "Nesta página", navigationToggle: "Navegação" };
+import { cx, defaultStrings, defaultSpriteUrl } from "./pure.js";
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity } from "./pure.js";
 export const StringsContext = createContext(defaultStrings);
 export const useAureaStrings = () => useContext(StringsContext);
-// Sprite de ícones: CONFIGURAÇÃO DE APLICAÇÃO, então entra pelo provider, uma vez.
-// Antes o default absoluto "/aurea-icons.svg" vivia no Icon e 15 componentes declaravam
-// e repassavam `spriteUrl` à mão — 52 sítios de código. Consequência: aplicação servida
-// em subcaminho perdia TODOS os ícones, e para consertar tinha de passar a prop em cada
-// componente (auditoria 26/07/2026, achado A4 — causa raiz do A3 daquela auditoria, que
-// foi corrigido nos fallbacks do catálogo e não aqui). O default segue o mesmo para quem
-// não configura nada; `Icon` aceita a prop como override local.
-export const defaultSpriteUrl = "/aurea-icons.svg";
 export const SpriteContext = createContext(defaultSpriteUrl);
 export const useSpriteUrl = () => useContext(SpriteContext);
+// ONDE OS POPUPS SÃO MONTADOS — achado B7, fechado na Parte C do PLANO-1.0 (07/08/2026).
+// O DEFEITO não era o portal: era o consumidor não ter como mexer nele. Todo popup da Aurea
+// (diálogo, gaveta, dica, popover, os dois menus, notificação, combobox, toast) monta num
+// portal no nível do `body` — é o que permite empilhar e posicionar sem herdar `overflow` nem
+// `transform` de ninguém. A consequência é que o conteúdo dele fica FORA de qualquer landmark,
+// e o axe acusa `region` ("todo conteúdo num landmark"). A auditoria registrou, e escreveu que
+// "a única forma de satisfazer seria o consumidor montar o portal dentro do landmark dele" —
+// só que ele não tinha essa forma, porque o `container` do Base UI nunca foi exposto.
+// Agora tem, e entra pelo provider, UMA vez, como o sprite: é configuração de aplicação, não
+// prop de componente (foi a lição do achado A4, com 52 sítios repassando `spriteUrl` à mão).
+// `undefined` é o default e mantém o comportamento de sempre: `document.body`.
+export const PortalContext = createContext(undefined);
+export const usePortalContainer = () => useContext(PortalContext);
 // direction informa o Base UI (lado dos popovers, setas do teclado). O CSS
 // espelha sozinho por propriedade lógica, mas depende do atributo dir no DOM:
 // quem consome precisa pôr dir="rtl" no <html>. Este provider não mexe no DOM.

package/dist/layout.d.ts

@@ -6,9 +6,10 @@ export declare function Card({ variant, className, ...props }: HTMLAttributes<HT
 export declare function Stack({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function Cluster({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function Grid({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function AppShell({ brand, navigation, topbar, topbarVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function AppShell({ brand, navigation, topbar, topbarVariant, sidebarCollapsed, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
     navigation: ReactNode;
     topbar?: ReactNode;
     topbarVariant?: Exclude<TopbarVariant, "pill">;
+    sidebarCollapsed?: boolean;
 }): import("react").JSX.Element;

package/dist/layout.js

@@ -1,7 +1,51 @@
+"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx, useAureaStrings } from "./internal.js";
 import { IconButton } from "./actions.js";
 import { Sidebar, Topbar } from "./navigation.js";
+// ── Auxiliar de topo: mora ANTES do primeiro export, e a posição é obrigatória ───────────────
+// O check 22 mede o corpo de um componente do `export` dele até o PRÓXIMO export — fatia longa
+// de propósito, porque a implementação de vários componentes daqui continua num auxiliar não
+// exportado logo abaixo (a `Sidebar` é o caso: o `aria-current` dela mora num). Encurtar a fatia
+// foi tentado em 09/08/2026 e a prova contra o defeito recusou: a `Sidebar` com `states: []`
+// deixava de ser acusada.
+// Consequência: auxiliar escrito ENTRE dois exports é lido como parte do componente anterior.
+// Esta função tem `button:not([disabled])` num seletor, e o `\bdisabled\b` da regra acusou o
+// `Grid` de emitir estado que ele não emite. Escrita aqui em cima, não pertence à fatia de
+// ninguém. **Auxiliar de topo em módulo de componente vem antes dos exports.**
+//
+// O que ela faz e por que existe: o popover nativo não entrega a mesma gestão de foco nos três
+// motores, e a tabela medida está no `aurea.js` do core. As mesmas cinco linhas moram lá, e a
+// repetição é deliberada porque são DOIS RUNTIMES, não dois desenhos — o do core é delegado e
+// serve página estática e consumo vanilla (é o que o catálogo carrega); este serve quem instala
+// só o `@aurea-uds/react`, que importa o CSS do core e nunca o JS dele. Rodar os dois é
+// inofensivo: focar o mesmo elemento duas vezes não faz nada.
+//
+// A comparação é com `"closed"` e NÃO com `"open"`, e isso é cicatriz — não simplifique de
+// volta. O `ToggleEvent.newState` só tem esses dois valores, então as duas formas são idênticas
+// em efeito; a diferença é no GATE. O check 15 trata qualquer string do fonte como possível nome
+// de classe (de propósito: a versão estrita não vê `badge-${variant}` e quase fez o D1 apagar
+// classes vivas). Com o literal `"open"` aqui, a `.drawer-wrap.open` do core — resto morto da
+// página vanilla removida na Parte D — passava a parecer PRODUZIDA pela biblioteca, e a catraca
+// queria travar um ganho falso.
+function focoDaGaveta(e) {
+    const gaveta = e.currentTarget;
+    // Primeiro focável de DENTRO, não a gaveta: o WebKit não entra no conteúdo do popover pelo
+    // Tab nem com o foco no elemento dele — medido no K1.
+    if (e.newState !== "closed") {
+        const primeiro = gaveta.querySelector('a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (primeiro)
+            primeiro.focus();
+        else {
+            gaveta.tabIndex = -1;
+            gaveta.focus();
+        }
+        return;
+    }
+    // Só devolve o foco se ele ficou órfão; se a pessoa já o moveu, puxá-lo de volta seria roubo.
+    if (document.activeElement === document.body || gaveta.contains(document.activeElement))
+        document.querySelector(`[popovertarget="${gaveta.id}"]`)?.focus();
+}
 export function Card({ variant = "base", className, ...props }) { return _jsx("div", { className: cx("card", variant !== "base" && `card-${variant}`, className), ...props }); }
 export function Stack({ className, ...props }) { return _jsx("div", { className: cx("stack", className), ...props }); }
 export function Cluster({ className, ...props }) { return _jsx("div", { className: cx("cluster", className), ...props }); }
@@ -10,13 +54,23 @@ export function Grid({ className, ...props }) { return _jsx("div", { className:
 // marca sai — no topo, não na lateral. `topbarVariant` escolhe a pele do topo; o shell
 // precisa saber porque a lateral se encaixa abaixo dele (o `flush` não tem folga em
 // cima, então ela sobe um --space-4). `pill` é cabeçalho de site — não é pra shell.
-// A lateral RECOLHE em tela estreita, e sem uma linha de JavaScript: o <aside> é um popover
-// nativo e o botão é o invoker. O navegador entrega Escape, clique fora, `aria-expanded` no
-// disparador e a volta do foco para ele ao fechar — Baseline desde 04/2025, verificado em
-// 30/07/2026. Era o achado A8: em 375px o `h1` da página começava 4,6 telas abaixo, depois
-// dos 65 itens da navegação. Não-modal de propósito, como o CommandPaletteShell: o foco não
-// fica preso, e por isso não declaramos modalidade que não entregamos.
+// A lateral RECOLHE em tela estreita: o <aside> é um popover nativo e o botão é o invoker. O
+// navegador entrega Escape, clique fora e o `aria-expanded` no disparador. Era o achado A8: em
+// 375px o `h1` da página começava 4,6 telas abaixo, depois dos 65 itens da navegação.
+// Não-modal de propósito, como o CommandPaletteShell: o foco não fica preso, e por isso não
+// declaramos modalidade que não entregamos.
+//
+// ATÉ 09/08/2026 ESTE COMENTÁRIO DIZIA "sem uma linha de JavaScript" E QUE O NAVEGADOR TAMBÉM
+// ENTREGAVA A VOLTA DO FOCO. Entregava — no Chromium, que era o único motor onde a suíte
+// rodava. O item K1 pôs Firefox e WebKit no `playwright.config.ts` e a medição derrubou a
+// frase: no WebKit o foco vai para o <body> ao abrir, OITO Tabs não entram na gaveta e o
+// Escape não devolve nada. Gaveta aberta e inalcançável por teclado é WCAG 2.1.1.
+// A gestão de foco agora é NOSSA, igual nos três motores — `focoDaGaveta`, abaixo.
 // Id fixo em vez de useId: um documento tem UM AppShell (ele é dono do <main>), então não há
 // colisão possível — e o CSS e o gate precisam de um alvo estável.
+// `sidebarCollapsed` é CONTROLADO pelo consumidor, como o `open` do CommandPaletteShell: o
+// shell não decide quando recolher nem desenha o botão que recolhe — quem sabe se há espaço,
+// e se a preferência se guarda, é a aplicação. O que o shell faz é o que só ele pode: a coluna
+// do grid encolhe para --sidebar-rail (a regra `:has(.sidebar-collapsed)` no core).
 const SHELL_NAV_ID = "aurea-shell-nav";
-export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", children, className, ...props }) { const s = useAureaStrings(); return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx(Topbar, { variant: topbarVariant, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", children: navigation }), _jsx("main", { className: "content", children: children })] }); }
+export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", sidebarCollapsed, children, className, ...props }) { const s = useAureaStrings(); return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx(Topbar, { variant: topbarVariant, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", collapsed: sidebarCollapsed, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { className: "content", children: children })] }); }

package/dist/media.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:

package/dist/navigation.d.ts

@@ -1,5 +1,17 @@
 import React, { type HTMLAttributes, type RefAttributes, type ReactNode, type ReactElement } from "react";
 import { type IconName } from "./system.js";
+export type StepState = "default" | "active" | "done" | "error";
+export interface StepItem {
+    label: ReactNode;
+    state?: StepState;
+    optional?: ReactNode;
+    onClick?: () => void;
+}
+export declare function Stepper({ items, label, className }: {
+    items: StepItem[];
+    label?: string;
+    className?: string;
+}): React.JSX.Element;
 export declare function Breadcrumb({ items, label }: {
     items: Array<{
         label: ReactNode;
@@ -45,7 +57,21 @@ export declare function TreeView({ items, defaultExpandedIds, onSelect, label, c
     label?: string;
     className?: string;
 }): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-export declare function Sidebar({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;
+export interface SidebarItem {
+    id: string;
+    label: ReactNode;
+    href?: string;
+    icon?: IconName;
+    badge?: ReactNode;
+    onClick?: () => void;
+    items?: SidebarItem[];
+}
+export declare function Sidebar({ items, current, collapsed, label, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+    items?: SidebarItem[];
+    current?: string;
+    collapsed?: boolean;
+    label?: string;
+}): React.JSX.Element;
 export type TopbarVariant = "floating" | "flush" | "pill";
 export declare function Topbar({ variant, brand, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     variant?: TopbarVariant;

package/dist/navigation.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
@@ -9,6 +10,15 @@ import { Icon } from "./system.js";
 import { Button } from "./actions.js";
 import { Badge } from "./feedback.js";
 import { SearchField } from "./inputs.js";
+export function Stepper({ items, label, className }) {
+    const s = useAureaStrings();
+    return _jsx("div", { role: "list", "aria-label": label ?? s.stepperLabel, className: cx("stepper", className), children: items.map((it, n) => {
+            const st = it.state ?? "default";
+            const marca = st === "done" ? _jsx(Icon, { name: "checkmark" }) : st === "error" ? _jsx(Icon, { name: "error" }) : n + 1;
+            const miolo = _jsxs(_Fragment, { children: [_jsx("span", { className: "step-dot", children: marca }), _jsx("strong", { children: it.label }), it.optional && _jsx("small", { className: "step-optional", children: it.optional })] });
+            return _jsx("div", { role: "listitem", className: cx("step", st !== "default" && `step-${st}`), "aria-current": st === "active" ? "step" : undefined, children: it.onClick ? _jsx("button", { type: "button", className: "step-trigger", onClick: it.onClick, children: miolo }) : miolo }, n);
+        }) });
+}
 export function Breadcrumb({ items, label }) { const s = useAureaStrings(); return _jsx("nav", { className: "breadcrumb", "aria-label": label ?? s.breadcrumbLabel, children: items.map((i, n) => _jsxs(React.Fragment, { children: [n > 0 && _jsx(Icon, { name: "chevron--right", size: "sm" }), " ", i.href ? _jsx("a", { href: i.href, children: i.label }) : _jsx("strong", { "aria-current": "page", children: i.label })] }, n)) }); }
 export function Tabs({ tabs, value, onChange, label }) { const s = useAureaStrings(); return _jsxs(BaseTabs.Root, { value: value, onValueChange: v => onChange(String(v)), children: [_jsx(BaseTabs.List, { className: "tabs", "aria-label": label ?? s.tabsLabel, activateOnFocus: true, children: tabs.map(t => _jsx(BaseTabs.Tab, { value: t.id, className: "tab", children: t.label }, t.id)) }), tabs.map(t => _jsx(BaseTabs.Panel, { value: t.id, className: "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
 export function Pagination({ page, total, onPageChange }) { const s = useAureaStrings(); return _jsxs("nav", { className: "pagination", "aria-label": s.paginationLabel, children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: s.previous }), _jsxs(Badge, { variant: "primary", children: [page, " / ", total] }), _jsx(Button, { variant: "ghost", size: "sm", disabled: page >= total, onClick: () => onPageChange(page + 1), children: s.next })] }); }
@@ -98,12 +108,27 @@ export function TreeView({ items, defaultExpandedIds, onSelect, label, className
         }) }));
     return renderNodes(items, 1);
 }
-// Sidebar/Topbar: eram <aside>/<header> soltos DENTRO do AppShell; agora são componentes
-// nomeados que o AppShell COMPÕE (dogfooding, AUREA.md §2.4 — "se o catálogo mostra uma
-// Sidebar, a sidebar dele É a Sidebar da Aurea"). O landmark vem do elemento nativo
-// (<aside>=complementary, <header>=banner); o <nav> de navegação é do consumidor, passado
-// como children — por isso não embutimos <nav> aqui (aninharia landmark).
-export function Sidebar({ children, className, ...props }) { return _jsx("aside", { className: cx("sidebar", className), ...props, children: children }); }
+function sidebarList(items, ctx, sub, labelledBy) {
+    return _jsx("ul", { className: cx("sidebar-list", sub && "sidebar-sub"), "aria-labelledby": labelledBy, children: items.map(it => {
+            const lid = ctx.baseId + it.id;
+            const filhos = it.items?.length ? it.items : undefined;
+            // Rótulo escondido vira `.sr-only` em vez de sumir do DOM: na lateral recolhida o item
+            // continua tendo nome para quem usa leitor de tela. Ícone sozinho não nomeia nada.
+            const oculto = (no) => ctx.collapsed ? _jsx("span", { className: "sr-only", children: no }) : no;
+            if (filhos && !it.href && !it.onClick)
+                return _jsxs("li", { children: [_jsx("p", { id: lid, className: cx("sidebar-group-label", ctx.collapsed && "sr-only"), children: it.label }), sidebarList(filhos, ctx, false, lid)] }, it.id);
+            const ativo = it.id === ctx.current;
+            const miolo = _jsxs(_Fragment, { children: [it.icon && _jsx(Icon, { name: it.icon, size: "sm" }), _jsx("span", { className: cx("sidebar-label", ctx.collapsed && "sr-only"), children: it.label }), it.badge != null && oculto(it.badge)] });
+            return _jsxs("li", { children: [it.href
+                        ? _jsx("a", { id: lid, href: it.href, className: "sidebar-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo })
+                        : _jsx("button", { id: lid, type: "button", className: "sidebar-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo }), filhos && sidebarList(filhos, ctx, true, lid)] }, it.id);
+        }) });
+}
+export function Sidebar({ items, current, collapsed, label, children, className, ...props }) {
+    const s = useAureaStrings();
+    const baseId = React.useId();
+    return _jsxs("aside", { className: cx("sidebar", collapsed && "sidebar-collapsed", className), ...props, children: [items && items.length > 0 && _jsx("nav", { className: "sidebar-nav", "aria-label": label ?? s.sidebarLabel, children: sidebarList(items, { baseId, current, collapsed }) }), children] });
+}
 export function Topbar({ variant = "floating", brand, children, className, ...props }) { return _jsxs("header", { className: cx("topbar", `topbar-${variant}`, className), ...props, children: [brand != null && _jsx("div", { className: "brand", children: brand }), children] }); }
 // Shell NÃO-modal de propósito: é presentational (o consumidor controla open) e não
 // tem focus trap/inert/Escape — declarar aria-modal sem entregar a modalidade faria

package/dist/overlays.d.ts

@@ -26,6 +26,11 @@ export declare function Popover({ trigger, title, children, side }: {
     children: ReactNode;
     side?: OverlaySide;
 }): React.JSX.Element;
+export declare function HoverCard({ trigger, children, side }: {
+    trigger: ReactElement;
+    children: ReactNode;
+    side?: OverlaySide;
+}): React.JSX.Element;
 export interface MenuItemDef {
     label: ReactNode;
     onClick?: () => void;

package/dist/overlays.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
@@ -8,29 +9,40 @@ import { Popover as BasePopover } from "@base-ui/react/popover";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { cx, useAureaStrings } from "./internal.js";
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
 import { Icon } from "./system.js";
-export function Dialog({ open, title, children, footer, onClose }) { const s = useAureaStrings(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
-        onClose(); }, children: _jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseDialog.Popup, { className: "dialog", children: [_jsxs("header", { children: [_jsx(BaseDialog.Title, { render: _jsx("h2", {}), children: title }), _jsx(BaseDialog.Close, { className: "btn btn-ghost btn-icon", "aria-label": s.close, children: _jsx(Icon, { name: "close" }) })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("footer", { children: footer })] })] }) }); }
-export function Drawer({ open, title, children, onClose, side = "right" }) { const s = useAureaStrings(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
-        onClose(); }, children: _jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { className: "drawer-backdrop" }), _jsxs(BaseDialog.Popup, { className: cx("drawer", `drawer-${side}`), children: [_jsxs("header", { children: [_jsx(BaseDialog.Title, { render: _jsx("h2", {}), children: title }), _jsx(BaseDialog.Close, { className: "btn btn-ghost btn-icon", "aria-label": s.close, children: _jsx(Icon, { name: "close" }) })] }), children] })] }) }); }
+export function Dialog({ open, title, children, footer, onClose }) { const s = useAureaStrings(); const portal = usePortalContainer(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
+        onClose(); }, children: _jsxs(BaseDialog.Portal, { container: portal, children: [_jsx(BaseDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseDialog.Popup, { className: "dialog", children: [_jsxs("header", { children: [_jsx(BaseDialog.Title, { render: _jsx("h2", {}), children: title }), _jsx(BaseDialog.Close, { className: "btn btn-ghost btn-icon", "aria-label": s.close, children: _jsx(Icon, { name: "close" }) })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("footer", { children: footer })] })] }) }); }
+export function Drawer({ open, title, children, onClose, side = "right" }) { const s = useAureaStrings(); const portal = usePortalContainer(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
+        onClose(); }, children: _jsxs(BaseDialog.Portal, { container: portal, children: [_jsx(BaseDialog.Backdrop, { className: "drawer-backdrop" }), _jsxs(BaseDialog.Popup, { className: cx("drawer", `drawer-${side}`), children: [_jsxs("header", { children: [_jsx(BaseDialog.Title, { render: _jsx("h2", {}), children: title }), _jsx(BaseDialog.Close, { className: "btn btn-ghost btn-icon", "aria-label": s.close, children: _jsx(Icon, { name: "close" }) })] }), children] })] }) }); }
 // `role="tooltip"` + `aria-describedby` no disparador é o que faz a dica EXISTIR para leitor
 // de tela. Medido em 30/07/2026: sem isso, o popup saía sem role e sem id, e o disparador sem
 // aria-describedby — quem navega por leitor de tela ouvia só o rótulo do botão e nunca o
 // conteúdo da dica. Era tooltip visual, não acessível (padrão APG Tooltip).
 // O id aponta para um elemento que só existe quando aberto; referência pendente é ignorada
 // pela tecnologia assistiva, então não precisa acompanhar o estado.
-export function Tooltip({ children, content, side = "top" }) { const id = React.useId(); return _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children, "aria-describedby": id }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: 8, children: _jsx(BaseTooltip.Popup, { id: id, role: "tooltip", className: "tooltip", children: content }) }) })] }); }
-export function Popover({ trigger, title, children, side = "bottom" }) { return _jsxs(BasePopover.Root, { children: [_jsx(BasePopover.Trigger, { render: trigger }), _jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover", children: [title && _jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), children] }) }) })] }); }
+export function Tooltip({ children, content, side = "top" }) { const id = React.useId(); const portal = usePortalContainer(); return _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children, "aria-describedby": id }), _jsx(BaseTooltip.Portal, { container: portal, children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: 8, children: _jsx(BaseTooltip.Popup, { id: id, role: "tooltip", className: "tooltip", children: content }) }) })] }); }
+export function Popover({ trigger, title, children, side = "bottom" }) { const portal = usePortalContainer(); return _jsxs(BasePopover.Root, { children: [_jsx(BasePopover.Trigger, { render: trigger }), _jsx(BasePopover.Portal, { container: portal, children: _jsx(BasePopover.Positioner, { side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover", children: [title && _jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), children] }) }) })] }); }
+// HoverCard (Lote 1 do BUILDING.md). Não é Tooltip nem Popover, e a diferença é de propósito,
+// não de aparência: a Tooltip é um RÓTULO curto (`role="tooltip"`, some ao mover o mouse); o
+// Popover abre por CLIQUE e pode conter foco; este é uma PRÉVIA rica que aparece ao repousar o
+// ponteiro sobre um link e cujo conteúdo é alcançável — o cartão de perfil ao passar sobre um
+// nome. As três referências que o têm chamam de hover-card ou preview-card e concordam nisso.
+// Superfície reusa `.popover` de propósito: é a mesma camada flutuante do sistema, e dar a ela
+// um segundo nome criaria duas peles para a mesma coisa.
+// Por depender de repouso do ponteiro, NÃO serve para informação essencial — quem navega só por
+// teclado ou toque não abre um hover card. Conteúdo obrigatório vai em Popover.
+export function HoverCard({ trigger, children, side = "bottom" }) { const portal = usePortalContainer(); return _jsxs(BasePreviewCard.Root, { children: [_jsx(BasePreviewCard.Trigger, { render: trigger }), _jsx(BasePreviewCard.Portal, { container: portal, children: _jsx(BasePreviewCard.Positioner, { side: side, sideOffset: 8, children: _jsx(BasePreviewCard.Popup, { className: "popover hover-card", children: children }) }) })] }); }
 // ContextMenu.Item/.Separator/.Popup são os MESMOS componentes de Menu.* no Base UI,
 // então os itens renderizam igual nos dois menus.
 const renderMenuItems = (items) => items.map((it, i) => it === "separator"
     ? _jsx(BaseMenu.Separator, { className: "menu-sep" }, i)
     : _jsxs(BaseMenu.Item, { className: "menu-item", disabled: it.disabled, onClick: it.onClick, children: [it.leadingIcon && _jsx(Icon, { name: it.leadingIcon }), it.label] }, i));
-export function DropdownMenu({ trigger, items, side = "bottom", label }) { return _jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: side, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }
+export function DropdownMenu({ trigger, items, side = "bottom", label }) { const portal = usePortalContainer(); return _jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { side: side, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }
 // ContextMenu: abre no botão direito e — por teclado — em Shift+F10 / tecla Menu,
 // que o browser só dispara (como evento contextmenu) sobre um elemento FOCADO. Por
 // isso o gatilho é focável (tabIndex 0) e tem nome acessível (auditoria 18/07/2026,
 // MÉDIO 3); sem isso o teclado não alcança o menu. Consumidor pode sobrescrever
 // tabIndex via children se o próprio já for focável.
-export function ContextMenu({ children, items, label, className }) { return _jsxs(BaseContextMenu.Root, { children: [_jsx(BaseContextMenu.Trigger, { className: className, tabIndex: 0, "aria-label": label, "aria-haspopup": "menu", children: children }), _jsx(BaseContextMenu.Portal, { children: _jsx(BaseContextMenu.Positioner, { children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }
+export function ContextMenu({ children, items, label, className }) { const portal = usePortalContainer(); return _jsxs(BaseContextMenu.Root, { children: [_jsx(BaseContextMenu.Trigger, { className: className, tabIndex: 0, "aria-label": label, "aria-haspopup": "menu", children: children }), _jsx(BaseContextMenu.Portal, { container: portal, children: _jsx(BaseContextMenu.Positioner, { children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }