@aurea-uds/react 0.5.0 → 0.7.0

package/dist/actions.d.ts

@@ -1,10 +1,24 @@
 import React, { type ButtonHTMLAttributes, type HTMLAttributes, type RefAttributes } from "react";
+import { type Orientation, type Responsive } from "./pure.js";
 import { type IconName } from "./system.js";
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger" | "danger-outline" | "danger-ghost" | "link" | "link-primary" | "link-danger" | "nav";
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "primary-outline" | "primary-ghost" | "danger" | "danger-outline" | "danger-ghost" | "link" | "link-primary" | "link-danger" | "nav";
+export type ButtonAppearance = "solid" | "outline" | "ghost" | "link" | "nav";
+export type ButtonTone = "neutral" | "brand" | "danger" | "success" | "warning" | "info";
 export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** Resolve os dois eixos (ou o atalho) na classe que o core pinta. Exportada porque o teste
+ *  cobra a matriz inteira, e porque quem monta um botão à mão precisa da mesma conta.
+ *
+ *  Não há degradação: toda célula dos dois eixos tem regra própria no core. A versão de
+ *  21/08 rebaixava `solid` de success/info para `outline` porque faltava o par de token — o
+ *  Victor recusou a degradação silenciosa e mandou consertar a infraestrutura, que é o que
+ *  `--success`/`--success-foreground` e os irmãos são. `outline` voltou a ser só uma aparência
+ *  que se pede, nunca o que sobra quando a nossa paleta não dá conta. */
+export declare function buttonSkin(variant?: ButtonVariant, appearance?: ButtonAppearance, tone?: ButtonTone): string;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, RefAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
-    size?: ComponentSize;
+    appearance?: ButtonAppearance;
+    tone?: ButtonTone;
+    size?: Responsive<ComponentSize>;
     loading?: boolean;
     leadingIcon?: IconName;
     trailingIcon?: IconName;
@@ -29,9 +43,11 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "
 interface ToggleBase {
     pressed?: boolean;
     defaultPressed?: boolean;
-    onPressedChange?: (pressed: boolean) => void;
+    onPressedChange?: (pressed: boolean) => void; /** O que identifica este toggle DENTRO de um ToggleGroup — sem ele o grupo não sabe qual botão
+     *  mudou, e a composição fica bonita e morta. Solto, não faz diferença nenhuma. */
+    value?: string;
     icon?: IconName;
-    size?: Extract<ComponentSize, "sm" | "md" | "lg">;
+    size?: Responsive<Extract<ComponentSize, "sm" | "md" | "lg">>;
     disabled?: boolean;
     id?: string;
     className?: string;
@@ -44,17 +60,18 @@ export type ToggleProps = ToggleBase & ({
     children?: never;
     label: string;
 });
-export declare function Toggle({ pressed, defaultPressed, onPressedChange, icon, label, size, disabled, id, className, children }: ToggleProps): React.JSX.Element;
+export declare function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size, disabled, id, className, children }: ToggleProps): React.JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, "children"> {
     label: string;
     icon: IconName;
 }
 export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
-export declare function ButtonGroup({ label, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function ButtonGroup({ label, orientation, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     label?: string;
+    orientation?: Responsive<Orientation>;
 }): React.JSX.Element;
 export declare function Toolbar({ orientation, label, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
-    orientation?: "horizontal" | "vertical";
+    orientation?: Responsive<Orientation>;
     label?: string;
 }): React.JSX.Element;
 export declare function ToolbarGroup({ label, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
@@ -62,4 +79,15 @@ export declare function ToolbarGroup({ label, className, ...props }: HTMLAttribu
 }): React.JSX.Element;
 export declare function ToolbarSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+export declare function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children }: {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    multiple?: boolean;
+    orientation?: Responsive<Orientation>;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
 export {};

package/dist/actions.js

@@ -3,17 +3,57 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
-import React, { forwardRef } from "react";
+import React, { useRef, forwardRef } from "react";
+import { classesResponsivas, ehResponsivo, peleDoEixo, soOValor, valorBase } from "./pure.js";
+import { useValorResponsivo } from "./responsivo-runtime.js";
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import { cx, useAureaStrings } from "./internal.js";
 import { Kbd } from "./markup.js";
 import { Icon } from "./system.js";
+// O dicionário que desachata o enum. É a ÚNICA fonte da correspondência: o gate do
+// `validate.py` lê daqui para provar que todo par ou tem regra no core ou está declarado
+// ausente com motivo, e a ficha do registry declara os mesmos dois eixos.
+const EIXOS = {
+    primary: ["solid", "brand"], secondary: ["solid", "neutral"],
+    outline: ["outline", "neutral"], ghost: ["ghost", "neutral"],
+    "primary-outline": ["outline", "brand"], "primary-ghost": ["ghost", "brand"],
+    danger: ["solid", "danger"], "danger-outline": ["outline", "danger"], "danger-ghost": ["ghost", "danger"],
+    link: ["link", "neutral"], "link-primary": ["link", "brand"], "link-danger": ["link", "danger"],
+    nav: ["nav", "neutral"]
+};
+// caminho de volta: par → nome antigo. Existir aqui significa "o core já pinta esta célula com
+// uma classe própria", e é o que garante que NENHUMA baseline se mexe: `appearance="outline"`
+// + `tone="danger"` emite `.btn-danger-outline`, o mesmo DOM de sempre.
+const CLASSE_ANTIGA = new Map(Object.entries(EIXOS)
+    .map(([v, [a, t]]) => [`${a}/${t}`, v]));
+/** Resolve os dois eixos (ou o atalho) na classe que o core pinta. Exportada porque o teste
+ *  cobra a matriz inteira, e porque quem monta um botão à mão precisa da mesma conta.
+ *
+ *  Não há degradação: toda célula dos dois eixos tem regra própria no core. A versão de
+ *  21/08 rebaixava `solid` de success/info para `outline` porque faltava o par de token — o
+ *  Victor recusou a degradação silenciosa e mandou consertar a infraestrutura, que é o que
+ *  `--success`/`--success-foreground` e os irmãos são. `outline` voltou a ser só uma aparência
+ *  que se pede, nunca o que sobra quando a nossa paleta não dá conta. */
+export function buttonSkin(variant, appearance, tone) {
+    const [a0, t0] = EIXOS[variant ?? "secondary"];
+    const a = appearance ?? a0, t = tone ?? t0;
+    const antiga = CLASSE_ANTIGA.get(`${a}/${t}`);
+    return antiga ? `btn-${antiga}` : cx(`btn-${a}`, `btn-tone-${t}`);
+}
 // 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 = "secondary", size = "md", loading, leadingIcon, trailingIcon, className, children, disabled, type = "button", href, fullWidth, pressed, kbd, onClick, onClickCapture, "aria-disabled": ariaDisabled, ...props }, ref) {
-    const cls = cx("btn", `btn-${variant}`, size !== "md" && `btn-${size}`, fullWidth && "btn-block", className);
+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) {
+    // 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
+    // (`size-*` + `vp-*:`/`ct-*:`), que existe uma vez no core para todo o sistema.
+    // 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);
     // 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
@@ -67,7 +107,7 @@ function temConteudoVisivel(children) {
 // entre os estados**. Se o texto vira "Mute"/"Unmute" ou "Play"/"Pause", não é toggle — é
 // botão de ação, porque quem lê tela ouve o rótulo NOVO e o estado ao mesmo tempo e não sabe
 // se o botão descreve o que é ou o que fará.
-export function Toggle({ pressed, defaultPressed, onPressedChange, icon, label, size = "md", disabled, id, className, children }) {
+export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size, disabled, id, className, children }) {
     // O tipo barra o consumidor TypeScript; este aviso barra o de JavaScript, que não tem tipo nenhum.
     // Sem gate por NODE_ENV de propósito: o `dist` é saída de `tsc`, então `process` não existe no
     // navegador e a referência quebraria o render — e um controle sem nome merece aparecer em produção
@@ -78,16 +118,45 @@ export function Toggle({ pressed, defaultPressed, onPressedChange, icon, label,
     const rotuloVisivel = typeof label === "string" && label.trim().length > 0;
     if (!textoVisivel && !rotuloVisivel)
         console.error("Aurea: <Toggle> sem `children` visível e sem `label` não tem nome acessível — quem usa leitor de tela encontra um botão anônimo. Passe `label` quando o toggle for só ícone.");
-    return _jsxs(BaseToggle, { id: id, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), className: cx("btn", "btn-ghost", size !== "md" && `btn-${size}`, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
+    return _jsxs(BaseToggle, { id: id, value: value, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: soOValor(onPressedChange), "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), className: cx("btn", "btn-ghost", size !== "md" && `btn-${size}`, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
 }
 // default ghost (não secondary): um ícone-ação solto — hambúrguer, tema, fechar — é sem
 // caixa por convenção (pedido do Victor: hambúrguer sem borda). Quem quer a caixa passa
 // variant. Alinha o React ao HTML dos docs, onde .btn-icon já é transparente.
 export const IconButton = forwardRef(function IconButton({ label, icon, variant = "ghost", className, ...props }, ref) { return _jsx(Button, { ref: ref, variant: variant, className: cx("btn-icon", className), "aria-label": label, ...props, children: _jsx(Icon, { name: icon }) }); });
 // ButtonGroup: agrupamento semântico. Sem roving tabindex — cada botão continua tabulável (use Toolbar para roving).
-export function ButtonGroup({ label, className, ...props }) { const s = useAureaStrings(); return _jsx("div", { role: "group", "aria-label": label ?? s.optionsLabel, className: cx("btn-group", className), ...props }); }
+// `orientation` (G-AXIS-01) muda só o EIXO do layout, não a semântica: `role="group"` não tem
+// noção de direção, e por isso — ao contrário do `Toolbar` e do `ToggleGroup`, que navegam por
+// seta e precisam saber para que lado a seta anda — aqui não há `aria-orientation`. Anunciar
+// orientação num grupo que não navega seria prometer teclado que não existe.
+export function ButtonGroup({ label, orientation, className, ...props }) { const s = useAureaStrings(); return _jsx("div", { role: "group", "aria-label": label ?? s.optionsLabel, className: cx("btn-group", peleDoEixo("btn-group", orientation, "horizontal", "btn-group"), className), ...props }); }
 // Toolbar: roving tabindex (setas navegam, Tab entra/sai) via Base UI.
-export function Toolbar({ orientation = "horizontal", label, className, ...props }) { const s = useAureaStrings(); return _jsx(BaseToolbar.Root, { orientation: orientation, "aria-label": label ?? s.toolbarLabel, className: cx("toolbar", className), ...props }); }
+// G-AXIS-06 — o valor responsivo RESOLVIDO é a única fonte de verdade: ele vai para o motor, o
+// motor publica `data-orientation`/`aria-orientation` e ajusta o teclado, e a pele reage ao
+// atributo publicado. Nada de o CSS decidir a orientação por breakpoint enquanto o atributo
+// diz outra coisa — seriam duas fontes de verdade e uma janela em que visual e comportamento
+// divergem. Ver `decisions/0019-css-first-para-apresentacao-runtime-para-semantica.md`.
+export function Toolbar({ orientation, label, className, ...props }) {
+    const s = useAureaStrings();
+    const ancora = useRef(null);
+    const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
+    return _jsx(BaseToolbar.Root, { ref: ancora, orientation: resolvida, "aria-label": label ?? s.toolbarLabel, className: cx("toolbar", className), ...props });
+}
 export function ToolbarGroup({ label, className, ...props }) { return _jsx(BaseToolbar.Group, { "aria-label": label, className: cx("toolbar-group", className), ...props }); }
 export function ToolbarSeparator({ className, ...props }) { return _jsx(BaseToolbar.Separator, { className: cx("toolbar-sep", className), ...props }); }
 export const ToolbarButton = forwardRef(function ToolbarButton({ variant = "ghost", ...props }, ref) { return _jsx(BaseToolbar.Button, { ref: ref, disabled: props.disabled, render: _jsx(Button, { variant: variant, ...props }) }); });
+// TOGGLE GROUP — vários Toggle com estado compartilhado e navegação por seta entre eles.
+//
+// Não é o SegmentedControl, e confundir os dois constrói a coisa errada com o nome certo: o
+// `SegmentedControl` é escolha ÚNICA e obrigatória entre alternativas de uma mesma dimensão
+// ("dia / semana / mês") e se parece com uma cápsula; aqui cada botão liga e desliga por conta
+// própria, `multiple` permite vários ao mesmo tempo, e zero selecionado é estado legítimo. É a
+// barra de formatação de um editor, não um filtro de período.
+//
+// O motor dá o roving tabindex, o `loopFocus` e o contrato de pressionado; a pele é a do
+// `.btn-group`, porque um grupo de botões é o que isto é.
+export function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children }) {
+    const ancora = useRef(null);
+    const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
+    return _jsx(BaseToggleGroup, { ref: ancora, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), multiple: multiple, orientation: resolvida, disabled: disabled, "aria-label": label, className: cx("toggle-group", className), children: children });
+}

package/dist/communication.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 import React from "react";
 import { cx, useAureaStrings } from "./internal.js";
+import { InputGroup, InputGroupAddon } from "./inputs.js";
 import { Icon } from "./system.js";
 import { IconButton } from "./actions.js";
 import { Avatar } from "./identity.js";
@@ -13,7 +14,7 @@ export function MessageList({ messages, label, className }) {
     const s = useAureaStrings();
     return _jsx("div", { className: cx("stack", className), role: "log", "aria-live": "polite", "aria-label": label ?? s.chatLabel, children: messages.map(m => _jsxs("div", { className: "message", children: [m.avatar ? _jsx(Avatar, { src: m.avatar.src, fallback: m.avatar.fallback }) : _jsx("span", {}), _jsxs("div", { className: "message-bubble", children: [(m.author || m.time) && _jsxs("div", { className: "label", children: [_jsx("span", { children: m.author }), m.time && _jsx("span", { className: "hint", children: m.time })] }), m.body, m.status && _jsx("div", { className: "message-status", children: _jsxs(Badge, { variant: m.status.variant, children: [_jsx("i", { className: "status-dot" }), m.status.label] }) })] })] }, m.id)) });
 }
-// Composer: <form> sobre .input-wrap + .input; Enter envia (submit nativo) e limpa.
+// Composer: <form> sobre InputGroup + .input; Enter envia (submit nativo) e limpa.
 // Texto é estado interno (não controlado — controlar de fora só com demanda real,
 // precedente MediaPlayer/FileInput). Não envia texto vazio/só-espaço; o botão de
 // envio desabilita enquanto vazio. O input sempre tem nome acessível (aria-label),
@@ -24,5 +25,5 @@ export function MessageComposer({ onSend, placeholder, label, icon, sendLabel, d
     const [text, setText] = React.useState("");
     const submit = (e) => { e.preventDefault(); const t = text.trim(); if (!t)
         return; onSend(t); setText(""); };
-    return _jsxs("form", { className: cx("message-composer", className), onSubmit: submit, children: [_jsxs("div", { className: "input-wrap", children: [icon && _jsx(Icon, { name: icon }), _jsx("input", { className: "input", value: text, disabled: disabled, placeholder: placeholder, "aria-label": label ?? s.chatMessage, onChange: e => setText(e.target.value) })] }), _jsx(IconButton, { type: "submit", variant: "primary", icon: "send", label: sendLabel ?? s.chatSend, disabled: disabled || !text.trim() })] });
+    return _jsxs("form", { className: cx("message-composer", className), onSubmit: submit, children: [_jsxs(InputGroup, { children: [icon && _jsx(InputGroupAddon, { children: _jsx(Icon, { name: icon }) }), _jsx("input", { className: "input", value: text, disabled: disabled, placeholder: placeholder, "aria-label": label ?? s.chatMessage, onChange: e => setText(e.target.value) })] }), _jsx(IconButton, { type: "submit", variant: "primary", icon: "send", label: sendLabel ?? s.chatSend, disabled: disabled || !text.trim() })] });
 }

package/dist/data-grid.js

@@ -36,11 +36,35 @@ import { IconButton } from "./actions.js";
 // porque é só o que existe em memória; para seleção que atravessa páginas, use
 // `rowSelection`/`onRowSelectionChange`, que são ids.
 // A11y: aria-sort fica SÓ no th ordenado (padrão APG) e o cabeçalho ordenável é
-// um <button> de verdade; a linha selecionada usa data-selected apenas para
-// estilo — aria-selected é inválido em role=table, o estado acessível é o
-// próprio checkbox. A paginação reusa o componente Pagination.
+// um <button> de verdade. A paginação reusa o componente Pagination.
+//
+// G-A11Y-07 — ELE É UM `grid`, E ATÉ 28/08/2026 SÓ DIZIA QUE ERA.
+//
+// A ficha declarava `role: "grid"`, `apg: "grid"` e quatro setas. Medido no navegador em
+// 27/08, as quatro eram INERTES: `<table>` puro, nenhum `onKeyDown`, nenhum `tabIndex` em
+// célula. Prometer acessibilidade que não existe é pior que não ter — quem lê o contrato para
+// decidir se adota confia nele. A ficha foi corrigida naquele dia para o que se media
+// (`role: "table"`); hoje o componente passa a merecer o que prometia.
+//
+// POR QUE `grid` E NÃO `table`, agora de verdade: a APG manda usar `grid` quando as células
+// contêm widgets operáveis, e as deste contêm — cabeçalho ordenável é `<button>`, seleção é
+// `<input type=checkbox>`. E vem de brinde a correção de uma limitação que o comentário antigo
+// deste arquivo registrava como fato da vida: **`aria-selected` é inválido em `role=table`, e é
+// VÁLIDO em `role=grid`**. A seleção deixou de ser só `data-selected` (estilo) e passou a ser
+// estado ACESSÍVEL na linha, que é o que o leitor de tela anuncia.
+//
+// O MODELO DE FOCO é o da APG: um tab stop para a grade inteira (roving tabindex pelas
+// CÉLULAS, cabeçalho incluído), setas navegam, `Enter`/`F2` entram no widget da célula e
+// `Escape` volta para a célula. Duas teclas para marcar um checkbox é o preço de a grade ter
+// navegação — e é exatamente o que o exemplo "Data Grid" da APG faz.
+//
+// A conta de posição é feita contra o DOM (`table.rows[r].cells[c]`), não contra os dados: a
+// linha de "vazio" tem uma célula só com `colSpan`, e qualquer aritmética baseada no número de
+// colunas dos dados sairia da caixa ali. Quem sabe quantas células a linha tem é a linha.
 function GridCheck({ label, indeterminate, ...props }) {
-    return _jsxs("label", { className: "checkbox", children: [_jsx("input", { type: "checkbox", ref: el => { if (el)
+    // `tabIndex={-1}`: numa grade APG a parada de Tab é UMA, a grade inteira. O checkbox continua
+    // focável por programa — é o que o `Enter`/`F2` da célula faz —, e o `Space` marca dali.
+    return _jsxs("label", { className: "checkbox", children: [_jsx("input", { type: "checkbox", tabIndex: -1, ref: el => { if (el)
                     el.indeterminate = !!indeterminate; }, ...props }), _jsx("span", { className: "control-mark" }), _jsx("span", { className: "sr-only", children: label })] });
 }
 // A faceta guarda um ARRAY de valores e a célula é ESCALAR — e nenhum filterFn de
@@ -160,6 +184,117 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
         ...(facetIds.size ? { getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues() } : {}),
     });
     const rows = table.getRowModel().rows;
+    // O TAB STOP ROVING, e o `clamp` não é zelo: filtrar, ordenar ou paginar troca as linhas sob
+    // o foco. Sem ele a grade inteira ficaria `tabIndex=-1` e sumiria da ordem do Tab — é o mesmo
+    // defeito que o `TreeView` pagou (MÉDIO 1 da auditoria) e resolve com `effectiveActive`.
+    const grade = React.useRef(null);
+    const [foco, setFoco] = React.useState({ r: 0, c: 0 });
+    const nColunas = table.getVisibleLeafColumns().length;
+    // A LINHA DE "VAZIO" CONTA, e conta com UMA coluna só.
+    //
+    // O defeito que isto corrige foi MEDIDO, e não é o que eu tinha escrito aqui na primeira
+    // versão. Eu havia afirmado que sem o clamp a grade "sumia da ordem do Tab"; a medição
+    // desmentiu — ela continua alcançável. O que quebra é mais sutil e mais chato: com o `clamp`
+    // de linha dizendo "só existe o cabeçalho" enquanto o DOM tem a linha do vazio, **a parada de
+    // Tab fica numa célula e o foco em outra**. Filtrando até não sobrar nada e descendo para a
+    // linha do vazio, o DOM ficava assim:
+    //
+    //     sem o clamp   TH:0  TH:-1  TD:-1   ← foco no TD, parada de Tab no TH
+    //     com o clamp   TH:-1 TH:-1  TD:0    ← a parada acompanha o foco
+    //
+    // Ou seja: sair da grade e voltar devolvia a pessoa ao cabeçalho, e não a onde ela estava. É
+    // a invariante do roving tabindex — a célula focada É a parada — e o teste que a cobra assere
+    // exatamente isso, porque contar quantas células têm `tabindex=0` passava verde com o defeito.
+    const nLinhas = (rows.length || 1) + 1; // +1: a linha de cabeçalho é navegável
+    const r = Math.min(foco.r, nLinhas - 1);
+    const colunasNaLinha = rows.length === 0 && r === 1 ? 1 : nColunas;
+    const eff = { r, c: Math.min(foco.c, colunasNaLinha - 1) };
+    // Mover é reposicionar NO DOM e focar. `setFoco` só existe para o `tabIndex` da próxima
+    // renderização; quem devolve o foco de verdade é o `.focus()` aqui.
+    const irPara = (r, c) => {
+        const linhas = grade.current?.rows;
+        if (!linhas?.length)
+            return;
+        const nr = Math.max(0, Math.min(r, linhas.length - 1));
+        const nc = Math.max(0, Math.min(c, linhas[nr].cells.length - 1));
+        setFoco({ r: nr, c: nc });
+        linhas[nr].cells[nc].focus();
+    };
+    const teclado = (e) => {
+        const alvo = e.target;
+        const celula = alvo.closest("th,td");
+        if (!celula || !grade.current?.contains(celula))
+            return;
+        const r = celula.parentElement.rowIndex, c = celula.cellIndex;
+        // DENTRO de um widget da célula, o teclado é DELE. Interceptar as setas aqui quebraria o
+        // campo de texto que um dia entre numa célula, e é o defeito que o probe de teclado pegou
+        // no `Space` dos bancos com <input> (`digitaTexto`).
+        const dentro = alvo !== celula;
+        if (dentro) {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                irPara(r, c);
+            }
+            return;
+        }
+        // O SALTO DE PÁGINA é de 10 linhas e é ARBITRÁRIO com aval: a APG diz "um número de linhas
+        // definido pelo autor". 10 é o que cabe numa tela sem passar do fim na maioria das grades.
+        const salto = 10;
+        switch (e.key) {
+            case "ArrowRight":
+                e.preventDefault();
+                irPara(r, c + 1);
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                irPara(r, c - 1);
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                irPara(r + 1, c);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                irPara(r - 1, c);
+                break;
+            case "PageDown":
+                e.preventDefault();
+                irPara(r + salto, c);
+                break;
+            case "PageUp":
+                e.preventDefault();
+                irPara(r - salto, c);
+                break;
+            case "Home":
+                e.preventDefault();
+                irPara(e.ctrlKey ? 0 : r, 0);
+                break;
+            case "End":
+                e.preventDefault();
+                irPara(e.ctrlKey ? (grade.current.rows.length - 1) : r, nColunas - 1);
+                break;
+            // ENTRAR NA CÉLULA. Se ela não tem widget, não há o que fazer e a tecla segue seu caminho
+            // (um `Enter` numa célula de texto não deve engolir nada).
+            case "Enter":
+            case "F2": {
+                const w = celula.querySelector("button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled])");
+                if (w) {
+                    e.preventDefault();
+                    w.focus();
+                }
+                break;
+            }
+        }
+    };
+    // O FOCO QUE CHEGA POR CLIQUE OU POR TAB também reposiciona o roving. Sem isto, sair da grade
+    // e voltar devolveria o foco à célula ANTIGA, e clicar numa célula deixaria o tab stop noutra.
+    const focoEntrou = (e) => {
+        const celula = e.target.closest("th,td");
+        if (celula && grade.current?.contains(celula)) {
+            setFoco({ r: celula.parentElement.rowIndex, c: celula.cellIndex });
+        }
+    };
+    const rove = (r, c) => eff.r === r && eff.c === c ? 0 : -1;
     const sortIcon = (dir) => dir === "asc" ? "chevron--sort--up" : dir === "desc" ? "chevron--sort--down" : "chevron--sort";
     // F5: a barra de lote. Duas referências independentes (Activepieces e Kaneo) chegam
     // à MESMA anatomia — contagem, divisória, ações, e um jeito de limpar —, então é
@@ -231,10 +366,15 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
                 // ele cabe é a largura da GRADE, não a da janela: por isso `@container`, no
                 // precedente do MediaPlayer.
                 const linhaAberta = detailRowId != null ? table.getRowModel().rows.find(r => r.id === detailRowId) : undefined;
-                const tabela = (_jsx("div", { className: "table-wrap", role: "region", "aria-label": label ?? s.tableLabel, tabIndex: 0, "aria-busy": carregando || undefined, children: _jsxs("table", { children: [_jsxs("thead", { children: [table.getHeaderGroups().map(hg => _jsx("tr", { children: hg.headers.map(h => {
+                // A REGIÃO DE ROLAGEM PERDEU O `tabIndex={0}` que o `Table` mantém, e a diferença é o
+                // motivo de a regra existir: `scrollable-region-focusable` do axe cobra que um contêiner
+                // rolável tenha COMO ser alcançado pelo teclado, e a grade agora tem células focáveis
+                // dentro — inclusive a de "vazio". Manter o `tabIndex` daria uma parada de Tab a mais
+                // ANTES da grade, e a APG pede que a grade inteira seja UMA parada.
+                const tabela = (_jsx("div", { className: "table-wrap", role: "region", "aria-label": label ?? s.tableLabel, "aria-busy": carregando || undefined, children: _jsxs("table", { ref: grade, role: "grid", "aria-label": label ?? s.tableLabel, onKeyDown: teclado, onFocus: focoEntrou, "aria-rowcount": pageSize != null ? table.getPreFilteredRowModel().rows.length + 1 : undefined, "aria-colcount": pageSize != null ? nColunas : undefined, children: [_jsxs("thead", { children: [table.getHeaderGroups().map(hg => _jsx("tr", { children: hg.headers.map((h, ci) => {
                                             const dir = h.column.getIsSorted();
-                                            return _jsxs("th", { colSpan: h.colSpan, className: h.column.id === "select" ? "datagrid-selcol" : undefined, "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : undefined, style: resizableColumns ? { width: h.getSize() } : undefined, children: [h.isPlaceholder ? null : h.column.getCanSort()
-                                                        ? _jsxs("button", { type: "button", className: "datagrid-sort", onClick: h.column.getToggleSortingHandler(), children: [flexRender(h.column.columnDef.header, h.getContext()), _jsx(Icon, { name: sortIcon(dir), size: "sm", className: "datagrid-sort-icon" })] })
+                                            return _jsxs("th", { colSpan: h.colSpan, tabIndex: rove(0, ci), className: h.column.id === "select" ? "datagrid-selcol" : undefined, "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : undefined, style: resizableColumns ? { width: h.getSize() } : undefined, children: [h.isPlaceholder ? null : h.column.getCanSort()
+                                                        ? _jsxs("button", { type: "button", tabIndex: -1, className: "datagrid-sort", onClick: h.column.getToggleSortingHandler(), children: [flexRender(h.column.columnDef.header, h.getContext()), _jsx(Icon, { name: sortIcon(dir), size: "sm", className: "datagrid-sort-icon" })] })
                                                         : flexRender(h.column.columnDef.header, h.getContext()), resizableColumns && h.column.getCanResize() && _jsx("button", { type: "button", className: "datagrid-resizer", "aria-label": `${s.dataGridResize}: ${String(h.column.columnDef.header ?? h.column.id)}`, onMouseDown: h.getResizeHandler(), onTouchStart: h.getResizeHandler(), onKeyDown: e => {
                                                             const d = e.key === "ArrowLeft" ? -16 : e.key === "ArrowRight" ? 16 : 0;
                                                             if (!d)
@@ -247,8 +387,8 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
                                             return _jsx("th", { className: col.id === "select" ? "datagrid-selcol" : undefined, children: spec ? _jsx(GridFilter, { col: col, spec: spec, name: `${s.dataGridFilter} ${spec.label}` }) : null }, col.id);
                                         }) })] }), _jsx("tbody", { children: carregando && !rows.length
                                     ? Array.from({ length: pageSize ?? 3 }, (_, i) => _jsx("tr", { children: table.getVisibleLeafColumns().map(c => _jsx("td", { children: _jsx(Skeleton, { className: "datagrid-skeleton" }) }, c.id)) }, `sk${i}`))
-                                    : rows.length ? rows.map(row => _jsx("tr", { "data-selected": row.getIsSelected() || undefined, children: row.getVisibleCells().map(cell => _jsx("td", { className: cell.column.id === "select" ? "datagrid-selcol" : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id))
-                                        : _jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "datagrid-empty", children: s.dataGridEmpty }) }) })] }) }));
+                                    : rows.length ? rows.map((row, ri) => _jsx("tr", { "aria-selected": selectable ? row.getIsSelected() : undefined, "data-selected": row.getIsSelected() || undefined, children: row.getVisibleCells().map((cell, ci) => _jsx("td", { tabIndex: rove(ri + 1, ci), className: cell.column.id === "select" ? "datagrid-selcol" : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id))
+                                        : _jsx("tr", { children: _jsx("td", { colSpan: nColunas, tabIndex: rove(1, 0), className: "datagrid-empty", children: s.dataGridEmpty }) }) })] }) }));
                 if (!renderDetail || !linhaAberta)
                     return tabela;
                 return _jsxs("div", { className: "datagrid-split", children: [tabela, _jsxs("aside", { className: "datagrid-detail", "aria-label": s.dataGridDetailPanel, children: [_jsx("div", { className: "datagrid-detail-head", children: _jsx(IconButton, { icon: "close", label: s.close, size: "sm", variant: "ghost", onClick: () => setDetailRowId(null) }) }), renderDetail(linhaAberta.original)] })] });

package/dist/disclosure.d.ts

@@ -6,3 +6,12 @@ export declare function Accordion({ items }: {
         content: ReactNode;
     }>;
 }): import("react").JSX.Element;
+export declare function Collapsible({ trigger, children, open, defaultOpen, onOpenChange, disabled, className }: {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/disclosure.js

@@ -1,2 +1,21 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { cx } from "./internal.js";
+import { soOValor } from "./pure.js";
+import { Icon } from "./system.js";
 export function Accordion({ items }) { return _jsx("div", { className: "accordion", children: items.map(i => _jsxs("details", { children: [_jsx("summary", { children: i.title }), _jsx("div", { className: "accordion-content", children: i.content })] }, i.id)) }); }
+// COLLAPSIBLE — uma seção que abre e fecha, com o estado do lado de quem usa.
+//
+// Não é um Accordion de um item só, e a diferença é o motivo de existir: o `Accordion` é um
+// CONJUNTO de seções sobre `<details>` nativo, que abre sem JS e guarda o próprio estado. Aqui a
+// aplicação é a dona do estado — um grupo da lateral que lembra se estava aberto, um painel de
+// filtros que abre por ação de outro lugar, um "mostrar mais" que fecha ao trocar de página.
+// `<details>` controlado é possível e desconfortável; e cinco das nove referências tratam os dois
+// como componentes distintos.
+//
+// A API é a daqui: `trigger` é dado, o conteúdo são os filhos. Não é a API composta da referência
+// (Root/Trigger/Panel) — quem quiser compor esse nível usa o motor direto.
+export function Collapsible({ trigger, children, open, defaultOpen, onOpenChange, disabled, className }) {
+    return _jsxs(BaseCollapsible.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: soOValor(onOpenChange), disabled: disabled, className: cx("collapsible", className), children: [_jsxs(BaseCollapsible.Trigger, { className: "collapsible-trigger", children: [_jsx(Icon, { name: "chevron--down", size: "sm", className: "collapsible-chevron" }), trigger] }), _jsx(BaseCollapsible.Panel, { className: "collapsible-panel", children: children })] });
+}

package/dist/escala.d.ts

@@ -0,0 +1,26 @@
+/** Os pontos da escala, em pixels. UMA escala para os dois mensuráveis — o prefixo da classe
+ *  (`vp-` / `ct-`) é que diz de quê são os pixels. */
+export declare const ESCALA: {
+    readonly "2xs": 360;
+    readonly xs: 480;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+/** O subconjunto que o CONTAINER consulta. Contêiner de 1280px é raro o bastante para não valer
+ *  regra, e ponto que ninguém usa é peso morto na folha. Cresce por medição. */
+export declare const ESCALA_CONTAINER: {
+    readonly "2xs": 360;
+    readonly xs: 480;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+};
+export type Breakpoint = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type ContainerBreakpoint = "2xs" | "xs" | "sm" | "md" | "lg";
+/** Os pontos do maior para o menor. A resolução percorre nesta ordem e para no primeiro que
+ *  couber, que é a semântica de `min-width`: o último ponto atingido vence. */
+export declare const PONTOS_DESC: ReadonlyArray<Breakpoint>;
+export declare const PONTOS_CONTAINER_DESC: ReadonlyArray<ContainerBreakpoint>;

package/dist/escala.js

@@ -0,0 +1,17 @@
+// GERADO por scripts/build-responsive-layer.mjs — não editar à mão.
+//
+// A escala canônica, lida de `packages/tokens/dist/aurea.tokens.css`. É a MESMA leitura que
+// gera as `@media`/`@container` do core, e é por isso que o resolvedor de runtime e o CSS
+// não podem discordar: não há dois números, há um.
+//
+// Sem `"use client"`: é dado, e um componente de servidor precisa dos tipos.
+/** Os pontos da escala, em pixels. UMA escala para os dois mensuráveis — o prefixo da classe
+ *  (`vp-` / `ct-`) é que diz de quê são os pixels. */
+export const ESCALA = { "2xs": 360, "xs": 480, "sm": 640, "md": 768, "lg": 1024, "xl": 1280, "2xl": 1536 };
+/** O subconjunto que o CONTAINER consulta. Contêiner de 1280px é raro o bastante para não valer
+ *  regra, e ponto que ninguém usa é peso morto na folha. Cresce por medição. */
+export const ESCALA_CONTAINER = { "2xs": 360, "xs": 480, "sm": 640, "md": 768, "lg": 1024 };
+/** Os pontos do maior para o menor. A resolução percorre nesta ordem e para no primeiro que
+ *  couber, que é a semântica de `min-width`: o último ponto atingido vence. */
+export const PONTOS_DESC = ["2xl", "xl", "lg", "md", "sm", "xs", "2xs"];
+export const PONTOS_CONTAINER_DESC = ["lg", "md", "sm", "xs", "2xs"];

package/dist/feedback-client.d.ts

@@ -1,3 +1,4 @@
+import { type Responsive } from "./pure.js";
 import React, { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
 import { type UniversalState } from "./internal.js";
 import { type IconName } from "./system.js";
@@ -8,10 +9,12 @@ export declare function Status({ variant, state, children, className, ...props }
     state?: UniversalState;
 }): React.JSX.Element;
 export type AlertVariant = "info" | "success" | "warning" | "danger";
-export declare function Alert({ variant, state, title, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function Alert({ variant, state, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     variant?: AlertVariant;
     state?: UniversalState;
     title?: ReactNode;
+    icon?: IconName;
+    onDismiss?: () => void;
 }): React.JSX.Element;
 export type BannerVariant = AlertVariant;
 export declare function Banner({ variant, state, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
@@ -22,7 +25,7 @@ export declare function Banner({ variant, state, title, icon, onDismiss, childre
     onDismiss?: () => void;
 }): React.JSX.Element;
 export declare function Spinner({ size, label, decorative, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
-    size?: "sm" | "md" | "lg";
+    size?: Responsive<"sm" | "md" | "lg">;
     label?: string;
     decorative?: boolean;
 }): React.JSX.Element;

package/dist/feedback-client.js

@@ -2,6 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+import { peleDoEixo } from "./pure.js";
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 import React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
@@ -28,7 +29,29 @@ import { Skeleton } from "./markup.js";
 // "esperando" dele é grave. E o rótulo é o do consumidor, como sempre foi: a string universal
 // entra só quando não há filho, para o componente não passar a inventar texto.
 export function Status({ variant, state, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? (state === "offline" ? "offline" : stateSeverity(state)) : "neutral"); return _jsxs("span", { className: cx("status", v !== "neutral" && `status-${v}`, className), "data-state": state, ...props, children: [_jsx("i", { className: "status-dot", "aria-hidden": "true" }), _jsx("span", { className: "status-label", children: children ?? (state ? s.universalState[state] : null) })] }); }
-export function Alert({ variant, state, title, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [title && _jsx("strong", { children: title }), children ?? (state ? s.universalState[state] : null)] }); }
+// O ícone é FUNÇÃO da variante, como o `role` já era. A referência congelada desenha o alerta
+// com ele em toda variante, e um sistema que faz o consumidor lembrar qual glifo significa
+// "perigo" acaba com quatro respostas diferentes para a mesma pergunta. `icon` sobrepõe quando o
+// caso é específico. O Banner NÃO ganha o mesmo padrão de propósito: ele não existe na
+// referência e o aviso de largura de página nem sempre quer glifo — a assimetria é decidida,
+// não herdada.
+const ICONE_DA_VARIANTE = { info: "information--filled",
+    success: "checkmark--filled", warning: "warning--alt--filled", danger: "error--filled" };
+// A grade do `.alert` tem TRÊS trilhas (auto 1fr auto): ícone, corpo, ação. Uma versão anterior
+// emitia o título solto na trilha 1 — a do ícone — e o corpo como item anônimo. Medido no
+// navegador em 21/08/2026: o título ocupava a coluna do ícone e crescia com o próprio texto,
+// enquanto a referência dá 300px de trilha ao ícone e 544px ao corpo. Título e corpo vão JUNTOS
+// na trilha 2, dentro de um <div>, que é o que a referência faz.
+// `<strong>` e não `<h4>`: um alerta aparece em qualquer profundidade da página e um h4 fixo
+// quebra a ordem de cabeçalhos onde ele cair (é a razão de o EmptyState ter `titleAs`).
+//
+// A anatomia das três trilhas voltou em 29/08/2026: o merge das duas linhagens ficou com a
+// versão sem ícone, e os oito testes do `grade-do-core.test.tsx` foram o que pegou. `state` é da
+// outra linhagem e fica: é EIXO À PARTE de `variant` — a variante é a cor, o estado é a condição
+// universal. Quem passa só `state` recebe a cor derivada da gravidade e o rótulo universal
+// quando não há filho; quem passa os dois manda, porque só o consumidor sabe se aquele
+// "esperando" dele é grave.
+export function Alert({ variant, state, title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [_jsx(Icon, { name: icon ?? ICONE_DA_VARIANTE[v] }), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? s.universalState[state] : null)] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.close, onClick: onDismiss }) : _jsx("span", {})] }); }
 export function Banner({ variant, state, title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("banner", `banner-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [icon ? _jsx(Icon, { name: icon }) : _jsx("span", {}), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? s.universalState[state] : null)] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.close, onClick: onDismiss }) : _jsx("span", {})] }); }
 // A barra grampeava 0..100 e o `aria-valuenow` NÃO — medido ao publicar o contrato de API na
 // Parte E: com value=150 o desenho parava em 100% e o leitor de tela anunciava "150 de 100".
@@ -37,7 +60,10 @@ export function Banner({ variant, state, title, icon, onDismiss, children, class
 // SÓ DETERMINADA, de propósito: não há modo indeterminado nem `.progress` para ele no core. A
 // ficha dizia que havia e era falso — corrigido junto, porque contrato que promete o que não
 // existe custa mais que ausência.
-export function Spinner({ size = "sm", label, decorative, className, ...props }) { const s = useAureaStrings(); return _jsx("span", { className: cx("spinner", size !== "sm" && `spinner-${size}`, className), ...(decorative ? { "aria-hidden": true } : { role: "status", "aria-label": label ?? s.loading }), ...props }); }
+// O DEGRAU RESPONSIVO volta (merge de 28/08/2026): a ficha declara `responsive.size` e o
+// componente tinha perdido a capacidade quando este arquivo entrou da `main`. Mesma perda
+// silenciosa do `Input`, do `Tabs` e do `NumberField` — a ficha documentava, o código não fazia.
+export function Spinner({ size, label, decorative, className, ...props }) { const s = useAureaStrings(); return _jsx("span", { className: cx("spinner", peleDoEixo("spinner", size, "sm", "spinner"), className), ...(decorative ? { "aria-hidden": true } : { role: "status", "aria-label": label ?? s.loading }), ...props }); }
 // `children` como FUNÇÃO é de propósito para o caso `loading`: assim o consumidor não paga o
 // render do conteúdo enquanto ele não existe. Aceita nó também, porque a maioria das telas já
 // tem o conteúdo pronto e obrigar função seria cerimônia.