@aurea-uds/react 0.8.14 → 0.10.0

package/dist/actions.d.ts

@@ -24,6 +24,15 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Re
     trailingIcon?: IconName;
     href?: string;
     fullWidth?: boolean;
+    /** C-03 (24/09/2026): numa fila (`Cluster`), divide o espaço em partes iguais com os outros botões
+     *  que também têm `grow`. O `fullWidth` não serve ali: ele pede a linha inteira. */
+    grow?: boolean;
+    /** C-13 (24/09/2026): atributos de LINK, que só valem com `href` — sem ele são ignorados. Antes
+     *  chegavam ao `<a>` em tempo de execução, mas o tipo não os aceitava, e `target="_blank"` não
+     *  compilava. */
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    download?: boolean | string;
     /**
      * @deprecated Use `<Toggle>` instead. Pesquisado em 18/08/2026 nas doze referências (MUI,
      * Fluent 2, React Aria, Spectrum, Carbon, Radix/Base UI, shadcn, ReUI, PrimeReact, HeroUI,

package/dist/actions.js

@@ -45,7 +45,7 @@ export function buttonSkin(variant, appearance, tone) {
 // type="button" por default: o default do HTML é submit, e um "Cancelar"/"Remover"
 // dentro de <form> dispararia a ação principal (auditoria 18/07/2026, ALTO 1).
 // Quem quer submeter passa type="submit" explícito (como o MessageComposer faz).
-export const Button = forwardRef(function Button({ variant, appearance, tone, size = "md", loading, leadingIcon, trailingIcon, className, children, disabled, type = "button", href, fullWidth, pressed, kbd, onClick, onClickCapture, "aria-disabled": ariaDisabled, ...props }, ref) {
+export const Button = forwardRef(function Button({ variant, appearance, tone, size = "md", loading, leadingIcon, trailingIcon, className, children, disabled, type = "button", href, fullWidth, grow, target, rel, download, pressed, kbd, onClick, onClickCapture, "aria-disabled": ariaDisabled, ...props }, ref) {
     // G-AXIS-04 — `size` aceita valor simples, responsivo por viewport ou adaptativo por container.
     // SOMATIVO por construção: valor simples continua emitindo `btn-sm`, byte por byte a mesma classe
     // de antes, e por isso nenhuma baseline se mexe. Só o valor responsivo entra pela camada genérica
@@ -53,7 +53,7 @@ export const Button = forwardRef(function Button({ variant, appearance, tone, si
     // Quem decide é o CSS: nada aqui observa largura, e o HTML do servidor já sai correto.
     const responsivo = ehResponsivo(size);
     const base = valorBase(size) ?? "md";
-    const cls = cx("btn", buttonSkin(variant, appearance, tone), responsivo ? classesResponsivas("size", size) : (base !== "md" && `btn-${base}`), fullWidth && "btn-block", className);
+    const cls = cx("btn", buttonSkin(variant, appearance, tone), responsivo ? classesResponsivas("size", size) : (base !== "md" && `btn-${base}`), fullWidth && "btn-block", grow && "btn-grow", className);
     // kbd dentro do botão: mostra o atalho E o anuncia (aria-keyshortcuts), senão é enfeite.
     const inner = _jsxs(_Fragment, { children: [loading && _jsx("span", { className: "spinner" }), leadingIcon && _jsx(Icon, { name: leadingIcon }), _jsx("span", { children: children }), kbd && _jsx(Kbd, { children: kbd }), trailingIcon && _jsx(Icon, { name: trailingIcon })] });
     // INERTE ≠ DESABILITADO, e a diferença é medida (M4, 13/08/2026): `disabled` tira o botão da
@@ -76,7 +76,7 @@ export const Button = forwardRef(function Button({ variant, appearance, tone, si
     const bloqueia = (e) => { e.preventDefault(); e.stopPropagation(); };
     const eventos = (off || inerte) ? { onClick: bloqueia, onClickCapture: bloqueia } : { onClick: onClick, onClickCapture: onClickCapture };
     if (href !== undefined)
-        return _jsx("a", { ref: ref, className: cls, ...shared, ...props, ...(off ? { "aria-disabled": true } : { href }), ...eventos, children: inner });
+        return _jsx("a", { ref: ref, className: cls, target: target, rel: rel, download: download, ...shared, ...props, ...(off ? { "aria-disabled": true } : { href }), ...eventos, children: inner });
     return _jsx("button", { ref: ref, type: type, className: cls, disabled: off, "aria-disabled": inerte || undefined, "aria-pressed": pressed, ...shared, ...(inerte ? { onClick: bloqueia, onClickCapture: bloqueia } : { onClick, onClickCapture }), ...props, children: inner });
 });
 function temConteudoVisivel(children) {

package/dist/inputs-client.d.ts

@@ -9,11 +9,17 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement>, RefAttribute
     label: string;
     hint?: ReactNode;
     error?: ReactNode;
+    /** B-12 (24/09/2026): texto de ajuda que precisa de uma FRASE — mora embaixo do controle, onde
+     *  cabe, e não divide a linha do rótulo. O `hint` continua o que é: nota curta ao lado do rótulo
+     *  ("opcional", "em MB"). É o lugar do `Description` do HeroUI e da `description` que o
+     *  `Checkbox` desta casa já tem. Entra no `aria-describedby` na ordem da tela: hint, descrição,
+     *  erro. */
+    description?: ReactNode;
     name?: string;
     orientation?: Responsive<FieldOrientation>;
     labelWidth?: FieldLabelWidth;
 }
-export declare function Field({ label, hint, error, children, className, id, name, orientation, labelWidth, style, ...props }: FieldProps): React.JSX.Element;
+export declare function Field({ label, hint, description, error, children, className, id, name, orientation, labelWidth, style, ...props }: FieldProps): React.JSX.Element;
 export declare function Form({ errors, onSubmit, children, className, ...props }: Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & RefAttributes<HTMLFormElement> & {
     errors?: Record<string, string | string[]>;
     onSubmit?: (values: Record<string, unknown>) => void;
@@ -23,11 +29,14 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     size?: Responsive<FieldSize>;
 }
 export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
-export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, RefAttributes<HTMLInputElement> {
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "width">, RefAttributes<HTMLInputElement> {
     icon?: IconName;
     size?: Responsive<FieldSize>;
+    /** A-08 (24/09/2026): a largura do campo — `"20rem"` ou `"auto"`. Sem ela, 100% da linha, como
+     *  sempre. O `size` muda altura e letra, nunca largura. */
+    width?: string;
 }
-export declare function SearchField({ icon, className, size, ...props }: SearchFieldProps): React.JSX.Element;
+export declare function SearchField({ icon, className, size, width, ...props }: SearchFieldProps): React.JSX.Element;
 export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, name, format, locale, className, scrubbable, scrubDirection }: {
     value?: number | null;
     defaultValue?: number;
@@ -76,7 +85,7 @@ export interface ComboboxOptGroup {
     label: string;
     items: ComboboxOption[];
 }
-export declare function Combobox({ items, value, onValueChange, placeholder, label, empty, disabled, size, id, className, "aria-describedby": descrito, "aria-invalid": invalido }: {
+export declare function Combobox({ items, value, onValueChange, placeholder, label, empty, disabled, size, id, className, "aria-describedby": descrito, "aria-invalid": invalido, "aria-label": rotulo }: {
     items: ComboboxOption[] | ComboboxOptGroup[];
     empty?: ReactNode;
     value?: ComboboxOption | null;
@@ -89,8 +98,11 @@ export declare function Combobox({ items, value, onValueChange, placeholder, lab
     className?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false";
+    /** C-01 (24/09/2026): nome para o leitor de tela quando não há `label` visível — um filtro numa
+     *  grade sem rótulos. Vai direto para o campo. Com `label`, prefira o `label`. */
+    "aria-label"?: string;
 }): React.JSX.Element;
-export declare function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, empty, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }: {
+export declare function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, empty, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido, "aria-label": rotulo }: {
     items: ComboboxOption[] | ComboboxOptGroup[];
     empty?: ReactNode;
     value?: ComboboxOption[];
@@ -104,6 +116,9 @@ export declare function MultiCombobox({ items, value, onValueChange, onInputChan
     className?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false";
+    /** C-01 (24/09/2026): nome para o leitor de tela quando não há `label` visível — um filtro numa
+     *  grade sem rótulos. Vai direto para o campo. Com `label`, prefira o `label`. */
+    "aria-label"?: string;
 }): React.JSX.Element;
 export interface SelectOption {
     value: string;

package/dist/inputs-client.js

@@ -79,7 +79,7 @@ function elementoRotulavel(tipo) {
     // regra que os outros: recebe `id` e espalha `...props` no `Input`, que é o nó focal.
     return [Input, Select, Textarea, SearchField, PasswordField, Checkbox, Radio, Switch, Range, Combobox, MultiCombobox].includes(tipo);
 }
-export function Field({ label, hint, error, children, className, id, name, orientation, labelWidth, style, ...props }) {
+export function Field({ label, hint, description, error, children, className, id, name, orientation, labelWidth, style, ...props }) {
     const auto = React.useId();
     // Fragment não cria nó no DOM. Um Fragment com um só controle é só sintaxe; com vários,
     // Field precisa voltar para grupo em vez de pendurar `htmlFor` num id que nunca existirá.
@@ -100,8 +100,9 @@ export function Field({ label, hint, error, children, className, id, name, orien
     const idControle = unico?.props.id ?? id ?? `${auto}-control`;
     const idRotulo = `${auto}-label`;
     const idHint = hint ? `${auto}-hint` : undefined;
+    const idDescricao = description ? `${auto}-description` : undefined;
     const idErro = error ? `${auto}-error` : undefined;
-    const descrito = [idHint, idErro].filter(Boolean).join(" ") || undefined;
+    const descrito = [idHint, idDescricao, idErro].filter(Boolean).join(" ") || undefined;
     // As chaves de aria só entram quando têm VALOR. Passar `undefined` explícito não é o mesmo que
     // não passar: quando o filho vira `Field.Control` do motor (ramo do `name`), a prop explícita
     // do elemento vence a mesclagem, e o `aria-invalid` que o motor calculou a partir do erro
@@ -124,7 +125,7 @@ export function Field({ label, hint, error, children, className, id, name, orien
     // árvore de acessibilidade enquanto a frase de erro aparece na tela. Pior que não mostrar.
     const controleFinal = name ? _jsx(BaseField.Control, { render: controle }) : controle;
     const estilo = labelWidth ? { ...style, "--field-label-width": labelWidth === "auto" ? "max-content" : labelWidth } : style;
-    const corpo = _jsxs("div", { className: cx("field", peleDoEixo("field", orientation, "vertical", "field"), className), ...(nomeAqui ? {} : { role: "group", "aria-labelledby": idRotulo, ...(rotulavel ? {} : { "aria-describedby": descrito }) }), style: estilo, ...props, children: [_jsxs("span", { className: "label", children: [nomeAqui ? _jsx("label", { htmlFor: idControle, children: label }) : _jsx("span", { id: idRotulo, children: label }), hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controleFinal, error && _jsx("span", { className: "field-error", id: idErro, children: error }), name && _jsx(BaseField.Error, { className: "field-error" })] });
+    const corpo = _jsxs("div", { className: cx("field", peleDoEixo("field", orientation, "vertical", "field"), className), ...(nomeAqui ? {} : { role: "group", "aria-labelledby": idRotulo, ...(rotulavel ? {} : { "aria-describedby": descrito }) }), style: estilo, ...props, children: [_jsxs("span", { className: "label", children: [nomeAqui ? _jsx("label", { htmlFor: idControle, children: label }) : _jsx("span", { id: idRotulo, children: label }), hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controleFinal, description && _jsx("span", { className: "field-description", id: idDescricao, children: description }), error && _jsx("span", { className: "field-error", id: idErro, children: error }), name && _jsx(BaseField.Error, { className: "field-error" })] });
     // `Field.Root` do motor entra SÓ quando há `name`: é ele que liga o campo à chave de `errors`
     // do formulário. Ele não desenha nada — é contexto — então a pele não muda.
     return name ? _jsx(BaseField.Root, { name: name, invalid: error ? true : undefined, render: corpo }) : corpo;
@@ -162,7 +163,7 @@ export const Input = forwardRef(function Input({ className, formatOnBlur, size,
 // `.input-wrap-end` para o botão do PasswordField —, e o grupo é a terceira vez virando uma. O
 // merge das duas linhagens tinha trazido de volta a versão com `.input-wrap`, contra um core
 // que já não a pinta.
-export function SearchField({ icon = "search", className, size, ...props }) { return _jsxs(InputGroup, { className: className, children: [_jsx(InputGroupAddon, { children: _jsx(Icon, { name: icon, size: valorBase(size) === "sm" ? "sm" : undefined }) }), _jsx(Input, { type: "search", size: size, ...props })] }); }
+export function SearchField({ icon = "search", className, size, width, ...props }) { return _jsxs(InputGroup, { className: className, width: width, children: [_jsx(InputGroupAddon, { children: _jsx(Icon, { name: icon, size: valorBase(size) === "sm" ? "sm" : undefined }) }), _jsx(Input, { type: "search", size: size, ...props })] }); }
 // labelHidden: coluna de seleção de tabela precisa do rótulo POR LINHA para o leitor de
 // tela ("Select Analyst"), mas mostrá-lo engorda a coluna. O rótulo continua no DOM, só
 // sai da tela (.sr-only) — nunca trocar por aria-label solto num <label> visível vazio.
@@ -253,12 +254,12 @@ const listaCombobox = (items) => _jsx(BaseCombobox.List, { children: ehAgrupado(
 // `disabled` vai na ROOT, não no Input: `Input`, `Trigger`, `Clear` e `ChipRemove` leem todos o
 // mesmo `selectors.disabled` do store do Base UI (@base-ui/react 1.6.0). Desabilitar o Input
 // deixaria os dois botões vivos — abrir a lista de um campo desabilitado é o defeito, não o texto.
-export function Combobox({ items, value, onValueChange, placeholder, label, empty, disabled, size, id, className, "aria-describedby": descrito, "aria-invalid": invalido }) {
+export function Combobox({ items, value, onValueChange, placeholder, label, empty, disabled, size, id, className, "aria-describedby": descrito, "aria-invalid": invalido, "aria-label": rotulo }) {
     const s = useAureaStrings();
     const portal = usePortalContainer();
     const autoId = React.useId();
     const inputId = id ?? autoId;
-    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: soOValor(onValueChange), disabled: disabled, itemToStringLabel: (i) => i.label, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-group", children: [_jsx(BaseCombobox.Input, { id: inputId, placeholder: placeholder, className: cx("input", peleDoEixo("input", size)), "aria-describedby": descrito, "aria-invalid": invalido }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: empty ?? s.comboboxEmpty }), listaCombobox(items)] }) }) })] });
+    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: soOValor(onValueChange), disabled: disabled, itemToStringLabel: (i) => i.label, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-group", children: [_jsx(BaseCombobox.Input, { id: inputId, placeholder: placeholder, className: cx("input", peleDoEixo("input", size)), "aria-describedby": descrito, "aria-invalid": invalido, "aria-label": rotulo }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: empty ?? s.comboboxEmpty }), listaCombobox(items)] }) }) })] });
 }
 // MultiCombobox (Fase 4): multi-seleção com chips, opções agrupadas e filtro
 // externo (async). Reusa .combobox-popup/-item/-empty do básico.
@@ -267,13 +268,13 @@ export function Combobox({ items, value, onValueChange, placeholder, label, empt
 // - Async: passar onInputChange; o filtro interno do Base UI desliga
 //   (filter={null}) e o consumidor troca os items conforme a busca retorna.
 //   loading só troca o texto do vazio para não piscar "Nenhum resultado".
-export function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, empty, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }) {
+export function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, empty, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido, "aria-label": rotulo }) {
     const s = useAureaStrings();
     const portal = usePortalContainer();
     const autoId = React.useId();
     const inputId = id ?? autoId;
     return _jsxs(BaseCombobox.Root, { multiple: true, items: items, value: value, onValueChange: soOValor(onValueChange), disabled: disabled, itemToStringLabel: (i) => i.label, filter: onInputChange ? null : undefined, onInputValueChange: onInputChange ? ((v, d) => { if (d.reason !== "item-press")
-            onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input", "aria-describedby": descrito, "aria-invalid": invalido })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : (empty ?? s.comboboxEmpty) }), listaCombobox(items)] }) }) })] });
+            onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input", "aria-describedby": descrito, "aria-invalid": invalido, "aria-label": rotulo })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : (empty ?? s.comboboxEmpty) }), listaCombobox(items)] }) }) })] });
 }
 const ehGrupoDoSelect = (i) => typeof i === "object" && i != null && "items" in i;
 // Lê `<option>`/`<optgroup>` como o navegador lê: `value` ausente vale o TEXTO da opção.

package/dist/layout-client.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
 import { type Orientation, type Responsive } from "./pure.js";
 import { type TopbarVariant, type SidebarVariant, type SidebarItem } from "./navigation.js";
-export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, sidebarVariant, sidebarCollapsed, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, sidebarVariant, sidebarCollapsed, contentVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
     navigation?: ReactNode;
     navItems?: SidebarItem[];
@@ -9,9 +9,13 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     navLabel?: string;
     topbar?: ReactNode;
     topbarVariant?: Exclude<TopbarVariant, "pill">;
+    topbarDivider?: boolean;
     sidebarVariant?: SidebarVariant;
     sidebarCollapsed?: boolean;
+    contentVariant?: "surface" | "plain";
 }): import("react").JSX.Element;
-export declare function Separator({ orientation, className, ...props }: HTMLAttributes<HTMLHRElement> & RefAttributes<HTMLHRElement> & {
+export type SeparatorSpacing = "none" | "tight" | "normal" | "loose";
+export declare function Separator({ orientation, spacing, className, ...props }: HTMLAttributes<HTMLHRElement> & RefAttributes<HTMLHRElement> & {
     orientation?: Responsive<Orientation>;
+    spacing?: SeparatorSpacing;
 }): import("react").JSX.Element;

package/dist/layout-client.js

@@ -116,36 +116,20 @@ function useGavetaFechaNoDesktop() {
 // texto ("8.174" virava "8.17"), medido num app real a 1400px. `navItems`/`currentNavId` vão para o
 // Sidebar que o shell já cria, e a caixa dupla deixa de ser o único caminho. `navigation` continua
 // valendo para quem escreve a navegação à mão, e as duas se somam: a lista vem antes.
-export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", sidebarVariant, sidebarCollapsed, children, className, ...props }) {
+// B-10 (24/09/2026): `contentVariant="plain"` tira a caixa do `.content`. Ela é um cartão (mesmo
+// fundo, borda e raio do `.card`), e todo `Card` lá dentro virava caixa dentro de caixa igual — um
+// app gastou 14 `!important` para apagá-la. `surface`, a caixa, continua o padrão.
+// B-07: `topbarDivider` repassa a linha de baixo para a barra `flush` que o shell monta.
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, sidebarVariant, sidebarCollapsed, contentVariant = "surface", children, className, ...props }) {
     const s = useAureaStrings();
     useGavetaFechaNoDesktop();
-    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Topbar, { variant: topbarVariant, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, collapsed: sidebarCollapsed, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: "content", children: children })] });
+    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Topbar, { variant: topbarVariant, divider: topbarDivider, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, collapsed: sidebarCollapsed, 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 })] });
 }
-// ── Separator ────────────────────────────────────────────────────────────────────────────────
-// A LINHA DO SISTEMA, e ela é de CLIENTE por necessidade, não por vizinhança.
-//
-// Ela já foi um <hr> com orientação estática, no `markup.tsx`. O merge das duas linhagens ficou
-// com essa versão, e o gate `comportamental.multi-motor.spec.ts` reprovou: a prova das cinco
-// capacidades do `G-AXIS-06` — a lista que o Victor especificou — cobra do separador
-// `data-orientation` E `aria-orientation` resolvidos pela largura do CONTÊINER, e os dois são
-// atributo. Atributo não sai de classe CSS. Eixo comportamental precisa de runtime.
-//
-// E O ELEMENTO CONTINUA SENDO UM <hr>. As duas exigências pareciam brigar — a suíte de unidade
-// cobra `<hr>` sem `role` escrito ("ARIA redundante é pior que ARIA nenhuma", aviso do próprio
-// APG), e a prova de contêiner cobra atributo resolvido em runtime. `render` resolve as duas:
-// o motor calcula e publica sobre o elemento que a Aurea escolhe.
-//
-// `role={undefined}` e o `aria-orientation` explícito são o acerto fino, e foram MEDIDOS antes
-// de escrever: por padrão o motor escreve `role="separator"` no <hr> (redundante — o <hr> já É
-// separator) e escreve `aria-orientation` também no HORIZONTAL, que é o default implícito do
-// papel. As duas props passadas aqui vencem as do motor, e sobra exatamente o que se quer:
-//   vertical    → <hr data-orientation="vertical" aria-orientation="vertical" class="separator separator-vertical">
-//   horizontal  → <hr data-orientation="horizontal" class="separator">
-export function Separator({ orientation, className, ...props }) {
+export function Separator({ orientation, spacing = "none", className, ...props }) {
     const ancora = useRef(null);
     const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
     // O elenco existe porque o tipo do motor descreve os manipuladores sobre `HTMLDivElement` — ele
     // não sabe que o `render` troca o elemento. O tipo PÚBLICO desta função é o certo: quem passar um
     // `ref` recebe o <hr> que está de fato no DOM.
-    return _jsx(BaseSeparator, { ref: ancora, orientation: resolvida, render: _jsx("hr", {}), role: undefined, "aria-orientation": resolvida === "vertical" ? "vertical" : undefined, className: cx("separator", resolvida === "vertical" && "separator-vertical", className), ...props });
+    return _jsx(BaseSeparator, { ref: ancora, orientation: resolvida, render: _jsx("hr", {}), role: undefined, "aria-orientation": resolvida === "vertical" ? "vertical" : undefined, className: cx("separator", resolvida === "vertical" && "separator-vertical", spacing !== "none" && `separator-space-${spacing}`, className), ...props });
 }

package/dist/markup.d.ts

@@ -4,7 +4,10 @@ import type { ComponentSize } from "./actions.js";
 export type BadgeVariant = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "running" | "paused" | "offline" | "review";
 export type AvatarSize = "sm" | "md" | "lg";
 export type TopbarVariant = "floating" | "flush" | "pill";
-type CardBase = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>;
+type CardBase = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    padding?: "normal" | "none";
+    orientation?: "vertical" | "horizontal";
+};
 export type CardProps = CardBase & ({
     variant?: "base" | "raised" | "inset" | "selected" | "danger";
     render?: ReactElement;
@@ -12,10 +15,50 @@ export type CardProps = CardBase & ({
     variant: "interactive";
     render: ReactElement;
 });
-export declare function Card({ variant, className, render, ...props }: CardProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-export declare function Stack({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
-export declare function Cluster({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
-export declare function Grid({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function Card({ variant, padding, orientation, className, render, ...props }: CardProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare namespace Card {
+    export { CardMedia as Media };
+}
+/** A mídia do cartão — a primeira das partes da especificação do `Card` (A-14). No vertical,
+ *  primeira filha, ela SANGRA até a borda de cima e dos lados; no horizontal, fica à esquerda com a
+ *  largura de miniatura, dentro do respiro, com o raio que sai da conta da casa (ADR-0033: raio do
+ *  cartão menos o respiro dele). O que vai dentro — `Image`, vídeo — é do app. */
+declare function CardMedia({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export type LayoutGap = "tight" | "normal" | "loose";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type ClusterAlign = "start" | "center" | "end" | "baseline";
+export type ClusterJustify = "start" | "center" | "end" | "between";
+type DivProps = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>;
+export interface StackProps extends DivProps {
+    /** `tight` (--space-2), `normal` (o de sempre, --space-4) ou `loose` (--space-6). */
+    gap?: LayoutGap;
+    /** Eixo cruzado. Padrão `stretch`: os filhos ocupam a largura, como sempre. */
+    align?: StackAlign;
+}
+export declare function Stack({ gap, align, className, ...props }: StackProps): React.JSX.Element;
+export interface ClusterProps extends DivProps {
+    /** `tight` (--space-2), `normal` (o de sempre, --space-3) ou `loose` (--space-6). */
+    gap?: LayoutGap;
+    /** Eixo cruzado (o vertical). Padrão `center`, como sempre. */
+    align?: ClusterAlign;
+    /** Eixo principal. `between` espalha o que sobrar: o nome à esquerda, o botão à direita. */
+    justify?: ClusterJustify;
+    /** Padrão `true`: a fila quebra linha. `false` mantém tudo numa linha só. */
+    wrap?: boolean;
+}
+export declare function Cluster({ gap, align, justify, wrap, className, ...props }: ClusterProps): React.JSX.Element;
+export interface GridProps extends DivProps {
+    /** `tight` (--space-2), `normal` (o de sempre, --space-4) ou `loose` (--space-6). */
+    gap?: LayoutGap;
+    /**
+     * Largura mínima de cada coluna, em unidade de CSS (`"10rem"`, `"155px"`). Padrão `15rem`. É o
+     * `--grid-min` que o CSS sempre leu e que nenhum tipo mostrava.
+     */
+    min?: string;
+    /** Número fixo de colunas, iguais. Com ele, `min` deixa de valer. */
+    columns?: number;
+}
+export declare function Grid({ gap, min, columns, className, style, ...props }: GridProps): React.JSX.Element;
 export declare function KPI({ label, value, trend, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     label: ReactNode;
     value: ReactNode;
@@ -90,9 +133,10 @@ export declare function LogStream({ lines }: {
     }>;
 }): React.JSX.Element;
 export declare function MediaPlayerShell({ children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
-export declare function Topbar({ variant, brand, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+export declare function Topbar({ variant, divider, brand, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     variant?: TopbarVariant;
     brand?: ReactNode;
+    divider?: boolean;
 }): 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> {
@@ -123,7 +167,9 @@ export declare function Label({ htmlFor, className, children, ...props }: HTMLAt
 }): React.JSX.Element;
 export type AddonSide = "start" | "end";
 export type AddonLayout = "inline" | "block";
-export declare function InputGroup({ className, children, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function InputGroup({ className, children, width, style, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    width?: string;
+}): React.JSX.Element;
 export declare function InputGroupAddon({ side, layout, className, children, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
     side?: AddonSide;
     layout?: Responsive<AddonLayout>;

package/dist/markup.js

@@ -37,39 +37,23 @@ 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";
-export function Card({ variant = "base", className, render, ...props }) {
-    return fundirRender(render, { className: cx("card", variant !== "base" && `card-${variant}`, className), ...props });
+export function Card({ variant = "base", padding = "normal", orientation = "vertical", className, render, ...props }) {
+    return fundirRender(render, { className: cx("card", variant !== "base" && `card-${variant}`, padding === "none" && "card-flush", orientation === "horizontal" && "card-horizontal", className), ...props });
+}
+/** A mídia do cartão — a primeira das partes da especificação do `Card` (A-14). No vertical,
+ *  primeira filha, ela SANGRA até a borda de cima e dos lados; no horizontal, fica à esquerda com a
+ *  largura de miniatura, dentro do respiro, com o raio que sai da conta da casa (ADR-0033: raio do
+ *  cartão menos o respiro dele). O que vai dentro — `Image`, vídeo — é do app. */
+function CardMedia({ className, ...props }) { return _jsx("div", { className: cx("card-media", className), ...props }); }
+Card.Media = CardMedia;
+export function Stack({ gap, align, className, ...props }) { return _jsx("div", { className: cx("stack", gap && gap !== "normal" && `stack-gap-${gap}`, align && align !== "stretch" && `stack-align-${align}`, className), ...props }); }
+export function Cluster({ gap, align, justify, wrap, className, ...props }) { return _jsx("div", { className: cx("cluster", gap && gap !== "normal" && `cluster-gap-${gap}`, align && align !== "center" && `cluster-align-${align}`, justify && justify !== "start" && `cluster-justify-${justify}`, wrap === false && "cluster-nowrap", className), ...props }); }
+export function Grid({ gap, min, columns, className, style, ...props }) {
+    const vars = min != null || columns != null
+        ? { ...(min != null ? { "--grid-min": min } : {}), ...(columns != null ? { "--grid-cols": String(columns) } : {}), ...style }
+        : style;
+    return _jsx("div", { className: cx("grid", gap && gap !== "normal" && `grid-gap-${gap}`, columns != null && "grid-fixed", className), style: vars, ...props });
 }
-export function Stack({ className, ...props }) { return _jsx("div", { className: cx("stack", className), ...props }); }
-// SEPARATOR — a régua entre coisas. Faltava: a Aurea só tinha `.prose hr` (preso à prosa) e o
-// `ToolbarSeparator` (preso ao Toolbar). Untitled UI precisa dela para a variante de seções da
-// lateral, e ela serve em todo lugar.
-//
-// É `<hr>`, e isso é decisão medida em 18/08/2026. O motor que já usamos ENTREGA um `Separator` —
-// mas ele é `'use client'`, usa hook (`useRenderElement`) e o que produz são DOIS atributos:
-// `role="separator"` e `aria-orientation`. Importá-lo arrastaria este módulo para o lado cliente,
-// que é o defeito da ADR-0026 (o `Card` custou 118,5 KB atravessando essa fronteira). Aqui a regra
-// "se o motor entrega, não escrevemos" (BUILDING.md passo 2) PERDE para a fronteira — e o registro
-// existe para a próxima sessão não "corrigir" isto de volta.
-//
-// `<hr>` nativo JÁ TEM `role="separator"` implícito, então escrever o papel seria ARIA redundante —
-// e o APG avisa que ARIA a mais é pior que ARIA nenhuma. O papel `separator` também tem orientação
-// HORIZONTAL por padrão: por isso `aria-orientation` só aparece quando é vertical.
-//
-// O que NÃO entrou, pelo passo 5: as três tonalidades do HeroUI (`secondary`/`tertiary`) — a Aurea
-// tem um `--border` e inventar escala de tom aqui seria copiar o sistema de token deles. E o
-// separador COM RÓTULO no meio ("or", uma data numa conversa), que eles têm em
-// `separator__container` + `__line` + `__content`: é outra estrutura (o `<hr>` não carrega texto),
-// ninguém pediu ainda, e fica registrado aqui como o próximo degrau se alguém precisar.
-// O `Separator` SAIU daqui em 29/08/2026, e a razão é o gate que provou a decisão errada.
-// Ele era um <hr> com orientação estática, e o `comportamental.multi-motor.spec.ts` — a prova
-// das cinco capacidades que o Victor especificou no G-AXIS-06 — cobra dele `data-orientation`
-// e `aria-orientation` RESOLVIDOS por largura de contêiner. Isso é eixo COMPORTAMENTAL: não
-// sai de classe CSS, precisa de runtime, e runtime precisa de hook. Um componente que precisa
-// de hook é de cliente, e é isso que a ADR-0026 manda — ela separa quem PRECISA do cliente de
-// quem só caiu num módulo com a diretiva. Mora no `layout-client.tsx`.
-export function Cluster({ className, ...props }) { return _jsx("div", { className: cx("cluster", className), ...props }); }
-export function Grid({ className, ...props }) { return _jsx("div", { className: cx("grid", className), ...props }); }
 // ── Data Display ─────────────────────────────────────────────────────────────────────────────
 export function KPI({ label, value, trend, className, ...props }) { return _jsxs(Card, { className: cx("kpi", className), ...props, children: [_jsx("span", { className: "muted", children: label }), _jsx("strong", { children: value }), trend && _jsx("small", { children: trend })] }); }
 export function DataList({ items }) { return _jsx("dl", { className: "data-list", children: items.map((i, n) => _jsxs(React.Fragment, { children: [_jsx("dt", { children: i.term }), _jsx("dd", { children: i.value })] }, n)) }); }
@@ -121,7 +105,10 @@ export function LogStream({ lines }) { return _jsx("div", { className: "log-stre
 // ── Media ────────────────────────────────────────────────────────────────────────────────────
 export function MediaPlayerShell({ children, className, ...props }) { return _jsx("div", { className: cx("media-player", className), ...props, children: children }); }
 // ── Navigation ───────────────────────────────────────────────────────────────────────────────
-export function Topbar({ variant = "floating", brand, children, className, ...props }) { return _jsxs("header", { className: cx("topbar", `topbar-${variant}`, className), ...props, children: [brand != null && _jsx("div", { className: "brand", children: brand }), children] }); }
+// B-07 (24/09/2026): `divider` põe a linha de baixo na `flush`. Ela é fundo igual ao da página e
+// gruda no topo; sem linha, o conteúdo passa por baixo dela e nada diz onde a barra acaba. Só na
+// `flush`: a `floating` e a `pill` são caixas com borda própria.
+export function Topbar({ variant = "floating", divider, brand, children, className, ...props }) { return _jsxs("header", { className: cx("topbar", `topbar-${variant}`, divider && variant === "flush" && "topbar-divider", className), ...props, children: [brand != null && _jsx("div", { className: "brand", children: brand }), children] }); }
 // ── System / interno ─────────────────────────────────────────────────────────────────────────
 // 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
@@ -148,12 +135,15 @@ function ladoDoAdorno(no) {
     const p = no.props;
     return no.type === InputGroupAddon ? (p.side ?? "start") : null;
 }
-export function InputGroup({ className, children, ...props }) {
+// A-08 (24/09/2026): `width` tira o grupo dos 100% — `"20rem"` para uma medida, `"auto"` para o
+// tamanho do conteúdo. Sem ela, 100% como sempre. Com ela, o grupo também deixa de crescer numa
+// fila (`flex:none`): o `flex:1` que as barras dão a ele desfaria a medida pedida.
+export function InputGroup({ className, children, width, style, ...props }) {
     const filhos = React.Children.toArray(children);
     const inicio = filhos.filter(f => ladoDoAdorno(f) === "start");
     const fim = filhos.filter(f => ladoDoAdorno(f) === "end");
     const meio = filhos.filter(f => ladoDoAdorno(f) === null);
-    return _jsx("div", { className: cx("input-group", className), ...props, children: [...inicio, ...meio, ...fim] });
+    return _jsx("div", { className: cx("input-group", className), style: width != null ? { inlineSize: width, flex: "none", ...style } : style, ...props, children: [...inicio, ...meio, ...fim] });
 }
 // `layout` é responsivo, e a triagem que o autorizou está no `G-AXIS-07`: com o adorno em linha,
 // a 200px de caixa sobram 48% da largura para o campo; com ele em faixa, 99%. Não é preferência

package/dist/overlays.d.ts

@@ -1,12 +1,15 @@
 import React, { type ReactNode, type ReactElement } from "react";
 import { type Responsive } from "./pure.js";
 import { type IconName } from "./system.js";
-export declare function Dialog({ open, title, children, footer, onClose }: {
+export type DialogSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+export declare function Dialog({ open, title, children, footer, onClose, size, dismissible }: {
     open: boolean;
     title: ReactNode;
     children: ReactNode;
     footer?: ReactNode;
     onClose: () => void;
+    size?: DialogSize;
+    dismissible?: boolean;
 }): React.JSX.Element;
 export declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel }: {
     open: boolean;

package/dist/overlays.js

@@ -16,8 +16,12 @@ 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 }) { const s = useAureaStrings(); const portal = usePortalContainer(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
-        onClose(); }, children: _jsxs(BaseDialog.Portal, { container: portal, children: [_jsx(BaseDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseDialog.Popup, { className: "dialog", children: [_jsxs("header", { children: [_jsx(BaseDialog.Title, { render: _jsx("h2", {}), children: title }), _jsx(BaseDialog.Close, { className: "btn btn-ghost btn-icon", "aria-label": s.close, children: _jsx(Icon, { name: "close" }) })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("footer", { children: footer })] })] }) }); }
+export function Dialog({ open, title, children, footer, onClose, size = "md", dismissible = true }) {
+    const s = useAureaStrings();
+    const portal = usePortalContainer();
+    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: "close" }) })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("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
 // AlertDialog.Root as props `modal` e `disablePointerDismissal` (medido no d.ts de 1.6.0), ou

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.8.14",
+  "version": "0.10.0",
   "description": "React components for Aurea UDS. Import @aurea-uds/fonts/css and @aurea-uds/core/css alongside.",
   "keywords": [
     "aurea",