@aurea-uds/react 0.5.0 → 0.7.0

package/dist/file-input.js

@@ -274,7 +274,7 @@ export function FileInput({ accept, maxSize, multiple, onFilesChange, upload, la
     const recibo = files.filter(f => f.status === "done" || f.status === "error" || f.status === "canceled");
     const reciboTexto = recibo.map(r => [r.name, r.status, r.finishedAt ?? ""].join(TAB)).join(NL);
     return _jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs("label", { className: "dropzone", "data-dragging": dragging || undefined, onDragOver: e => { e.preventDefault(); setDragging(true); }, onDragLeave: e => { if (!e.currentTarget.contains(e.relatedTarget))
-                    setDragging(false); }, onDrop: e => { e.preventDefault(); setDragging(false); add(e.dataTransfer.files); }, children: [_jsx("input", { id: inputId, type: "file", className: "sr-only", accept: accept, multiple: multiple, onChange: e => { add(e.target.files); e.target.value = ""; } }), _jsx(Icon, { name: "cloud--upload", size: "xl", className: "dropzone-icon" }), _jsx("strong", { children: s.fileDropPrompt }), hint && _jsx("span", { className: "dropzone-hint", children: hint })] }), upload && (enviando || pausados) && _jsx("div", { className: "file-queue-actions", children: enviando ? _jsx(Button, { variant: "secondary", size: "sm", leadingIcon: "pause", onClick: pausarTudo, children: s.uploadPause })
+                    setDragging(false); }, onDrop: e => { e.preventDefault(); setDragging(false); add(e.dataTransfer.files); }, children: [_jsx("input", { id: inputId, type: "file", className: "sr-only", accept: accept, multiple: multiple, "aria-invalid": rejected.length > 0 || undefined, "aria-describedby": rejected.length > 0 ? rejected.map((_, n) => `${inputId}-rejeitado-${n}`).join(" ") : undefined, onChange: e => { add(e.target.files); e.target.value = ""; } }), _jsx(Icon, { name: "cloud--upload", size: "xl", className: "dropzone-icon" }), _jsx("strong", { children: s.fileDropPrompt }), hint && _jsx("span", { className: "dropzone-hint", children: hint })] }), upload && (enviando || pausados) && _jsx("div", { className: "file-queue-actions", children: enviando ? _jsx(Button, { variant: "secondary", size: "sm", leadingIcon: "pause", onClick: pausarTudo, children: s.uploadPause })
                     : _jsx(Button, { variant: "secondary", size: "sm", leadingIcon: "play", onClick: retomarTudo, children: s.uploadResume }) }), files.length > 0 && _jsx("ul", { className: "file-list", children: files.map(({ id, file, name, bytes, status, progress = 0, restored, checksum: soma, preview: previa, erro }) => {
                     // A barra reusa .progress + .file-progress (largura fixa em classe); só o
                     // preenchimento (width %) fica inline, por ser data-driven. Erro reusa
@@ -283,5 +283,5 @@ export function FileInput({ accept, maxSize, multiple, onFilesChange, upload, la
                     // pelos docs não altera baseline — a justificativa antiga estava invertida).
                     const pct = Math.round(progress * 100);
                     return _jsxs("li", { className: "file-item", children: [previa ? _jsx("img", { className: "file-thumb", src: previa, alt: "" }) : _jsx(Icon, { name: "document" }), _jsx("span", { className: "file-name", children: name }), status === "uploading" ? _jsxs(_Fragment, { children: [_jsx("div", { className: "progress file-progress", role: "progressbar", "aria-label": `${s.uploadSending} ${name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, children: _jsx("span", { style: { width: `${pct}%` } }) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "pause", label: `${s.uploadPause} ${name}`, onClick: () => pausar(id) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.uploadCancel} ${name}`, onClick: () => abortId(id) })] }) : status === "paused" ? _jsxs(_Fragment, { children: [_jsxs("span", { className: "file-size", children: [s.uploadPaused, " \u00B7 ", Math.round(progress * 100), "%"] }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "play", label: `${s.uploadResume} ${name}`, onClick: () => retomar({ id, file, name, bytes, status, progress, restored }) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${name}`, onClick: () => remove(id) })] }) : (status === "error" || status === "canceled") ? _jsxs(_Fragment, { children: [_jsx("span", { className: "field-error", children: erro ?? (status === "error" ? s.uploadError : s.uploadCanceled) }), file && _jsx(IconButton, { variant: "ghost", size: "sm", icon: "restart", label: `${s.uploadRetry} ${name}`, onClick: () => startUpload(id, file) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${name}`, onClick: () => remove(id) })] }) : _jsxs(_Fragment, { children: [status === "done" && _jsx(Icon, { name: "checkmark--filled" }), _jsx("span", { className: "file-size", children: formatSize(bytes) }), soma && _jsx("span", { className: "file-checksum", title: `${s.uploadChecksum}: ${soma}`, children: soma.slice(0, 8) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${name}`, onClick: () => remove(id) })] })] }, id);
-                }) }), conflitos.map((c, i) => _jsxs("div", { className: "file-conflict", role: "alert", children: [_jsxs("span", { children: [s.fileConflict, ": ", _jsx("strong", { children: c.file.name })] }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => resolverConflito(i, "replace"), children: s.fileReplace }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => resolverConflito(i, "both"), children: s.fileKeepBoth }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => resolverConflito(i, "skip"), children: s.fileSkip })] }, `c${i}`)), recibo.length > 0 && !emVoo && _jsxs("div", { className: "file-receipt", children: [_jsxs("div", { className: "file-receipt-head", children: [_jsx("strong", { children: s.uploadReceipt }), _jsx(Button, { size: "sm", variant: "ghost", leadingIcon: "copy", onClick: () => void navigator.clipboard?.writeText(reciboTexto), children: s.uploadReceiptCopy })] }), _jsx("ul", { children: recibo.map(r => _jsxs("li", { children: [r.name, " \u00B7 ", r.status === "done" ? s.uploadComplete : r.status === "canceled" ? s.uploadCanceled : s.uploadError, r.finishedAt ? ` · ${r.finishedAt}` : ""] }, r.id)) })] }), rejected.map((r, n) => _jsxs("span", { className: "field-error", children: [r.reason, ": ", r.file.name] }, n)), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce })] });
+                }) }), conflitos.map((c, i) => _jsxs("div", { className: "file-conflict", role: "alert", children: [_jsxs("span", { children: [s.fileConflict, ": ", _jsx("strong", { children: c.file.name })] }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => resolverConflito(i, "replace"), children: s.fileReplace }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => resolverConflito(i, "both"), children: s.fileKeepBoth }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => resolverConflito(i, "skip"), children: s.fileSkip })] }, `c${i}`)), recibo.length > 0 && !emVoo && _jsxs("div", { className: "file-receipt", children: [_jsxs("div", { className: "file-receipt-head", children: [_jsx("strong", { children: s.uploadReceipt }), _jsx(Button, { size: "sm", variant: "ghost", leadingIcon: "copy", onClick: () => void navigator.clipboard?.writeText(reciboTexto), children: s.uploadReceiptCopy })] }), _jsx("ul", { children: recibo.map(r => _jsxs("li", { children: [r.name, " \u00B7 ", r.status === "done" ? s.uploadComplete : r.status === "canceled" ? s.uploadCanceled : s.uploadError, r.finishedAt ? ` · ${r.finishedAt}` : ""] }, r.id)) })] }), rejected.map((r, n) => _jsxs("span", { id: `${inputId}-rejeitado-${n}`, className: "field-error", children: [r.reason, ": ", r.file.name] }, n)), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce })] });
 }

package/dist/graph.js

@@ -110,9 +110,9 @@ function dispor(nodes, edges) {
 function NoAurea({ data }) {
     const d = data;
     const corpo = _jsxs(_Fragment, { children: [_jsx("span", { className: "graph-node-label", children: d.label }), d.kind && _jsx("span", { className: "graph-node-kind", children: d.kind }), d.detail && _jsx("span", { className: "hint", children: d.detail })] });
-    return _jsxs("div", { className: "graph-node", "data-selected": d.selecionado || undefined, children: [_jsx(Handle, { type: "target", position: Position.Left, isConnectable: !!d.conectavel, className: "graph-handle" }), d.aoSelecionar
+    return _jsxs("div", { className: "graph-node", "data-selected": d.selecionado || undefined, children: [d.conectavel && _jsx(Handle, { type: "target", position: Position.Left, isConnectable: true, className: "graph-handle" }), d.aoSelecionar
                 ? _jsx("button", { type: "button", className: "graph-node-body", "aria-pressed": !!d.selecionado, onClick: d.aoSelecionar, children: corpo })
-                : _jsx("span", { className: "graph-node-body", children: corpo }), _jsx(Handle, { type: "source", position: Position.Right, isConnectable: !!d.conectavel, className: "graph-handle" })] });
+                : _jsx("span", { className: "graph-node-body", children: corpo }), d.conectavel && _jsx(Handle, { type: "source", position: Position.Right, isConnectable: true, className: "graph-handle" })] });
 }
 const TIPOS = { aurea: NoAurea };
 // DependencyGraph — quem depende de quem.
@@ -146,8 +146,13 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
         data: { label: n.label, kind: n.kind, detail: n.detail, selecionado: selectedId === n.id,
             conectavel: !!connectable, aoSelecionar: onSelect ? () => onSelect(n.id) : undefined },
     })), [nodes, automatico, selectedId, onSelect, connectable, onNodeMove]);
+    // `selectable:false` na PRÓPRIA aresta, e não só no `elementsSelectable` do `<ReactFlow>`:
+    // medido em 29/08/2026, a prop do fluxo não tira a classe `.selectable` da aresta, que é onde
+    // o `base.css` do motor põe `cursor:pointer`. A mão de ponteiro prometia um clique que a API
+    // da Aurea não atende — `onSelect` é do NÓ, e quem o atende é o <button> do corpo dele.
     const arestasDoMotor = React.useMemo(() => edges.map(e => ({
         id: `${e.from}->${e.to}`, source: e.from, target: e.to, label: e.label, animated: e.animated,
+        selectable: false,
     })), [edges]);
     // ── A MEDIDA TEM DE PODER VOLTAR, e isto foi achado NO NAVEGADOR ───────────────────────
     // A primeira versão passava `nodes` e nenhum `onNodesChange`. O motor aceita calado e o
@@ -173,6 +178,6 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
     // que o `fitView` usa ENQUANTO ninguém mediu. Com o prefixo `initial`, o navegador sobrescreve
     // na primeira medição — passar `width`/`height` direto no ReactFlow fixaria o tamanho e mataria
     // a fluidez. O valor é a extensão do próprio layout, então no servidor o grafo cabe exato.
-    return _jsx("div", { className: cx("dependency-graph", className), style: height ? { blockSize: height } : undefined, role: "group", "aria-label": label ?? s.graphLabel, ...props, children: _jsx(ReactFlowProvider, { initialNodes: nosDoMotor, initialEdges: arestasDoMotor, fitView: true, initialWidth: automatico.extensao.larg, initialHeight: automatico.extensao.alt, children: _jsx(ReactFlow, { nodes: nosVivos, onNodesChange: aoMudarNos, edges: arestasDoMotor, nodeTypes: TIPOS, fitView: true, proOptions: { hideAttribution: false }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: !!onSelect, onNodeDragStop: onNodeMove ? (_, no) => onNodeMove(no.id, no.position) : undefined, onConnect: onConnect ? c => { if (c.source && c.target)
+    return _jsx("div", { className: cx("dependency-graph", className), style: height ? { blockSize: height } : undefined, role: "group", "aria-label": label ?? s.graphLabel, ...props, children: _jsx(ReactFlowProvider, { initialNodes: nosDoMotor, initialEdges: arestasDoMotor, fitView: true, initialWidth: automatico.extensao.larg, initialHeight: automatico.extensao.alt, children: _jsx(ReactFlow, { nodes: nosVivos, onNodesChange: aoMudarNos, edges: arestasDoMotor, nodeTypes: TIPOS, fitView: true, proOptions: { hideAttribution: false }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: false, onNodeDragStop: onNodeMove ? (_, no) => onNodeMove(no.id, no.position) : undefined, onConnect: onConnect ? c => { if (c.source && c.target)
                     onConnect({ from: c.source, to: c.target }); } : undefined, children: _jsx(Background, {}) }) }) });
 }

package/dist/identity-client.d.ts

@@ -1,9 +1,10 @@
+import { type Responsive } from "./pure.js";
 import React, { type ReactNode } from "react";
 import type { AvatarSize } from "./markup.js";
 export declare function Avatar({ src, alt, fallback, size, className }: {
     src?: string;
     alt?: string;
     fallback?: ReactNode;
-    size?: AvatarSize;
+    size?: Responsive<AvatarSize>;
     className?: string;
 }): React.JSX.Element;

package/dist/identity-client.js

@@ -2,11 +2,15 @@
 import { jsx as _jsx } 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 { cx } from "./internal.js";
-export function Avatar({ src, alt = "", fallback, size = "md", className }) {
+// 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 Avatar({ src, alt = "", fallback, size, className }) {
     const [falhou, setFalhou] = React.useState(false);
     React.useEffect(() => { setFalhou(false); }, [src]);
-    return _jsx("span", { className: cx("avatar", size !== "md" && `avatar-${size}`, className), children: src && !falhou ? _jsx("img", { src: src, alt: alt, onError: () => setFalhou(true) }) : fallback });
+    return _jsx("span", { className: cx("avatar", peleDoEixo("avatar", size), className), children: src && !falhou ? _jsx("img", { src: src, alt: alt, onError: () => setFalhou(true) }) : fallback });
 }

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStateFromParams, screenStateToParams, screenStateFromParams, universalStates, stateSeverity, type AureaStrings, type GridState, type ScreenState, type UniversalState } from "./pure.js";
-export { useAureaStrings, useSpriteUrl } from "./internal.js";
-export { Card, Stack, Cluster, Grid, Separator, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Select, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type AvatarSize, type TopbarVariant } from "./markup.js";
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStateFromParams, screenStateToParams, screenStateFromParams, universalStates, stateSeverity, type AureaStrings, type AureaTheme, type AureaDensity, type GridState, type ScreenState, type UniversalState } from "./pure.js";
+export { useAureaStrings, useSpriteUrl, useTheme, useDensity } from "./internal.js";
+export { type Responsive, type Breakpoint, type ContainerBreakpoint, type Orientation, ESCALA, ESCALA_CONTAINER } from "./pure.js";
+export { ContainerScope, useValorResponsivo } from "./responsivo-runtime.js";
+export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Select, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type AvatarSize, type TopbarVariant } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";

package/dist/index.js

@@ -29,7 +29,16 @@
 // subpath tem a diretiva. Vindo daqui — via `pure.js`, que não tem — a função é
 // chamável dos dois lados. É a mesma razão do `cx`, uma camada acima.
 export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStateFromParams, screenStateToParams, screenStateFromParams, universalStates, stateSeverity } from "./pure.js";
-export { useAureaStrings, useSpriteUrl } from "./internal.js";
+export { useAureaStrings, useSpriteUrl, useTheme, useDensity } from "./internal.js";
+// O EIXO RESPONSIVO (G-AXIS-04/06) — os tipos e a escala saem do `pure.js`, que não tem a
+// diretiva, pela mesma razão do `gridStateToParams` logo acima: resolver um valor responsivo é
+// computação de string, e o servidor precisa dela para emitir a classe certa no HTML.
+export { ESCALA, ESCALA_CONTAINER } from "./pure.js";
+// O contêiner Aurea como PRIMITIVE, e o resolvedor genérico. `ContainerScope` é público porque
+// quem monta o layout precisa declarar o contêiner; `useValorResponsivo` é público porque o
+// eixo comportamental é reutilizável fora dos cinco componentes que o estrearam. Estes DOIS têm
+// a diretiva de propósito: observam o documento.
+export { ContainerScope, useValorResponsivo } from "./responsivo-runtime.js";
 // ── A LINHA DO ITEM O1, e ela é o item inteiro ───────────────────────────────────────────────
 // Estes 22 vêm do `markup.js`, que NÃO tem a diretiva, e por isso chegam como componentes de
 // SERVIDOR. Vinham dos módulos de categoria abaixo, e de lá chegavam como cliente: `Card` é uma
@@ -42,7 +51,7 @@ export { useAureaStrings, useSpriteUrl } from "./internal.js";
 // inteiro). O que muda é de ONDE ele vem — do módulo com a diretiva —, e aí ele volta a chegar
 // como referência de CLIENTE e os 118,5 KB voltam com ele. Não é um erro: é o ganho do item O1
 // se desfazendo em silêncio. É isso, exatamente isso, que o check 35 pega.
-export { Card, Stack, Cluster, Grid, Separator, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Select, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount } from "./markup.js";
+export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Select, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";

package/dist/inputs-client.d.ts

@@ -1,25 +1,32 @@
 import React, { type HTMLAttributes, type InputHTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import { type Responsive } from "./pure.js";
+import { type FieldSize } from "./markup.js";
 import { type IconName } from "./system.js";
 export { FileInput, matchesAccept, type FileRejection, type UploadContext, type UploadFn } from "./file-input.js";
+export type FieldOrientation = "vertical" | "horizontal";
 export interface FieldProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     label: string;
     hint?: ReactNode;
     error?: ReactNode;
     name?: string;
+    orientation?: Responsive<FieldOrientation>;
 }
-export declare function Field({ label, hint, error, children, className, id, name, ...props }: FieldProps): React.JSX.Element;
+export declare function Field({ label, hint, error, children, className, id, name, orientation, ...props }: FieldProps): React.JSX.Element;
 export declare function Form({ errors, onSubmit, children, className, ...props }: Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & RefAttributes<HTMLFormElement> & {
     errors?: Record<string, string | string[]>;
     onSubmit?: (values: Record<string, unknown>) => void;
 }): React.JSX.Element;
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, RefAttributes<HTMLInputElement> {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, RefAttributes<HTMLInputElement> {
     formatOnBlur?: (value: string) => string;
+    size?: Responsive<FieldSize>;
 }
 export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
-export declare function SearchField({ icon, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, RefAttributes<HTMLInputElement> {
     icon?: IconName;
-}): React.JSX.Element;
-export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, name, format, locale, className }: {
+    size?: Responsive<FieldSize>;
+}
+export declare function SearchField({ icon, className, size, ...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;
     onValueChange?: (v: number | null) => void;
@@ -35,6 +42,8 @@ export declare function NumberField({ value, defaultValue, onValueChange, min, m
     format?: Intl.NumberFormatOptions;
     locale?: string;
     className?: string;
+    scrubbable?: boolean;
+    scrubDirection?: "horizontal" | "vertical";
 }): React.JSX.Element;
 export declare function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, required, label, id, className }: {
     length: number;
@@ -61,24 +70,27 @@ export interface ComboboxOption {
     value: string;
     label: string;
 }
-export declare function Combobox({ items, value, onValueChange, placeholder, label, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }: {
+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 }: {
+    items: ComboboxOption[] | ComboboxOptGroup[];
+    empty?: ReactNode;
     value?: ComboboxOption | null;
     onValueChange?: (v: ComboboxOption | null) => void;
     placeholder?: string;
     label?: ReactNode;
     disabled?: boolean;
+    size?: Responsive<FieldSize>;
     id?: string;
     className?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false";
 }): React.JSX.Element;
-export interface ComboboxOptGroup {
-    label: string;
-    items: ComboboxOption[];
-}
-export declare function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, 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 }: {
     items: ComboboxOption[] | ComboboxOptGroup[];
+    empty?: ReactNode;
     value?: ComboboxOption[];
     onValueChange?: (v: ComboboxOption[]) => void;
     onInputChange?: (query: string) => void;
@@ -103,3 +115,8 @@ export interface BlockEditorProps extends Omit<HTMLAttributes<HTMLOListElement>,
     label?: string;
 }
 export declare function BlockEditor({ blocks, onReorder, onRemove, label, className, ...props }: BlockEditorProps): React.JSX.Element;
+export interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type">, RefAttributes<HTMLInputElement> {
+    size?: Responsive<FieldSize>;
+    defaultVisible?: boolean;
+}
+export declare function PasswordField({ className, size, defaultVisible, id, ...props }: PasswordFieldProps): React.JSX.Element;

package/dist/inputs-client.js

@@ -4,6 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // 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 { valorBase, peleDoEixo, soOValor } from "./pure.js";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { Form as BaseForm } from "@base-ui/react/form";
 import { Field as BaseField } from "@base-ui/react/field";
@@ -16,7 +17,7 @@ import { cx, useAureaStrings, usePortalContainer, useReorder } from "./internal.
 // diretiva — são marcação, e quem escuta `onChange` é o consumidor. Voltam IMPORTADOS e não só
 // reexportados porque o `ehControle` do `Field` compara por IDENTIDADE de referência: dois
 // objetos diferentes com o mesmo nome quebrariam o rótulo do campo em silêncio.
-import { Select, Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";
+import { Select, Textarea, Checkbox, Radio, Switch, Range, InputGroup, InputGroupAddon } from "./markup.js";
 import { Icon } from "./system.js";
 import { IconButton } from "./actions.js";
 // FileInput mora em arquivo próprio (132 linhas — upload real, aborto, progresso) e é público
@@ -71,9 +72,13 @@ function elementoRotulavel(tipo) {
         return TAGS_ROTULAVEIS.has(tipo);
     // Componente React arbitrário pode consumir as props no wrapper e nunca entregá-las ao nó
     // focal. Só os controles Aurea cujo encaminhamento é parte do contrato entram aqui.
-    return [Input, Select, Textarea, SearchField, Checkbox, Radio, Switch, Range, Combobox, MultiCombobox].includes(tipo);
+    // `PasswordField` entrou em 29/08/2026, e entrou medido: `<Field label="Senha"><PasswordField/></Field>`
+    // reprovava no axe com "Form elements must have labels". Fora desta lista o Field vira GRUPO e
+    // não pendura `htmlFor`, então o <input> de dentro ficava sem nome. Ele qualifica pela mesma
+    // regra que os outros: recebe `id` e espalha `...props` no `Input`, que é o nó focal.
+    return [Input, Select, Textarea, SearchField, PasswordField, Checkbox, Radio, Switch, Range, Combobox, MultiCombobox].includes(tipo);
 }
-export function Field({ label, hint, error, children, className, id, name, ...props }) {
+export function Field({ label, hint, error, children, className, id, name, orientation, ...props }) {
     const auto = React.useId();
     // Fragment não cria nó no DOM. Um Fragment com um só controle é só sintaxe; com vários,
     // Field precisa voltar para grupo em vez de pendurar `htmlFor` num id que nunca existirá.
@@ -117,7 +122,7 @@ export function Field({ label, hint, error, children, className, id, name, ...pr
     // embrulho o `Field.Root` recebe o erro e não tem a quem entregá-lo, e o campo fica válido na
     // árvore de acessibilidade enquanto a frase de erro aparece na tela. Pior que não mostrar.
     const controleFinal = name ? _jsx(BaseField.Control, { render: controle }) : controle;
-    const corpo = _jsxs("div", { className: cx("field", className), ...(nomeAqui ? {} : { role: "group", "aria-labelledby": idRotulo, ...(rotulavel ? {} : { "aria-describedby": descrito }) }), ...props, children: [_jsxs("span", { className: "label", children: [nomeAqui ? _jsx("label", { htmlFor: idControle, children: label }) : _jsx("span", { id: idRotulo, children: label }), hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controleFinal, error && _jsx("span", { className: "field-error", id: idErro, children: error }), name && _jsx(BaseField.Error, { className: "field-error" })] });
+    const corpo = _jsxs("div", { className: cx("field", peleDoEixo("field", orientation, "vertical", "field"), className), ...(nomeAqui ? {} : { role: "group", "aria-labelledby": idRotulo, ...(rotulavel ? {} : { "aria-describedby": descrito }) }), ...props, children: [_jsxs("span", { className: "label", children: [nomeAqui ? _jsx("label", { htmlFor: idControle, children: label }) : _jsx("span", { id: idRotulo, children: label }), hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controleFinal, error && _jsx("span", { className: "field-error", id: idErro, children: error }), name && _jsx(BaseField.Error, { className: "field-error" })] });
     // `Field.Root` do motor entra SÓ quando há `name`: é ele que liga o campo à chave de `errors`
     // do formulário. Ele não desenha nada — é contexto — então a pele não muda.
     return name ? _jsx(BaseField.Root, { name: name, invalid: error ? true : undefined, render: corpo }) : corpo;
@@ -138,8 +143,8 @@ export function Field({ label, hint, error, children, className, id, name, ...pr
 export function Form({ errors, onSubmit, children, className, ...props }) {
     return _jsx(BaseForm, { errors: errors, onFormSubmit: onSubmit ? (v) => onSubmit(v) : undefined, className: cx("form", className), ...props, children: children });
 }
-export const Input = forwardRef(function Input({ className, formatOnBlur, onBlur, onChange, ...props }, ref) {
-    return _jsx("input", { ref: ref, className: cx("input", className), onChange: onChange, onBlur: e => {
+export const Input = forwardRef(function Input({ className, formatOnBlur, size, onBlur, onChange, ...props }, ref) {
+    return _jsx("input", { ref: ref, className: cx("input", peleDoEixo("input", size), className), onChange: onChange, onBlur: e => {
             if (formatOnBlur) {
                 const formatado = formatOnBlur(e.currentTarget.value);
                 if (formatado !== e.currentTarget.value) {
@@ -150,7 +155,12 @@ export const Input = forwardRef(function Input({ className, formatOnBlur, onBlur
             onBlur?.(e);
         }, ...props });
 });
-export function SearchField({ icon = "search", className, ...props }) { return _jsxs("div", { className: cx("input-wrap", className), children: [_jsx(Icon, { name: icon }), _jsx(Input, { type: "search", ...props })] }); }
+// O glifo entra por `InputGroup`/`InputGroupAddon`, e não pelo `.input-wrap`: o mesmo problema
+// tinha sido resolvido DUAS vezes localmente aqui — `.input-wrap` para o glifo do SearchField e
+// `.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 })] }); }
 // 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.
@@ -171,9 +181,9 @@ export function SearchField({ icon = "search", className, ...props }) { return _
 // plataforma; a Aurea não escreve formatador de dinheiro, e nem deveria.
 // `name` entra junto porque é ele que faz o motor renderizar o input escondido com o valor CRU —
 // é a trava do item ("o valor mascarado continua no DOM") entregue pelo motor, e o teste a cobra.
-export function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, name, format, locale, className }) {
+export function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, name, format, locale, className, scrubbable, scrubDirection }) {
     const s = useAureaStrings();
-    return _jsx(BaseNumberField.Root, { id: id, name: name, value: value, defaultValue: defaultValue, onValueChange: onValueChange, min: min, max: max, step: step, format: format, locale: locale, disabled: disabled, readOnly: readOnly, required: required, className: cx("number-field", className), children: _jsxs(BaseNumberField.Group, { className: "number-field-group", children: [_jsx(BaseNumberField.Decrement, { className: "btn btn-ghost btn-icon", "aria-label": s.decrement, children: _jsx(Icon, { name: "subtract" }) }), _jsx(BaseNumberField.Input, { className: "input number-field-input", "aria-label": label }), _jsx(BaseNumberField.Increment, { className: "btn btn-ghost btn-icon", "aria-label": s.increment, children: _jsx(Icon, { name: "add" }) })] }) });
+    return _jsx(BaseNumberField.Root, { id: id, name: name, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), min: min, max: max, step: step, format: format, locale: locale, disabled: disabled, readOnly: readOnly, required: required, className: cx("number-field", className), children: _jsxs(BaseNumberField.Group, { className: "number-field-group", children: [scrubbable && _jsxs(BaseNumberField.ScrubArea, { className: cx("number-field-scrub", scrubDirection === "vertical" && "number-field-scrub-vertical"), direction: scrubDirection, "aria-hidden": "true", children: [_jsx(Icon, { name: "draggable", "aria-hidden": true }), _jsx(BaseNumberField.ScrubAreaCursor, { className: "number-field-scrub-cursor", children: _jsx(Icon, { name: "draggable", "aria-hidden": true }) })] }), _jsx(BaseNumberField.Decrement, { className: "btn btn-ghost btn-icon", "aria-label": s.decrement, children: _jsx(Icon, { name: "subtract" }) }), _jsx(BaseNumberField.Input, { className: "input number-field-input", "aria-label": label }), _jsx(BaseNumberField.Increment, { className: "btn btn-ghost btn-icon", "aria-label": s.increment, children: _jsx(Icon, { name: "add" }) })] }) });
 }
 // OTPField (Lote 1 do BUILDING.md). Um campo por dígito, com o comportamento que ninguém acerta
 // à mão: colar o código inteiro distribui pelos campos, Backspace volta um, e o
@@ -188,7 +198,7 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
 // o código; o nome de cada caixa é o que diz onde você está.
 export function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, required, label, id, className }) {
     const s = useAureaStrings();
-    return _jsx(BaseOTPField.Root, { id: id, length: length, value: value, defaultValue: defaultValue, onValueChange: onValueChange, mask: mask, disabled: disabled, required: required, role: "group", "aria-label": label, className: cx("otp-field", className), children: Array.from({ length }, (_, i) => _jsx(BaseOTPField.Input, { render: _jsx("input", { "aria-label": `${s.otpDigit} ${i + 1}` }), className: "input otp-slot" }, i)) });
+    return _jsx(BaseOTPField.Root, { id: id, length: length, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), mask: mask, disabled: disabled, required: required, role: "group", "aria-label": label, className: cx("otp-field", className), children: Array.from({ length }, (_, i) => _jsx(BaseOTPField.Input, { render: _jsx("input", { "aria-label": `${s.otpDigit} ${i + 1}` }), className: "input otp-slot" }, i)) });
 }
 // SegmentedControl — achado M20, fechado na Parte C do PLANO-1.0 em 07/08/2026.
 //
@@ -223,6 +233,13 @@ export function SegmentedControl({ items, value, onChange, label }) {
     const s = useAureaStrings();
     return _jsx(BaseRadioGroup, { className: "segmented", "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
 }
+const ehAgrupado = (items) => items != null && items.length > 0 && typeof items[0] === "object" && items[0] != null && "items" in items[0];
+// UM renderizador e UMA lista para os dois combobox: duas cópias da mesma árvore é como a
+// segunda fica para trás na mudança seguinte.
+const renderComboboxItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
+const listaCombobox = (items) => _jsx(BaseCombobox.List, { children: ehAgrupado(items)
+        ? (group) => _jsxs(BaseCombobox.Group, { items: group.items, className: "combobox-section", children: [_jsx(BaseCombobox.GroupLabel, { className: "combobox-group-label", children: group.label }), _jsx(BaseCombobox.Collection, { children: renderComboboxItem })] }, group.label)
+        : renderComboboxItem });
 // `aria-describedby` e `aria-invalid` são explícitos e não caem em `...props` por acidente: este
 // componente destrincha uma lista fixa, então o que não está aqui é DESCARTADO em silêncio — e era
 // exatamente isso que fazia o `Field` não alcançar o input do Combobox (AUD-0001, 12/08/2026).
@@ -230,24 +247,28 @@ export function SegmentedControl({ items, value, onChange, label }) {
 // `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, disabled, 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 }) {
     const s = useAureaStrings();
     const portal = usePortalContainer();
     const autoId = React.useId();
     const inputId = id ?? autoId;
-    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: 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: "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: s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value) })] }) }) })] });
+    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)] }) }) })] });
 }
-const isGrouped = (items) => items.length > 0 && "items" in items[0];
-export function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }) {
+// MultiCombobox (Fase 4): multi-seleção com chips, opções agrupadas e filtro
+// externo (async). Reusa .combobox-popup/-item/-empty do básico.
+// - Agrupar: passar ComboboxOptGroup[] em items (label + items). Detecção pela
+//   presença de .items no 1º elemento — não misturar plano com agrupado.
+// - 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 }) {
     const s = useAureaStrings();
     const portal = usePortalContainer();
     const autoId = React.useId();
     const inputId = id ?? autoId;
     const renderItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
-    return _jsxs(BaseCombobox.Root, { multiple: true, items: items, value: value, onValueChange: 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 : s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: isGrouped(items)
-                                    ? (group) => _jsxs(BaseCombobox.Group, { items: group.items, className: "combobox-section", children: [_jsx(BaseCombobox.GroupLabel, { className: "combobox-group-label", children: group.label }), _jsx(BaseCombobox.Collection, { children: renderItem })] }, group.label)
-                                    : renderItem })] }) }) })] });
+    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)] }) }) })] });
 }
 export function BlockEditor({ blocks, onReorder, onRemove, label, className, ...props }) {
     const s = useAureaStrings();
@@ -262,3 +283,10 @@ export function BlockEditor({ blocks, onReorder, onRemove, label, className, ...
                     return _jsxs("li", { className: "block-item", "data-grabbed": r.pego === i || undefined, children: [_jsxs("div", { className: "block-rail", children: [_jsxs("button", { type: "button", id: hid, className: "block-handle", "aria-labelledby": `${hid} ${kid}`, "aria-describedby": `${bid}ajuda`, "aria-pressed": r.pego === i, onKeyDown: e => r.teclado(e, i), onPointerDown: e => r.ponteiroBaixo(e, i), onPointerMove: r.ponteiroMove, onPointerUp: r.ponteiroSolta, onPointerCancel: r.ponteiroSolta, children: [_jsx(Icon, { name: "drag--horizontal" }), _jsx("span", { className: "sr-only", children: s.sortableHandle })] }), onRemove && _jsxs("button", { type: "button", id: rid, className: "block-remove", "aria-labelledby": `${rid} ${kid}`, onClick: () => onRemove(i), children: [_jsx(Icon, { name: "trash-can" }), _jsx("span", { className: "sr-only", children: s.blockRemove })] })] }), _jsx("div", { className: "block-body", children: b.children }), _jsxs("span", { id: kid, className: "sr-only", children: [b.kind ?? s.blockLabel, " ", i + 1, " ", s.positionOf, " ", n] })] }, b.id);
                 }) }), _jsx("span", { id: `${bid}ajuda`, className: "sr-only", children: s.sortableHelp }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: r.aviso })] });
 }
+export function PasswordField({ className, size, defaultVisible = false, id, ...props }) {
+    const s = useAureaStrings();
+    const [visivel, setVisivel] = React.useState(defaultVisible);
+    const auto = React.useId();
+    const campoId = id ?? auto;
+    return _jsxs(InputGroup, { className: className, children: [_jsx(Input, { id: campoId, type: visivel ? "text" : "password", className: peleDoEixo("input", size) || undefined, autoComplete: "current-password", ...props }), _jsx(InputGroupAddon, { side: "end", layout: "inline", children: _jsx(IconButton, { variant: "ghost", size: valorBase(size) === "lg" ? "md" : "sm", icon: visivel ? "view--off" : "view", label: visivel ? s.passwordHide : s.passwordShow, "aria-controls": campoId, onClick: () => setVisivel(v => !v) }) })] });
+}

package/dist/inputs.d.ts

@@ -1,2 +1,3 @@
 export * from "./inputs-client.js";
 export { Select, Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";
+export { Label, InputGroup, InputGroupAddon, type AddonSide, type AddonLayout, type FieldSize } from "./markup.js";

package/dist/inputs.js

@@ -7,3 +7,7 @@
 // quebrariam o rótulo do campo em silêncio. Um caminho de import, um objeto.
 export * from "./inputs-client.js";
 export { Select, Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";
+// PORTADOS no merge de 28/08/2026, da linhagem da ATIVIDADE-2 — não existiam na `main`.
+// Saem do `markup` pela mesma razão dos seis acima: nenhum usa hook, então chegam como
+// componente de SERVIDOR e não arrastam a fronteira de cliente com eles.
+export { Label, InputGroup, InputGroupAddon } from "./markup.js";

package/dist/internal.d.ts

@@ -1,10 +1,32 @@
 import React from "react";
-import { type AureaStrings } from "./pure.js";
-export { cx, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity, type AureaStrings, type UniversalState } from "./pure.js";
+import { type AureaStrings, type AureaTheme, type AureaDensity } from "./pure.js";
+export { cx, fundirRender, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity, type AureaStrings, type UniversalState, type AureaTheme, type AureaDensity } from "./pure.js";
 export declare const StringsContext: React.Context<AureaStrings>;
 export declare const useAureaStrings: () => AureaStrings;
 export declare const SpriteContext: React.Context<string>;
 export declare const useSpriteUrl: () => string;
+export declare const ThemeContext: React.Context<{
+    theme?: AureaTheme;
+    setTheme: (t: AureaTheme) => void;
+    toggleTheme: () => void;
+}>;
+/** Tema atual e como trocá-lo. Fora de um `AureaProvider`, devolve `undefined` e no-ops — não
+ *  lança: um componente isolado num teste não deve morrer por falta de provider. */
+export declare const useTheme: () => {
+    theme?: AureaTheme;
+    setTheme: (t: AureaTheme) => void;
+    toggleTheme: () => void;
+};
+export declare const DensityContext: React.Context<{
+    density?: AureaDensity;
+    setDensity: (d: AureaDensity) => void;
+}>;
+/** Densidade atual e como trocá-la. Mesma regra do `useTheme`. */
+export declare const useDensity: () => {
+    density?: AureaDensity;
+    setDensity: (d: AureaDensity) => void;
+};
+export declare const DentroDoProviderContext: React.Context<boolean>;
 export declare const PortalContext: React.Context<HTMLElement | null | undefined>;
 export declare const usePortalContainer: () => HTMLElement | null | undefined;
 export interface Reordenavel<E extends HTMLElement> {

package/dist/internal.js

@@ -12,13 +12,31 @@
 // pure → internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 // INTERNO: o que todo módulo precisa e ninguém publica como componente próprio.
 // NÃO é subpath — `@aurea-uds/react/internal` não existe, de propósito.
+// Kbd mora aqui por dependência, não por categoria: o Button precisa dele e ele não precisa de
+// ninguém. A casa pública dele continua sendo `/data-display`, que o reexporta.
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { defaultStrings, defaultSpriteUrl } from "./pure.js";
-export { cx, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity } from "./pure.js";
+export { cx, fundirRender, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity } from "./pure.js";
 export const StringsContext = createContext(defaultStrings);
 export const useAureaStrings = () => useContext(StringsContext);
 export const SpriteContext = createContext(defaultSpriteUrl);
 export const useSpriteUrl = () => useContext(SpriteContext);
+// Tema e densidade viajam por contexto, e não por leitura do DOM, por um motivo que já custou
+// caro em outro lugar deste repositório: quem lê o DOM não é notificado quando ele muda. O
+// `TableOfContents` é presentacional pelo mesmo desenho e por isso NÃO marca a seção em vista
+// (`G-CAP-25`). Aqui o provider é o dono do valor, escreve no `<html>` e avisa quem depende.
+//
+// O valor inicial é `undefined` de propósito: significa "ninguém decidiu ainda", que é
+// diferente de "escuro". Um default concreto aqui faria o provider sobrescrever, na primeira
+// pintura, o `data-theme` que o documento já traz no markup — e esse atributo existe justamente
+// para não haver piscada de tema ao carregar.
+export const ThemeContext = createContext({ theme: undefined, setTheme: () => { }, toggleTheme: () => { } });
+/** Tema atual e como trocá-lo. Fora de um `AureaProvider`, devolve `undefined` e no-ops — não
+ *  lança: um componente isolado num teste não deve morrer por falta de provider. */
+export const useTheme = () => useContext(ThemeContext);
+export const DensityContext = createContext({ density: undefined, setDensity: () => { } });
+/** Densidade atual e como trocá-la. Mesma regra do `useTheme`. */
+export const useDensity = () => useContext(DensityContext);
 // ONDE OS POPUPS SÃO MONTADOS — achado B7, fechado na Parte C do PLANO-1.0 (07/08/2026).
 // O DEFEITO não era o portal: era o consumidor não ter como mexer nele. Todo popup da Aurea
 // (diálogo, gaveta, dica, popover, os dois menus, notificação, combobox, toast) monta num
@@ -30,6 +48,17 @@ export const useSpriteUrl = () => useContext(SpriteContext);
 // Agora tem, e entra pelo provider, UMA vez, como o sprite: é configuração de aplicação, não
 // prop de componente (foi a lição do achado A4, com 52 sítios repassando `spriteUrl` à mão).
 // `undefined` é o default e mantém o comportamento de sempre: `document.body`.
+// 🔴 A SENTINELA DE "ESTOU DENTRO DE UM PROVIDER" — 09/09/2026, e ela existe por um defeito
+// medido, não por precaução. O `useAureaTheme` (porta `/system`) escrevia o `data-theme` no
+// documento DIRETO; o efeito do `AureaProvider` só reescreve o atributo quando o valor DELE muda,
+// e não mudava. Resultado: o CSS ia para claro e o contexto continuava dizendo escuro, então todo
+// componente que lê `useTheme()` renderizava do jeito errado — sem erro, sem aviso, publicado.
+// ⚠ POR QUE UMA SENTINELA E NÃO "olhar o ThemeContext": o padrão dele é
+// `{theme:undefined,setTheme:noop}` DE PROPÓSITO — `useTheme()` fora de um provider devolve isso
+// em vez de lançar, e um componente isolado num teste depende disso. Então o valor do contexto
+// NÃO distingue "sem provider" de "provider que ainda não adotou tema". Só um booleano que
+// apenas o provider fornece distingue.
+export const DentroDoProviderContext = createContext(false);
 export const PortalContext = createContext(undefined);
 export const usePortalContainer = () => useContext(PortalContext);
 export function useReorder({ count, order, onReorder, rowSelector, handleSelector }) {

package/dist/layout-client.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import { type Orientation, type Responsive } from "./pure.js";
 import { type TopbarVariant, type SidebarVariant } from "./navigation.js";
 export declare function AppShell({ brand, navigation, topbar, topbarVariant, sidebarVariant, sidebarCollapsed, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
@@ -8,3 +9,6 @@ export declare function AppShell({ brand, navigation, topbar, topbarVariant, sid
     sidebarVariant?: SidebarVariant;
     sidebarCollapsed?: boolean;
 }): import("react").JSX.Element;
+export declare function Separator({ orientation, className, ...props }: HTMLAttributes<HTMLHRElement> & RefAttributes<HTMLHRElement> & {
+    orientation?: Responsive<Orientation>;
+}): import("react").JSX.Element;

package/dist/layout-client.js

@@ -1,6 +1,12 @@
 "use client";
 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:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+import { useRef } from "react";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
 import { cx, useAureaStrings } from "./internal.js";
+import { useValorResponsivo } from "./responsivo-runtime.js";
 import { IconButton } from "./actions.js";
 import { Sidebar, Topbar } from "./navigation.js";
 // ── Auxiliar de topo: mora ANTES do primeiro export, e a posição é obrigatória ───────────────
@@ -73,5 +79,39 @@ function focoDaGaveta(e) {
 // normal, e é como as 106 páginas do catálogo são montadas — recebia o padrão e ponto. A variante
 // estava documentada no CHANGELOG como saída para quem instalou a `0.3.0`, e a porta estava
 // trancada. É o par do `topbarVariant`, que já existia logo acima. Ver ADR-0034.
+// O alvo do link de pular. Mesmo raciocínio do id da navegação: um documento tem UM AppShell,
+// então id fixo é estável e não colide. Sem alvo estável não há como o link existir.
+const SHELL_MAIN_ID = "aurea-shell-main";
 const SHELL_NAV_ID = "aurea-shell-nav";
-export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", sidebarVariant, sidebarCollapsed, children, className, ...props }) { const s = useAureaStrings(); return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_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, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { className: "content", children: children })] }); }
+export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", sidebarVariant, sidebarCollapsed, children, className, ...props }) {
+    const s = useAureaStrings();
+    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, 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 }) {
+    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 });
+}

package/dist/layout.d.ts

@@ -1,2 +1,3 @@
 export * from "./layout-client.js";
-export { Card, Stack, Cluster, Grid, Separator } from "./markup.js";
+export { Card, Stack, Cluster, Grid } from "./markup.js";
+export { AspectRatio } from "./markup.js";