@aurea-uds/react 0.8.7 → 0.8.8

package/dist/data-grid.js

@@ -149,6 +149,9 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
             id: "detail", enableSorting: false, enableHiding: false, header: () => null,
             cell: ({ row }) => _jsx(IconButton, { icon: "chevron--right", label: s.dataGridDetails, size: "sm", variant: "ghost", "aria-expanded": detailRowId === row.id, onClick: () => setDetailRowId(detailRowId === row.id ? null : row.id) }),
         }] : allColumns, [allColumns, renderDetail, detailRowId, s]);
+    // A função acima precisa da tabela, e a tabela é o que esta chamada devolve: a referência fecha o
+    // círculo. Ela é lida só quando o motor filtra, que é sempre depois da primeira montagem.
+    const tabelaRef = React.useRef(null);
     const table = useReactTable({
         data, columns: colunas, getRowId,
         state: { sorting, globalFilter, rowSelection, columnFilters, columnVisibility, columnSizing, ...(paginated ? { pagination } : {}) },
@@ -174,6 +177,22 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
+        // A BUSCA NÃO DEPENDE DE QUEM VEM PRIMEIRO (A-11, 23/09/2026). A regra do motor (TanStack v8,
+        // `GlobalFiltering.js`, `getColumnCanGlobalFilter`) olha SÓ a primeira linha: se o valor dela
+        // não for texto nem número, a coluna sai da busca. Medido num app com 298 endereços: o primeiro
+        // não tinha fabricante, e procurar "Hikvision" dava zero onde havia 17. A regra daqui é a mesma
+        // pergunta — "esta coluna guarda texto ou número?" — respondida pelo primeiro valor PRESENTE,
+        // não pela primeira linha. `enableGlobalFilter:false` na coluna continua mandando: o motor
+        // confere essa chave antes de chamar esta função.
+        getColumnCanGlobalFilter: coluna => {
+            for (const linha of tabelaRef.current?.getCoreRowModel().flatRows ?? []) {
+                const v = linha.getValue(coluna.id);
+                if (v == null || v === "")
+                    continue;
+                return typeof v === "string" || typeof v === "number";
+            }
+            return false;
+        },
         enableRowSelection: !!selectable,
         ...(paginated ? { getPaginationRowModel: getPaginationRowModel() } : {}),
         // só quando há faceta: os dois varrem os dados para montar o mapa de valores
@@ -183,6 +202,7 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
         // longe daqui, em `columns` e em `row.original`.
         ...(facetIds.size ? { getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues() } : {}),
     });
+    tabelaRef.current = table;
     const rows = table.getRowModel().rows;
     // O TAB STOP ROVING, e o `clamp` não é zelo: filtrar, ordenar ou paginar troca as linhas sob
     // o foco. Sem ele a grade inteira ficaria `tabIndex=-1` e sumiria da ordem do Tab — é o mesmo

package/dist/graph.d.ts

@@ -8,6 +8,7 @@ export interface GraphNodeItem {
     y?: number;
 }
 export interface GraphEdgeItem {
+    id?: string;
     from: string;
     to: string;
     label?: string;

package/dist/graph.js

@@ -39,7 +39,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Quem importa a folha é o CONSUMIDOR, uma vez, como já importa o `@aurea-uds/core/css`: um
 // `import "…css"` dentro deste módulo quebraria em Node puro e o build daqui é `tsc` só.
 import React from "react";
-import { ReactFlow, ReactFlowProvider, Background, Handle, Position, applyNodeChanges } from "@xyflow/react";
+import { ReactFlow, ReactFlowProvider, Background, BaseEdge, Handle, Position, applyNodeChanges, getBezierPath } from "@xyflow/react";
 import { cx, useAureaStrings } from "./internal.js";
 // ── O layout ─────────────────────────────────────────────────────────────────────────────
 // O motor recebe `x`/`y` PRONTOS: ele não posiciona nada. Sem isto, um grafo sem coordenadas
@@ -53,6 +53,17 @@ import { cx, useAureaStrings } from "./internal.js";
 // subida é o `elkjs`, que é o que o langfuse usa, e ele é DEPENDÊNCIA NOVA: entra com
 // autorização, não de contrabando.
 const LARGURA = 180, ALTURA = 52, VAO_X = 90, VAO_Y = 24;
+// O VÃO ENTRE COLUNAS CRESCE COM O RÓTULO (A-09, 23/09/2026). Com o rótulo legível, a primeira
+// imagem mostrou o que o preto escondia: "Te1/1/1 ↔ Te1/0/1" é mais largo que 90px e entrava por
+// baixo dos nós. O layout roda também no servidor, onde não há texto para medir, então a largura
+// é ESTIMADA com números medidos, não chutados: o rótulo é `--text-xs` (0.8125rem = 13px com a
+// raiz de 16px), e no Chromium, com a IBM Plex Sans 400 carregada, o algarismo mede 0,600 da
+// altura da letra e o texto de enlace ("Te1/1/1 ↔ Te1/0/1") mede 0,513 — o algarismo é o teto
+// do texto comum, e é ele que entra. Mais os 2 × 4px do fundo do rótulo (padrão do motor) e uma
+// folga de 16px de cada lado para a linha aparecer antes e depois dele. Nunca encolhe abaixo de
+// `VAO_X`: grafo sem rótulo sai idêntico ao de antes.
+const FONTE_DO_ROTULO = 13, GLIFO_DO_ROTULO = 0.6, FUNDO_X = 8, FOLGA_X = 32;
+const vaoEntreColunas = (edges) => Math.max(VAO_X, ...edges.map(e => e.label ? Math.ceil(e.label.length * FONTE_DO_ROTULO * GLIFO_DO_ROTULO) + FUNDO_X + FOLGA_X : 0));
 function dispor(nodes, edges) {
     const entram = new Map();
     for (const n of nodes)
@@ -79,13 +90,14 @@ function dispor(nodes, edges) {
     };
     for (const n of nodes)
         calcular(n.id);
+    const vaoX = vaoEntreColunas(edges);
     const ocupacao = new Map();
     const posicoes = new Map();
     for (const n of nodes) {
         const d = profundidade.get(n.id) ?? 0;
         const linha = ocupacao.get(d) ?? 0;
         ocupacao.set(d, linha + 1);
-        posicoes.set(n.id, { x: d * (LARGURA + VAO_X), y: linha * (ALTURA + VAO_Y) });
+        posicoes.set(n.id, { x: d * (LARGURA + vaoX), y: linha * (ALTURA + VAO_Y) });
     }
     // A EXTENSÃO existe para o SERVIDOR: sem ela o `fitView` não tem viewport para caber, e o
     // grafo renderizado fora do navegador sai ancorado no canto, com metade dos nós do lado de
@@ -97,7 +109,7 @@ function dispor(nodes, edges) {
     // interno o acionava sem ser prop de ninguém.
     const colunas = Math.max(...[...ocupacao.keys()], 0) + 1;
     const linhas = Math.max(...[...ocupacao.values()], 1);
-    return { posicoes, extensao: { larg: colunas * LARGURA + (colunas - 1) * VAO_X, alt: linhas * ALTURA + (linhas - 1) * VAO_Y } };
+    return { posicoes, extensao: { larg: colunas * LARGURA + (colunas - 1) * vaoX, alt: linhas * ALTURA + (linhas - 1) * VAO_Y } };
 }
 // O nó é NOSSO, e é o ponto em que este componente deixa de ser "React Flow com outra cor".
 // O `GraphNode.tsx` do langfuse declara o motivo em uma linha — *"Real-HTML accessibility (the
@@ -115,6 +127,47 @@ function NoAurea({ data }) {
                 : _jsx("span", { className: "graph-node-body", children: corpo }), d.conectavel && _jsx(Handle, { type: "source", position: Position.Right, isConnectable: true, className: "graph-handle" })] });
 }
 const TIPOS = { aurea: NoAurea };
+// ── A ARESTA, e por que ela também é nossa (A-09 e A-10, 23/09/2026) ─────────────────────────
+// A-09 · O RÓTULO SAÍA PRETO SOBRE PRETO no tema escuro. O core declara `--xy-edge-label-color` e
+// `--xy-edge-label-background-color` desde o H14, e NINGUÉM AS LIA: quem consome essas duas é o
+// `style.css` do motor — a identidade dele, que esta casa proíbe —, e não o `base.css` que o
+// consumidor importa. Medido em 23/09 num app que instalou a 0.8.7: `fill: rgb(0,0,0)` no texto e
+// no fundo. As variáveis continuam sendo a fonte, e agora quem as lê é o próprio rótulo.
+//
+// A-10 · ARESTAS PARALELAS. Com `id` distinto as duas existem, mas o motor desenha as duas no
+// MESMO caminho e os rótulos se sobrepõem. Cada uma sai de uma altura própria do nó: as `n`
+// paralelas dividem a altura do nó em `n + 1` partes iguais. Uma aresta só fica no meio, que é o
+// desenho de antes. O número vem de `ALTURA`, a do próprio nó — não há distância inventada aqui.
+const ROTULO = { fill: "var(--xy-edge-label-color)", fontSize: "var(--text-xs)" };
+const FUNDO_DO_ROTULO = { fill: "var(--xy-edge-label-background-color)" };
+function ArestaAurea({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, data, markerEnd, style }) {
+    const dy = data?.deslocamento ?? 0;
+    const [caminho, lx, ly] = getBezierPath({ sourceX, sourceY: sourceY + dy, sourcePosition, targetX, targetY: targetY + dy, targetPosition });
+    return _jsx(BaseEdge, { id: id, path: caminho, labelX: lx, labelY: ly, label: label, markerEnd: markerEnd, style: style, labelStyle: ROTULO, labelShowBg: true, labelBgStyle: FUNDO_DO_ROTULO });
+}
+const TIPOS_DE_ARESTA = { aurea: ArestaAurea };
+/** Identidade e deslocamento de cada aresta — interno; o teste lê o resultado no DOM. */
+function arestasParalelas(edges) {
+    const total = new Map();
+    for (const e of edges) {
+        const k = `${e.from}->${e.to}`;
+        total.set(k, (total.get(k) ?? 0) + 1);
+    }
+    const vista = new Map();
+    const usados = new Set();
+    return edges.map(e => {
+        const par = `${e.from}->${e.to}`;
+        const k = vista.get(par) ?? 0;
+        vista.set(par, k + 1);
+        const n = total.get(par);
+        // Sem `id`, a primeira do par mantém o id de sempre; a segunda em diante ganha o índice.
+        let id = e.id ?? (k === 0 ? par : `${par}#${k}`);
+        while (usados.has(id))
+            id = `${id}#`;
+        usados.add(id);
+        return { id, deslocamento: n > 1 ? ALTURA * ((k + 1) / (n + 1) - 1 / 2) : 0 };
+    });
+}
 // DependencyGraph — quem depende de quem.
 //
 // O vocabulário da API é NOSSO — `{from,to}`, não `{source,target}`. Não é preciosismo: é o que
@@ -150,10 +203,13 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
     // medido em 29/08/2026, a prop do fluxo não tira a classe `.selectable` da aresta, que é onde
     // o `base.css` do motor põe `cursor:pointer`. A mão de ponteiro prometia um clique que a API
     // da Aurea não atende — `onSelect` é do NÓ, e quem o atende é o <button> do corpo dele.
-    const arestasDoMotor = React.useMemo(() => edges.map(e => ({
-        id: `${e.from}->${e.to}`, source: e.from, target: e.to, label: e.label, animated: e.animated,
-        selectable: false,
-    })), [edges]);
+    const arestasDoMotor = React.useMemo(() => {
+        const ident = arestasParalelas(edges);
+        return edges.map((e, i) => ({
+            id: ident[i].id, type: "aurea", source: e.from, target: e.to, label: e.label, animated: e.animated,
+            data: { deslocamento: ident[i].deslocamento }, selectable: false,
+        }));
+    }, [edges]);
     // ── A MEDIDA TEM DE PODER VOLTAR, e isto foi achado NO NAVEGADOR ───────────────────────
     // A primeira versão passava `nodes` e nenhum `onNodesChange`. O motor aceita calado e o
     // resultado é um grafo INVISÍVEL: ele só tira o `visibility:hidden` do nó depois de gravar
@@ -178,6 +234,6 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
     // que o `fitView` usa ENQUANTO ninguém mediu. Com o prefixo `initial`, o navegador sobrescreve
     // na primeira medição — passar `width`/`height` direto no ReactFlow fixaria o tamanho e mataria
     // a fluidez. O valor é a extensão do próprio layout, então no servidor o grafo cabe exato.
-    return _jsx("div", { className: cx("dependency-graph", className), style: height ? { blockSize: height } : undefined, role: "group", "aria-label": label ?? s.graphLabel, ...props, children: _jsx(ReactFlowProvider, { initialNodes: nosDoMotor, initialEdges: arestasDoMotor, fitView: true, initialWidth: automatico.extensao.larg, initialHeight: automatico.extensao.alt, children: _jsx(ReactFlow, { nodes: nosVivos, onNodesChange: aoMudarNos, edges: arestasDoMotor, nodeTypes: TIPOS, fitView: true, proOptions: { hideAttribution: false }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: false, onNodeDragStop: onNodeMove ? (_, no) => onNodeMove(no.id, no.position) : undefined, onConnect: onConnect ? c => { if (c.source && c.target)
+    return _jsx("div", { className: cx("dependency-graph", className), style: height ? { blockSize: height } : undefined, role: "group", "aria-label": label ?? s.graphLabel, ...props, children: _jsx(ReactFlowProvider, { initialNodes: nosDoMotor, initialEdges: arestasDoMotor, fitView: true, initialWidth: automatico.extensao.larg, initialHeight: automatico.extensao.alt, children: _jsx(ReactFlow, { nodes: nosVivos, onNodesChange: aoMudarNos, edges: arestasDoMotor, nodeTypes: TIPOS, edgeTypes: TIPOS_DE_ARESTA, fitView: true, proOptions: { hideAttribution: false }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: false, onNodeDragStop: onNodeMove ? (_, no) => onNodeMove(no.id, no.position) : undefined, onConnect: onConnect ? c => { if (c.source && c.target)
                     onConnect({ from: c.source, to: c.target }); } : undefined, children: _jsx(Background, {}) }) }) });
 }

package/dist/inputs-client.js

@@ -236,7 +236,11 @@ export function SegmentedControl({ items, value, onChange, label }) {
 const ehAgrupado = (items) => items != null && items.length > 0 && typeof items[0] === "object" && items[0] != null && "items" in items[0];
 // UM renderizador e UMA lista para os dois combobox: duas cópias da mesma árvore é como a
 // segunda fica para trás na mudança seguinte.
-const renderComboboxItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
+// A COLUNA DO CHECK EXISTE SEMPRE (A-01, 23/09/2026). O `ItemIndicator` do Base UI não põe
+// NADA no DOM quando o item não está escolhido; com um filho só, o texto caía na primeira coluna
+// da grade — a de 16px — e quebrava em duas ou três linhas. O invólucro fica montado sempre, como
+// o `.menu-mark` do `Menu` já faz, e o indicador aparece e some DENTRO dele.
+const renderComboboxItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx("span", { className: "combobox-check", "aria-hidden": "true", children: _jsx(BaseCombobox.ItemIndicator, { children: _jsx(Icon, { name: "checkmark", size: "sm" }) }) }), _jsx("span", { children: item.label })] }, item.value);
 const listaCombobox = (items) => _jsx(BaseCombobox.List, { children: ehAgrupado(items)
         ? (group) => _jsxs(BaseCombobox.Group, { items: group.items, className: "combobox-section", children: [_jsx(BaseCombobox.GroupLabel, { className: "combobox-group-label", children: group.label }), _jsx(BaseCombobox.Collection, { children: renderComboboxItem })] }, group.label)
         : renderComboboxItem });
@@ -266,7 +270,6 @@ export function MultiCombobox({ items, value, onValueChange, onInputChange, load
     const portal = usePortalContainer();
     const autoId = React.useId();
     const inputId = id ?? autoId;
-    const renderItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
     return _jsxs(BaseCombobox.Root, { multiple: true, items: items, value: value, onValueChange: soOValor(onValueChange), disabled: disabled, itemToStringLabel: (i) => i.label, filter: onInputChange ? null : undefined, onInputValueChange: onInputChange ? ((v, d) => { if (d.reason !== "item-press")
             onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input", "aria-describedby": descrito, "aria-invalid": invalido })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : (empty ?? s.comboboxEmpty) }), listaCombobox(items)] }) }) })] });
 }

package/dist/layout-client.js

@@ -3,10 +3,11 @@ 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 { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Separator as BaseSeparator } from "@base-ui/react/separator";
 import { cx, useAureaStrings } from "./internal.js";
 import { useValorResponsivo } from "./responsivo-runtime.js";
+import { ESCALA } from "./escala.js";
 import { IconButton } from "./actions.js";
 import { Sidebar, Topbar } from "./navigation.js";
 // ── Auxiliar de topo: mora ANTES do primeiro export, e a posição é obrigatória ───────────────
@@ -83,8 +84,34 @@ function focoDaGaveta(e) {
 // então id fixo é estável e não colide. Sem alvo estável não há como o link existir.
 const SHELL_MAIN_ID = "aurea-shell-main";
 const SHELL_NAV_ID = "aurea-shell-nav";
+// A GAVETA NÃO SOBREVIVE À SUBIDA PARA O DESKTOP (A-07, 23/09/2026). Aberta em tela estreita e
+// alargada a janela, ela ficava no top layer — que é estado do DOM, e nenhuma media query tira um
+// elemento de lá —, flutuando fora de posição, sem véu, e com o botão que a fecharia escondido pelo
+// CSS acima de lg. Girar um tablet ou encaixar a janela de lado no Windows bastava. O número é o
+// `ESCALA.lg`, gerado dos tokens pela mesma leitura que escreve o `@media (max-width:1023px)` do
+// core: um número só, e o `consumidores-lote1.test` cobra que o do `aurea.js` é o mesmo.
+function useGavetaFechaNoDesktop() {
+    useEffect(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+            return;
+        const mq = window.matchMedia(`(min-width: ${ESCALA.lg}px)`);
+        const aoMudar = (e) => {
+            if (!e.matches)
+                return;
+            const gaveta = document.getElementById(SHELL_NAV_ID);
+            try {
+                if (gaveta?.matches(":popover-open"))
+                    gaveta.hidePopover();
+            }
+            catch { /* motor sem popover */ }
+        };
+        mq.addEventListener?.("change", aoMudar);
+        return () => mq.removeEventListener?.("change", aoMudar);
+    }, []);
+}
 export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", sidebarVariant, sidebarCollapsed, children, className, ...props }) {
     const s = useAureaStrings();
+    useGavetaFechaNoDesktop();
     return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Topbar, { variant: topbarVariant, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, collapsed: sidebarCollapsed, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: "content", children: children })] });
 }
 // ── Separator ────────────────────────────────────────────────────────────────────────────────

package/dist/navigation-client.d.ts

@@ -72,7 +72,7 @@ export interface SidebarItem {
     items?: SidebarItem[];
 }
 export type SidebarVariant = "floating" | "flush";
-export declare function Sidebar({ items, current, collapsed, variant, label, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+export declare function Sidebar({ items, current, collapsed, variant, label, children, className, onClick, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     items?: SidebarItem[];
     current?: string;
     collapsed?: boolean;

package/dist/navigation-client.js

@@ -193,10 +193,31 @@ function sidebarList(items, ctx, sub, labelledBy) {
             return _jsxs("li", { children: [ctx.collapsed ? _jsx(Tooltip, { content: it.label, side: "right", children: alvo }) : alvo, filhos && sidebarList(filhos, ctx, true, lid)] }, it.id);
         }) });
 }
-export function Sidebar({ items, current, collapsed, variant = "floating", label, children, className, ...props }) {
+// A GAVETA FECHA AO ESCOLHER (A-06, 23/09/2026). Abaixo de lg a lateral do `AppShell` é popover,
+// e a biblioteca a abria e NUNCA a fechava por código: `hidePopover` tinha zero ocorrências. O
+// usuário tocava "Filmes", a página trocava por baixo e a gaveta ficava na frente dela. Material 3,
+// Fluent 2 e o guia de gaveta do iOS fecham ao escolher. O fechamento mora NA LATERAL, e não no
+// item, para valer também para a navegação que o consumidor escreve e passa como `children` — o
+// catálogo é um desses. Fora do popover (desktop, lateral solta) o teste de `:popover-open` falha e
+// nada acontece. O `try` é porque `:popover-open` é seletor desconhecido em motor antigo, e lá o
+// `matches` lança em vez de devolver falso.
+function fecharGavetaAoEscolher(e) {
+    if (e.defaultPrevented)
+        return;
+    const gaveta = e.currentTarget;
+    const alvo = e.target?.closest?.("a[href], .sidebar-item");
+    if (!alvo || !gaveta.contains(alvo))
+        return;
+    try {
+        if (gaveta.matches(":popover-open"))
+            gaveta.hidePopover();
+    }
+    catch { /* motor sem popover: não há gaveta */ }
+}
+export function Sidebar({ items, current, collapsed, variant = "floating", label, children, className, onClick, ...props }) {
     const s = useAureaStrings();
     const baseId = React.useId();
-    return _jsxs("aside", { className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, collapsed && "sidebar-collapsed", className), ...props, children: [items && items.length > 0 && _jsx("nav", { className: "sidebar-nav", "aria-label": label ?? s.sidebarLabel, children: sidebarList(items, { baseId, current, collapsed }) }), children] });
+    return _jsxs("aside", { className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, collapsed && "sidebar-collapsed", className), onClick: e => { onClick?.(e); fecharGavetaAoEscolher(e); }, ...props, children: [items && items.length > 0 && _jsx("nav", { className: "sidebar-nav", "aria-label": label ?? s.sidebarLabel, children: sidebarList(items, { baseId, current, collapsed }) }), children] });
 }
 const LEGADO = {
     flat: ["edge", "none"], surface: ["floating", "circle"], pill: ["floating", "pill"], dock: ["floating", "circle"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "React components for Aurea UDS. Import @aurea-uds/fonts/css and @aurea-uds/core/css alongside.",
   "keywords": [
     "aurea",