@aurea-uds/react 0.56.0 → 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/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.js

@@ -212,5 +212,5 @@ export function Menubar({ menus, label, modal, disabled, loopFocus, orientation,
     const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
     const vertical = resolvida === "vertical";
     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, undefined, `${ids}-${i}`) }) }) })] }, i)) });
+    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.56.0",
+  "version": "0.59.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",