@aurea-uds/core 0.8.7 → 0.8.10

package/dist/aurea.css

@@ -6,14 +6,14 @@
   --font-ui:"IBM Plex Sans","Segoe UI",sans-serif;
   --font-editorial:"IBM Plex Serif",Georgia,serif;
   --font-code:"IBM Plex Mono",SFMono-Regular,Consolas,monospace;
-  --text-xs:0.75rem;
-  --text-sm:0.8125rem;
-  --text-md:0.875rem;
+  --text-xs:0.8125rem;
+  --text-sm:1rem;
+  --text-md:1rem;
   --text-base:1rem;
-  --text-lg:1.125rem;
+  --text-lg:1.25rem;
   --text-xl:1.25rem;
-  --text-2xl:1.5rem;
-  --text-3xl:1.875rem;
+  --text-2xl:1.5625rem;
+  --text-3xl:1.9375rem;
   --text-4xl:2.25rem;
   --text-5xl:3rem;
   --leading-tight:1.2;
@@ -691,7 +691,12 @@ img,svg { display:block; }
    espaço normal — degrada, não quebra. Nenhuma das nove referências usa isto: medido,
    `grep -ri safe-area-inset Referencia/` = 0. Veio de pesquisa, pelo BUILDING.md §2
    passo 4. */
-.bottom-nav { --bottomnav-ring:2rem; --bottomnav-surface:var(--card); position:sticky; bottom:0; z-index:var(--z-sticky); display:flex; gap:var(--space-1); margin:var(--space-4); padding:var(--space-1); padding-bottom:max(var(--space-1),env(safe-area-inset-bottom)); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-md); }
+/* A folga do sistema fica POR FORA da pilula: `margin-bottom`, nao `padding-bottom`. Conserto de
+   19/09/2026, medido em Android com os tres botoes — como recheio, os ~48 pontos da faixa do
+   sistema faziam a pilula crescer para baixo e a barriga dela ficava atras dos botoes. A borda de
+   baixo agora fica `--space-4` acima da area do sistema, em qualquer aparelho.
+   A variante `edge` reverte isto mais abaixo, e la o recheio e' o certo. */
+.bottom-nav { --bottomnav-ring:2rem; --bottomnav-surface:var(--card); position:sticky; bottom:0; z-index:var(--z-sticky); display:flex; gap:var(--space-1); margin:var(--space-4); margin-bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); padding:var(--space-1); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-md); }
 /* `--control-h-lg` e não `--control-h-md`: alvo de toque. O md dá 36px em comfortable e
    o alvo confortável de dedo é maior — com o recuo, o item renderiza acima de 44px. */
 .bottom-nav-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); min-height:var(--control-h-lg); padding:var(--space-1); border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-xs); text-align:center; text-decoration:none; cursor:pointer; }
@@ -778,7 +783,9 @@ img,svg { display:block; }
 
    `--bottomnav-ring` é a moldura do ícone quando o indicador é redondo. Válvula no idioma do
    `--chart-h` e do `--datagrid-max-h`: quem hospeda decide, o componente não vira prop nova. */
-.bottom-nav-edge { --bottomnav-surface:var(--background); margin:0; padding-inline:0; border-width:1px 0 0; border-radius:0; background:var(--background); box-shadow:none; }
+/* `edge` encosta na borda, entao a folga do sistema volta a ser RECHEIO — por fora ela deixaria
+   uma faixa de fundo entre a barra e o pe' da tela. `max` e nao soma, como sempre foi. */
+.bottom-nav-edge { --bottomnav-surface:var(--background); margin:0; padding-inline:0; padding-bottom:max(var(--space-1),env(safe-area-inset-bottom)); border-width:1px 0 0; border-radius:0; background:var(--background); box-shadow:none; }
 /* `--primary-emphasis` e não `--primary`: sem fundo, a marca vira TEXTO, e o amarelo puro
    sobre o claro não se lê. É o mesmo token que o `.badge-primary` já usa por essa razão. */
 .bottom-nav-ind-none .bottom-nav-item[aria-current] { color:var(--primary-emphasis); }
@@ -2035,8 +2042,15 @@ img,svg { display:block; }
 /* `--menu-px` existe porque o RÓTULO DE GRUPO tem de alinhar com o texto dos itens, e o número
    estava escrito duas vezes. Uma relação entre duas regras não se mantém repetindo a constante:
    quem mudar o recuo do item mudaria o alinhamento do rótulo sem perceber. */
-.menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:6px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
-.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:var(--radius-sm); background:transparent; color:var(--foreground); font:inherit; text-align:start; cursor:pointer; }
+/* O RAIO DA LINHA DO MENU SAI DA CONTA DA CASA (C-09, 23/09/2026 — decidido pelo Victor: 18px).
+   O item tinha `--radius-sm` cravado (8px) dentro de um painel de 16px com 6px de respiro: nem a
+   conta (16 − 6 = 10) ele seguia. Ele comparou 8, 10 e 18 no popup real e escolheu 18 — que é
+   exatamente o que a conta já dá na `.sidebar-item` e na `.nav-list-row` (22 − 4). Para o 18
+   continuar sendo CONTA e não número, o painel passa a ter as medidas da lateral: raio de cartão
+   e `--space-1` de respiro. Vale para toda lista que usa `.menu`: Combobox, MultiCombobox,
+   DropdownMenu, ContextMenu, Menubar e a lista da CommandPalette. */
+.menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; cursor:pointer; }
 .menu-item[data-highlighted],.menu-item:hover:not([data-disabled]) { background:var(--surface-3); outline:none; }
 .menu-item[data-disabled] { opacity:.5; cursor:not-allowed; }
 /* CommandPalette (M6): a lista dentro da paleta. Reusa `.menu` e `.menu-item` — a paleta nao
@@ -2095,11 +2109,21 @@ img,svg { display:block; }
 /* No lg os dois botões da direita sobem para md, então o reservado sobe junto (G-FORM-01). */
 .combobox-group .input-lg { padding-inline-end:calc(var(--control-h-md) * 2 + var(--space-3)); }
 .combobox-actions { position:absolute; inset-inline-end:5px; display:flex; align-items:center; gap:2px; }
+/* O gatilho do `Select` é um <button> vestido da pele `.select`: a cápsula, a seta e o degrau de
+   tamanho são os de sempre. O que o botão traz do navegador e o <select> não tinha é o texto
+   centralizado; e o valor longo termina em "…" em vez de passar por baixo da seta. */
+.select-trigger { display:flex; align-items:center; text-align:start; cursor:pointer; }
+.select-trigger:disabled,.select-trigger[data-disabled] { cursor:not-allowed; }
+.select-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.select-value[data-placeholder] { color:var(--muted-foreground); }
 .combobox-popup { inline-size:var(--anchor-width); min-inline-size:0; max-inline-size:none; max-block-size:min(320px,var(--available-height)); overflow-y:auto; overscroll-behavior:contain; }
 .combobox-empty { padding:12px 10px; color:var(--muted-foreground); font-size:var(--text-sm); }
 .combobox-empty:empty { display:none; }
 .combobox-item { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:center; }
 .combobox-check { display:inline-flex; color:var(--primary); }
+/* A-01: o texto vai SEMPRE para a segunda coluna, mesmo em HTML escrito à mão sem o invólucro do
+   check — é quem monta a lista sem o React que ficaria de novo com o rótulo na coluna de 16px. */
+.combobox-item > :last-child { grid-column:2; }
 /* MultiCombobox (Fase 4) — chips de multi-seleção + grupos. Espaçamento novo tokenizado. */
 .combobox-multi { display:flex; align-items:center; gap:var(--space-2); width:100%; min-width:0; min-height:var(--control-h-md); padding:var(--space-1) var(--space-2); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast); }
 .combobox-multi:hover { border-color:var(--border); }

package/dist/aurea.js

@@ -174,6 +174,36 @@
   }
   document.addEventListener("toggle", focoDaGaveta, true);
 
+  // ── Gaveta de navegação: o FECHAMENTO (A-06 e A-07, 23/09/2026) ─────────────────────────
+  // A gaveta abria por popover e nada a fechava por código — só Escape e clique fora. Faltavam os
+  // dois gatilhos que o uso real dispara primeiro, e os dois têm gêmeo no `@aurea-uds/react`
+  // (`Sidebar` e `AppShell`): este runtime serve a página sem React, aquele serve quem instala só
+  // o pacote de componentes. Rodar os dois é inofensivo — o segundo encontra a gaveta já fechada.
+  //
+  // 1. Escolher um item fecha. A página mudou por baixo; a gaveta na frente dela esconde a mudança.
+  function estaAberta(gaveta) {
+    try { return gaveta.matches(":popover-open"); } catch (_) { return false; }  // motor sem popover
+  }
+  document.addEventListener("click", function (event) {
+    if (event.defaultPrevented || !event.target || !event.target.closest) return;
+    var alvo = event.target.closest("a[href], .sidebar-item");
+    var gaveta = alvo && alvo.closest(".sidebar[popover]");
+    if (gaveta && estaAberta(gaveta)) gaveta.hidePopover();
+  });
+  // 2. Subir para o desktop fecha. O top layer é estado do DOM, e nenhuma media query tira um
+  // elemento de lá: sem isto a gaveta ficava flutuando, sem véu, e o botão que a fecharia sumia.
+  // 1024 é o `--breakpoint-lg`, o mesmo corte do `@media (max-width:1023px)` acima; o
+  // `consumidores-lote1.test` reprova se os dois divergirem.
+  if (typeof window.matchMedia === "function") {
+    var desktop = window.matchMedia("(min-width: 1024px)");
+    var aoSubir = function (e) {
+      if (!e.matches) return;
+      var abertas = document.querySelectorAll(".sidebar[popover]");
+      for (var g = 0; g < abertas.length; g++) if (estaAberta(abertas[g])) abertas[g].hidePopover();
+    };
+    if (desktop.addEventListener) desktop.addEventListener("change", aoSubir);
+  }
+
   function toastStack() {
     var stack = document.querySelector(".toast-stack");
     if (!stack) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.8.7",
+  "version": "0.8.10",
   "description": "The Aurea UDS stylesheet and its vanilla behaviour. Import @aurea-uds/fonts/css before this.",
   "keywords": [
     "aurea",