@aurea-uds/react 0.8.7 → 0.8.10

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/index.d.ts

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

package/dist/index.js

@@ -51,7 +51,7 @@ export { ContainerScope, useValorResponsivo } from "./responsivo-runtime.js";
 // inteiro). O que muda é de ONDE ele vem — do módulo com a diretiva —, e aí ele volta a chegar
 // como referência de CLIENTE e os 118,5 KB voltam com ele. Não é um erro: é o ganho do item O1
 // se desfazendo em silêncio. É isso, exatamente isso, que o check 35 pega.
-export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Select, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount } from "./markup.js";
+export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";

package/dist/inputs-client.d.ts

@@ -1,17 +1,19 @@
-import React, { type HTMLAttributes, type InputHTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import React, { type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type RefAttributes, type ReactNode } from "react";
 import { type Responsive } from "./pure.js";
 import { type FieldSize } from "./markup.js";
 import { type IconName } from "./system.js";
 export { FileInput, matchesAccept, type FileRejection, type UploadContext, type UploadFn } from "./file-input.js";
 export type FieldOrientation = "vertical" | "horizontal";
+export type FieldLabelWidth = "auto" | (string & {});
 export interface FieldProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     label: string;
     hint?: ReactNode;
     error?: ReactNode;
     name?: string;
     orientation?: Responsive<FieldOrientation>;
+    labelWidth?: FieldLabelWidth;
 }
-export declare function Field({ label, hint, error, children, className, id, name, orientation, ...props }: FieldProps): React.JSX.Element;
+export declare function Field({ label, hint, error, children, className, id, name, orientation, labelWidth, style, ...props }: FieldProps): React.JSX.Element;
 export declare function Form({ errors, onSubmit, children, className, ...props }: Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & RefAttributes<HTMLFormElement> & {
     errors?: Record<string, string | string[]>;
     onSubmit?: (values: Record<string, unknown>) => void;
@@ -103,6 +105,37 @@ export declare function MultiCombobox({ items, value, onValueChange, onInputChan
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false";
 }): React.JSX.Element;
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectOptGroup {
+    label: ReactNode;
+    items: SelectOption[];
+}
+type SelectChange = {
+    target: {
+        value: string;
+        name?: string;
+    };
+    currentTarget: {
+        value: string;
+        name?: string;
+    };
+};
+export interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange" | "name">, RefAttributes<HTMLButtonElement> {
+    items?: SelectOption[] | SelectOptGroup[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: SelectChange) => void;
+    onValueChange?: (value: string) => void;
+    placeholder?: ReactNode;
+    name?: string;
+    required?: boolean;
+    size?: Responsive<FieldSize>;
+}
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 export interface EditorBlock {
     id: string;
     kind?: ReactNode;

package/dist/inputs-client.js

@@ -6,6 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React, { forwardRef } from "react";
 import { valorBase, peleDoEixo, soOValor } from "./pure.js";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Select as BaseSelect } from "@base-ui/react/select";
 import { Form as BaseForm } from "@base-ui/react/form";
 import { Field as BaseField } from "@base-ui/react/field";
 import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
@@ -17,7 +18,7 @@ import { cx, useAureaStrings, usePortalContainer, useReorder } from "./internal.
 // diretiva — são marcação, e quem escuta `onChange` é o consumidor. Voltam IMPORTADOS e não só
 // reexportados porque o `ehControle` do `Field` compara por IDENTIDADE de referência: dois
 // objetos diferentes com o mesmo nome quebrariam o rótulo do campo em silêncio.
-import { Select, Textarea, Checkbox, Radio, Switch, Range, InputGroup, InputGroupAddon } from "./markup.js";
+import { Textarea, Checkbox, Radio, Switch, Range, InputGroup, InputGroupAddon } from "./markup.js";
 import { Icon } from "./system.js";
 import { IconButton } from "./actions.js";
 // FileInput mora em arquivo próprio (132 linhas — upload real, aborto, progresso) e é público
@@ -78,7 +79,7 @@ function elementoRotulavel(tipo) {
     // regra que os outros: recebe `id` e espalha `...props` no `Input`, que é o nó focal.
     return [Input, Select, Textarea, SearchField, PasswordField, Checkbox, Radio, Switch, Range, Combobox, MultiCombobox].includes(tipo);
 }
-export function Field({ label, hint, error, children, className, id, name, orientation, ...props }) {
+export function Field({ label, hint, error, children, className, id, name, orientation, labelWidth, style, ...props }) {
     const auto = React.useId();
     // Fragment não cria nó no DOM. Um Fragment com um só controle é só sintaxe; com vários,
     // Field precisa voltar para grupo em vez de pendurar `htmlFor` num id que nunca existirá.
@@ -122,7 +123,8 @@ export function Field({ label, hint, error, children, className, id, name, orien
     // embrulho o `Field.Root` recebe o erro e não tem a quem entregá-lo, e o campo fica válido na
     // árvore de acessibilidade enquanto a frase de erro aparece na tela. Pior que não mostrar.
     const controleFinal = name ? _jsx(BaseField.Control, { render: controle }) : controle;
-    const corpo = _jsxs("div", { className: cx("field", peleDoEixo("field", orientation, "vertical", "field"), className), ...(nomeAqui ? {} : { role: "group", "aria-labelledby": idRotulo, ...(rotulavel ? {} : { "aria-describedby": descrito }) }), ...props, children: [_jsxs("span", { className: "label", children: [nomeAqui ? _jsx("label", { htmlFor: idControle, children: label }) : _jsx("span", { id: idRotulo, children: label }), hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controleFinal, error && _jsx("span", { className: "field-error", id: idErro, children: error }), name && _jsx(BaseField.Error, { className: "field-error" })] });
+    const estilo = labelWidth ? { ...style, "--field-label-width": labelWidth === "auto" ? "max-content" : labelWidth } : style;
+    const corpo = _jsxs("div", { className: cx("field", peleDoEixo("field", orientation, "vertical", "field"), className), ...(nomeAqui ? {} : { role: "group", "aria-labelledby": idRotulo, ...(rotulavel ? {} : { "aria-describedby": descrito }) }), style: estilo, ...props, children: [_jsxs("span", { className: "label", children: [nomeAqui ? _jsx("label", { htmlFor: idControle, children: label }) : _jsx("span", { id: idRotulo, children: label }), hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controleFinal, error && _jsx("span", { className: "field-error", id: idErro, children: error }), name && _jsx(BaseField.Error, { className: "field-error" })] });
     // `Field.Root` do motor entra SÓ quando há `name`: é ele que liga o campo à chave de `errors`
     // do formulário. Ele não desenha nada — é contexto — então a pele não muda.
     return name ? _jsx(BaseField.Root, { name: name, invalid: error ? true : undefined, render: corpo }) : corpo;
@@ -236,7 +238,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,10 +272,41 @@ 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)] }) }) })] });
 }
+const ehGrupoDoSelect = (i) => typeof i === "object" && i != null && "items" in i;
+// Lê `<option>`/`<optgroup>` como o navegador lê: `value` ausente vale o TEXTO da opção.
+function opcoesDosFilhos(children) {
+    const lista = [];
+    React.Children.forEach(children, filho => {
+        if (!React.isValidElement(filho))
+            return;
+        const pr = filho.props;
+        if (filho.type === "option")
+            lista.push({ value: String(pr.value ?? React.Children.toArray(pr.children).join("")), label: pr.children, disabled: pr.disabled });
+        else if (filho.type === "optgroup")
+            lista.push({ label: pr.label, items: opcoesDosFilhos(pr.children) });
+        else if (filho.type === React.Fragment)
+            lista.push(...opcoesDosFilhos(pr.children));
+    });
+    return lista;
+}
+const itemDoSelect = (o) => _jsxs(BaseSelect.Item, { value: o.value, disabled: o.disabled, className: "menu-item combobox-item", children: [_jsx("span", { className: "combobox-check", "aria-hidden": "true", children: _jsx(BaseSelect.ItemIndicator, { children: _jsx(Icon, { name: "checkmark", size: "sm" }) }) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value);
+export const Select = forwardRef(function Select({ items, children, value, defaultValue, onChange, onValueChange, placeholder, name, required, disabled, size, className, ...props }, ref) {
+    const portal = usePortalContainer();
+    const lista = items ?? opcoesDosFilhos(children);
+    const planas = lista.flatMap(i => ehGrupoDoSelect(i) ? i.items : [i]);
+    const inicial = value === undefined && defaultValue === undefined && placeholder === undefined ? planas.find(o => !o.disabled)?.value : defaultValue;
+    const mudar = (v) => {
+        const valor = v ?? "";
+        onValueChange?.(valor);
+        onChange?.({ target: { value: valor, name }, currentTarget: { value: valor, name } });
+    };
+    return _jsxs(BaseSelect.Root, { items: planas.map(o => ({ value: o.value, label: o.label })), ...(value !== undefined ? { value } : { defaultValue: inicial }), onValueChange: v => mudar(v), name: name, required: required, disabled: disabled, children: [_jsx(BaseSelect.Trigger, { ref: ref, className: cx("select", "select-trigger", peleDoEixo("select", size), className), ...props, children: _jsx(BaseSelect.Value, { placeholder: placeholder, className: "select-value" }) }), _jsx(BaseSelect.Portal, { container: portal, children: _jsx(BaseSelect.Positioner, { sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "menu combobox-popup", children: _jsx(BaseSelect.List, { children: lista.map((i, n) => ehGrupoDoSelect(i)
+                                ? _jsxs(BaseSelect.Group, { className: "combobox-section", children: [_jsx(BaseSelect.GroupLabel, { className: "combobox-group-label", children: i.label }), i.items.map(itemDoSelect)] }, n)
+                                : itemDoSelect(i)) }) }) }) })] });
+});
 export function BlockEditor({ blocks, onReorder, onRemove, label, className, ...props }) {
     const s = useAureaStrings();
     const bid = React.useId();

package/dist/inputs.d.ts

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

package/dist/inputs.js

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

package/dist/layout-client.d.ts

@@ -1,9 +1,12 @@
 import { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
 import { type Orientation, type Responsive } from "./pure.js";
-import { type TopbarVariant, type SidebarVariant } from "./navigation.js";
-export declare function AppShell({ brand, navigation, topbar, topbarVariant, sidebarVariant, sidebarCollapsed, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+import { type TopbarVariant, type SidebarVariant, type SidebarItem } from "./navigation.js";
+export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, sidebarVariant, sidebarCollapsed, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
-    navigation: ReactNode;
+    navigation?: ReactNode;
+    navItems?: SidebarItem[];
+    currentNavId?: string;
+    navLabel?: string;
     topbar?: ReactNode;
     topbarVariant?: Exclude<TopbarVariant, "pill">;
     sidebarVariant?: SidebarVariant;

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,9 +84,42 @@ 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";
-export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", sidebarVariant, sidebarCollapsed, children, className, ...props }) {
+// 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);
+    }, []);
+}
+// A LISTA DA LATERAL ENTRA PELO SHELL (A-03, 24/09/2026). O shell cria o `<Sidebar>` e só
+// repassava `children`; quem queria a lista declarativa (`items` + `current`) tinha de passar OUTRO
+// `<Sidebar>` como `navigation`, e saíam dois `<aside class="sidebar">` aninhados — duas bordas,
+// dois fundos, dois raios de 22px. Com a escala de letras da 0.8.8 a caixa de dentro passou a CORTAR
+// texto ("8.174" virava "8.17"), medido num app real a 1400px. `navItems`/`currentNavId` vão para o
+// Sidebar que o shell já cria, e a caixa dupla deixa de ser o único caminho. `navigation` continua
+// valendo para quem escreve a navegação à mão, e as duas se somam: a lista vem antes.
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", sidebarVariant, sidebarCollapsed, children, className, ...props }) {
     const s = useAureaStrings();
-    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Topbar, { variant: topbarVariant, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, collapsed: sidebarCollapsed, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: "content", children: children })] });
+    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, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: "content", children: children })] });
 }
 // ── Separator ────────────────────────────────────────────────────────────────────────────────
 // A LINHA DO SISTEMA, e ela é de CLIENTE por necessidade, não por vizinhança.

package/dist/markup.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type RefAttributes, type TextareaHTMLAttributes } from "react";
 import { type Responsive } from "./pure.js";
 import type { ComponentSize } from "./actions.js";
 export type BadgeVariant = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "running" | "paused" | "offline" | "review";
@@ -92,10 +92,6 @@ export declare function Topbar({ variant, brand, children, className, ...props }
     brand?: ReactNode;
 }): React.JSX.Element;
 export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">, RefAttributes<HTMLSelectElement> {
-    size?: Responsive<FieldSize>;
-}
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & RefAttributes<HTMLSelectElement>>;
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, RefAttributes<HTMLTextAreaElement> {
     size?: Responsive<FieldSize>;
 }

package/dist/markup.js

@@ -127,7 +127,6 @@ export function Topbar({ variant = "floating", brand, children, className, ...pr
 // morava fora da casa dele (no `internal.tsx`, por causa do `Button`); agora mora aqui, pelo
 // mesmo motivo elevado a regra.
 export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", className), ...props, children: children }); }
-export const Select = forwardRef(function Select({ className, size, ...props }, ref) { return _jsx("select", { ref: ref, className: cx("select", peleDoEixo("select", size), className), ...props }); });
 export const Textarea = forwardRef(function Textarea({ className, size, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", peleDoEixo("textarea", size), className), ...props }); });
 // `size` nos três marcáveis pela mesma razão do campo: uma linha de formulário com um campo `sm`
 // e um checkbox de tamanho fixo ao lado desalinha. O degrau vai na MARCA, não no rótulo.

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.10",
   "description": "React components for Aurea UDS. Import @aurea-uds/fonts/css and @aurea-uds/core/css alongside.",
   "keywords": [
     "aurea",