@aurea-uds/react 0.30.0 → 0.32.0

package/dist/layout-client.js

@@ -146,7 +146,7 @@ function useLargura(query) {
         return () => mq.removeEventListener?.("change", avisar);
     }, () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches, () => false);
 }
-export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, sidebarVariant, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", children, className, ...props }) {
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, sidebarVariant, sidebarScrollbar, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
     const s = useAureaStrings();
     useGavetaFechaNoDesktop();
     const controlado = sidebarCollapsed !== undefined;
@@ -180,7 +180,7 @@ export function AppShell({ brand, navigation, navItems, currentNavId, navLabel,
     // A condição vai escrita no `icon=` do botão, e não numa variável: é ali que o check 46 lê os
     // ícones que o shell desenha.
     const paraOComeco = !efetiva, direita = useDirection() === "rtl";
-    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", sidebarCollapsible && "app-shell-collapsible", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Header, { variant: topbarVariant, divider: topbarDivider, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), sidebarCollapsible && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, collapsed: efetiva, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children })] });
+    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", sidebarCollapsible && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Header, { variant: topbarVariant, divider: topbarDivider, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), sidebarCollapsible && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children }), aside != null && _jsx(Sidebar, { placement: "right", variant: asideVariant ?? sidebarVariant, className: "app-shell-aside", "aria-label": asideLabel ?? s.tocLabel, children: aside })] });
 }
 export function Separator({ orientation, spacing = "none", className, ...props }) {
     const ancora = useRef(null);

package/dist/markup.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type RefAttributes, type TextareaHTMLAttributes } from "react";
+import React, { type AnchorHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type RefAttributes, type TextareaHTMLAttributes } from "react";
 import { type Responsive } from "./pure.js";
 import type { ComponentSize } from "./actions.js";
 import type { SidebarItem } from "./navigation-client.js";
@@ -15,7 +15,7 @@ type CardBase = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> &
     accent?: CardAccent;
 };
 export type CardProps = CardBase & ({
-    variant?: "base" | "raised" | "inset" | "selected" | "danger" | "contrast";
+    variant?: "base" | "raised" | "inset" | "outline" | "selected" | "danger" | "contrast";
     render?: ReactElement;
 } | {
     variant: "interactive";
@@ -182,9 +182,14 @@ export type TypographyWeight = "normal" | "medium" | "semibold" | "bold" | "extr
 export type TypographyAlign = "start" | "center" | "end" | "justify";
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type ParagraphSize = "base" | "sm" | "xs";
+/** A cor do texto com o NOME do nativo (DOC-11, os mesmos nomes na web e no nativo). `link` é o amarelo
+ *  de ESCREVER (legível nos dois temas); `primary` é o de PREENCHER, e no tema claro quase some — como no
+ *  nativo. As cores de estado são o par `-400` (ADR-0061). Vence o `color` quando os dois vêm. */
+export type TypographyTone = "default" | "muted" | "subtle" | "primary" | "link" | "danger" | "success" | "warning" | "info";
 interface TypographyBase {
     align?: TypographyAlign;
     color?: TypographyColor;
+    tone?: TypographyTone;
     weight?: TypographyWeight;
     truncate?: boolean;
     /** GAR-16 (0.28.0): algarismos da mesma largura — para número que alinha em coluna (preço, ano,
@@ -194,18 +199,18 @@ interface TypographyBase {
 export interface TextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, RefAttributes<HTMLSpanElement>, TypographyBase {
     type?: TypographyType;
 }
-export declare function Text({ type, align, color, weight, truncate, numeric, className, ...props }: TextProps): React.JSX.Element;
+export declare function Text({ type, align, color, tone, weight, truncate, numeric, className, ...props }: TextProps): React.JSX.Element;
 export interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "color">, RefAttributes<HTMLHeadingElement>, TypographyBase {
     level?: HeadingLevel;
 }
-export declare function Heading({ level, align, color, weight, truncate, numeric, className, ...props }: HeadingProps): React.JSX.Element;
+export declare function Heading({ level, align, color, tone, weight, truncate, numeric, className, ...props }: HeadingProps): React.JSX.Element;
 export interface ParagraphProps extends Omit<HTMLAttributes<HTMLParagraphElement>, "color">, RefAttributes<HTMLParagraphElement>, TypographyBase {
     size?: ParagraphSize;
 }
-export declare function Paragraph({ size, align, color, weight, truncate, numeric, className, ...props }: ParagraphProps): React.JSX.Element;
+export declare function Paragraph({ size, align, color, tone, weight, truncate, numeric, className, ...props }: ParagraphProps): React.JSX.Element;
 export interface CodeProps extends Omit<HTMLAttributes<HTMLElement>, "color">, RefAttributes<HTMLElement>, TypographyBase {
 }
-export declare function Code({ align, color, weight, truncate, className, ...props }: CodeProps): React.JSX.Element;
+export declare function Code({ align, color, tone, weight, truncate, className, ...props }: CodeProps): React.JSX.Element;
 export type BadgeEmphasis = "soft" | "solid" | "outline";
 export type BadgeSize = "xs" | "sm" | "md" | "lg";
 export type BadgePlacement = "top-end" | "top-start" | "bottom-end" | "bottom-start";
@@ -213,6 +218,9 @@ export type BadgeFit = "auto" | "content";
 export declare function formatBadgeCount(count: number, max?: number): string;
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
+    /** A cor, com o NOME do nativo (DOC-11, 0.32.0: os mesmos nomes na web e no nativo). É o mesmo
+     *  eixo do `variant`, e vence quando os dois vêm. */
+    tone?: BadgeVariant;
     /** `soft` é o tom de sempre; `solid` preenche com o acento; `outline` é só contorno. */
     emphasis?: BadgeEmphasis;
     size?: BadgeSize;
@@ -239,7 +247,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
      *  Chama-se assim, e não `content`, porque este colide com o atributo HTML de mesmo nome. */
     badgeContent?: ReactNode;
 }
-export declare function Badge({ variant, emphasis, size, dot, leading, trailing, image, imageAlt, count, max, showZero, fit, anchor, anchorShape, invisible, badgeContent, children, className, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ variant: variantProp, tone, emphasis, size, dot, leading, trailing, image, imageAlt, count, max, showZero, fit, anchor, anchorShape, invisible, badgeContent, children, className, ...props }: BadgeProps): React.JSX.Element;
 /** O tom da barra: a mesma lista fechada do `ButtonTone`. Pausado é `neutral`; falha é `danger`. */
 export type ProgressTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info";
 export interface ProgressProps {
@@ -252,10 +260,21 @@ export interface ProgressProps {
      *  que falta, bytes. Em texto, vai junto no `aria-valuetext`. */
     detail?: ReactNode;
     tone?: ProgressTone;
+    /** 0.32.0: o rótulo À MOSTRA, no alto à esquerda (o da barra da referência). Sem ele, o `label` só
+     *  nomeia a barra para o leitor de tela, como sempre. */
+    showLabel?: boolean;
+    /** 0.32.0: o valor ("60%") no alto à direita, quando não há `detail`. */
+    showValue?: boolean;
+    /** A espessura do trilho: sm 4, md 8, lg 12 — os da referência. */
+    size?: ProgressSize;
     className?: string;
 }
-export declare function Progress({ value, label, detail, tone, className }: ProgressProps): React.JSX.Element;
-export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export type ProgressSize = "sm" | "md" | "lg";
+export declare function Progress({ value, label, detail, tone, showLabel, showValue, size, className }: ProgressProps): React.JSX.Element;
+export type SkeletonAnimation = "pulse" | "none";
+export declare function Skeleton({ animation, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    animation?: SkeletonAnimation;
+}): React.JSX.Element;
 export declare function AvatarGroup({ children, max, total, label, size, className }: {
     children: ReactNode;
     max?: number;
@@ -303,6 +322,8 @@ export declare function Topbar(props: HeaderProps): React.JSX.Element;
 export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, RefAttributes<HTMLTextAreaElement> {
     size?: Responsive<FieldSize>;
+    /** 0.32.0, a da referência: `secondary` é o fundo neutro, para o campo dentro de um cartão. */
+    variant?: FieldVariant;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;
 export declare function Checkbox({ label, labelHidden, description, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
@@ -324,6 +345,7 @@ export declare function Range({ orientation, className, ...props }: InputHTMLAtt
     orientation?: Responsive<RangeOrientation>;
 }): React.JSX.Element;
 export type FieldSize = Extract<ComponentSize, "sm" | "md" | "lg">;
+export type FieldVariant = "primary" | "secondary";
 export declare function Label({ htmlFor, className, children, ...props }: HTMLAttributes<HTMLLabelElement> & RefAttributes<HTMLLabelElement> & {
     htmlFor?: string;
 }): React.JSX.Element;
@@ -339,4 +361,62 @@ export declare function InputGroupAddon({ side, layout, className, children, ...
 export declare function AspectRatio({ ratio, className, style, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     ratio?: number;
 }): React.JSX.Element;
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, RefAttributes<HTMLAnchorElement> {
+    /** Abre noutra aba e mostra a seta. */
+    external?: boolean;
+    /** Não navega: sai sem `href` e com `aria-disabled`. */
+    disabled?: boolean;
+}
+export declare function Link({ external, disabled, href, target, rel, className, children, ...props }: LinkProps): React.JSX.Element;
+export type ColorSwatchSize = "xs" | "sm" | "md" | "lg" | "xl";
+export interface ColorSwatchProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
+    /** Qualquer cor do CSS: `#f0c200`, `oklch(…)`, `var(--primary)`. */
+    color: string;
+    size?: ColorSwatchSize;
+    /** O nome que o leitor de tela anuncia ("Amarelo Aurea"). Sem ele, o valor da cor. */
+    label?: string;
+}
+export interface ColorSwatchOption {
+    color: string;
+    label?: string;
+    /** Esta cor não se escolhe (as outras sim). */
+    disabled?: boolean;
+}
+/** O que as duas formas têm em comum: a escala. (É a base que o leitor da API segue em `base & (a | b)`.) */
+export interface ColorSwatchBase {
+    size?: ColorSwatchSize;
+}
+export interface ColorSwatchPickerProps {
+    /** As cores para escolher — `"#0485f7"` ou `{color, label}`. É o que faz da amostra um grupo de escolha. */
+    options: readonly (string | ColorSwatchOption)[];
+    /** O nome do grupo no formulário, e o que faz das amostras UM grupo (as setas andam entre elas). */
+    name: string;
+    /** O nome do grupo para o leitor de tela ("Cor de destaque"). */
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    /** O evento do navegador, como no `Radio`: `event.target.value` é a cor escolhida. */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** `"grid"` (o padrão: em linha, quebrando) ou `"stack"` (em coluna), como na referência. */
+    layout?: "grid" | "stack";
+    /** A marca da escolhida, no lugar do "visto" (um `<Icon>`, por exemplo). Ela ganha a tinta que contrasta. */
+    indicator?: ReactNode;
+    size?: ColorSwatchSize;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+export declare function ColorSwatch(props: ColorSwatchBase & (ColorSwatchProps | ColorSwatchPickerProps)): React.JSX.Element;
+export type ProgressCircleSize = "sm" | "md" | "lg";
+export interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+    /** De `min` a `max`. Sem ele, o círculo gira. */
+    value?: number;
+    min?: number;
+    max?: number;
+    size?: ProgressCircleSize;
+    tone?: ProgressTone;
+    /** O nome que o leitor de tela anuncia ("Enviando o arquivo"). */
+    label: string;
+}
+export declare function ProgressCircle({ value, min, max, size, tone, label, className, ...props }: ProgressCircleProps): React.JSX.Element;
 export {};

package/dist/markup.js

@@ -37,6 +37,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // tocar motor. Na dúvida, ele NÃO entra — cliente a mais é lento, servidor a mais é quebrado.
 import React, { forwardRef } from "react";
 import { cx, fundirRender, peleDoEixo } from "./pure.js";
+// As contas de cor são funções puras, sem estado e sem navegador (ADR-0069): o `ColorSwatch` usa a do contraste.
+import { contrastingInk, hsbToRgb, parseColor } from "./color.js";
 export function Card({ variant = "base", padding = "normal", orientation = "vertical", accent, className, render, ...props }) {
     return fundirRender(render, { className: cx("card", variant !== "base" && `card-${variant}`, accent && `card-accent card-accent-${accent}`, padding === "none" && "card-flush", orientation === "horizontal" && "card-horizontal", className), ...(variant === "contrast" ? { "data-theme": "dark" } : null), ...props });
 }
@@ -104,16 +106,17 @@ export function Timeline({ items }) { return _jsx("ol", { className: "timeline",
 // `dangerouslySetInnerHTML` tem de SANITIZAR antes. A Aurea desenha o texto; ela não pode decidir
 // o que é seguro renderizar. Está dito na ficha, em voz alta.
 export function Prose({ className, ...props }) { return _jsx("div", { className: cx("prose", className), ...props }); }
-const tipografia = (tipo, { align, color, weight, truncate, numeric }, className) => cx("typography", `typography-${tipo}`, color === "muted" && "typography-muted", weight && `typography-weight-${weight}`, align && `typography-align-${align}`, truncate && "typography-truncate", numeric && "typography-numeric", className);
-export function Text({ type = "body", align, color, weight, truncate, numeric, className, ...props }) { return _jsx("span", { className: tipografia(type, { align, color, weight, truncate, numeric }, className), ...props }); }
+const tipografia = (tipo, { align, color, tone, weight, truncate, numeric }, className) => cx("typography", `typography-${tipo}`, (tone ?? color) === "muted" && "typography-muted", tone && tone !== "default" && tone !== "muted" && `typography-tone-${tone}`, weight && `typography-weight-${weight}`, align && `typography-align-${align}`, truncate && "typography-truncate", numeric && "typography-numeric", className);
+export function Text({ type = "body", align, color, tone, weight, truncate, numeric, className, ...props }) { return _jsx("span", { className: tipografia(type, { align, color, tone, weight, truncate, numeric }, className), ...props }); }
 // O nível decide o elemento E o tamanho, como na referência: um `h2` tem a cara de título 2.
-export function Heading({ level = 1, align, color, weight, truncate, numeric, className, ...props }) { const Tag = `h${level}`; return _jsx(Tag, { className: tipografia(`h${level}`, { align, color, weight, truncate, numeric }, className), ...props }); }
-export function Paragraph({ size = "base", align, color, weight, truncate, numeric, className, ...props }) { return _jsx("p", { className: tipografia(size === "base" ? "body" : `body-${size}`, { align, color, weight, truncate, numeric }, className), ...props }); }
-export function Code({ align, color, weight, truncate, className, ...props }) { return _jsx("code", { className: tipografia("code", { align, color, weight, truncate }, className), ...props }); }
+export function Heading({ level = 1, align, color, tone, weight, truncate, numeric, className, ...props }) { const Tag = `h${level}`; return _jsx(Tag, { className: tipografia(`h${level}`, { align, color, tone, weight, truncate, numeric }, className), ...props }); }
+export function Paragraph({ size = "base", align, color, tone, weight, truncate, numeric, className, ...props }) { return _jsx("p", { className: tipografia(size === "base" ? "body" : `body-${size}`, { align, color, tone, weight, truncate, numeric }, className), ...props }); }
+export function Code({ align, color, tone, weight, truncate, className, ...props }) { return _jsx("code", { className: tipografia("code", { align, color, tone, weight, truncate }, className), ...props }); }
 // `max` com `+` é o idioma universal do contador (três das referências o usam). Exportada porque quem
 // escreve o nome acessível precisa do MESMO texto — "99+ unread" tem de bater com o que se vê.
 export function formatBadgeCount(count, max = 99) { return count > max ? `${max}+` : String(count); }
-export function Badge({ variant = "neutral", emphasis = "soft", size = "md", dot, leading, trailing, image, imageAlt, count, max = 99, showZero, fit = "auto", anchor, anchorShape = "square", invisible, badgeContent, children, className, ...props }) {
+export function Badge({ variant: variantProp = "neutral", tone, emphasis = "soft", size = "md", dot, leading, trailing, image, imageAlt, count, max = 99, showZero, fit = "auto", anchor, anchorShape = "square", invisible, badgeContent, children, className, ...props }) {
+    const variant = tone ?? variantProp;
     const numero = count != null ? formatBadgeCount(count, max) : undefined;
     const miolo = anchor ? (numero ?? badgeContent) : (numero ?? children);
     // Ponto puro: `dot` sem nada para mostrar. Aí o badge não tem conteúdo, e ganha medida própria.
@@ -131,7 +134,7 @@ export function Badge({ variant = "neutral", emphasis = "soft", size = "md", dot
 // AN-07 (03/10/2026). Tudo novo é acréscimo: com `value` e sem `detail` nem `tone`, a marcação é a
 // de antes, mais a classe da caixa de fora. A anatomia é a da barra de progresso da referência: a
 // saída no alto à direita, o trilho embaixo, e sem `aria-valuenow` quando não há total.
-export function Progress({ value, label, detail, tone = "brand", className }) {
+export function Progress({ value, label, detail, tone = "brand", showLabel, showValue, size = "md", className }) {
     const semTotal = value == null || Number.isNaN(value);
     const pct = semTotal ? undefined : Math.max(0, Math.min(100, value));
     const temApoio = detail != null && detail !== false && detail !== "";
@@ -139,9 +142,14 @@ export function Progress({ value, label, detail, tone = "brand", className }) {
     // vezes. Apoio que não é texto (um ícone, um link) fica onde está, para o leitor achar sozinho.
     const emTexto = temApoio && (typeof detail === "string" || typeof detail === "number") ? String(detail) : undefined;
     const valuetext = emTexto == null ? undefined : pct == null ? emTexto : `${pct}%, ${emTexto}`;
-    return _jsxs("div", { className: cx("progress-field", className), children: [temApoio && _jsx("div", { className: "progress-detail", "aria-hidden": emTexto != null || undefined, children: detail }), _jsx("div", { className: cx("progress", semTotal && "progress-indeterminate", tone !== "brand" && `progress-tone-${tone}`), role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-valuetext": valuetext, children: _jsx("span", { style: pct == null ? undefined : { width: `${pct}%` } }) })] });
+    // O rótulo à mostra sai do leitor de tela (`aria-hidden`): quem nomeia a barra continua o `aria-label`,
+    // com o mesmo texto — sem isso, o leitor o leria duas vezes. (Este arquivo não usa hook, então nada de
+    // id gerado para `aria-labelledby`.)
+    const rotuloVisivel = !!showLabel && !!label;
+    const valor = !temApoio && showValue && pct != null ? `${Math.round(pct)}%` : undefined;
+    return _jsxs("div", { className: cx("progress-field", className), children: [rotuloVisivel && _jsx("span", { className: "progress-label", "aria-hidden": "true", children: label }), temApoio && _jsx("div", { className: "progress-detail", "aria-hidden": emTexto != null || undefined, children: detail }), valor && _jsx("div", { className: "progress-detail", "aria-hidden": "true", children: valor }), _jsx("div", { className: cx("progress", semTotal && "progress-indeterminate", tone !== "brand" && `progress-tone-${tone}`, size !== "md" && `progress-${size}`), role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-valuetext": valuetext, children: _jsx("span", { style: pct == null ? undefined : { width: `${pct}%` } }) })] });
 }
-export function Skeleton({ className, ...props }) { return _jsx("div", { className: cx("skeleton", className), "aria-hidden": "true", ...props }); }
+export function Skeleton({ animation = "pulse", className, ...props }) { return _jsx("div", { className: cx("skeleton", animation === "none" && "skeleton-static", className), "aria-hidden": "true", ...props }); }
 // ── Identity ─────────────────────────────────────────────────────────────────────────────────
 // `React.Children` não é hook — é utilitário de leitura de `children`, e roda no servidor.
 export function AvatarGroup({ children, max, total, label, size, className }) {
@@ -180,8 +188,12 @@ export function Topbar(props) { return _jsx(Header, { ...props }); }
 // Kbd — representação de tecla/atalho. <kbd> é o elemento HTML certo; a pele é nossa. Ele já
 // morava fora da casa dele (no `internal.tsx`, por causa do `Button`); agora mora aqui, pelo
 // mesmo motivo elevado a regra.
-export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", className), ...props, children: children }); }
-export const Textarea = forwardRef(function Textarea({ className, size, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", peleDoEixo("textarea", size), className), ...props }); });
+// 0.32.0: uma tecla de UM caractere ("K", "⌘", "/") sai redonda (`kbd-single`), e uma palavra
+// ("Esc", "Enter") em cápsula — o canto da Aurea sobre a medida da referência. Conta-se o que a
+// pessoa vê (`Array.from` não parte um emoji ao meio); conteúdo que não é texto fica em cápsula.
+const umCaractere = (c) => (typeof c === "string" || typeof c === "number") && Array.from(String(c).trim()).length === 1;
+export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", umCaractere(children) && "kbd-single", className), ...props, children: children }); }
+export const Textarea = forwardRef(function Textarea({ className, size, variant, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", peleDoEixo("textarea", size), variant === "secondary" && "textarea-secondary", className), ...props }); });
 // `size` nos três marcáveis pela mesma razão do campo: uma linha de formulário com um campo `sm`
 // e um checkbox de tamanho fixo ao lado desalinha. O degrau vai na MARCA, não no rótulo.
 export function Checkbox({ label, labelHidden, description, size, className, ...props }) { return _jsxs("label", { className: cx("checkbox", labelHidden && "checkbox-bare", className), children: [_jsx("input", { type: "checkbox", ...props }), _jsx("span", { className: cx("control-mark", peleDoEixo("control-mark", size)) }), _jsxs("span", { className: labelHidden ? "sr-only" : undefined, children: [_jsx("strong", { children: label }), description && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "muted", children: description })] })] })] }); }
@@ -228,3 +240,28 @@ export function InputGroupAddon({ side = "start", layout = "inline", className,
 // escreve o `padding-top: 56.25%` de 2015, ou esquece o `min-width: 0` que impede a caixa de
 // estourar dentro de um grid.
 export function AspectRatio({ ratio = 1, className, style, ...props }) { return _jsx("div", { className: cx("aspect-ratio", className), style: { aspectRatio: ratio, ...style }, ...props }); }
+export function Link({ external, disabled, href, target, rel, className, children, ...props }) {
+    return _jsxs("a", { className: cx("link", className), href: disabled ? undefined : href, "aria-disabled": disabled || undefined, target: external ? target ?? "_blank" : target, rel: external ? rel ?? "noopener noreferrer" : rel, ...props, children: [children, external && _jsx("span", { className: "link-external", "aria-hidden": "true" })] });
+}
+// Transparente quando o texto diz alfa abaixo de 1 (hex de 4 ou 8 dígitos, `rgba()`, `hsla()`…). Cor de token ou
+// `oklch()` a marcação não lê: fica sem xadrez.
+const transparente = (cor) => { const c = parseColor(cor); return c !== null && c.a < 1; };
+export function ColorSwatch(props) {
+    if ("options" in props) {
+        const { options, name, label, value, defaultValue, onChange, layout = "grid", indicator, size = "md", disabled, id, className } = props;
+        // O `onChange` é o do CONSUMIDOR, repassado, como no `Checkbox` e no `Radio` desta casa: nenhum manipulador nosso
+        // é escrito aqui (a marcação continua de servidor). Vai por espalhamento, como lá.
+        return _jsx("div", { role: "radiogroup", "aria-label": label, id: id, "aria-disabled": disabled || undefined, className: cx("color-swatch-picker", size !== "md" && `color-swatch-picker-${size}`, layout === "stack" && "color-swatch-picker-stack", className), children: options.map((o) => {
+                const op = typeof o === "string" ? { color: o } : o;
+                const cor = parseColor(op.color), rgb = cor && hsbToRgb(cor);
+                return _jsxs("label", { className: cx("color-swatch-option", rgb && contrastingInk(rgb) === "dark" && "color-swatch-option-dark"), style: { ["--color-swatch-current"]: op.color }, children: [_jsx("input", { type: "radio", className: "color-swatch-input", name: name, value: op.color, "aria-label": op.label ?? op.color, checked: value === undefined ? undefined : value === op.color, defaultChecked: value === undefined ? defaultValue === op.color : undefined, disabled: disabled || op.disabled, ...(onChange ? { onChange } : {}) }), _jsx("span", { className: cx("color-swatch", cor && cor.a < 1 && "color-swatch-alpha"), "aria-hidden": "true" }), indicator != null && _jsx("span", { className: "color-swatch-indicator", "aria-hidden": "true", children: indicator })] }, op.color);
+            }) });
+    }
+    const { color, size = "md", label, className, style, ...resto } = props;
+    return _jsx("span", { role: "img", "aria-label": label ?? color, className: cx("color-swatch", size !== "md" && `color-swatch-${size}`, transparente(color) && "color-swatch-alpha", className), style: { ...style, ["--color-swatch-current"]: color }, ...resto });
+}
+export function ProgressCircle({ value, min = 0, max = 100, size = "md", tone = "brand", label, className, ...props }) {
+    const semTotal = value == null || Number.isNaN(value);
+    const pct = semTotal ? 25 : Math.max(0, Math.min(100, (value - min) / (max - min) * 100));
+    return _jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": semTotal ? undefined : min, "aria-valuemax": semTotal ? undefined : max, "aria-valuenow": semTotal ? undefined : value, className: cx("progress-circle", size !== "md" && `progress-circle-${size}`, tone !== "brand" && `progress-circle-${tone}`, semTotal && "progress-circle-indeterminate", className), ...props, children: _jsxs("svg", { viewBox: "0 0 36 36", "aria-hidden": "true", children: [_jsx("circle", { className: "progress-circle-track", cx: "18", cy: "18", r: "16" }), _jsx("circle", { className: "progress-circle-fill", cx: "18", cy: "18", r: "16", pathLength: 100, strokeDasharray: "100", strokeDashoffset: 100 - pct })] }) });
+}

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,13 +154,18 @@ 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;
+    /** 0.32.0 (DOC-07): a linha que ensina as teclas, embaixo — ↑ ↓ mover, Enter abrir, Esc fechar. */
+    shortcuts?: boolean;
 }): React.JSX.Element | null;
 export declare function CommandPaletteShell({ open, query, onQueryChange, children }: {
     open: boolean;

package/dist/navigation-client.js

@@ -8,7 +8,7 @@ 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 { useValorResponsivo } from "./responsivo-runtime.js";
-import { cx, fundirRender, useAureaStrings, usePortalContainer } from "./internal.js";
+import { cx, fundirRender, useAureaStrings } from "./internal.js";
 import { Kbd } from "./markup.js";
 import { Icon } from "./system.js";
 import { Button } from "./actions.js";
@@ -29,8 +29,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 +72,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 +264,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 +311,39 @@ 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 portal = usePortalContainer();
+    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]);
     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 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 }) })] }) }) })] }) }) });
+            onClose(); }, children: _jsxs("div", { className: "command-palette", role: "dialog", "aria-label": label ?? s.commandLabel, 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, { autoFocus: true, className: "input", onKeyDown: e => { if (e.key === "Escape") {
+                                e.stopPropagation();
+                                onClose();
+                            } }, "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] })] })] }) });
 }
 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;