@aurea-uds/react 0.31.0 → 0.33.0

package/dist/navigation-client.d.ts

@@ -24,7 +24,8 @@ export declare function Breadcrumb({ items, label }: {
 }): React.JSX.Element;
 export type TabsOrientation = "horizontal" | "vertical";
 export type TabsPanel = "card" | "plain";
-export declare function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus, loopFocus, panel }: {
+export type TabsVariant = "primary" | "secondary";
+export declare function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus, loopFocus, panel, variant }: {
     tabs: Array<{
         id: string;
         label: ReactNode;
@@ -37,12 +38,26 @@ export declare function Tabs({ tabs, value, onChange, label, orientation, activa
     activateOnFocus?: boolean;
     loopFocus?: boolean;
     panel?: TabsPanel;
+    variant?: TabsVariant;
 }): React.JSX.Element;
-export declare function Pagination({ page, total, onPageChange }: {
+export type PaginationVariant = "numbers" | "simple" | "compact";
+export interface PaginationProps {
     page: number;
     total: number;
-    onPageChange: (p: number) => void;
-}): React.JSX.Element;
+    onPageChange?: (p: number) => void;
+    variant?: PaginationVariant;
+    /** O resumo à esquerda — "1 a 5 de 50 pedidos". */
+    summary?: ReactNode;
+    /** O endereço de cada página. Com ele, as páginas são links. */
+    href?: (page: number) => string;
+    /** Quantas páginas aparecem de cada lado da atual. Padrão: 1. */
+    siblings?: number;
+    /** O nome do marco de navegação. Padrão: a frase `paginationLabel`. Com duas paginações na mesma
+     *  página, cada uma diz de quê ("Páginas dos pedidos"), senão o leitor de tela ouve dois marcos iguais. */
+    label?: string;
+    className?: string;
+}
+export declare function Pagination({ page, total, onPageChange, variant, summary, href, siblings, label, className }: PaginationProps): React.JSX.Element;
 export interface TocItem {
     id: string;
     label: string;
@@ -80,12 +95,16 @@ export interface SidebarItem {
     /** O link do roteador do app (M-01): `<Link href="/relatorios" />`. Recebe a pele, o estado de página atual e o conteúdo do item. */
     render?: ReactElement;
 }
-export type SidebarVariant = "floating" | "flush";
-export declare function Sidebar({ items, current, collapsed, variant, label, children, className, onClick, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+export type SidebarVariant = "floating" | "flush" | "plain";
+export type SidebarScrollbar = "hover" | "visible";
+export type SidebarPlacement = "left" | "right";
+export declare function Sidebar({ items, current, collapsed, variant, placement, scrollbar, label, children, className, onClick, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     items?: SidebarItem[];
     current?: string;
     collapsed?: boolean;
     variant?: SidebarVariant;
+    placement?: SidebarPlacement;
+    scrollbar?: SidebarScrollbar;
     label?: string;
 }): React.JSX.Element;
 export type BottomNavVariant = "floating" | "edge";
@@ -135,17 +154,26 @@ export interface CommandItem {
     icon?: IconName;
     kbd?: string;
     run: () => void;
+    /** 0.32.0 (DOC-06): o grupo do item ("Componentes", "Páginas"). Itens com o mesmo grupo saem juntos,
+     *  sob o título dele, na ordem em que o grupo aparece primeiro. */
+    group?: string;
 }
-export declare function CommandPalette({ open, onClose, items, placeholder, label }: {
+export declare function CommandPalette({ open, onClose, items, placeholder, label, shortcuts }: {
     open: boolean;
     onClose: () => void;
     items: CommandItem[];
     placeholder?: string;
     label?: string;
-}): React.JSX.Element | null;
-export declare function CommandPaletteShell({ open, query, onQueryChange, children }: {
+    /** 0.32.0 (DOC-07): a linha que ensina as teclas, embaixo — ↑ ↓ mover, Enter abrir, Esc fechar. */
+    shortcuts?: boolean;
+}): React.JSX.Element;
+export declare function CommandPaletteShell({ open, query, onQueryChange, onClose, label, children }: {
     open: boolean;
     query: string;
     onQueryChange: (v: string) => void;
+    /** Quem fecha: a janela avisa pelo Esc e pelo clique fora. */
+    onClose?: () => void;
+    /** O nome da janela (o padrão é o da paleta, "Command palette"). */
+    label?: string;
     children?: ReactNode;
-}): React.JSX.Element | null;
+}): React.JSX.Element;

package/dist/navigation-client.js

@@ -7,6 +7,7 @@ import React, { useRef } from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { useDirection } from "@base-ui/react/direction-provider";
 import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { useValorResponsivo } from "./responsivo-runtime.js";
 import { cx, fundirRender, useAureaStrings, usePortalContainer } from "./internal.js";
 import { Kbd } from "./markup.js";
@@ -29,8 +30,37 @@ export function Stepper({ items, label, className }) {
         }) });
 }
 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: "caret-right", size: "sm" }), " ", i.render ? fundirRender(i.render, { children: i.label }, "a") : 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, orientation, activateOnFocus = true, loopFocus, panel = "card" }) { const s = useAureaStrings(); const ancora = useRef(null); const resolvida = useValorResponsivo(orientation, "horizontal", ancora); return _jsxs(BaseTabs.Root, { ref: ancora, value: value, onValueChange: v => onChange(String(v)), orientation: resolvida, className: "tabs-root", children: [_jsx(BaseTabs.List, { className: "tabs", "aria-label": label ?? s.tabsLabel, activateOnFocus: activateOnFocus, loopFocus: loopFocus, 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: panel === "plain" ? "tabs-panel" : "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 })] }); }
+export function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus = true, loopFocus, panel = "card", variant = "primary" }) { const s = useAureaStrings(); const ancora = useRef(null); const resolvida = useValorResponsivo(orientation, "horizontal", ancora); return _jsxs(BaseTabs.Root, { ref: ancora, value: value, onValueChange: v => onChange(String(v)), orientation: resolvida, className: "tabs-root", children: [_jsx(BaseTabs.List, { className: cx("tabs", variant === "secondary" && "tabs-secondary"), "aria-label": label ?? s.tabsLabel, activateOnFocus: activateOnFocus, loopFocus: loopFocus, 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: panel === "plain" ? "tabs-panel" : "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
+function paginasVisiveis(page, total, siblings) {
+    if (total <= 5 + siblings * 2)
+        return Array.from({ length: total }, (_, i) => i + 1);
+    const ini = Math.max(2, page - siblings), fim = Math.min(total - 1, page + siblings);
+    const meio = Array.from({ length: fim - ini + 1 }, (_, i) => ini + i);
+    return [1, ...(ini > 2 ? ["..."] : []), ...meio, ...(fim < total - 1 ? ["..."] : []), total];
+}
+export function Pagination({ page, total, onPageChange, variant = "numbers", summary, href, siblings = 1, label, className }) {
+    const s = useAureaStrings();
+    if (variant === "compact")
+        return _jsxs("nav", { className: cx("pagination", className), "aria-label": 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 })] });
+    // Um item: link (com `href`) ou botão. Desligado (a primeira página no "anterior"), sem endereço.
+    const item = (alvo, conteudo, { atual = false, nav, rotulo } = {}) => {
+        const fora = alvo < 1 || alvo > total;
+        const cls = cx("pagination-link", nav && "pagination-link-nav", atual && "active");
+        const comuns = { className: cls, "aria-label": rotulo, "aria-current": atual ? "page" : undefined };
+        if (href)
+            return fora ? _jsx("a", { ...comuns, "aria-disabled": "true", children: conteudo })
+                : _jsx("a", { ...comuns, href: href(alvo), onClick: onPageChange ? (e) => { if (!e.metaKey && !e.ctrlKey && !e.shiftKey && e.button === 0) {
+                        e.preventDefault();
+                        onPageChange(alvo);
+                    } } : undefined, children: conteudo });
+        return _jsx("button", { type: "button", ...comuns, disabled: fora, onClick: () => onPageChange?.(alvo), children: conteudo });
+    };
+    const anterior = item(page - 1, _jsxs(_Fragment, { children: [_jsx(Icon, { name: "caret-left", className: "pagination-nav-icon" }), _jsx("span", { children: s.previous })] }), { nav: "prev" });
+    const proxima = item(page + 1, _jsxs(_Fragment, { children: [_jsx("span", { children: s.next }), _jsx(Icon, { name: "caret-right", className: "pagination-nav-icon" })] }), { nav: "next" });
+    return _jsxs("nav", { className: cx("pagination", className), "aria-label": label ?? s.paginationLabel, children: [summary != null && _jsx("span", { className: "pagination-summary", children: summary }), _jsxs("ul", { className: "pagination-content", children: [_jsx("li", { children: anterior }), variant === "numbers" && paginasVisiveis(page, total, siblings).map((p, i) => p === "..."
+                        ? _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", "aria-hidden": "true", children: "\u2026" }) }, `e${i}`)
+                        : _jsx("li", { children: item(p, p, { atual: p === page, rotulo: `${s.paginationPage} ${p}` }) }, p)), _jsx("li", { children: proxima })] })] });
+}
 export function TableOfContents({ items, current, label, className, ...props }) {
     const s = useAureaStrings();
     const meu = React.useRef(null);
@@ -43,7 +73,7 @@ export function TableOfContents({ items, current, label, className, ...props })
     return _jsxs("nav", { ref: n => { meu.current = n; if (typeof refDele === "function")
             refDele(n);
         else if (refDele)
-            refDele.current = n; }, className: cx("toc", className), "aria-label": label ?? s.tocLabel, ...resto, children: [_jsx("p", { className: "toc-label", children: label ?? s.tocLabel }), items.map(i => _jsx("a", { href: `#${i.id}`, className: cx(i.sub && "toc-sub"), ...(i.id === atual ? { "aria-current": "true" } : {}), children: i.label }, i.id))] });
+            refDele.current = n; }, className: cx("toc", className), "aria-label": label ?? s.tocLabel, ...resto, children: [_jsxs("p", { className: "toc-label", children: [_jsx("span", { className: "toc-label-icon", "aria-hidden": "true" }), label ?? s.tocLabel] }), items.map(i => _jsx("a", { href: `#${i.id}`, className: cx(i.sub && "toc-sub"), ...(i.id === atual ? { "aria-current": "true" } : {}), children: i.label }, i.id))] });
 }
 /** Qual dos `items` está na faixa de leitura, observando o documento. Devolve `undefined` até o
  *  primeiro cálculo — e em SSR, onde não há documento para observar.
@@ -235,10 +265,10 @@ function fecharGavetaAoEscolher(e) {
     }
     catch { /* motor sem popover: não há gaveta */ }
 }
-export function Sidebar({ items, current, collapsed, variant = "floating", label, children, className, onClick, ...props }) {
+export function Sidebar({ items, current, collapsed, variant = "floating", placement = "left", scrollbar = "hover", label, children, className, onClick, ...props }) {
     const s = useAureaStrings();
     const baseId = React.useId();
-    return _jsxs("aside", { className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, collapsed && "sidebar-collapsed", className), onClick: e => { onClick?.(e); fecharGavetaAoEscolher(e); }, ...props, children: [items && items.length > 0 && _jsx("nav", { className: "sidebar-nav", "aria-label": label ?? s.sidebarLabel, children: sidebarList(items, { baseId, current, collapsed }) }), children] });
+    return _jsxs("aside", { className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, collapsed && "sidebar-collapsed", placement === "right" && "sidebar-right", scrollbar === "visible" && "sidebar-scrollbar-visible", className), "data-placement": placement, onClick: e => { onClick?.(e); fecharGavetaAoEscolher(e); }, ...props, children: [items && items.length > 0 && _jsx("nav", { className: "sidebar-nav", "aria-label": label ?? s.sidebarLabel, children: sidebarList(items, { baseId, current, collapsed }) }), children] });
 }
 const LEGADO = {
     flat: ["edge", "none"], surface: ["floating", "circle"], pill: ["floating", "pill"], dock: ["floating", "circle"]
@@ -282,24 +312,50 @@ export function NavList({ items, className, ...props }) {
                         : _jsx("button", { type: "button", className: "nav-list-row", "aria-disabled": it.disabled || undefined, onClick: it.disabled ? undefined : it.onClick, children: miolo }) }, it.id);
         }) });
 }
-export function CommandPalette({ open, onClose, items, placeholder, label }) {
+export function CommandPalette({ open, onClose, items, placeholder, label, shortcuts = true }) {
     const s = useAureaStrings();
+    const idAtalhos = React.useId();
+    // GRUPOS (0.32.0, DOC-06). Em 13/08/2026 a Aurea ficou SEM grupo, e a medição decidiu: dar a cada
+    // `Group` a sua fatia de itens passava POR CIMA do filtro do motor (digitar "the" devolvia os três).
+    // O caminho certo é o da documentação do motor (1.6.0, a paleta de exemplo dele): `items` agrupados
+    // (`{value, items}`), e a lista recebe os grupos JÁ FILTRADOS. Sem `group` em nenhum item, a lista é
+    // a de sempre.
+    const grupos = React.useMemo(() => {
+        if (!items.some(i => i.group))
+            return null;
+        const mapa = new Map();
+        for (const i of items) {
+            const g = i.group ?? "";
+            if (!mapa.has(g))
+                mapa.set(g, []);
+            mapa.get(g).push(i);
+        }
+        return [...mapa].map(([value, itens]) => ({ value, items: itens }));
+    }, [items]);
     const portal = usePortalContainer();
-    if (!open)
-        return null;
-    // SEM AGRUPAMENTO na v1, e a medição é que decidiu (13/08/2026). O `Autocomplete.Root` não
-    // consome a estrutura agrupada como o `Combobox.Root` consome — e o caminho alternativo, dar a
-    // cada `Group` a sua fatia de itens, PASSA POR CIMA do filtro do motor: digitar "the" devolvia
-    // os três comandos. Entre agrupar e filtrar, filtrar é o ponto de uma paleta de comandos.
-    // Fica registrado como limite, não como esquecimento: quando alguém precisar de grupo aqui, o
-    // caminho é o `Combobox.Root`, e isso é troca de motor, não ajuste.
+    const campo = useRef(null);
     const executa = (item) => { onClose(); item.run(); };
     const linha = (item) => _jsxs(BaseAutocomplete.Item, { value: item, className: "menu-item command-item", onClick: () => executa(item), children: [item.icon && _jsx(Icon, { name: item.icon }), _jsx("span", { className: "command-item-label", children: item.label }), item.kbd && _jsx(Kbd, { children: item.kbd })] }, item.id);
-    // Escape fecha, e é o teclado que a pessoa tenta primeiro. O motor não fecha sozinho porque
-    // quem é dono do `open` é o consumidor — mesma regra do Dialog e do Drawer daqui.
-    return _jsx("div", { className: "command-overlay", onKeyDown: e => { if (e.key === "Escape")
-            onClose(); }, children: _jsx("div", { className: "command-palette", role: "dialog", "aria-label": label ?? s.commandLabel, children: _jsxs(BaseAutocomplete.Root, { items: items, itemToStringValue: (i) => i.label, mode: "list", open: true, children: [_jsx(BaseAutocomplete.Input, { autoFocus: true, className: "input", onKeyDown: e => { if (e.key === "Escape")
-                            onClose(); }, "aria-label": placeholder ?? s.commandPlaceholder, placeholder: placeholder ?? s.commandPlaceholder }), _jsx(BaseAutocomplete.Portal, { container: portal, children: _jsx(BaseAutocomplete.Positioner, { sideOffset: 6, className: "command-positioner", children: _jsxs(BaseAutocomplete.Popup, { className: "menu command-list", children: [_jsx(BaseAutocomplete.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseAutocomplete.List, { children: _jsx(BaseAutocomplete.Collection, { children: linha }) })] }) }) })] }) }) });
+    // A JANELA É A DO MOTOR (14/10/2026), como na paleta de exemplo dele (1.6.0): `Dialog` por fora,
+    // `Autocomplete` `inline` por dentro. Até aqui a moldura era uma `div` feita à mão, e o Victor achou no site
+    // publicado: o clique no fundo não fechava, e depois dele o foco ia para a página — o Esc, que era escutado
+    // dentro da caixa, não chegava mais. A janela do motor fecha pelos dois caminhos, prende o Tab, trava a
+    // rolagem de trás e devolve o foco a quem abriu. O `open` continua do consumidor: o motor só AVISA
+    // (`onOpenChange`), e quem fecha é o `onClose` — mesma regra do Dialog e do Drawer daqui. Os nomes de classe
+    // ficaram: a moldura (`Viewport`) é a `.command-overlay`, a caixa (`Popup`) é a `.command-palette`.
+    return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
+            onClose(); }, children: _jsx(BaseDialog.Portal, { container: portal, children: _jsx(BaseDialog.Viewport, { className: "command-overlay", children: _jsxs(BaseDialog.Popup, { className: "command-palette", "aria-label": label ?? s.commandLabel, initialFocus: campo, children: [_jsxs(BaseAutocomplete.Root, { items: (grupos ?? items), itemToStringValue: (i) => i.label, mode: "list", open: true, inline: true, autoHighlight: "always", keepHighlight: true, children: [_jsx(BaseAutocomplete.Input, { ref: campo, className: "input", "aria-label": placeholder ?? s.commandPlaceholder, placeholder: placeholder ?? s.commandPlaceholder, "aria-expanded": true, "aria-describedby": shortcuts ? idAtalhos : undefined }), _jsxs("div", { className: "menu command-list", children: [_jsx(BaseAutocomplete.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseAutocomplete.List, { children: grupos
+                                                ? (g) => _jsxs(BaseAutocomplete.Group, { items: g.items, className: "command-group", children: [g.value && _jsx(BaseAutocomplete.GroupLabel, { className: "command-group-label", children: g.value }), _jsx(BaseAutocomplete.Collection, { children: linha })] }, g.value)
+                                                : _jsx(BaseAutocomplete.Collection, { children: linha }) })] })] }), shortcuts && _jsxs("p", { className: "command-shortcuts", id: idAtalhos, children: [_jsxs("span", { children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" }), " ", s.commandHintMove] }), _jsxs("span", { children: [_jsx(Kbd, { children: "Enter" }), " ", s.commandHintSelect] }), _jsxs("span", { children: [_jsx(Kbd, { children: "Esc" }), " ", s.commandHintClose] })] })] }) }) }) });
+}
+// A CASCA (15/10/2026, o Victor: "C sim"): a mesma janela do motor da `CommandPalette` acima. Até aqui era uma `div`
+// feita à mão — o mesmo defeito que a busca do site teve: o clique fora e o Esc não fechavam, e o Tab saía da caixa.
+// Agora o motor avisa pelos dois caminhos (`onClose`, novo), prende o Tab e devolve o foco a quem abriu. Sem `onClose`,
+// a janela fica aberta até o `open` do consumidor mudar — como antes. O campo recebe o foco pelo `initialFocus`.
+export function CommandPaletteShell({ open, query, onQueryChange, onClose, label, children }) {
+    const s = useAureaStrings();
+    const portal = usePortalContainer();
+    const campo = useRef(null);
+    return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
+            onClose?.(); }, children: _jsx(BaseDialog.Portal, { container: portal, children: _jsx(BaseDialog.Viewport, { className: "command-overlay", children: _jsxs(BaseDialog.Popup, { className: "command-palette", "aria-label": label ?? s.commandLabel, initialFocus: campo, children: [_jsx(SearchField, { ref: campo, "aria-label": s.commandPlaceholder, value: query, onChange: e => onQueryChange(e.target.value), placeholder: s.commandPlaceholder }), children] }) }) }) });
 }
-export function CommandPaletteShell({ open, query, onQueryChange, children }) { const s = useAureaStrings(); if (!open)
-    return null; return _jsx("div", { className: "command-overlay", children: _jsxs("div", { className: "command-palette", role: "dialog", "aria-label": s.commandLabel, children: [_jsx(SearchField, { autoFocus: true, "aria-label": s.commandPlaceholder, value: query, onChange: e => onQueryChange(e.target.value), placeholder: s.commandPlaceholder }), children] }) }); }

package/dist/overlays.d.ts

@@ -2,7 +2,9 @@ import React, { type ReactNode, type ReactElement } from "react";
 import { type Responsive } from "./pure.js";
 import { type IconName } from "./system.js";
 export type DialogSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
-export declare function Dialog({ open, title, children, footer, onClose, size, dismissible }: {
+export type DialogPlacement = "auto" | "center" | "top" | "bottom";
+export type DialogIconTone = "neutral" | "brand" | "info" | "success" | "warning" | "danger";
+export declare function Dialog({ open, title, children, footer, onClose, size, dismissible, icon, iconTone, placement }: {
     open: boolean;
     title: ReactNode;
     children: ReactNode;
@@ -10,8 +12,11 @@ export declare function Dialog({ open, title, children, footer, onClose, size, d
     onClose: () => void;
     size?: DialogSize;
     dismissible?: boolean;
+    icon?: IconName;
+    iconTone?: DialogIconTone;
+    placement?: DialogPlacement;
 }): React.JSX.Element;
-export declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel }: {
+export declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, icon, iconTone, placement }: {
     open: boolean;
     title: ReactNode;
     description: ReactNode;
@@ -20,13 +25,18 @@ export declare function ConfirmDialog({ open, title, description, confirmLabel,
     destructive?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
+    icon?: IconName;
+    iconTone?: DialogIconTone;
+    placement?: DialogPlacement;
 }): React.JSX.Element;
-export declare function Drawer({ open, title, children, onClose, side }: {
+export type DrawerSide = "left" | "right" | "top" | "bottom";
+export declare function Drawer({ open, title, children, footer, onClose, side }: {
     open: boolean;
     title: ReactNode;
     children: ReactNode;
+    footer?: ReactNode;
     onClose: () => void;
-    side?: "left" | "right";
+    side?: DrawerSide;
 }): React.JSX.Element;
 export type AccessGateProps = {
     allowed: boolean;
@@ -42,16 +52,20 @@ export type AccessGateProps = {
 });
 export declare function AccessGate({ allowed, children, ...resto }: AccessGateProps): React.JSX.Element;
 export type OverlaySide = "top" | "right" | "bottom" | "left";
-export declare function Tooltip({ children, content, side }: {
+export declare function Tooltip({ children, content, side, arrow, delay, closeDelay }: {
     children: ReactElement;
     content: ReactNode;
     side?: OverlaySide;
+    arrow?: boolean;
+    delay?: number;
+    closeDelay?: number;
 }): React.JSX.Element;
-export declare function Popover({ trigger, title, children, side }: {
+export declare function Popover({ trigger, title, children, side, arrow }: {
     trigger: ReactElement;
     title?: ReactNode;
     children: ReactNode;
     side?: OverlaySide;
+    arrow?: boolean;
 }): React.JSX.Element;
 export declare function HoverCard({ trigger, children, side }: {
     trigger: ReactElement;

package/dist/overlays.js

@@ -5,6 +5,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 import React, { useRef } from "react";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
 import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
@@ -15,12 +16,17 @@ import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
 import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
 import { useValorResponsivo } from "./responsivo-runtime.js";
 import { Icon } from "./system.js";
-import { Button } from "./actions.js";
-export function Dialog({ open, title, children, footer, onClose, size = "md", dismissible = true }) {
-    const s = useAureaStrings();
+import { Button, CloseButton } from "./actions.js";
+function IconeDaJanela({ icon, tone }) {
+    return _jsx("span", { className: cx("dialog-icon", `dialog-icon-${tone}`), "aria-hidden": "true", children: _jsx(Icon, { name: icon }) });
+}
+export function Dialog({ open, title, children, footer, onClose, size = "md", dismissible = true, icon, iconTone = "neutral", placement = "auto" }) {
     const portal = usePortalContainer();
+    // O X vem PRIMEIRO na ordem do documento, como o gatilho de fechar da referência: o motor foca o
+    // primeiro focável ao abrir, e era o X também quando ele morava no fim do cabeçalho (o título não é
+    // focável) — a ordem do Tab não muda.
     return _jsx(BaseDialog.Root, { open: open, disablePointerDismissal: !dismissible, onOpenChange: o => { if (!o && dismissible)
-            onClose(); }, children: _jsxs(BaseDialog.Portal, { container: portal, children: [_jsx(BaseDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseDialog.Popup, { className: cx("dialog", size !== "md" && `dialog-${size}`), 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, disabled: !dismissible, children: _jsx(Icon, { name: "x" }) })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("footer", { children: footer })] })] }) });
+            onClose(); }, children: _jsxs(BaseDialog.Portal, { container: portal, children: [_jsx(BaseDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseDialog.Popup, { className: cx("dialog", size !== "md" && `dialog-${size}`), "data-placement": placement, children: [_jsx(BaseDialog.Close, { render: _jsx(CloseButton, { className: "dialog-close", disabled: !dismissible }) }), _jsxs("header", { className: "dialog-header", children: [icon && _jsx(IconeDaJanela, { icon: icon, tone: iconTone }), _jsx(BaseDialog.Title, { render: _jsx("h2", {}), className: "dialog-heading", children: title })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("footer", { className: "dialog-footer", children: footer })] })] }) });
 }
 // ConfirmDialog (M5): a decisão que não se fecha por engano. NÃO é um Dialog com dois botões —
 // é `role="alertdialog"`, e a diferença é de comportamento, não de aparência: o Base UI tira do
@@ -50,15 +56,23 @@ export function Dialog({ open, title, children, footer, onClose, size = "md", di
 // `description` é prop e não `children` porque ela é o nó de `aria-describedby`: o AlertDialog
 // só anuncia o que passa pelo `Description`. Como `children`, um consumidor poria um <div> no
 // meio e o leitor de tela perderia a frase que diz o que se perde.
-export function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel }) {
+//
+// 0.32.0: a anatomia do `Dialog` (a da referência), sem o X — a decisão não se fecha por engano. O
+// ícone é o círculo de 40 de lá; a cor dele segue o `destructive` quando quem usa não escolhe.
+export function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, icon, iconTone, placement = "auto" }) {
     const s = useAureaStrings();
     const portal = usePortalContainer();
     const seguro = React.useRef(null);
     return _jsx(BaseAlertDialog.Root, { open: open, onOpenChange: o => { if (!o)
-            onCancel(); }, children: _jsxs(BaseAlertDialog.Portal, { container: portal, children: [_jsx(BaseAlertDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseAlertDialog.Popup, { className: "dialog dialog-confirm", initialFocus: seguro, children: [_jsx("header", { children: _jsx(BaseAlertDialog.Title, { render: _jsx("h2", {}), children: title }) }), _jsx(BaseAlertDialog.Description, { className: "dialog-body", children: description }), _jsxs("footer", { children: [_jsx(Button, { ref: seguro, variant: "secondary", onClick: onCancel, children: cancelLabel ?? s.confirmCancel }), _jsx(Button, { variant: destructive ? "danger" : "primary", onClick: onConfirm, children: confirmLabel ?? s.confirmProceed })] })] })] }) });
+            onCancel(); }, children: _jsxs(BaseAlertDialog.Portal, { container: portal, children: [_jsx(BaseAlertDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseAlertDialog.Popup, { className: "dialog dialog-confirm", initialFocus: seguro, "data-placement": placement, children: [_jsxs("header", { className: "dialog-header", children: [icon && _jsx(IconeDaJanela, { icon: icon, tone: iconTone ?? (destructive ? "danger" : "neutral") }), _jsx(BaseAlertDialog.Title, { render: _jsx("h2", {}), className: "dialog-heading", children: title })] }), _jsx(BaseAlertDialog.Description, { className: "dialog-body", children: description }), _jsxs("footer", { className: "dialog-footer", children: [_jsx(Button, { ref: seguro, variant: "tertiary", onClick: onCancel, children: cancelLabel ?? s.confirmCancel }), _jsx(Button, { variant: destructive ? "danger" : "primary", onClick: onConfirm, children: confirmLabel ?? s.confirmProceed })] })] })] }) });
+}
+const ARRASTO_DO_LADO = { left: "left", right: "right", top: "up", bottom: "down" };
+export function Drawer({ open, title, children, footer, onClose, side = "right" }) {
+    const portal = usePortalContainer();
+    const alca = _jsx("div", { className: "drawer-handle", "aria-hidden": "true" });
+    return _jsx(BaseDrawer.Root, { open: open, onOpenChange: o => { if (!o)
+            onClose(); }, swipeDirection: ARRASTO_DO_LADO[side], children: _jsxs(BaseDrawer.Portal, { container: portal, children: [_jsx(BaseDrawer.Backdrop, { className: "drawer-backdrop" }), _jsx(BaseDrawer.Viewport, { className: "drawer-viewport", children: _jsxs(BaseDrawer.Popup, { className: cx("drawer", `drawer-${side}`), children: [_jsx(BaseDrawer.Close, { render: _jsx(CloseButton, { className: "dialog-close" }) }), side === "bottom" && alca, _jsx("header", { className: "dialog-header", children: _jsx(BaseDrawer.Title, { render: _jsx("h2", {}), className: "dialog-heading", children: title }) }), _jsx(BaseDrawer.Content, { className: "dialog-body", children: children }), footer && _jsx("footer", { className: "dialog-footer", children: footer }), side === "top" && alca] }) })] }) });
 }
-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: "x" }) })] }), children] })] }) }); }
 export function AccessGate({ allowed, children, ...resto }) {
     if (allowed)
         return children;
@@ -72,8 +86,49 @@ export function AccessGate({ allowed, children, ...resto }) {
 // 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(); const triggerId = children.props.id; const portal = usePortalContainer(); return _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { id: triggerId, 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] }) }) })] }); }
+//
+// 0.32.0, a dica e o popover da referência:
+//   • A SETA (`arrow`), desligada por padrão como lá. O desenho é nosso (uma curva de 12 × 6, sem a
+//     ponta afiada); ela tem o fundo da janela e a linha da borda, então a borda dá a volta nela.
+//     A dica com seta se afasta 8 do gatilho (`--space-2`: os 6 da seta e 2 de folga); sem
+//     seta, 4 (`--space-1`) — a referência usa 7 e 3, que não são da nossa escala. O popover fica
+//     sempre a 8, com ou sem seta, como o dela.
+//   • O ATRASO da dica é o dela: 1,5 s para abrir e 0,5 s para fechar (o motor abre em 0,6 s e
+//     fecha na hora). Pelo teclado ela abre já, e depois da primeira as vizinhas abrem sem esperar
+//     — é o grupo do `Tooltip.Provider` do `AureaProvider`.
+//   • O GATILHO FOCÁVEL (C-11): a dica em cima de um texto só abria pelo teclado se o app pusesse
+//     `tabIndex`. A referência resolve no gatilho, que sai focável como botão; aqui também — o que
+//     não é focável sozinho (um `<span>`, um selo) ganha `tabIndex=0` e `role="button"`. Na
+//     marcação, quando o filho é uma tag; e, quando é um componente, no nó de verdade, depois de
+//     montado, porque só o DOM sabe o que o componente desenhou.
+const ATRASO_DA_DICA = 1500, ATRASO_PARA_FECHAR_A_DICA = 500;
+function Seta() { return _jsxs("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", children: [_jsx("path", { className: "overlay-arrow-fill", d: "M0 0Q6 12 12 0Z" }), _jsx("path", { className: "overlay-arrow-line", d: "M0 0Q6 12 12 0", fill: "none" })] }); }
+const FOCAVEIS_POR_NATUREZA = new Set(["button", "input", "select", "textarea", "summary", "iframe", "audio", "video"]);
+function focavelNaMarcacao(el) {
+    if (typeof el.type !== "string")
+        return undefined;
+    const p = el.props;
+    if (p.tabIndex !== undefined)
+        return true;
+    if (el.type === "a" || el.type === "area")
+        return p.href !== undefined;
+    return FOCAVEIS_POR_NATUREZA.has(el.type);
+}
+function garantirFoco(no) {
+    if (!no || no.tabIndex >= 0 || no.hasAttribute("tabindex"))
+        return;
+    no.tabIndex = 0;
+    if (!no.hasAttribute("role"))
+        no.setAttribute("role", "button");
+}
+export function Tooltip({ children, content, side = "top", arrow = false, delay = ATRASO_DA_DICA, closeDelay = ATRASO_PARA_FECHAR_A_DICA }) {
+    const id = React.useId();
+    const triggerId = children.props.id;
+    const portal = usePortalContainer();
+    const foco = focavelNaMarcacao(children) === false ? { tabIndex: 0, role: "button" } : {};
+    return _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { ref: garantirFoco, id: triggerId, render: children, "aria-describedby": id, delay: delay, closeDelay: closeDelay, ...foco }), _jsx(BaseTooltip.Portal, { container: portal, children: _jsx(BaseTooltip.Positioner, { className: "positioner", side: side, sideOffset: arrow ? 8 : 4, children: _jsxs(BaseTooltip.Popup, { id: id, role: "tooltip", className: "tooltip", children: [arrow && _jsx(BaseTooltip.Arrow, { className: "overlay-arrow", children: _jsx(Seta, {}) }), content] }) }) })] });
+}
+export function Popover({ trigger, title, children, side = "bottom", arrow = false }) { const portal = usePortalContainer(); return _jsxs(BasePopover.Root, { children: [_jsx(BasePopover.Trigger, { render: trigger }), _jsx(BasePopover.Portal, { container: portal, children: _jsx(BasePopover.Positioner, { className: "positioner", side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover", children: [arrow && _jsx(BasePopover.Arrow, { className: "overlay-arrow", children: _jsx(Seta, {}) }), title && _jsx(BasePopover.Title, { render: _jsx("strong", {}), className: "popover-title", 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
@@ -83,7 +138,7 @@ export function Popover({ trigger, title, children, side = "bottom" }) { const p
 // 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 }) }) })] }); }
+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, { className: "positioner", side: side, sideOffset: 8, children: _jsx(BasePreviewCard.Popup, { className: "popover hover-card", children: children }) }) })] }); }
 // A MARCA de um item que alterna fica num slot de largura FIXA, e não condicional: sem ele, um
 // menu com um item marcado e outro não desalinharia os rótulos a cada clique — o texto andaria
 // para o lado sozinho. É a mesma razão de o `leadingIcon` ter lugar próprio.
@@ -114,7 +169,7 @@ function renderMenuItems(items, portal) {
                 const sm = it;
                 // O submenu é uma RAIZ própria com gatilho próprio — não é um item que "abre outro menu".
                 // É o que dá `aria-haspopup`, a seta para a direita e o fechamento em cascata de graça.
-                return _jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: "menu-item", disabled: sm.disabled, children: [dentro(sm), _jsx(Icon, { name: "caret-right", size: "sm", className: "menu-seta" })] }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { side: "inline-end", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(sm.items, portal) }) }) })] }, i);
+                return _jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: "menu-item", disabled: sm.disabled, children: [dentro(sm), _jsx(Icon, { name: "caret-right", size: "sm", className: "menu-seta" })] }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { className: "positioner", side: "inline-end", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(sm.items, portal) }) }) })] }, i);
             }
             case "checkbox": {
                 const c = it;
@@ -136,13 +191,13 @@ function renderMenuItems(items, portal) {
         }
     });
 }
-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, portal) }) }) })] }); }
+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, { className: "positioner", side: side, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal) }) }) })] }); }
 // 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 }) { 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, portal) }) }) })] }); }
+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, { className: "positioner", children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal) }) }) })] }); }
 // G-AXIS-06 — o valor responsivo RESOLVIDO é a única fonte de verdade: ele vai para o motor, o
 // motor publica `data-orientation`/`aria-orientation` e ajusta o teclado, e a pele reage ao
 // atributo publicado. Ver `decisions/0047-css-first-para-apresentacao-runtime-para-semantica.md`.
@@ -151,5 +206,5 @@ export function Menubar({ menus, label, modal, disabled, loopFocus, orientation,
     const ancora = useRef(null);
     const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
     const vertical = resolvida === "vertical";
-    return _jsx(BaseMenubar, { ref: ancora, modal: modal, disabled: disabled, loopFocus: loopFocus, orientation: resolvida, "aria-label": label, className: cx("menubar", className), children: menus.map((m, i) => _jsxs(BaseMenu.Root, { disabled: m.disabled, children: [_jsx(BaseMenu.Trigger, { className: "menubar-trigger", children: m.label }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { side: vertical ? "inline-end" : "bottom", align: "start", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(m.items) }) }) })] }, i)) });
+    return _jsx(BaseMenubar, { ref: ancora, modal: modal, disabled: disabled, loopFocus: loopFocus, orientation: resolvida, "aria-label": label, className: cx("menubar", className), children: menus.map((m, i) => _jsxs(BaseMenu.Root, { disabled: m.disabled, children: [_jsx(BaseMenu.Trigger, { className: "menubar-trigger", children: m.label }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { className: "positioner", side: vertical ? "inline-end" : "bottom", align: "start", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(m.items) }) }) })] }, i)) });
 }

package/dist/pure.d.ts

@@ -4,6 +4,9 @@ export declare function fundirRender(render: ReactElement | undefined, props: {
     className?: string;
 } & Record<string, unknown>, padrao?: string): ReactElement;
 export type AureaTheme = "dark" | "light";
+/** O que se ESCOLHE (15/10/2026): um tema, ou `"system"` — seguir o claro/escuro do sistema, e mudar junto com ele.
+ *  O tema na tela continua sendo `AureaTheme`; a preferência é o que a chave de três posições guarda. */
+export type AureaThemePreference = AureaTheme | "system";
 export type AureaDensity = "compact" | "comfortable" | "spacious";
 export type UniversalState = "waiting_user" | "waiting_approval" | "waiting_dependency" | "offline" | "stale" | "partial" | "degraded";
 export declare const universalStates: readonly UniversalState[];
@@ -15,9 +18,12 @@ export interface AureaStrings {
     close: string;
     confirmCancel: string;
     dataError: string;
+    dataCrashed: string;
+    dataRetry: string;
     dataEmpty: string;
     confirmProceed: string;
     paginationLabel: string;
+    paginationPage: string;
     previous: string;
     next: string;
     breadcrumbLabel: string;
@@ -26,6 +32,9 @@ export interface AureaStrings {
     tableLabel: string;
     commandLabel: string;
     commandPlaceholder: string;
+    commandHintMove: string;
+    commandHintSelect: string;
+    commandHintClose: string;
     dismissNotification: string;
     toolbarLabel: string;
     loading: string;
@@ -166,6 +175,8 @@ export interface AureaStrings {
     graphZoomOut: string;
     graphFit: string;
     graphLegend: string;
+    graphLegendKind: string;
+    graphLegendStatus: string;
     graphOverview: string;
     graphConnections: string;
     graphShow: string;
@@ -209,6 +220,8 @@ export interface AureaStrings {
     qrCode: string;
     chartLabel: string;
     copyCode: string;
+    codeBlockPreview: string;
+    codeBlockCode: string;
     copied: string;
     linkCopied: string;
     linkCopyFailed: string;
@@ -219,7 +232,21 @@ export interface AureaStrings {
     sidebarExpand: string;
     bottomNavLabel: string;
     themeToDark: string;
+    themeChoice: string;
+    themeLight: string;
+    themeDark: string;
+    themeSystem: string;
     themeToLight: string;
+    datePlaceholder: string;
+    dateRangePlaceholder: string;
+    colorPicker: string;
+    colorArea2D: string;
+    colorChannel: Record<"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha", string>;
+    colorHue: Record<"red" | "orange" | "yellow" | "green" | "cyan" | "blue" | "purple" | "magenta" | "pink" | "brown" | "gray" | "white" | "black", string>;
+    colorTone: Record<"veryDark" | "dark" | "light" | "veryLight" | "vivid" | "pale" | "grayish", string>;
+    colorNameFormat: string;
+    colorHex: string;
+    colorSwatches: string;
     universalState: Record<UniversalState, string>;
 }
 export declare const defaultStrings: AureaStrings;