@aurea-uds/react 0.54.1 → 0.59.0

package/dist/code-client.js

@@ -70,13 +70,17 @@ function linhasDoCodigo(codigo, language, highlight) {
 // arquivo à esquerda e, com `copyable`, o "Copy" ESCRITO (o botão secundário, com o ícone antes do nome; vira "Copied").
 // O bloco vira o cartão (canto 22, a cor do cartão) e a linha longa DESCE em vez de rolar. Sem `filename`, o de sempre.
 export function CodeBlock({ children, language = "text", copyable, preview, previewLayout = "tabs", lineNumbers, highlight, tabs, filename, className }) {
+    // Os hooks ANTES de todo `return` (auditoria externa, 05/11/2026): moravam depois dos três retornos da caixa e dos dois do
+    // bloco sem cópia, e trocar `copyable` entre renderizações mudava a ordem dos hooks — o React avisava e o "copiado" se
+    // perdia. Regra dos hooks do React: mesma ordem, em toda renderização.
+    const s = useAureaStrings();
+    const [copiado, setCopiado] = React.useState(false);
     if (tabs && tabs.length > 0)
         return _jsx(CodigoEmAbas, { tabs: tabs, language: language, copyable: copyable, highlight: highlight, className: className });
     if (preview !== undefined && previewLayout === "stacked")
         return _jsx(CaixaEmpilhada, { preview: preview, className: className, linhas: (children ?? "").split("\n").length, codigo: _jsx(CodeBlock, { language: language, copyable: copyable, lineNumbers: lineNumbers, highlight: highlight, children: children }) });
     if (preview !== undefined)
         return _jsx(CaixaDeExemplo, { preview: preview, className: className, codigo: _jsx(CodeBlock, { language: language, copyable: copyable, lineNumbers: lineNumbers, highlight: highlight, children: children }) });
-    const s = useAureaStrings();
     // tabIndex no <pre>: `.code-block` é `overflow:auto` por construção, então é REGIÃO ROLÁVEL
     // e não tem nada focável dentro — quem navega por teclado não alcança o código que passa da
     // largura. É a regra `scrollable-region-focusable` do axe, e o mesmo defeito que o painel de
@@ -97,7 +101,6 @@ export function CodeBlock({ children, language = "text", copyable, preview, prev
         return _jsxs("div", { className: cx("code-block-wrap", "code-block-file", className), children: [_jsx("div", { className: "code-block-head", children: _jsx("span", { className: "code-block-title", children: filename }) }), pre] });
     // 0.28.0: o "copiado" é dito ao leitor de tela. Com o `aurea.js` na página, é ele quem diz (pelo
     // texto do `data-aurea-copy-done`, na língua do app); sem ele, a região de status daqui.
-    const [copiado, setCopiado] = React.useState(false);
     const onCopy = (e) => {
         e.stopPropagation();
         const vanilla = window.Aurea;

package/dist/data-display-client.d.ts

@@ -17,8 +17,11 @@ export interface TableProps extends HTMLAttributes<HTMLTableElement>, RefAttribu
     /** As linhas ímpares do corpo com fundo (o site B, 02/11/2026, a "B" na imagem): a 1ª, a 3ª… — o olho segue a linha
      *  numa tabela larga. Nos dois arranjos (`default` e `rows`). */
     striped?: boolean;
+    /** MNT-38: uma linha clara entre as fileiras do corpo, menos depois da última (a forma "A", aprovada em 05/11/2026). Uma
+     *  exceção nomeada ao sem linha (ADR-0072): só aparece quando o app escolhe. Sem efeito no arranjo `rows` e na Ember. */
+    dividers?: boolean;
 }
-export declare function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, striped, variant, children, className, ...props }: TableProps): React.JSX.Element;
+export declare function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, striped, dividers, variant, children, className, ...props }: TableProps): React.JSX.Element;
 export interface SortableItem {
     id: string;
     label: ReactNode;

package/dist/data-display-client.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { cx, useAureaStrings, useReorder } from "./internal.js";
 import { Icon } from "./system.js";
-export function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, striped, variant = "default", children, className, ...props }) { const s = useAureaStrings(); return _jsx("div", { className: cx("table-region", stickyHeader && "table-sticky-header", stickyFirstColumn && "table-sticky-first", variant === "rows" && "table-region-rows"), role: "region", "aria-label": typeof caption === "string" ? caption : s.tableLabel, tabIndex: 0, children: _jsxs("table", { className: cx("table", fit && "table-fit", differencesOnly && "table-differences-only", variant === "rows" && "table-rows", striped && "table-striped", className), ...props, children: [caption && _jsx("caption", { children: caption }), children] }) }); }
+export function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, striped, dividers, variant = "default", children, className, ...props }) { const s = useAureaStrings(); return _jsx("div", { className: cx("table-region", stickyHeader && "table-sticky-header", stickyFirstColumn && "table-sticky-first", variant === "rows" && "table-region-rows"), role: "region", "aria-label": typeof caption === "string" ? caption : s.tableLabel, tabIndex: 0, children: _jsxs("table", { className: cx("table", fit && "table-fit", differencesOnly && "table-differences-only", variant === "rows" && "table-rows", striped && "table-striped", dividers && "table-dividers", className), ...props, children: [caption && _jsx("caption", { children: caption }), children] }) }); }
 // O protocolo de teclado e de ponteiro saiu daqui para o `useReorder` do `internal` no item N1,
 // quando o `BlockEditor` virou o segundo dono dele. A DOM abaixo não mudou uma vírgula na
 // extração — é o que o gate de pixel e o `skin.spec` continuam medindo.

package/dist/data-grid.d.ts

@@ -12,7 +12,7 @@ export interface GridFilterSpec {
         label: string;
     }>;
 }
-export declare function DataGrid<T>({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className, sorting: sortingProp, onSortingChange, globalFilter: globalFilterProp, onGlobalFilterChange, page, onPageChange, rowSelection: rowSelectionProp, onRowSelectionChange, manualSorting, manualFiltering, manualPagination, rowCount, filters, columnFilters: columnFiltersProp, onColumnFiltersChange, bulkActions, stickyHeader, hideableColumns, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, resizableColumns, columnSizing: columnSizingProp, onColumnSizingChange, state, stateMessage, renderDetail, detailRowId: detailRowIdProp, onDetailRowIdChange, onExport }: {
+export declare function DataGrid<T>({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className, sorting: sortingProp, onSortingChange, globalFilter: globalFilterProp, onGlobalFilterChange, page, onPageChange, rowSelection: rowSelectionProp, onRowSelectionChange, manualSorting, manualFiltering, manualPagination, rowCount, filters, columnFilters: columnFiltersProp, onColumnFiltersChange, bulkActions, stickyHeader, dividers, fit, hideableColumns, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, resizableColumns, columnSizing: columnSizingProp, onColumnSizingChange, state, stateMessage, renderDetail, detailRowId: detailRowIdProp, onDetailRowIdChange, onExport }: {
     data: T[];
     columns: Array<ColumnDef<T, any>>;
     label?: string;
@@ -43,7 +43,9 @@ export declare function DataGrid<T>({ data, columns, label, filterable, pageSize
         icon?: IconName;
         onAction: (rows: T[], clear: () => void) => void;
     }>;
-    stickyHeader?: boolean;
+    stickyHeader?: boolean | "page";
+    dividers?: boolean;
+    fit?: boolean;
     hideableColumns?: boolean;
     columnVisibility?: VisibilityState;
     onColumnVisibilityChange?: (v: VisibilityState) => void;

package/dist/data-grid.js

@@ -95,7 +95,67 @@ function useMaybe(outer, onChange, initial) {
     return [value, u => { const next = typeof u === "function" ? u(value) : u; if (!controlled)
             setInner(next); onChange?.(next); }];
 }
-export function DataGrid({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className, sorting: sortingProp, onSortingChange, globalFilter: globalFilterProp, onGlobalFilterChange, page, onPageChange, rowSelection: rowSelectionProp, onRowSelectionChange, manualSorting, manualFiltering, manualPagination, rowCount, filters, columnFilters: columnFiltersProp, onColumnFiltersChange, bulkActions, stickyHeader, hideableColumns, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, resizableColumns, columnSizing: columnSizingProp, onColumnSizingChange, state, stateMessage, renderDetail, detailRowId: detailRowIdProp, onDetailRowIdChange, onExport }) {
+/** O que fica parado no topo da página na coluna da grade: o fundo da pilha de elementos no alto da tela, subindo até o
+ *  primeiro ancestral `fixed` ou `sticky` que não é da própria grade. Devolve onde ele termina (0 se não houver). */
+function topoParado(caixa) {
+    const r = caixa.getBoundingClientRect();
+    const x = Math.min(Math.max(r.left + r.width / 2, 0), innerWidth - 1);
+    let fundo = 0;
+    // Sem `elementsFromPoint` (um ambiente sem desenho), não há o que medir: o cabeçalho fica onde está.
+    for (const el of document.elementsFromPoint?.(x, 0) ?? []) {
+        if (caixa.contains(el))
+            continue;
+        for (let a = el; a && a !== document.documentElement; a = a.parentElement) {
+            const pos = getComputedStyle(a).position;
+            if (pos === "fixed" || pos === "sticky") {
+                fundo = Math.max(fundo, a.getBoundingClientRect().bottom);
+                break;
+            }
+        }
+    }
+    return fundo;
+}
+/** S-10: o cabeçalho da grade anda com a página. Cada `th` do `thead` ganha um `translate` — a caixa continua rolando de
+ *  lado, e o cabeçalho, que está dentro dela, vai junto. Para no fim da caixa, com a última fileira ainda à vista. */
+function usePresoNaPagina(ligado, grade, montagem) {
+    React.useLayoutEffect(() => {
+        const tabela = grade.current;
+        if (!ligado || !tabela)
+            return;
+        const caixa = tabela.closest(".table-wrap");
+        if (!caixa)
+            return;
+        let quadro = 0;
+        const medir = () => {
+            quadro = 0;
+            const cab = tabela.tHead;
+            if (!cab)
+                return;
+            const r = caixa.getBoundingClientRect();
+            const ultima = tabela.tBodies[0]?.rows[tabela.tBodies[0].rows.length - 1]?.offsetHeight ?? 0;
+            const y = Math.round(Math.max(0, Math.min(topoParado(caixa) - r.top, r.height - cab.offsetHeight - ultima)));
+            for (const th of cab.querySelectorAll(":scope > tr > th"))
+                th.style.translate = y ? `0 ${y}px` : "";
+        };
+        const pedir = () => { if (!quadro)
+            quadro = requestAnimationFrame(medir); };
+        medir();
+        addEventListener("scroll", pedir, { passive: true, capture: true });
+        addEventListener("resize", pedir);
+        const vigia = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(pedir);
+        vigia?.observe(tabela);
+        return () => {
+            cancelAnimationFrame(quadro);
+            removeEventListener("scroll", pedir, { capture: true });
+            removeEventListener("resize", pedir);
+            vigia?.disconnect();
+            for (const th of tabela.querySelectorAll("thead th"))
+                th.style.translate = "";
+        };
+        // `montagem`: a linha aberta do painel de detalhe muda o lugar da tabela na árvore, e a tabela nasce de novo.
+    }, [ligado, grade, montagem]);
+}
+export function DataGrid({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className, sorting: sortingProp, onSortingChange, globalFilter: globalFilterProp, onGlobalFilterChange, page, onPageChange, rowSelection: rowSelectionProp, onRowSelectionChange, manualSorting, manualFiltering, manualPagination, rowCount, filters, columnFilters: columnFiltersProp, onColumnFiltersChange, bulkActions, stickyHeader, dividers, fit, hideableColumns, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, resizableColumns, columnSizing: columnSizingProp, onColumnSizingChange, state, stateMessage, renderDetail, detailRowId: detailRowIdProp, onDetailRowIdChange, onExport }) {
     const s = useAureaStrings();
     const [sorting, setSorting] = useMaybe(sortingProp, onSortingChange, []);
     const [globalFilter, setGlobalFilter] = useMaybe(globalFilterProp, onGlobalFilterChange, "");
@@ -400,7 +460,12 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
     // O marcador vai na GRADE, não no recado: quem está obsoleto é a tabela, e o `Alert` é só
     // como ela conta isso. Achado pelo check 30 na primeira execução dele — eu tinha marcado o
     // recado, e com `state="loading"` não há recado nenhum, então o estado não chegava ao DOM.
-    return _jsxs("div", { className: cx("datagrid", stickyHeader && "datagrid-sticky", className), "data-state": state, children: [emLote.length > 0 && _jsxs(Toolbar, { label: s.dataGridBulkLabel, children: [_jsxs("span", { className: "hint", children: [emLote.length, " ", s.dataGridSelected] }), _jsx(ToolbarSeparator, {}), bulkActions?.map(a => _jsx(ToolbarButton, { size: "sm", leadingIcon: a.icon, onClick: () => a.onAction(emLote, limparSelecao), children: a.label }, a.id)), _jsx(ToolbarButton, { size: "sm", onClick: limparSelecao, children: s.dataGridClearSelection })] }), controles.length > 1 ? _jsx(Cluster, { children: controles }) : controles[0] ?? null, recado && _jsx(Alert, { variant: state === "error" ? "danger" : universal ? stateSeverity(universal) : "warning", children: recado }), (() => {
+    // S-10 (o MNT-40, aprovado em 05/11/2026 como valor novo): com `stickyHeader="page"` a caixa não ganha teto nem rolagem
+    // de cima para baixo, e o cabeçalho anda com a PÁGINA até encostar embaixo do que fica parado no topo dela (a barra do
+    // `AppShell`, o cabeçalho do site). Só com CSS não dá: a caixa rola de lado, e um elemento grudento gruda no contêiner de
+    // rolagem mais próximo — a caixa, não a página. Então o deslocamento é medido aqui, a cada rolagem.
+    usePresoNaPagina(stickyHeader === "page", grade, detailRowId);
+    return _jsxs("div", { className: cx("datagrid", stickyHeader === true && "datagrid-sticky", stickyHeader === "page" && "datagrid-sticky-page", dividers && "datagrid-dividers", fit && "datagrid-fit", className), "data-state": state, children: [emLote.length > 0 && _jsxs(Toolbar, { label: s.dataGridBulkLabel, children: [_jsxs("span", { className: "hint", children: [emLote.length, " ", s.dataGridSelected] }), _jsx(ToolbarSeparator, {}), bulkActions?.map(a => _jsx(ToolbarButton, { size: "sm", leadingIcon: a.icon, onClick: () => a.onAction(emLote, limparSelecao), children: a.label }, a.id)), _jsx(ToolbarButton, { size: "sm", onClick: limparSelecao, children: s.dataGridClearSelection })] }), controles.length > 1 ? _jsx(Cluster, { children: controles }) : controles[0] ?? null, recado && _jsx(Alert, { variant: state === "error" ? "danger" : universal ? stateSeverity(universal) : "warning", children: recado }), (() => {
                 // F9: o embrulho de duas colunas só existe COM o painel aberto — fechado, a
                 // marcação é a de sempre. É a lição do F7: não mudar a estrutura de quem não
                 // pediu nada. A largura do painel é `--datagrid-detail-w`, e quem decide se

package/dist/feedback-client.js

@@ -59,10 +59,12 @@ const ICONE_DA_VARIANTE = { info: "info",
 // na cor do texto. Sem ele (`"card"`), o cartão de sempre.
 export function Alert({ variant, state, title, icon, onDismiss, action, appearance, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, appearance === "soft" && "alert-soft", action != null && "alert-has-action", className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [_jsx(Icon, { name: icon ?? proprio(ICONE_DA_VARIANTE, v) ?? "info", weight: icon ? undefined : "fill" }), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? proprio(s.universalState, state) : null)] }), action != null && _jsx("div", { className: "alert-action", children: action }), onDismiss ? _jsx(CloseButton, { onClick: onDismiss }) : _jsx("span", {})] }); }
 export function Banner(props) {
+    // O hook ANTES do `return` do `consent` (auditoria externa, 05/11/2026): trocar a variante entre renderizações mudava a
+    // ordem dos hooks.
+    const s = useAureaStrings();
     if (props.variant === "consent")
         return _jsx(BannerConsent, { ...props });
     const { variant, state, title, icon, onDismiss, children, className, categories: _c, value: _v, onConsent: _o, ...rest } = props;
-    const s = useAureaStrings();
     const v = variant ?? (state ? stateSeverity(state) : "info");
     return _jsxs("div", { className: cx("banner", `banner-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...rest, children: [icon ? _jsx(Icon, { name: icon }) : _jsx("span", {}), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? proprio(s.universalState, state) : null)] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "x", label: s.close, onClick: onDismiss }) : _jsx("span", {})] });
 }

package/dist/inputs-client.js

@@ -15,7 +15,7 @@ import { Slider as BaseSlider } from "@base-ui/react/slider";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { useDirection } from "@base-ui/react/direction-provider";
-import { cx, useAureaStrings, usePortalContainer, useReorder, controlesRotulaveis } from "./internal.js";
+import { cx, useAureaStrings, usePortalContainer, useReorder, useDeslize, controlesRotulaveis } from "./internal.js";
 import { COLOR_CHANNELS, areaBackground, channelRange, colorName, corToHex, formatChannel, getChannel, hsbToRgb, parseColor, pureHue, setChannel, spaceOf, trackBackground } from "./color.js";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 // Os seis controles abaixo saíram deste arquivo no item O1 e moram no `markup.tsx`, sem a
@@ -734,11 +734,15 @@ export function OTPField({ length, value, defaultValue, onValueChange, mask, dis
 // cheia), `size="2xl"` (segmento de 48), `wrap` (quebra linha, o trilho com canto 22) e `orientation="vertical"` (em pé).
 export function SegmentedControl({ items, value, onChange, label, fullWidth, size = "md", selectedStyle, wrap, orientation = "horizontal" }) {
     const s = useAureaStrings();
+    // S-04 (05/11/2026): o escolhido DESLIZA de um segmento ao outro, em vez de pular (`useDeslize`, no `internal`). Só na
+    // escolha: com `href` a troca é de página, e a página nova já nasce com o escolhido no lugar.
+    const fila = React.useRef(null);
+    useDeslize(fila, ".active", value);
     const classe = cx("segmented", fullWidth && "segmented-full", size === "sm" && "segmented-sm", size === "lg" && "segmented-lg", size === "xl" && "segmented-xl", size === "2xl" && "segmented-2xl", wrap && orientation !== "vertical" && "segmented-wrap", orientation === "vertical" && "segmented-vertical");
     const miolo = (i) => i.icon ? _jsxs(_Fragment, { children: [_jsx(Icon, { name: i.icon, weight: i.value === value ? "fill" : "regular" }), i.label] }) : i.label;
     if (items.length > 0 && items.every(i => i.href != null))
         return _jsx("nav", { className: classe, "data-segment-style": selectedStyle, "aria-label": label ?? s.optionsLabel, children: items.map(i => _jsx("a", { href: i.href, className: i.value === value ? "active" : undefined, "aria-current": i.value === value ? "page" : undefined, children: miolo(i) }, i.value)) });
-    return _jsx(BaseRadioGroup, { className: classe, "data-segment-style": selectedStyle, "aria-label": label ?? s.optionsLabel, "aria-orientation": orientation === "vertical" ? "vertical" : undefined, 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: miolo(i) }, i.value)) });
+    return _jsx(BaseRadioGroup, { ref: fila, className: classe, "data-segment-style": selectedStyle, "aria-label": label ?? s.optionsLabel, "aria-orientation": orientation === "vertical" ? "vertical" : undefined, 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: miolo(i) }, 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

package/dist/internal.d.ts

@@ -33,6 +33,12 @@ export declare const DentroDoProviderContext: React.Context<boolean>;
 export declare const avisosAncorados: import("@base-ui/react").ToastManager<any>;
 export declare const PortalContext: React.Context<HTMLElement | null | undefined>;
 export declare const usePortalContainer: () => HTMLElement | null | undefined;
+export declare const reduzMovimento: () => boolean;
+export declare function tempoDoToken(el: Element, duracao: string, curva: string): {
+    duration: number;
+    easing: string;
+} | null;
+export declare function useDeslize(ref: React.RefObject<HTMLElement | null>, seletor: string, chave: unknown): void;
 export interface Reordenavel<E extends HTMLElement> {
     ref: React.RefObject<E | null>;
     pego: number | null;

package/dist/internal.js

@@ -14,7 +14,7 @@
 // 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 React, { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { defaultStrings, defaultSpriteUrl } from "./pure.js";
 export { cx, fundirRender, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity } from "./pure.js";
@@ -71,6 +71,111 @@ export const DentroDoProviderContext = createContext(false);
 export const avisosAncorados = BaseToast.createToastManager();
 export const PortalContext = createContext(undefined);
 export const usePortalContainer = () => useContext(PortalContext);
+// direction informa o Base UI (lado dos popovers, setas do teclado). O CSS
+// espelha sozinho por propriedade lógica, mas depende do atributo dir no DOM:
+// quem consome precisa pôr dir="rtl" no <html>. Este provider não mexe no DOM.
+// ── O MOVIMENTO (S-04 e S-05, 05/11/2026) ─────────────────────────────────────────────────────
+// O Victor achou a Aurea "estática": o escolhido do `SegmentedControl` e do `Tabs` PULAVA, e o arrasto do
+// `SortableList` e do `BlockEditor` ia de casa em casa. Decidido por ele (05/11/2026, "Construir nós"): sem biblioteca
+// nova, CSS e a animação do próprio navegador (`Element.animate`). O tempo e a curva NÃO se escrevem aqui: saem dos
+// tokens da folha (`--duration-*`, `--ease-*`), lidos no elemento — o mesmo número que o CSS usa. Sem a folha, não há
+// token, e não há animação: a troca acontece de uma vez, como antes. E quem pediu "reduzir movimento" também vê de
+// uma vez — a regra global do CSS não alcança a animação feita por código, então quem pergunta é este arquivo.
+export const reduzMovimento = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+export function tempoDoToken(el, duracao, curva) {
+    const cs = getComputedStyle(el);
+    const d = cs.getPropertyValue(duracao).trim(), easing = cs.getPropertyValue(curva).trim();
+    const duration = d.endsWith("ms") ? parseFloat(d) : d.endsWith("s") ? parseFloat(d) * 1000 : NaN;
+    return Number.isFinite(duration) && duration > 0 && easing ? { duration, easing } : null;
+}
+// O nome das animações deste arquivo: para cancelar só as nossas, e não a transição de CSS da mesma peça.
+const ANIMACAO = "aurea-movimento";
+// ── useDeslize (S-04) ─────────────────────────────────────────────────────────────────────────
+// O ESCOLHIDO DESLIZA. A referência tem uma peça separada atrás dos itens. Aqui o escolhido continua se pintando — as
+// sete cores do segmento, as treze marcas e os dois temas são regras de CSS que este gancho NÃO repete —, e só na troca
+// entra uma peça de passagem: ela COPIA a pintura do novo escolhido (o fundo, a sombra, o aro e o fio de baixo, que na
+// aba secundária é o único sinal), esconde a do item e anda da posição de antes até a nova. No fim, sai, e o item volta
+// a se pintar. Copiar o que o navegador calculou, em vez de reescrever as cores, é o que garante que o escolhido em
+// repouso fique IDÊNTICO ao de hoje. Troca no meio do caminho parte de onde a peça está, e não do item de antes.
+// `seletor` acha o escolhido dentro de `ref`; `chave` é o valor escolhido.
+export function useDeslize(ref, seletor, chave) {
+    const anterior = useRef(null);
+    const emCurso = useRef(null);
+    React.useLayoutEffect(() => () => { emCurso.current?.(); }, []);
+    React.useLayoutEffect(() => {
+        const raiz = ref.current;
+        if (!raiz)
+            return;
+        const novo = raiz.querySelector(seletor);
+        const velho = anterior.current;
+        anterior.current = novo;
+        const corrente = emCurso.current;
+        emCurso.current = null;
+        const de = corrente ? corrente() : velho && velho !== novo && velho.isConnected ? velho.getBoundingClientRect() : null;
+        if (!novo || !de || !de.width || reduzMovimento() || typeof novo.animate !== "function")
+            return;
+        const tempo = tempoDoToken(raiz, "--duration-slow", "--ease-emphasized");
+        if (!tempo)
+            return;
+        const para = novo.getBoundingClientRect();
+        if (!para.width)
+            return;
+        const cs = getComputedStyle(novo), fio = getComputedStyle(novo, "::after");
+        const passagem = document.createElement("span");
+        passagem.className = "selection-indicator";
+        passagem.setAttribute("aria-hidden", "true");
+        Object.assign(passagem.style, { left: "0px", top: "0px", borderRadius: cs.borderRadius, backgroundColor: cs.backgroundColor,
+            backgroundImage: cs.backgroundImage, boxShadow: cs.boxShadow });
+        if (fio.content && fio.content !== "none" && fio.content !== "normal" && fio.display !== "none") {
+            const linha = document.createElement("span");
+            Object.assign(linha.style, { left: fio.left, right: fio.right, bottom: fio.bottom, height: fio.height,
+                borderRadius: fio.borderRadius, backgroundColor: fio.backgroundColor });
+            passagem.append(linha);
+        }
+        // A peça mora DENTRO da fila, atrás dos itens (`z-index:-1` num contexto de empilhamento só dela), e a fila só
+        // ganha posição e contexto durante a passagem — em repouso, nada nela muda.
+        const antes = { position: raiz.style.position, isolation: raiz.style.isolation };
+        if (getComputedStyle(raiz).position === "static")
+            raiz.style.position = "relative";
+        raiz.style.isolation = "isolate";
+        const rr = raiz.getBoundingClientRect();
+        const quadro = (r) => ({ transform: `translate(${r.left - rr.left - raiz.clientLeft + raiz.scrollLeft}px,${r.top - rr.top - raiz.clientTop + raiz.scrollTop}px)`,
+            width: `${r.width}px`, height: `${r.height}px` });
+        const pintura = ["background-color", "background-image", "box-shadow"].map(p => [p, novo.style.getPropertyValue(p), novo.style.getPropertyPriority(p)]);
+        for (const [p] of pintura)
+            novo.style.setProperty(p, p === "background-color" ? "transparent" : "none", "important");
+        novo.setAttribute("data-sliding", "");
+        raiz.prepend(passagem);
+        const a = passagem.animate([quadro(de), quadro(para)], { ...tempo, fill: "forwards", id: ANIMACAO });
+        let feito = false;
+        const encerra = () => {
+            const onde = passagem.getBoundingClientRect();
+            if (feito)
+                return onde;
+            feito = true;
+            a.cancel();
+            passagem.remove();
+            for (const [p, v, pr] of pintura) {
+                if (v)
+                    novo.style.setProperty(p, v, pr);
+                else
+                    novo.style.removeProperty(p);
+            }
+            if (!novo.getAttribute("style"))
+                novo.removeAttribute("style");
+            novo.removeAttribute("data-sliding");
+            raiz.style.position = antes.position;
+            raiz.style.isolation = antes.isolation;
+            if (!raiz.getAttribute("style"))
+                raiz.removeAttribute("style");
+            if (emCurso.current === encerra)
+                emCurso.current = null;
+            return onde;
+        };
+        emCurso.current = encerra;
+        a.onfinish = () => { encerra(); };
+    }, [chave]);
+}
 export function useReorder({ count, order, onReorder, rowSelector, handleSelector }) {
     const s = useAureaStrings();
     const ref = useRef(null);
@@ -79,16 +184,55 @@ export function useReorder({ count, order, onReorder, rowSelector, handleSelecto
     const [aviso, setAviso] = useState("");
     const origem = useRef(null);
     const arrasto = useRef(null);
+    // S-05: a MÃO — a linha que o ponteiro pegou, onde o ponteiro estava ao pegar e agora, e o topo dela ao pegar. Com isso a
+    // linha anda com o ponteiro (`translate`), e não só pula de casa em casa.
+    const mao = useRef(null);
+    // S-05: onde cada linha estava NA TELA antes da troca — a conta do "First, Last, Invert, Play": depois de a ordem nova
+    // entrar, cada vizinho parte de onde estava e desliza até o lugar novo.
+    const antes = useRef(null);
     const anuncia = (verbo, i) => setAviso(`${verbo}: ${i + 1} ${s.positionOf} ${count}`);
     const alcas = () => [...(ref.current?.querySelectorAll(handleSelector) ?? [])];
+    const linhas = () => [...(ref.current?.querySelectorAll(rowSelector) ?? [])];
+    // `offsetTop` não conta o `translate` nem a animação: é o lugar da linha na lista, e não onde ela aparece agora.
+    const seguir = (m) => { m.linha.style.translate = `0 ${m.y - m.y0 - (m.linha.offsetTop - m.topo0)}px`; };
     // Vai por efeito e não por `requestAnimationFrame`: o React precisa ter commitado a ordem nova
     // antes de procurar a alça.
     useEffect(() => { if (foco !== null) {
         alcas()[foco]?.focus();
         setFoco(null);
     } }, [foco, order]);
-    const mover = (de, para) => { if (para >= 0 && para < count && de !== para)
-        onReorder(de, para); };
+    // A ordem nova entrou: a linha pega volta para baixo do ponteiro, e os vizinhos deslizam de onde estavam.
+    useLayoutEffect(() => {
+        const m = mao.current;
+        if (m)
+            seguir(m);
+        const mapa = antes.current;
+        antes.current = null;
+        if (!mapa || !ref.current || reduzMovimento())
+            return;
+        const tempo = tempoDoToken(ref.current, "--duration-base", "--ease-emphasized");
+        if (!tempo)
+            return;
+        for (const l of linhas()) {
+            if (m && l === m.linha)
+                continue;
+            const de = mapa.get(l);
+            if (de == null || typeof l.animate !== "function")
+                continue;
+            for (const a of l.getAnimations?.() ?? [])
+                if (a.id === ANIMACAO)
+                    a.cancel();
+            const d = de - l.getBoundingClientRect().top;
+            if (Math.abs(d) >= 1)
+                l.animate([{ transform: `translateY(${d}px)` }, { transform: "none" }], { ...tempo, id: ANIMACAO });
+        }
+    }, [order]);
+    const mover = (de, para) => {
+        if (para >= 0 && para < count && de !== para) {
+            antes.current = new Map(linhas().map(l => [l, l.getBoundingClientRect().top]));
+            onReorder(de, para);
+        }
+    };
     const teclado = (e, i) => {
         if (e.key === " " || e.key === "Enter") {
             e.preventDefault();
@@ -130,23 +274,56 @@ export function useReorder({ count, order, onReorder, rowSelector, handleSelecto
         }
     };
     // O alvo é a primeira linha cujo MEIO ainda está abaixo do ponteiro — a conta que faz o item
-    // trocar de lugar ao passar da metade da linha vizinha, e não ao encostar nela.
+    // trocar de lugar ao passar da metade da linha vizinha, e não ao encostar nela. O meio é o do LUGAR da linha
+    // (`offsetTop`), e não o de onde ela aparece: a linha pega anda com o ponteiro e os vizinhos estão deslizando, e medir a
+    // caixa na tela faria o alvo tremer. A origem dos `offsetTop` na tela sai da própria lista.
     const ponteiroMove = (e) => {
         const de = arrasto.current;
         if (de === null)
             return;
-        const linhas = [...(ref.current?.querySelectorAll(rowSelector) ?? [])];
-        const achado = linhas.findIndex(l => { const r = l.getBoundingClientRect(); return e.clientY < r.top + r.height / 2; });
-        const para = achado === -1 ? linhas.length - 1 : achado;
+        const m = mao.current;
+        if (m) {
+            m.y = e.clientY;
+            seguir(m);
+        }
+        const lista = ref.current;
+        if (!lista)
+            return;
+        const ls = linhas();
+        const caixa = lista.getBoundingClientRect();
+        const zero = ls[0]?.offsetParent === lista ? caixa.top + lista.clientTop - lista.scrollTop : caixa.top - lista.offsetTop;
+        const achado = ls.findIndex(l => e.clientY < zero + l.offsetTop + l.offsetHeight / 2);
+        const para = achado === -1 ? ls.length - 1 : achado;
         if (para !== de) {
             mover(de, para);
             arrasto.current = para;
             setPego(para);
         }
     };
+    // Ao soltar, a linha desliza do ponteiro até o lugar dela, e só então desce de volta para o nível das outras.
+    const pousa = () => {
+        const m = mao.current;
+        mao.current = null;
+        if (!m)
+            return;
+        const d = m.y - m.y0 - (m.linha.offsetTop - m.topo0);
+        m.linha.style.translate = "";
+        if (!m.linha.getAttribute("style"))
+            m.linha.removeAttribute("style");
+        const fim = () => m.linha.removeAttribute("data-dragging");
+        const tempo = ref.current && !reduzMovimento() && typeof m.linha.animate === "function" ? tempoDoToken(ref.current, "--duration-base", "--ease-emphasized") : null;
+        if (!tempo || Math.abs(d) < 1) {
+            fim();
+            return;
+        }
+        const a = m.linha.animate([{ transform: `translateY(${d}px)` }, { transform: "none" }], { ...tempo, id: ANIMACAO });
+        a.onfinish = fim;
+        a.oncancel = fim;
+    };
     const ponteiroSolta = () => {
         if (arrasto.current === null)
             return;
+        pousa();
         anuncia(s.sortableDropped, arrasto.current);
         arrasto.current = null;
         setPego(null);
@@ -157,6 +334,14 @@ export function useReorder({ count, order, onReorder, rowSelector, handleSelecto
         e.currentTarget.setPointerCapture(e.pointerId);
         arrasto.current = i;
         setPego(i);
+        const linha = e.currentTarget.closest(rowSelector);
+        if (linha) {
+            for (const a of linha.getAnimations?.() ?? [])
+                if (a.id === ANIMACAO)
+                    a.finish();
+            linha.setAttribute("data-dragging", "");
+            mao.current = { linha, y0: e.clientY, topo0: linha.offsetTop, y: e.clientY };
+        }
     };
     return { ref, pego, aviso, teclado, ponteiroBaixo, ponteiroMove, ponteiroSolta };
 }

package/dist/layout-client.d.ts

@@ -3,7 +3,7 @@ import { type Orientation, type Responsive } from "./pure.js";
 import { type IconButtonProps } from "./actions.js";
 import { type HeaderVariant, type HeaderTab, type SidebarVariant, type SidebarScrollbar, type SidebarEntry, type SidebarCollapsible, type SidebarIndicator } from "./navigation.js";
 declare function AppShellSidebarToggle(props: Omit<IconButtonProps, "icon" | "label" | "onClick" | "variant">): React.JSX.Element;
-export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, topbarBlurred, layout, sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle, sidebarShortcut, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, topbarBlurred, layout, sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle, sidebarShortcut, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, highContrast, textSize, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
     navigation?: ReactNode;
     navItems?: SidebarEntry[];
@@ -74,6 +74,13 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     /** AN-01: avisa cada troca — pelo botão, ou pela largura cruzando 1280. Guardar a preferência é do app. */
     onSidebarCollapsedChange?: (collapsed: boolean) => void;
     contentVariant?: "surface" | "plain";
+    /** O alto contraste no app inteiro (o MNT-30, ADR-0090): contorno nos campos, nos cartões e nos botões, o texto de apoio
+     *  mais perto do texto e o link sempre sublinhado. Marca o `AppShell` e a raiz da página (`data-contrast="high"`), para
+     *  os menus e as janelas, que abrem fora dele, saírem iguais. */
+    highContrast?: boolean;
+    /** O texto grande no app inteiro (o MNT-30, ADR-0090): cada letra 2 acima e o controle médio a 44. `data-text="lg"` no
+     *  `AppShell` e na raiz da página, pela mesma razão do `highContrast`. */
+    textSize?: "md" | "lg";
 }): React.JSX.Element;
 export declare namespace AppShell {
     export { AppShellSidebarToggle as SidebarToggle };

package/dist/layout-client.js

@@ -3,7 +3,7 @@ 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 { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import React, { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { Separator as BaseSeparator } from "@base-ui/react/separator";
 import { useDirection } from "@base-ui/react/direction-provider";
 import { cx, useAureaStrings } from "./internal.js";
@@ -167,8 +167,25 @@ function ProvedorDaLateral({ ligado, children, ...p }) {
     return ligado ? _jsx(Sidebar.Provider, { id: SHELL_NAV_ID, ...p, children: children }) : _jsx(_Fragment, { children: children });
 }
 function AppShellSidebarToggle(props) { return _jsx(Sidebar.Toggle, { ...props }); }
-export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, topbarBlurred, layout = "app", sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle = "edge", sidebarShortcut = true, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
+// O modo de leitura (o alto contraste, o texto grande) também na RAIZ da página (ADR-0090): menus, janelas e avisos abrem
+// fora do `AppShell`, presos ao fim do documento, e sem isto sairiam sem o modo. Devolve a raiz como estava ao sair.
+function useModoNaRaiz(atributo, valor) {
+    React.useEffect(() => {
+        if (valor === undefined || typeof document === "undefined")
+            return;
+        const raiz = document.documentElement;
+        const antes = raiz.getAttribute(atributo);
+        raiz.setAttribute(atributo, valor);
+        return () => { if (antes === null)
+            raiz.removeAttribute(atributo);
+        else
+            raiz.setAttribute(atributo, antes); };
+    }, [atributo, valor]);
+}
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, topbarBlurred, layout = "app", sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle = "edge", sidebarShortcut = true, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", highContrast, textSize, aside, asideLabel, asideVariant, children, className, ...props }) {
     const s = useAureaStrings();
+    useModoNaRaiz("data-contrast", highContrast ? "high" : undefined);
+    useModoNaRaiz("data-text", textSize === "lg" ? "lg" : undefined);
     const docs = layout === "docs", lateral = layout === "sidebar";
     useGavetaFechaNoDesktop(docs);
     const controlado = sidebarCollapsed !== undefined;
@@ -224,7 +241,7 @@ export function AppShell({ brand, navigation, navItems, currentNavId, navLabel,
     // No arranjo, o topo é o pequeno (`size="sm"`), e o botão também: com o tamanho de sempre ele ficava 4 maior que os
     // vizinhos e fora da linha deles (medido a 375, sem toque; com toque, todos sobem para 44).
     const botaoDaGaveta = _jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID, ...(docs ? { size: "sm" } : {}) });
-    return _jsx("div", { className: cx("app-shell", layout === "docs" && "app-shell-docs", lateral && "app-shell-lateral", !lateral && topbarVariant === "flush" && "app-shell-flush", !lateral && topbarVariant === "pill" && "app-shell-pill", recolhe && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: _jsxs(ProvedorDaLateral, { ligado: recolhe, collapsed: efetiva, onCollapsedChange: definir, collapsible: forma, shortcut: sidebarShortcut, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), !lateral && _jsxs(Header, { variant: topbarVariant, divider: topbarDivider, tabs: topbarTabs, currentTab: topbarCurrentTab, tabsLabel: topbarTabsLabel, tabsEnd: topbarTabsEnd, ...(docs ? { maxWidth: "docs", ...(topbarVariant === "pill" ? {} : { size: "sm" }) } : topbarVariant === "pill" ? { maxWidth: "full" } : {}), blurred: topbarBlurred, brand: docs ? brand : _jsxs(_Fragment, { children: [botaoDaGaveta, brand] }), actions: topbarActions != null ? _jsxs(_Fragment, { children: [topbarActions, docs && botaoDaGaveta] }) : undefined, children: [topbar, docs && topbarActions == null && botaoDaGaveta] }), recolhe && !lateral && sidebarToggle !== "none" && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, collapsible: forma, indicator: sidebarIndicator, panel: sidebarPanel, contrast: sidebarContrast, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, header: lateral ? brand : undefined, footer: sidebarFooter, children: navigation }), docs && aside != null && _jsx("div", { className: "docs-toc-bar", children: _jsxs("button", { type: "button", className: "docs-toc-toggle", popoverTarget: SHELL_TOC_ID, children: [_jsx(Icon, { name: "list-bullets" }), _jsx("span", { className: "docs-toc-current", "data-toc-current": "", children: asideLabel ?? s.tocLabel }), _jsx(Icon, { name: "caret-down" })] }) }), lateral
+    return _jsx("div", { "data-contrast": highContrast ? "high" : undefined, "data-text": textSize === "lg" ? "lg" : undefined, className: cx("app-shell", layout === "docs" && "app-shell-docs", lateral && "app-shell-lateral", !lateral && topbarVariant === "flush" && "app-shell-flush", !lateral && topbarVariant === "pill" && "app-shell-pill", recolhe && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: _jsxs(ProvedorDaLateral, { ligado: recolhe, collapsed: efetiva, onCollapsedChange: definir, collapsible: forma, shortcut: sidebarShortcut, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), !lateral && _jsxs(Header, { variant: topbarVariant, divider: topbarDivider, tabs: topbarTabs, currentTab: topbarCurrentTab, tabsLabel: topbarTabsLabel, tabsEnd: topbarTabsEnd, ...(docs ? { maxWidth: "docs", ...(topbarVariant === "pill" ? {} : { size: "sm" }) } : topbarVariant === "pill" ? { maxWidth: "full" } : {}), blurred: topbarBlurred, brand: docs ? brand : _jsxs(_Fragment, { children: [botaoDaGaveta, brand] }), actions: topbarActions != null ? _jsxs(_Fragment, { children: [topbarActions, docs && botaoDaGaveta] }) : undefined, children: [topbar, docs && topbarActions == null && botaoDaGaveta] }), recolhe && !lateral && sidebarToggle !== "none" && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, collapsible: forma, indicator: sidebarIndicator, panel: sidebarPanel, contrast: sidebarContrast, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, header: lateral ? brand : undefined, footer: sidebarFooter, children: navigation }), docs && aside != null && _jsx("div", { className: "docs-toc-bar", children: _jsxs("button", { type: "button", className: "docs-toc-toggle", popoverTarget: SHELL_TOC_ID, children: [_jsx(Icon, { name: "list-bullets" }), _jsx("span", { className: "docs-toc-current", "data-toc-current": "", children: asideLabel ?? s.tocLabel }), _jsx(Icon, { name: "caret-down" })] }) }), lateral
                     ? _jsxs("div", { className: "app-shell-column", children: [topbar != null || topbarActions != null
                                 ? _jsx(Header, { variant: "flush", size: "sm", divider: topbarDivider, brand: _jsxs(_Fragment, { children: [botaoDaGaveta, sidebarToggle !== "none" && _jsx(AppShellSidebarToggle, {})] }), actions: topbarActions, children: topbar })
                                 : _jsxs("div", { className: "app-shell-narrow-bar", children: [botaoDaGaveta, brand] }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children })] })

package/dist/markup.d.ts

@@ -200,7 +200,8 @@ export interface KPIProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<
     /** As barras embaixo do número (o site B, 0.54.0): cada uma é um botão de opção nativo; a escolhida fica branca no
      *  `brand` (na cor do texto, fora dele) e a leitura diz o nome e o valor dela. */
     bars?: KPIBar[];
-    /** A barra que começa escolhida (o índice). Padrão: a última. */
+    /** A barra que começa escolhida (o índice). Padrão: a última. Dois `KPI` com o mesmo título E as mesmas barras na
+     *  mesma página precisam de `id` diferentes, para cada um guardar a sua barra. */
     defaultBar?: number;
 }
 export declare function KPI({ label, value, trend, direction, tone, directionLabel, variant, bars, defaultBar, className, ...props }: KPIProps): React.JSX.Element;

package/dist/markup.js

@@ -119,6 +119,10 @@ export function Section({ surface = "background", spacing = "md", theme, variant
 }
 const TOM_DA_DIRECAO = { up: "success", down: "danger", flat: "neutral" };
 const PALAVRA_DA_DIRECAO = { up: "Up", down: "Down", flat: "No change" };
+// Uma assinatura curta e determinística de um texto (djb2, em base 36): o mesmo texto dá o mesmo nome no servidor e no
+// navegador, sem hook.
+const assinatura = (texto) => { let h = 5381; for (let i = 0; i < texto.length; i++)
+    h = ((h << 5) + h + texto.charCodeAt(i)) | 0; return (h >>> 0).toString(36); };
 export function KPI({ label, value, trend, direction, tone, directionLabel, variant = "card", bars, defaultBar, className, ...props }) {
     const tom = direction ? (tone ?? TOM_DA_DIRECAO[direction]) : undefined;
     const miolo = _jsxs(_Fragment, { children: [_jsx("span", { className: "muted", children: label }), _jsx("strong", { children: value }), (trend || trend === 0 || direction) && _jsxs("small", { className: direction ? cx("kpi-trend", `kpi-trend-${direction}`, `kpi-tone-${tom}`) : undefined, children: [direction && _jsx("span", { className: "kpi-trend-icon", "aria-hidden": "true" }), direction && _jsx("span", { className: "sr-only", children: directionLabel ?? PALAVRA_DA_DIRECAO[direction] }), trend] })] });
@@ -127,8 +131,13 @@ export function KPI({ label, value, trend, direction, tone, directionLabel, vari
     const leituraDe = (b) => `${b.label} · ${typeof b.value === "string" || typeof b.value === "number" ? b.value : ""}`;
     // As barras são botões de opção NATIVOS (o KPI é marcação pura, roda no servidor): o grupo é um `fieldset` com o rótulo
     // do KPI, cada barra o `label` de um rádio com a leitura dela; o CSS mostra a leitura da escolhida e a da que está sob o
-    // mouse. O `name` vem do rótulo quando é texto.
-    const nomeDoGrupo = `kpi-bars-${typeof label === "string" ? label.toLowerCase().replace(/[^a-z0-9]+/g, "-") : "x"}`;
+    // mouse.
+    // O `name` do grupo (auditoria externa de 05/11/2026): vinha SÓ do rótulo, e dois KPI com o mesmo título — ou com o
+    // título em JSX, que virava "x" — caíam no mesmo grupo de rádios; medido no Chromium e no Firefox, o primeiro já
+    // perdia a barra escolhida ao carregar. Marcação pura não chama `useId` (a mesma regra do `menuId` do `Header`), então
+    // o nome junta o `id` do KPI, quando o app passa um, o rótulo e uma assinatura das próprias barras: dois KPI com dados
+    // diferentes nunca colidem, e dois idênticos se separam pelo `id`.
+    const nomeDoGrupo = bars && bars.length > 0 ? `kpi-bars-${props.id ? `${props.id}-` : ""}${typeof label === "string" ? label.toLowerCase().replace(/[^a-z0-9]+/g, "-") : "x"}-${assinatura(bars.map(b => `${b.label}:${b.amount}`).join("|"))}` : "";
     const barras = bars && bars.length > 0 && _jsxs("fieldset", { className: "kpi-bars-wrap", children: [typeof label === "string" && _jsx("legend", { className: "sr-only", children: label }), _jsx("div", { className: "kpi-bars", style: { "--kpi-bars": bars.length }, children: bars.map((b, i) => _jsxs("label", { className: "kpi-bar", children: [_jsx("input", { type: "radio", className: "kpi-bar-input", name: nomeDoGrupo, value: String(i), defaultChecked: i === escolhida, "aria-label": leituraDe(b) }), _jsx("span", { className: "kpi-bar-fill", style: { "--kpi-bar-h": `${Math.round(b.amount / maior * 100)}%` } }), _jsx("span", { className: "kpi-bar-reading", "aria-hidden": "true", children: leituraDe(b) })] }, i)) }), _jsx("div", { className: "kpi-bars-x", "aria-hidden": "true", style: { "--kpi-bars": bars.length }, children: bars.map((b, i) => _jsx("span", { children: b.label }, i)) })] });
     return variant === "plain" ? _jsxs("div", { className: cx("kpi", className), ...props, children: [miolo, barras] })
         : _jsxs(Card, { className: cx("kpi", variant === "brand" && "kpi-brand", className), ...props, children: [miolo, barras] });

package/dist/navigation-client.js

@@ -10,7 +10,7 @@ import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { useValorResponsivo } from "./responsivo-runtime.js";
-import { cx, fundirRender, useAureaStrings, usePortalContainer } from "./internal.js";
+import { cx, fundirRender, useAureaStrings, usePortalContainer, useDeslize } from "./internal.js";
 import { Kbd, ProgressCircle } from "./markup.js";
 import { Icon } from "./system.js";
 import { Button, IconButton } from "./actions.js";
@@ -37,7 +37,7 @@ export function Stepper({ items, label, variant = "default", startContent, endCo
     return lista;
 }
 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: "caret-right", size: "sm" }), " ", i.render ? fundirRender(i.render, { children: i.label }, "a") : 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, orientation, activateOnFocus = true, loopFocus, panel = "card", variant = "primary" }) { 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: cx("tabs", variant === "secondary" && "tabs-secondary"), "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: panel === "plain" ? "tabs-panel" : "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
+export function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus = true, loopFocus, panel = "card", variant = "primary" }) { const s = useAureaStrings(); const ancora = useRef(null); const resolvida = useValorResponsivo(orientation, "horizontal", ancora); const lista = useRef(null); useDeslize(lista, ".tab[data-active]", value); return _jsxs(BaseTabs.Root, { ref: ancora, value: value, onValueChange: v => onChange(String(v)), orientation: resolvida, className: "tabs-root", children: [_jsx(BaseTabs.List, { ref: lista, className: cx("tabs", variant === "secondary" && "tabs-secondary"), "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: panel === "plain" ? "tabs-panel" : "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
 function paginasVisiveis(page, total, siblings) {
     if (total <= 5 + siblings * 2)
         return Array.from({ length: total }, (_, i) => i + 1);

package/dist/overlays.d.ts

@@ -76,6 +76,10 @@ interface MenuItemBase {
     label: ReactNode;
     disabled?: boolean;
     leadingIcon?: IconName;
+    /** 0.55.0: a explicação embaixo do nome, na letra pequena (a anatomia do item da referência). */
+    description?: ReactNode;
+    /** 0.55.0: o ícone na ponta do item — por exemplo, o "abre fora" de um link que abre outro site. */
+    trailingIcon?: IconName;
 }
 /** Item de ação — a forma de sempre. `kind` é opcional para não quebrar quem já usa. */
 export interface MenuActionDef extends MenuItemBase {
@@ -93,6 +97,8 @@ export interface MenuLinkDef {
     kind: "link";
     label: ReactNode;
     leadingIcon?: IconName;
+    description?: ReactNode;
+    trailingIcon?: IconName;
     href: string;
     target?: string;
     rel?: string;
@@ -137,10 +143,12 @@ export type MenuEntry = MenuActionDef | MenuLinkDef | MenuCheckboxDef | MenuRadi
 /** @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 }: {
+export declare function DropdownMenu({ trigger, items, side, align, label }: {
     trigger: ReactElement;
     items: MenuEntry[];
     side?: OverlaySide;
+    /** 0.55.0: por onde o menu se alinha ao gatilho — `"end"` encosta a ponta dele na ponta do botão (a referência, no botão dividido). */
+    align?: "start" | "center" | "end";
     label?: string;
 }): React.JSX.Element;
 export declare function ContextMenu({ children, items, label, className }: {

package/dist/overlays.js

@@ -150,26 +150,31 @@ const marca = (children) => _jsx("span", { className: "menu-mark", "aria-hidden"
 // 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) {
+// O item com `description` (0.55.0) se anuncia como o da referência: o NOME é só o rótulo e a explicação é a DESCRIÇÃO
+// (`aria-labelledby` + `aria-describedby`). Sem isso o leitor de tela lia os dois colados ("View as MarkdownView page as…").
+// `ids` é o `useId` de quem monta o menu, mais a posição do item: estável no servidor e no navegador.
+const nomeDoItem = (x, id) => x.description != null ? { "aria-labelledby": `${id}-l`, "aria-describedby": `${id}-d` } : {};
+function renderMenuItems(items, portal, ids = "") {
     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] });
+        const id = `${ids}-${i}`;
+        const dentro = (x, xid = id) => _jsxs(_Fragment, { children: [x.leadingIcon && _jsx(Icon, { name: x.leadingIcon }), x.description != null ? _jsxs("span", { className: "menu-item-text", children: [_jsx("span", { id: `${xid}-l`, children: x.label }), _jsx("span", { id: `${xid}-d`, className: "menu-item-description", children: x.description })] }) : x.label, x.trailingIcon && _jsx(Icon, { name: x.trailingIcon, className: "menu-item-trailing" })] });
         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);
+                return _jsxs(BaseMenu.Group, { children: [g.label && _jsx(BaseMenu.GroupLabel, { className: "menu-label", children: g.label }), renderMenuItems(g.items, portal, id)] }, 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);
+                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, ...nomeDoItem(r, `${id}-${j}`), children: [marca(_jsx(BaseMenu.RadioItemIndicator, { className: "menu-ponto" })), dentro(r, `${id}-${j}`)] }, 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: "caret-right", size: "sm", className: "menu-seta" })] }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { className: "positioner", side: "inline-end", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(sm.items, portal) }) }) })] }, i);
+                return _jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: "menu-item", disabled: sm.disabled, ...nomeDoItem(sm, id), children: [dentro(sm), _jsx(Icon, { name: "caret-right", size: "sm", className: "menu-seta" })] }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { className: "positioner", side: "inline-end", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(sm.items, portal, id) }) }) })] }, i);
             }
             case "checkbox": {
                 const c = it;
@@ -178,26 +183,26 @@ function renderMenuItems(items, portal) {
                 // 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: "check", size: "sm" }) })), dentro(c)] }, i);
+                return _jsxs(BaseMenu.CheckboxItem, { className: "menu-item", disabled: c.disabled, checked: c.checked, defaultChecked: c.defaultChecked, onCheckedChange: v => c.onCheckedChange?.(v), ...nomeDoItem(c, id), children: [marca(_jsx(BaseMenu.CheckboxItemIndicator, { children: _jsx(Icon, { name: "check", 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);
+                return _jsx(BaseMenu.LinkItem, { className: "menu-item", href: l.href, target: l.target, rel: l.rel, closeOnClick: l.closeOnClick ?? true, ...nomeDoItem(l, id), 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);
+                return _jsx(BaseMenu.Item, { className: "menu-item", disabled: a.disabled, onClick: a.onClick, render: a.render, ...nomeDoItem(a, id), 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, { className: "positioner", side: side, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal) }) }) })] }); }
+export function DropdownMenu({ trigger, items, side = "bottom", align = "center", label }) { const portal = usePortalContainer(); const ids = React.useId(); return _jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { container: portal, children: _jsx(BaseMenu.Positioner, { className: "positioner", side: side, align: align, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal, ids) }) }) })] }); }
 // 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, { className: "positioner", children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal) }) }) })] }); }
+export function ContextMenu({ children, items, label, className }) { const portal = usePortalContainer(); const ids = React.useId(); 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, { className: "positioner", children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items, portal, ids) }) }) })] }); }
 // 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/0047-css-first-para-apresentacao-runtime-para-semantica.md`.
@@ -206,5 +211,6 @@ export function Menubar({ menus, label, modal, disabled, loopFocus, orientation,
     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, { className: "positioner", side: vertical ? "inline-end" : "bottom", align: "start", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(m.items) }) }) })] }, i)) });
+    const ids = React.useId();
+    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, { className: "positioner", side: vertical ? "inline-end" : "bottom", align: "start", sideOffset: 4, children: _jsx(BaseMenu.Popup, { className: "menu", children: renderMenuItems(m.items, portal, `${ids}-${i}`) }) }) })] }, i)) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.54.1",
+  "version": "0.59.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",