@aurea-uds/react 0.5.0 → 0.6.0

package/dist/markup.d.ts

@@ -1,14 +1,19 @@
-import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import { type Responsive } from "./pure.js";
+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";
-export declare function Card({ variant, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
-    variant?: "base" | "raised" | "interactive" | "inset" | "selected" | "danger";
-}): React.JSX.Element;
+type CardBase = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>;
+export type CardProps = CardBase & ({
+    variant?: "base" | "raised" | "inset" | "selected" | "danger";
+    render?: ReactElement;
+} | {
+    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 Separator({ orientation, className, ...props }: HTMLAttributes<HTMLHRElement> & RefAttributes<HTMLHRElement> & {
-    orientation?: "horizontal" | "vertical";
-}): 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 KPI({ label, value, trend, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
@@ -71,7 +76,7 @@ export declare function AvatarGroup({ children, max, total, label, size, classNa
     max?: number;
     total?: number;
     label?: string;
-    size?: AvatarSize;
+    size?: Responsive<AvatarSize>;
     className?: string;
 }): React.JSX.Element;
 export declare function LogStream({ lines }: {
@@ -87,17 +92,44 @@ export declare function Topbar({ variant, brand, children, className, ...props }
     brand?: ReactNode;
 }): React.JSX.Element;
 export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement> & RefAttributes<HTMLSelectElement>, "ref"> & RefAttributes<HTMLSelectElement>>;
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement> & RefAttributes<HTMLTextAreaElement>, "ref"> & RefAttributes<HTMLTextAreaElement>>;
-export declare function Checkbox({ label, labelHidden, description, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">, RefAttributes<HTMLSelectElement> {
+    size?: Responsive<FieldSize>;
+}
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & RefAttributes<HTMLSelectElement>>;
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, RefAttributes<HTMLTextAreaElement> {
+    size?: Responsive<FieldSize>;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;
+export declare function Checkbox({ label, labelHidden, description, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
     label: ReactNode;
     labelHidden?: boolean;
     description?: ReactNode;
+    size?: Responsive<FieldSize>;
 }): React.JSX.Element;
-export declare function Radio({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+export declare function Radio({ label, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
     label: ReactNode;
+    size?: Responsive<FieldSize>;
 }): React.JSX.Element;
-export declare function Switch({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+export declare function Switch({ label, size, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & RefAttributes<HTMLInputElement> & {
     label: ReactNode;
+    size?: Responsive<FieldSize>;
+}): React.JSX.Element;
+export type RangeOrientation = "horizontal" | "vertical";
+export declare function Range({ orientation, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    orientation?: Responsive<RangeOrientation>;
+}): React.JSX.Element;
+export type FieldSize = Extract<ComponentSize, "sm" | "md" | "lg">;
+export declare function Label({ htmlFor, className, children, ...props }: HTMLAttributes<HTMLLabelElement> & RefAttributes<HTMLLabelElement> & {
+    htmlFor?: string;
+}): 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 InputGroupAddon({ side, layout, className, children, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
+    side?: AddonSide;
+    layout?: Responsive<AddonLayout>;
+}): React.JSX.Element;
+export declare function AspectRatio({ ratio, className, style, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    ratio?: number;
 }): React.JSX.Element;
-export declare function Range(props: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>): React.JSX.Element;
+export {};

package/dist/markup.js

@@ -36,9 +36,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // PARA QUEM VIER: componente novo só entra aqui se não chamar hook, não prender manipulador e não
 // tocar motor. Na dúvida, ele NÃO entra — cliente a mais é lento, servidor a mais é quebrado.
 import React, { forwardRef } from "react";
-import { cx } from "./pure.js";
-// ── Layout ───────────────────────────────────────────────────────────────────────────────────
-export function Card({ variant = "base", className, ...props }) { return _jsx("div", { className: cx("card", variant !== "base" && `card-${variant}`, className), ...props }); }
+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 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
@@ -60,7 +61,13 @@ export function Stack({ className, ...props }) { return _jsx("div", { className:
 // 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.
-export function Separator({ orientation = "horizontal", className, ...props }) { return _jsx("hr", { "aria-orientation": orientation === "vertical" ? "vertical" : undefined, className: cx("separator", orientation === "vertical" && "separator-vertical", className), ...props }); }
+// 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 ─────────────────────────────────────────────────────────────────────────────
@@ -95,14 +102,22 @@ export function Progress({ value, label }) { const pct = Math.max(0, Math.min(10
 export function Skeleton({ className, ...props }) { return _jsx("div", { className: cx("skeleton", className), "aria-hidden": "true", ...props }); }
 // ── Identity ─────────────────────────────────────────────────────────────────────────────────
 // `React.Children` não é hook — é utilitário de leitura de `children`, e roda no servidor.
-export function AvatarGroup({ children, max, total, label, size = "md", className }) {
+export function AvatarGroup({ children, max, total, label, size, className }) {
     const itens = React.Children.toArray(children);
     const mostra = max ? itens.slice(0, max) : itens;
     const resto = (total ?? itens.length) - mostra.length;
-    return _jsxs("div", { role: "group", "aria-label": label, className: cx("avatar-group", className), children: [mostra, resto > 0 && _jsxs("span", { className: cx("avatar", "avatar-count", size !== "md" && `avatar-${size}`), "aria-hidden": "true", children: ["+", resto] })] });
+    return _jsxs("div", { role: "group", "aria-label": label, className: cx("avatar-group", className), children: [mostra, resto > 0 && _jsxs("span", { className: cx("avatar", "avatar-count", peleDoEixo("avatar", size)), "aria-hidden": "true", children: ["+", resto] })] });
 }
 // ── Code ─────────────────────────────────────────────────────────────────────────────────────
-export function LogStream({ lines }) { return _jsx("div", { className: "log-stream", role: "log", "aria-live": "polite", children: lines.map((l, n) => _jsxs("div", { className: cx("log-line", l.level && `log-${l.level}`), children: [_jsx("time", { className: "log-time", children: l.time }), _jsx("span", { className: "log-level", children: l.level }), _jsx("span", { children: l.text })] }, n)) }); }
+// O NÍVEL É MODIFICADOR DA CÉLULA, não classe na linha. O core pinta `.log-level.warn`, e a
+// regra descendente que pintava a partir de uma classe no container (`.log-warn .log-level`)
+// saiu do CSS de propósito — o comentário dela dizia, com todas as letras, que servia a um
+// arquivo que não existe mais. O merge das duas linhagens ficou com o React da versão antiga
+// contra o CSS da nova: `log-warn` era emitido e ninguém o pintava, e `.log-level` saía sem
+// modificador nenhum. Os dois testes do `grade-do-core.test.tsx` pegaram os dois lados.
+//
+// `<time>` fica: é a semântica certa para a hora, e o core casa pela CLASSE, não pela tag.
+export function LogStream({ lines }) { return _jsx("div", { className: "log-stream", role: "log", "aria-live": "polite", children: lines.map((l, n) => _jsxs("div", { className: "log-line", children: [_jsx("time", { className: "log-time", children: l.time }), _jsx("span", { className: cx("log-level", l.level && l.level.toLowerCase()), children: l.level }), _jsx("span", { children: l.text })] }, n)) }); }
 // ── Media ────────────────────────────────────────────────────────────────────────────────────
 export function MediaPlayerShell({ children, className, ...props }) { return _jsx("div", { className: cx("media-player", className), ...props, children: children }); }
 // ── Navigation ───────────────────────────────────────────────────────────────────────────────
@@ -112,13 +127,48 @@ export function Topbar({ variant = "floating", brand, children, className, ...pr
 // morava fora da casa dele (no `internal.tsx`, por causa do `Button`); agora mora aqui, pelo
 // mesmo motivo elevado a regra.
 export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", className), ...props, children: children }); }
-// ── Inputs ───────────────────────────────────────────────────────────────────────────────────
-// Os seis controles abaixo NÃO prendem manipulador nenhum: quem escuta `onChange` é o consumidor,
-// e por isso eles são marcação. O `Field`, o `Input` e o `Combobox` ficaram no `inputs.tsx` —
-// aqueles chamam hook de verdade.
-export const Select = forwardRef(function Select({ className, ...props }, ref) { return _jsx("select", { ref: ref, className: cx("select", className), ...props }); });
-export const Textarea = forwardRef(function Textarea({ className, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", className), ...props }); });
-export function Checkbox({ label, labelHidden, description, className, ...props }) { return _jsxs("label", { className: cx("checkbox", labelHidden && "checkbox-bare", className), children: [_jsx("input", { type: "checkbox", ...props }), _jsx("span", { className: "control-mark" }), _jsxs("span", { className: labelHidden ? "sr-only" : undefined, children: [_jsx("strong", { children: label }), description && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "muted", children: description })] })] })] }); }
-export function Radio({ label, className, ...props }) { return _jsxs("label", { className: cx("radio", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: "control-mark" }), label] }); }
-export function Switch({ label, className, ...props }) { return _jsxs("label", { className: cx("switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: "switch-track" }), _jsx("span", { children: label })] }); }
-export function Range(props) { return _jsx("input", { className: cx("range", props.className), type: "range", ...props }); }
+export const Select = forwardRef(function Select({ className, size, ...props }, ref) { return _jsx("select", { ref: ref, className: cx("select", peleDoEixo("select", size), className), ...props }); });
+export const Textarea = forwardRef(function Textarea({ className, size, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", peleDoEixo("textarea", size), className), ...props }); });
+// `size` nos três marcáveis pela mesma razão do campo: uma linha de formulário com um campo `sm`
+// e um checkbox de tamanho fixo ao lado desalinha. O degrau vai na MARCA, não no rótulo.
+export function Checkbox({ label, labelHidden, description, size, className, ...props }) { return _jsxs("label", { className: cx("checkbox", labelHidden && "checkbox-bare", className), children: [_jsx("input", { type: "checkbox", ...props }), _jsx("span", { className: cx("control-mark", peleDoEixo("control-mark", size)) }), _jsxs("span", { className: labelHidden ? "sr-only" : undefined, children: [_jsx("strong", { children: label }), description && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "muted", children: description })] })] })] }); }
+export function Radio({ label, size, className, ...props }) { return _jsxs("label", { className: cx("radio", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: cx("control-mark", peleDoEixo("control-mark", size)) }), label] }); }
+export function Switch({ label, size, className, ...props }) { return _jsxs("label", { className: cx("switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: cx("switch-track", peleDoEixo("switch-track", size)) }), _jsx("span", { children: label })] }); }
+export function Range({ orientation, className, ...props }) { return _jsx("input", { className: cx("range", peleDoEixo("range", orientation, "horizontal", "range"), className), type: "range", ...props }); }
+// `md` é a classe base — não existe `.input-md`, como não existe `.btn-md`. O prefixo é escrito
+// literal em cada chamada (`input-${size}`, e não `${base}-${size}`) porque é assim que o check 15
+// enxerga uma classe montada em tempo de execução; com prefixo dinâmico ele para de proteger a
+// fronteira do core justamente nas classes novas.
+// RÓTULO avulso. O `Field` já traz o dele, e é o caminho normal; este existe para quem monta o
+// próprio campo — uma linha de tabela editável, um filtro que não é um `Field`. Sem ele, quem sai
+// do `Field` escreve um `<label>` cru e perde a pele.
+export function Label({ htmlFor, className, children, ...props }) { return _jsx("label", { htmlFor: htmlFor, className: cx("label", className), ...props, children: children }); }
+function ladoDoAdorno(no) {
+    if (!React.isValidElement(no))
+        return null;
+    const p = no.props;
+    return no.type === InputGroupAddon ? (p.side ?? "start") : null;
+}
+export function InputGroup({ className, children, ...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] });
+}
+// `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
+// de desenho — é o campo deixar de caber.
+//
+// `padrao: ""` porque as duas geometrias têm regra própria: um `inline` que não emitisse classe
+// ficaria sem o recuo, que mora na regra composta `.…-inline.…-start`.
+export function InputGroupAddon({ side = "start", layout = "inline", className, children, ...props }) {
+    return _jsx("span", { className: cx("input-group-addon", `input-group-addon-${side}`, peleDoEixo("input-group-addon", layout, "", "input-group-addon"), className), ...props, children: children });
+}
+// PORTADO no merge de 28/08/2026: não existia na `main`, e a pele (`.aspect-ratio`) veio junto
+// no core. Marcação pura — uma linha de CSS —, então é servidor.
+// PROPORÇÃO FIXA. Quatro referências têm. Hoje é uma linha de CSS — `aspect-ratio` é suportado em
+// todo navegador que a Aurea alcança —, e ainda assim é componente: sem ele cada consumidor
+// escreve o `padding-top: 56.25%` de 2015, ou esquece o `min-width: 0` que impede a caixa de
+// estourar dentro de um grid.
+export function AspectRatio({ ratio = 1, className, style, ...props }) { return _jsx("div", { className: cx("aspect-ratio", className), style: { aspectRatio: ratio, ...style }, ...props }); }

package/dist/navigation-client.d.ts

@@ -1,4 +1,5 @@
 import React, { type HTMLAttributes, type RefAttributes, type ReactNode, type ReactElement } from "react";
+import { type Responsive } from "./pure.js";
 import { type IconName } from "./system.js";
 export type StepState = "default" | "active" | "done" | "error";
 export interface StepItem {
@@ -19,7 +20,8 @@ export declare function Breadcrumb({ items, label }: {
     }>;
     label?: string;
 }): React.JSX.Element;
-export declare function Tabs({ tabs, value, onChange, label }: {
+export type TabsOrientation = "horizontal" | "vertical";
+export declare function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus, loopFocus }: {
     tabs: Array<{
         id: string;
         label: ReactNode;
@@ -28,6 +30,9 @@ export declare function Tabs({ tabs, value, onChange, label }: {
     value: string;
     onChange: (id: string) => void;
     label?: string;
+    orientation?: Responsive<TabsOrientation>;
+    activateOnFocus?: boolean;
+    loopFocus?: boolean;
 }): React.JSX.Element;
 export declare function Pagination({ page, total, onPageChange }: {
     page: number;
@@ -78,10 +83,11 @@ export type BottomNavVariant = "floating" | "edge";
 export type BottomNavIndicator = "none" | "subtle" | "pill" | "circle" | "circle-raised" | "circle-bold" | "circle-outline";
 /** @deprecated Os quatro nomes de 17/08/2026. Use `variant` + `indicator`. */
 export type BottomNavVariantLegacy = "flat" | "surface" | "pill" | "dock";
+export type BottomNavVariantAny = BottomNavVariant | BottomNavVariantLegacy;
 export declare function BottomNav({ items, current, variant, indicator, label, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     items: SidebarItem[];
     current?: string;
-    variant?: BottomNavVariant | BottomNavVariantLegacy;
+    variant?: BottomNavVariantAny;
     indicator?: BottomNavIndicator;
     label?: string;
 }): React.JSX.Element;

package/dist/navigation-client.js

@@ -3,9 +3,10 @@ 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 from "react";
+import React, { useRef } from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { useValorResponsivo } from "./responsivo-runtime.js";
 import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
 import { Kbd } from "./markup.js";
 import { Icon } from "./system.js";
@@ -26,11 +27,67 @@ export function Stepper({ items, label, className }) {
         }) });
 }
 export function Breadcrumb({ items, label }) { const s = useAureaStrings(); return _jsx("nav", { className: "breadcrumb", "aria-label": label ?? s.breadcrumbLabel, children: items.map((i, n) => _jsxs(React.Fragment, { children: [n > 0 && _jsx(Icon, { name: "chevron--right", size: "sm" }), " ", i.href ? _jsx("a", { href: i.href, children: i.label }) : _jsx("strong", { "aria-current": "page", children: i.label })] }, n)) }); }
-export function Tabs({ tabs, value, onChange, label }) { const s = useAureaStrings(); return _jsxs(BaseTabs.Root, { value: value, onValueChange: v => onChange(String(v)), children: [_jsx(BaseTabs.List, { className: "tabs", "aria-label": label ?? s.tabsLabel, activateOnFocus: true, children: tabs.map(t => _jsx(BaseTabs.Tab, { value: t.id, className: "tab", children: t.label }, t.id)) }), tabs.map(t => _jsx(BaseTabs.Panel, { value: t.id, className: "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
+export function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus = true, loopFocus }) { const s = useAureaStrings(); const ancora = useRef(null); const resolvida = useValorResponsivo(orientation, "horizontal", ancora); return _jsxs(BaseTabs.Root, { ref: ancora, value: value, onValueChange: v => onChange(String(v)), orientation: resolvida, className: "tabs-root", children: [_jsx(BaseTabs.List, { className: "tabs", "aria-label": label ?? s.tabsLabel, activateOnFocus: activateOnFocus, loopFocus: loopFocus, children: tabs.map(t => _jsx(BaseTabs.Tab, { value: t.id, className: "tab", children: t.label }, t.id)) }), tabs.map(t => _jsx(BaseTabs.Panel, { value: t.id, className: "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
 export function Pagination({ page, total, onPageChange }) { const s = useAureaStrings(); return _jsxs("nav", { className: "pagination", "aria-label": s.paginationLabel, children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: s.previous }), _jsxs(Badge, { variant: "primary", children: [page, " / ", total] }), _jsx(Button, { variant: "ghost", size: "sm", disabled: page >= total, onClick: () => onPageChange(page + 1), children: s.next })] }); }
 export function TableOfContents({ items, current, label, className, ...props }) {
     const s = useAureaStrings();
-    return _jsxs("nav", { className: cx("toc", className), "aria-label": label ?? s.tocLabel, ...props, children: [_jsx("p", { className: "toc-label", children: label ?? s.tocLabel }), items.map(i => _jsx("a", { href: `#${i.id}`, className: cx(i.sub && "toc-sub"), ...(i.id === current ? { "aria-current": "true" } : {}), children: i.label }, i.id))] });
+    const meu = React.useRef(null);
+    const observado = useSecaoEmVista(items, current === undefined, meu);
+    const atual = current ?? observado;
+    // O `ref` do consumidor continua chegando: em React 19 ele é prop comum, então espalhá-lo por
+    // `...props` depois do nosso o sobrescreveria em silêncio. Os dois são atendidos aqui.
+    const refDele = props.ref;
+    const { ref: _ignorado, ...resto } = props;
+    return _jsxs("nav", { ref: n => { meu.current = n; if (typeof refDele === "function")
+            refDele(n);
+        else if (refDele)
+            refDele.current = n; }, className: cx("toc", className), "aria-label": label ?? s.tocLabel, ...resto, children: [_jsx("p", { className: "toc-label", children: label ?? s.tocLabel }), items.map(i => _jsx("a", { href: `#${i.id}`, className: cx(i.sub && "toc-sub"), ...(i.id === atual ? { "aria-current": "true" } : {}), children: i.label }, i.id))] });
+}
+/** Qual dos `items` está na faixa de leitura, observando o documento. Devolve `undefined` até o
+ *  primeiro cálculo — e em SSR, onde não há documento para observar.
+ *
+ *  A afinação NÃO é escolha nova: é a mesma do `tocSpy` do `aurea.js`, que já estava provada em
+ *  produção. Uma faixa estreita no alto da janela (`-75%` embaixo), e vence o ÚLTIMO que a cruza,
+ *  não o primeiro — seção e subseção cruzam juntas, e o específico é o que interessa. Nada
+ *  cruzando quer dizer topo da página, e aí o atual é o primeiro item. Reimplementar com outra
+ *  régua seria criar a terceira versão divergente do mesmo comportamento, que é o defeito que
+ *  este componente existe para encerrar. */
+function useSecaoEmVista(items, ligado, nav) {
+    const [atual, setAtual] = React.useState(undefined);
+    // os ids como string estável: sem isto o efeito re-roda a cada render, porque `items` é um
+    // array novo toda vez que o pai renderiza.
+    const ids = items.map(i => i.id).join(" ");
+    React.useEffect(() => {
+        if (!ligado)
+            return;
+        if (typeof IntersectionObserver === "undefined")
+            return; // navegador antigo: fica lista de links
+        const lista = ids ? ids.split(" ") : [];
+        const alvos = lista.map(id => document.getElementById(id)).filter((e) => e !== null);
+        if (!alvos.length)
+            return;
+        // O acordo com o runtime vanilla, e ele mora no EFEITO e não no render por um motivo medido:
+        // o catálogo é gerado ESTÁTICO a partir deste mesmo componente. Marcar no render poria o
+        // atributo nas páginas todas, onde não há React vivo para observar — e o `tocSpy` do
+        // `aurea.js`, que é quem de fato marca lá, se afastaria de um substituto inexistente. Efeito
+        // só roda onde há React de verdade, que é exatamente o que a marca precisa afirmar.
+        nav.current?.setAttribute("data-toc-spy", "react");
+        setAtual(alvos[0].id);
+        const visivel = new Map();
+        const obs = new IntersectionObserver(entradas => {
+            for (const e of entradas)
+                visivel.set(e.target.id, e.isIntersecting);
+            let achado = alvos[0].id;
+            for (const alvo of alvos)
+                if (visivel.get(alvo.id))
+                    achado = alvo.id;
+            setAtual(achado);
+        }, { rootMargin: "0px 0px -75% 0px" });
+        for (const alvo of alvos)
+            obs.observe(alvo);
+        return () => obs.disconnect();
+    }, [ids, ligado]);
+    return ligado ? atual : undefined;
 }
 function flattenVisible(nodes, expanded, level = 1, parentId, acc = []) {
     for (const node of nodes) {

package/dist/overlays.d.ts

@@ -1,4 +1,5 @@
 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 }: {
     open: boolean;
@@ -54,21 +55,95 @@ export declare function HoverCard({ trigger, children, side }: {
     children: ReactNode;
     side?: OverlaySide;
 }): React.JSX.Element;
-export interface MenuItemDef {
+interface MenuItemBase {
     label: ReactNode;
-    onClick?: () => void;
     disabled?: boolean;
     leadingIcon?: IconName;
 }
+/** Item de ação — a forma de sempre. `kind` é opcional para não quebrar quem já usa. */
+export interface MenuActionDef extends MenuItemBase {
+    kind?: "item";
+    onClick?: () => void;
+    /** O elemento que MATERIALIZA o item, no idioma `render` da casa (o mesmo do `Card`). Para
+     *  navegação prefira `href`, que usa o `LinkItem` do motor. */
+    render?: ReactElement;
+}
+/** Item que é um link de verdade: `<a href>`, com o `LinkItem` do motor por trás.
+ *  NÃO estende `MenuItemBase`, e a ausência é a informação: **link não tem `disabled`** — o HTML
+ *  não desabilita âncora, e o motor não aceita a prop. Um destino indisponível é um item de ação
+ *  desabilitado, não um link apagado. */
+export interface MenuLinkDef {
+    kind: "link";
+    label: ReactNode;
+    leadingIcon?: IconName;
+    href: string;
+    target?: string;
+    rel?: string;
+    /** Fechar o menu ao clicar. O padrão do motor é `false` (a navegação desmonta tudo de qualquer
+     *  jeito); aqui o padrão é `true`, porque numa aplicação de página única o clique NÃO desmonta
+     *  e o menu ficaria aberto por cima da tela nova. */
+    closeOnClick?: boolean;
+}
+/** Item que ALTERNA. Controlado (`checked`) ou não (`defaultChecked`), como todo par da casa. */
+export interface MenuCheckboxDef extends MenuItemBase {
+    kind: "checkbox";
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+/** Opções MUTUAMENTE EXCLUSIVAS. O grupo é a unidade — um rádio solto não tem sentido. */
+export interface MenuRadioGroupDef {
+    kind: "radiogroup";
+    label?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    items: Array<{
+        value: string;
+        label: ReactNode;
+        disabled?: boolean;
+        leadingIcon?: IconName;
+    }>;
+}
+/** Submenu. `items` aninha a mesma união — um submenu pode ter submenu. */
+export interface MenuSubmenuDef extends MenuItemBase {
+    kind: "submenu";
+    items: MenuEntry[];
+}
+/** Seção ROTULADA. O rótulo é do grupo, não um item: `GroupLabel` não é focável nem clicável. */
+export interface MenuGroupDef {
+    kind: "group";
+    label?: ReactNode;
+    items: MenuEntry[];
+}
+export type MenuEntry = MenuActionDef | MenuLinkDef | MenuCheckboxDef | MenuRadioGroupDef | MenuSubmenuDef | MenuGroupDef | "separator";
+/** @deprecated desde 28/08/2026 — use `MenuEntry`. Mantido porque `MenuActionDef` É a forma
+ *  antiga: quem tipava com `MenuItemDef` continua compilando. */
+export type MenuItemDef = MenuActionDef;
 export declare function DropdownMenu({ trigger, items, side, label }: {
     trigger: ReactElement;
-    items: Array<MenuItemDef | "separator">;
+    items: MenuEntry[];
     side?: OverlaySide;
     label?: string;
 }): React.JSX.Element;
 export declare function ContextMenu({ children, items, label, className }: {
     children: ReactNode;
-    items: Array<MenuItemDef | "separator">;
+    items: MenuEntry[];
     label?: string;
     className?: string;
 }): React.JSX.Element;
+export type MenubarOrientation = "horizontal" | "vertical";
+export declare function Menubar({ menus, label, modal, disabled, loopFocus, orientation, className }: {
+    menus: Array<{
+        label: ReactNode;
+        items: MenuEntry[];
+        disabled?: boolean;
+    }>;
+    label?: string;
+    modal?: boolean;
+    disabled?: boolean;
+    loopFocus?: boolean;
+    orientation?: Responsive<MenubarOrientation>;
+    className?: string;
+}): React.JSX.Element;
+export {};

package/dist/overlays.js

@@ -3,15 +3,17 @@ 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 from "react";
+import React, { useRef } from "react";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
 import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
+import { useValorResponsivo } from "./responsivo-runtime.js";
 import { Icon } from "./system.js";
 import { Button } from "./actions.js";
 export function Dialog({ open, title, children, footer, onClose }) { const s = useAureaStrings(); const portal = usePortalContainer(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
@@ -78,15 +80,72 @@ export function Popover({ trigger, title, children, side = "bottom" }) { const p
 // Por depender de repouso do ponteiro, NÃO serve para informação essencial — quem navega só por
 // teclado ou toque não abre um hover card. Conteúdo obrigatório vai em Popover.
 export function HoverCard({ trigger, children, side = "bottom" }) { const portal = usePortalContainer(); return _jsxs(BasePreviewCard.Root, { children: [_jsx(BasePreviewCard.Trigger, { render: trigger }), _jsx(BasePreviewCard.Portal, { container: portal, children: _jsx(BasePreviewCard.Positioner, { side: side, sideOffset: 8, children: _jsx(BasePreviewCard.Popup, { className: "popover hover-card", children: children }) }) })] }); }
+// A MARCA de um item que alterna fica num slot de largura FIXA, e não condicional: sem ele, um
+// menu com um item marcado e outro não desalinharia os rótulos a cada clique — o texto andaria
+// para o lado sozinho. É a mesma razão de o `leadingIcon` ter lugar próprio.
+const marca = (children) => _jsx("span", { className: "menu-mark", "aria-hidden": "true", children: children });
 // ContextMenu.Item/.Separator/.Popup são os MESMOS componentes de Menu.* no Base UI,
 // então os itens renderizam igual nos dois menus.
-const renderMenuItems = (items) => items.map((it, i) => it === "separator"
-    ? _jsx(BaseMenu.Separator, { className: "menu-sep" }, i)
-    : _jsxs(BaseMenu.Item, { className: "menu-item", disabled: it.disabled, onClick: it.onClick, children: [it.leadingIcon && _jsx(Icon, { name: it.leadingIcon }), it.label] }, i));
-export function DropdownMenu({ trigger, items, side = "bottom", label }) { const portal = usePortalContainer(); return _jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { side: side, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }
+// `portal` viaja como PARÂMETRO e não por hook: este renderizador não é componente, e o
+// submenu tem portal PRÓPRIO — sem passá-lo adiante, o menu de primeiro nível respeitaria o
+// container configurado pelo provider e o submenu escaparia para o `document.body`. Duas
+// camadas do mesmo menu em containers diferentes é o tipo de divergência que só aparece quando
+// alguém monta a Aurea dentro de um shadow root ou de um diálogo nativo.
+function renderMenuItems(items, portal) {
+    return items.map((it, i) => {
+        if (it === "separator")
+            return _jsx(BaseMenu.Separator, { className: "menu-sep" }, i);
+        const kind = it.kind ?? "item";
+        const dentro = (x) => _jsxs(_Fragment, { children: [x.leadingIcon && _jsx(Icon, { name: x.leadingIcon }), x.label] });
+        switch (kind) {
+            case "group": {
+                const g = it;
+                return _jsxs(BaseMenu.Group, { children: [g.label && _jsx(BaseMenu.GroupLabel, { className: "menu-label", children: g.label }), renderMenuItems(g.items, portal)] }, i);
+            }
+            case "radiogroup": {
+                const g = it;
+                return _jsxs(BaseMenu.RadioGroup, { value: g.value, defaultValue: g.defaultValue, onValueChange: v => g.onValueChange?.(String(v)), children: [g.label && _jsx(BaseMenu.GroupLabel, { className: "menu-label", children: g.label }), g.items.map((r, j) => _jsxs(BaseMenu.RadioItem, { className: "menu-item", value: r.value, disabled: r.disabled, children: [marca(_jsx(BaseMenu.RadioItemIndicator, { className: "menu-ponto" })), dentro(r)] }, j))] }, i);
+            }
+            case "submenu": {
+                const sm = it;
+                // O submenu é uma RAIZ própria com gatilho próprio — não é um item que "abre outro menu".
+                // É o que dá `aria-haspopup`, a seta para a direita e o fechamento em cascata de graça.
+                return _jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: "menu-item", disabled: sm.disabled, children: [dentro(sm), _jsx(Icon, { name: "chevron--right", size: "sm", className: "menu-seta" })] }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { side: "inline-end", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(sm.items, portal) }) }) })] }, i);
+            }
+            case "checkbox": {
+                const c = it;
+                // O motor chama `onCheckedChange` com `(checked, detalhes)`. A Aurea passa SÓ o `checked`,
+                // e isso é CONTRATO: o segundo argumento é a forma interna do Base UI, e repassá-lo faria a
+                // assinatura pública da Aurea mudar junto com uma versão do motor. Mesma decisão do
+                // `onValueChange` do grupo de rádio. O teste pegou: sem o embrulho, o `vi.fn()` recebia um
+                // `PointerEvent` de brinde.
+                return _jsxs(BaseMenu.CheckboxItem, { className: "menu-item", disabled: c.disabled, checked: c.checked, defaultChecked: c.defaultChecked, onCheckedChange: v => c.onCheckedChange?.(v), children: [marca(_jsx(BaseMenu.CheckboxItemIndicator, { children: _jsx(Icon, { name: "checkmark", size: "sm" }) })), dentro(c)] }, i);
+            }
+            case "link": {
+                const l = it;
+                return _jsx(BaseMenu.LinkItem, { className: "menu-item", href: l.href, target: l.target, rel: l.rel, closeOnClick: l.closeOnClick ?? true, children: dentro(l) }, i);
+            }
+            default: {
+                const a = it;
+                return _jsx(BaseMenu.Item, { className: "menu-item", disabled: a.disabled, onClick: a.onClick, render: a.render, children: dentro(a) }, i);
+            }
+        }
+    });
+}
+export function DropdownMenu({ trigger, items, side = "bottom", label }) { const portal = usePortalContainer(); return _jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { side: side, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal) }) }) })] }); }
 // ContextMenu: abre no botão direito e — por teclado — em Shift+F10 / tecla Menu,
 // que o browser só dispara (como evento contextmenu) sobre um elemento FOCADO. Por
 // isso o gatilho é focável (tabIndex 0) e tem nome acessível (auditoria 18/07/2026,
 // MÉDIO 3); sem isso o teclado não alcança o menu. Consumidor pode sobrescrever
 // tabIndex via children se o próprio já for focável.
-export function ContextMenu({ children, items, label, className }) { const portal = usePortalContainer(); return _jsxs(BaseContextMenu.Root, { children: [_jsx(BaseContextMenu.Trigger, { className: className, tabIndex: 0, "aria-label": label, "aria-haspopup": "menu", children: children }), _jsx(BaseContextMenu.Portal, { container: portal, children: _jsx(BaseContextMenu.Positioner, { children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }
+export function ContextMenu({ children, items, label, className }) { const portal = usePortalContainer(); return _jsxs(BaseContextMenu.Root, { children: [_jsx(BaseContextMenu.Trigger, { className: className, tabIndex: 0, "aria-label": label, "aria-haspopup": "menu", children: children }), _jsx(BaseContextMenu.Portal, { container: portal, children: _jsx(BaseContextMenu.Positioner, { children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal) }) }) })] }); }
+// G-AXIS-06 — o valor responsivo RESOLVIDO é a única fonte de verdade: ele vai para o motor, o
+// motor publica `data-orientation`/`aria-orientation` e ajusta o teclado, e a pele reage ao
+// atributo publicado. Ver `decisions/0019-css-first-para-apresentacao-runtime-para-semantica.md`.
+export function Menubar({ menus, label, modal, disabled, loopFocus, orientation, className }) {
+    const portal = usePortalContainer();
+    const ancora = useRef(null);
+    const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
+    const vertical = resolvida === "vertical";
+    return _jsx(BaseMenubar, { ref: ancora, modal: modal, disabled: disabled, loopFocus: loopFocus, orientation: resolvida, "aria-label": label, className: cx("menubar", className), children: menus.map((m, i) => _jsxs(BaseMenu.Root, { disabled: m.disabled, children: [_jsx(BaseMenu.Trigger, { className: "menubar-trigger", children: m.label }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { side: vertical ? "inline-end" : "bottom", align: "start", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(m.items) }) }) })] }, i)) });
+}