@aurea-uds/react 0.8.13 → 0.9.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

@@ -23,11 +23,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 +79,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 +92,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 +110,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

@@ -162,7 +162,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 +253,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 +267,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

@@ -12,6 +12,8 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     sidebarVariant?: SidebarVariant;
     sidebarCollapsed?: boolean;
 }): 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

@@ -121,31 +121,11 @@ export function AppShell({ brand, navigation, navItems, currentNavId, navLabel,
     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 })] });
 }
-// ── 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,9 @@ 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";
+};
 export type CardProps = CardBase & ({
     variant?: "base" | "raised" | "inset" | "selected" | "danger";
     render?: ReactElement;
@@ -12,10 +14,42 @@ 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, className, render, ...props }: CardProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+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;
@@ -38,6 +72,7 @@ export declare function Prose({ className, ...props }: HTMLAttributes<HTMLDivEle
 export type BadgeEmphasis = "soft" | "solid" | "outline";
 export type BadgeSize = "xs" | "sm" | "md" | "lg";
 export type BadgePlacement = "top-end" | "top-start" | "bottom-end" | "bottom-start";
+export type BadgeFit = "auto" | "content";
 export declare function formatBadgeCount(count: number, max?: number): string;
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
@@ -55,6 +90,8 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
     count?: number;
     max?: number;
     showZero?: boolean;
+    /** `content`: do tamanho do texto mesmo numa coluna. Padrão `auto`, que segue o recipiente. */
+    fit?: BadgeFit;
     /** Liga o modo SOBREPOSTO e escolhe o canto. `children` passa a ser o que se decora. */
     anchor?: BadgePlacement;
     /** `circle` recolhe o canto em 14% — é o `overlap` da MUI, para avatar redondo. */
@@ -65,7 +102,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
      *  Nome da MUI, e não `content`: 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, anchor, anchorShape, invisible, badgeContent, children, className, ...props }: BadgeProps): React.JSX.Element;
+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 Progress({ value, label }: {
     value: number;
     label?: string;
@@ -120,7 +157,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,17 @@ 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", className, render, ...props }) {
+    return fundirRender(render, { className: cx("card", variant !== "base" && `card-${variant}`, padding === "none" && "card-flush", className), ...props });
+}
+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)) }); }
@@ -83,12 +61,12 @@ export function Prose({ className, ...props }) { return _jsx("div", { className:
 // `max` com `+` é o idioma universal do contador (MUI, Ant, Material 3). 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, anchor, anchorShape = "square", invisible, badgeContent, children, className, ...props }) {
+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 }) {
     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.
     const soPonto = !!dot && miolo == null;
-    const chip = _jsxs("span", { className: cx("badge", variant !== "neutral" && `badge-${variant}`, emphasis !== "soft" && `badge-${emphasis}`, size !== "md" && `badge-${size}`, anchor && `badge-overlay badge-at-${anchor}`, anchor && anchorShape === "circle" && "badge-on-circle", anchor && soPonto && "badge-is-dot", className), ...props, children: [dot && !soPonto && _jsx("span", { className: "badge-dot" }), image && _jsx("img", { className: "badge-image", src: image, alt: imageAlt ?? "" }), leading, miolo, trailing] });
+    const chip = _jsxs("span", { className: cx("badge", variant !== "neutral" && `badge-${variant}`, emphasis !== "soft" && `badge-${emphasis}`, size !== "md" && `badge-${size}`, fit === "content" && !anchor && "badge-fit", anchor && `badge-overlay badge-at-${anchor}`, anchor && anchorShape === "circle" && "badge-on-circle", anchor && soPonto && "badge-is-dot", className), ...props, children: [dot && !soPonto && _jsx("span", { className: "badge-dot" }), image && _jsx("img", { className: "badge-image", src: image, alt: imageAlt ?? "" }), leading, miolo, trailing] });
     if (!anchor)
         return chip;
     // Some em zero por padrão, como a MUI: caixa de entrada zerada não merece um "0" no canto.
@@ -148,12 +126,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.13",
+  "version": "0.9.0",
   "description": "React components for Aurea UDS. Import @aurea-uds/fonts/css and @aurea-uds/core/css alongside.",
   "keywords": [
     "aurea",