@aurea-uds/core 0.3.0 → 0.5.0

package/dist/aurea.css

@@ -56,7 +56,7 @@
   --z-modal:80;
   --z-toast:100;
   --sidebar-width:16.5rem;
-  --sidebar-rail:5.5rem;
+  --sidebar-rail:4.25rem;
   --topbar-height:4rem;
   --content-max:102.5rem;
   --breakpoint-sm:640px;
@@ -206,7 +206,7 @@
   --chart-5:oklch(0.424 0.199 265.638);
   --sidebar:var(--card);
   --sidebar-foreground:oklch(0.145 0 0);
-  --sidebar-primary:var(--brand-yellow);
+  --sidebar-primary:var(--primary-emphasis);
   --sidebar-primary-foreground:var(--brand-yellow-foreground);
   --sidebar-accent:var(--secondary);
   --sidebar-accent-foreground:oklch(0.205 0 0);
@@ -243,6 +243,130 @@
   --danger-bg:oklch(0.95 0.05 22);
   --info-bg:oklch(0.95 0.045 260);
 }
+[data-brand="lory"][data-theme="dark"]{
+  --background:oklch(0.16 0.018 250);
+  --foreground:oklch(0.96 0.006 250);
+  --foreground-strong:oklch(1 0 0);
+  --card:oklch(0.21 0.02 250);
+  --card-foreground:oklch(0.96 0.006 250);
+  --popover:oklch(0.21 0.02 250);
+  --popover-foreground:oklch(0.96 0.006 250);
+  --surface-1:oklch(0.21 0.02 250);
+  --surface-2:oklch(0.245 0.02 250);
+  --surface-3:oklch(0.19 0.02 250);
+  --surface-inset:oklch(0.19 0.02 250);
+  --surface-hover:oklch(0.245 0.02 250);
+  --primary:oklch(0.72 0.19 48);
+  --primary-foreground:oklch(0.16 0.02 250);
+  --primary-hover:oklch(0.78 0.17 50);
+  --primary-active:oklch(0.66 0.19 46);
+  --primary-emphasis:oklch(0.85 0.14 60);
+  --primary-outline:oklch(0.72 0.19 48 / 0.4);
+  --secondary:oklch(0.245 0.02 250);
+  --secondary-foreground:oklch(0.96 0.006 250);
+  --secondary-hover:oklch(0.28 0.02 250);
+  --muted:oklch(0.19 0.02 250);
+  --muted-foreground:oklch(0.72 0.015 250);
+  --subtle-foreground:oklch(0.58 0.016 250);
+  --accent:oklch(0.32 0.08 50);
+  --accent-foreground:oklch(0.85 0.14 60);
+  --destructive:oklch(0.7 0.19 25);
+  --destructive-foreground:oklch(0.16 0.02 250);
+  --border:oklch(1 0 0 / 0.1);
+  --border-strong:oklch(1 0 0 / 0.18);
+  --input:oklch(1 0 0 / 0.1);
+  --field-bg:oklch(0.19 0.02 250);
+  --ring:oklch(0.72 0.19 48);
+  --focus:oklch(0.72 0.19 48);
+  --focus-strong:oklch(0.85 0.14 60);
+  --selection:oklch(0.32 0.08 50);
+  --control-selected:oklch(0.72 0.19 48);
+  --control-selected-foreground:oklch(0.16 0.02 250);
+  --overlay:oklch(0 0 0 / 0.6);
+  --chart-1:oklch(0.74 0.18 50);
+  --chart-2:oklch(0.84 0.14 88);
+  --chart-3:oklch(0.72 0.15 158);
+  --chart-4:oklch(0.7 0.13 235);
+  --chart-5:oklch(0.68 0.16 320);
+  --sidebar:oklch(0.21 0.02 250);
+  --sidebar-foreground:oklch(0.96 0.006 250);
+  --sidebar-primary:oklch(0.72 0.19 48);
+  --sidebar-primary-foreground:oklch(0.16 0.02 250);
+  --sidebar-accent:oklch(0.245 0.02 250);
+  --sidebar-accent-foreground:oklch(0.96 0.006 250);
+  --sidebar-border:oklch(1 0 0 / 0.1);
+  --sidebar-ring:oklch(0.72 0.19 48);
+  --success-400:oklch(0.72 0.15 158);
+  --warning-400:oklch(0.78 0.14 78);
+  --danger-400:oklch(0.7 0.19 25);
+  --info-400:oklch(0.7 0.13 235);
+  --success-bg:oklch(0.32 0.07 158);
+  --warning-bg:oklch(0.34 0.07 80);
+  --danger-bg:oklch(0.34 0.09 25);
+  --info-bg:oklch(0.32 0.06 235);
+}
+[data-brand="lory"][data-theme="light"]{
+  --background:oklch(0.984 0.004 70);
+  --foreground:oklch(0.24 0.022 250);
+  --foreground-strong:oklch(0.16 0.02 250);
+  --card:oklch(1 0 0);
+  --card-foreground:oklch(0.24 0.022 250);
+  --popover:oklch(1 0 0);
+  --popover-foreground:oklch(0.24 0.022 250);
+  --surface-1:oklch(1 0 0);
+  --surface-2:oklch(0.975 0.004 70);
+  --surface-3:oklch(0.965 0.006 70);
+  --surface-inset:oklch(0.965 0.006 70);
+  --surface-hover:oklch(0.965 0.006 70);
+  --primary:oklch(0.682 0.197 44.5);
+  --primary-foreground:oklch(1 0 0);
+  --primary-hover:oklch(0.63 0.197 44.5);
+  --primary-active:oklch(0.58 0.19 44.5);
+  --primary-emphasis:oklch(0.52 0.17 45);
+  --primary-outline:oklch(0.682 0.197 44.5 / 0.35);
+  --secondary:oklch(0.965 0.006 70);
+  --secondary-foreground:oklch(0.24 0.022 250);
+  --secondary-hover:oklch(0.94 0.006 70);
+  --muted:oklch(0.965 0.006 70);
+  --muted-foreground:oklch(0.52 0.018 255);
+  --subtle-foreground:oklch(0.65 0.014 255);
+  --accent:oklch(0.96 0.04 60);
+  --accent-foreground:oklch(0.52 0.17 45);
+  --destructive:oklch(0.62 0.21 26);
+  --destructive-foreground:oklch(1 0 0);
+  --border:oklch(0.915 0.006 255);
+  --border-strong:oklch(0.86 0.008 255);
+  --input:oklch(0.915 0.006 255);
+  --field-bg:oklch(1 0 0);
+  --ring:oklch(0.682 0.197 44.5);
+  --focus:oklch(0.682 0.197 44.5);
+  --focus-strong:oklch(0.52 0.17 45);
+  --selection:oklch(0.96 0.04 60);
+  --control-selected:oklch(0.682 0.197 44.5);
+  --control-selected-foreground:oklch(1 0 0);
+  --overlay:oklch(0.16 0.018 250 / 0.45);
+  --chart-1:oklch(0.682 0.197 44.5);
+  --chart-2:oklch(0.82 0.15 88);
+  --chart-3:oklch(0.66 0.15 155);
+  --chart-4:oklch(0.62 0.13 235);
+  --chart-5:oklch(0.6 0.16 320);
+  --sidebar:oklch(1 0 0);
+  --sidebar-foreground:oklch(0.24 0.022 250);
+  --sidebar-primary:oklch(0.52 0.17 45);
+  --sidebar-primary-foreground:oklch(1 0 0);
+  --sidebar-accent:oklch(0.975 0.004 70);
+  --sidebar-accent-foreground:oklch(0.24 0.022 250);
+  --sidebar-border:oklch(0.915 0.006 255);
+  --sidebar-ring:oklch(0.682 0.197 44.5);
+  --success-400:oklch(0.66 0.15 155);
+  --warning-400:oklch(0.78 0.15 75);
+  --danger-400:oklch(0.62 0.21 26);
+  --info-400:oklch(0.62 0.13 235);
+  --success-bg:oklch(0.95 0.05 155);
+  --warning-bg:oklch(0.95 0.06 80);
+  --danger-bg:oklch(0.95 0.05 25);
+  --info-bg:oklch(0.95 0.04 235);
+}
 [data-density="compact"]{
   --control-h-xs:1.5rem;
   --control-h-sm:1.75rem;
@@ -313,6 +437,13 @@ img,svg { display:block; }
 .muted { color:var(--muted-foreground); }
 .stack { display:flex; flex-direction:column; gap:var(--space-4); }
 .cluster { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
+/* SEPARATOR. `background` num box de 1px e NÃO `border`: assim a espessura não depende de qual
+   lado do border está escrito, e a mesma classe serve nas duas orientações. `<hr>` chega com
+   margem e borda do navegador — as duas são zeradas aqui, senão a régua vem com folga que ninguém
+   pediu. O vertical precisa de `align-self:stretch` para acompanhar a altura do irmão mais alto, e
+   de um piso: sem `min-height` ele mede ZERO num pai que não define altura, e desaparece. */
+.separator { flex:none; width:100%; height:1px; margin:0; border:0; background:var(--border); }
+.separator-vertical { align-self:stretch; width:1px; height:auto; min-height:var(--space-2); }
 /* Grid: o terceiro primitivo de layout, com o mesmo gap do .stack. A pele nasceu na Fase 11
    (achado A13): o componente existia desde sempre e saía `display:block` — empilhava. Ninguém
    via porque o chrome do catálogo REDEFINIA .grid, então ele parecia pronto na nossa
@@ -336,7 +467,11 @@ img,svg { display:block; }
    26 telas de referência inteiras (aconteceu; o portão visual pegou). Por isso a folga
    entre as caixas sai da MARGEM de cada filho, não de gap/padding no shell. As linhas
    extras do grid nascem sozinhas por auto-placement. */
-.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); background:var(--background); }
+.app-shell { --sidebar-track:calc(var(--sidebar-width) + var(--space-4)*2); min-height:100vh; display:grid; grid-template-columns:var(--sidebar-track) minmax(0,1fr); background:var(--background); }
+/* `--sidebar-width` nomeia o PAINEL, não a trilha inteira. A variante flutuante ainda gasta
+   `--space-4` dos dois lados; reservar só o token fazia 264px virarem 232px. A rente não tem
+   margem, então a trilha dela continua sendo o token cru. */
+.app-shell:has(> .sidebar-flush) { --sidebar-track:var(--sidebar-width); }
 /* A base do topo carrega só o ARRANJO; cada variante traz a própria superfície.
    floating = caixa solta (a que já estava) · flush = faixa encostada nas bordas com fio
    embaixo, para o topo virar moldura da janela · pill = cápsula centrada, de cabeçalho
@@ -354,7 +489,41 @@ img,svg { display:block; }
 .topbar .brand { min-height:auto; margin:0; padding:0; border:0; }
 /* altura fixa = janela menos topo e as 3 folgas; assim a caixa parece cheia mesmo com
    poucos itens (é o que as referências mostram) e sobra o que rolar por dentro. */
-.sidebar { --shell-top:calc(var(--topbar-height) + var(--space-4)*2); position:sticky; top:var(--shell-top); align-self:start; height:calc(100vh - var(--shell-top) - var(--space-4)); margin:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-4); overflow:auto; scrollbar-width:none; border:1px solid var(--sidebar-border); border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
+/* E O TETO É O CONTAINER, NÃO A JANELA. A altura acima é da JANELA, e sozinha ela faz a lateral
+   presumir que é dona da tela: dentro de qualquer caixa menor ela calcula 818px, transborda e é
+   CORTADA — medido em 18/08/2026 na prévia do catálogo, 818px dentro de 272px, sem nem rolar.
+   `max-height:100%` contra um pai de altura INDEFINIDA é ignorado, então no `AppShell` (onde a
+   lateral realmente é dona da tela) nada muda — conferido: 818px antes e depois, idêntico. Contra
+   um pai de altura definida ele manda, e a caixa passa a caber. Os `--space-4`*2 descontam a
+   própria margem, senão ela transborda pelo dobro da folga.
+   O intento da altura continua o mesmo: caixa cheia mesmo com poucos itens, e o que sobra rola
+   por dentro (`overflow:auto`, logo abaixo). O que muda é de onde vem o teto. */
+/* O PAINEL DÁ QUASE NADA E A LINHA DÁ O RESTO — o mesmo padrão do `.card:has(> .nav-list)`.
+   Era `--space-4` (16px): o item começava a 17px da borda e ocupava 88% da largura, com o
+   realce flutuando no meio do painel. */
+/* A LATERAL FLUTUA POR PADRÃO — é a identidade desta casa, e o `CLAUDE.md` manda.
+   EM 18/08/2026 O PADRÃO FOI INVERTIDO AQUI, E ESTAVA ERRADO. O Victor abriu exceção para a
+   lateral PODER ser rente; uma sessão leu "abriu exceção" como "troque o padrão". São coisas
+   diferentes, e ele separou as duas em 20/08/2026:
+     "uma coisa é a gente ter o componente outra coisa é usar no nosso próprio projeto,
+      o nosso vai ser tudo flutuante mas isso não impede da gente ter outras variações para
+      as pessoas que nos acharem no npm usarem"
+   E o estrago não foi de gosto: as 106 páginas do catálogo montam por `AppShell`, que chama a
+   `Sidebar` SEM variante — inverter o padrão reescreveu o catálogo inteiro, e quatro baselines
+   de pixel foram regravadas para aceitar. Ver ADR-0034.
+   Esta regra é a de `b0599be`, íntegra: estado conhecido bom, provado pelo portão de pixel em vez
+   de reafinado à mão. */
+.sidebar { --shell-top:calc(var(--topbar-height) + var(--space-4)*2); position:sticky; top:var(--shell-top); align-self:start; height:calc(100vh - var(--shell-top) - var(--space-4)); max-height:calc(100% - var(--space-4)*2); margin:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-1); overflow:auto; scrollbar-width:none; border:1px solid var(--sidebar-border); border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
+/* RENTE É A VARIANTE, e ela existe porque o Victor mediu quatro aplicativos que rodam na mão:
+   Cloudflare, Sophos, o app do Claude e o painel do próprio HeroUI. Nenhum flutua a lateral — ela
+   encosta nas bordas, ocupa a altura toda e se separa do conteúdo por UM TRAÇO, não por um vão.
+   É a ÚNICA exceção à caixa flutuante nesta casa, e não generaliza: card, diálogo e painel seguem
+   flutuando.
+   Ela desfaz exatamente o que a flutuante põe — as duas contas de altura, a margem, o raio e de
+   que lados vem a borda —, e é por isso que a trava de pele exige que as duas MEÇAM diferente:
+   variante que desenha igual é enfeite. `--shell-top` volta a ser só a altura do topo, porque sem
+   margem não há as duas folgas a descontar. */
+.sidebar-flush { --shell-top:var(--topbar-height); height:calc(100vh - var(--shell-top)); max-height:100%; margin:0; border:0; border-inline-end:1px solid var(--sidebar-border); border-radius:0; }
 /* a lateral ROLA mas nunca mostra a barra (pedido do Victor): a barra nativa risca a
    superfície flutuante e não segue o raio de 22px. `scrollbar-width` cobre Firefox e
    Chrome 121+; o pseudo cobre Safari e Chrome antigo. */
@@ -363,7 +532,10 @@ img,svg { display:block; }
    e do conteúdo é --space-1 (4px), e o --shell-top acompanha. */
 /* flush cola no conteúdo com --space-05 (2px) — o degrau mais apertado da escala, criado
    pra este caso (o Victor aprovou os 2px; tokenizado, não cru). */
-.app-shell-flush .sidebar { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
+/* E ela NÃO vale para a lateral rente: `.app-shell-flush .sidebar` é mais específico que
+   `.sidebar-flush` e roubaria dela a margem e o `--shell-top`. Esta regra é sobre o TOPO
+   encostado, não sobre a lateral — a rente já encosta sozinha. */
+.app-shell-flush .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
 .app-shell-flush .content { margin-block-start:var(--space-05); }
 .content { min-width:0; margin:var(--space-4) var(--space-4) var(--space-4) 0; padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
 /* O topo é presentational — não conhece o conteúdo — então garante o mínimo universal:
@@ -375,13 +547,14 @@ img,svg { display:block; }
    mexer no viewport: o @media não disparava e a nav passava 27px da borda direita, em todas
    as páginas. Quebrar por conteúdo cobre os dois casos e não muda nada quando cabe. */
 .topbar,.topbar > nav { flex-wrap:wrap; }
-/* Colapso do shell abaixo de md (767 = md-1, escala): a lateral deixa de flutuar e de ter
-   altura de janela — empilha acima do conteúdo, que passa a ocupar a largura toda. Sem
-   estado (o off-canvas com botão é refino da Fase 3); o essencial é nunca rolar de lado. */
-/* Abaixo de md o topo QUEBRA em duas linhas em vez de esconder a navegação: perder o acesso
-   a uma área inteira não é colapso responsivo, é bug. A nav vai pra segunda linha, centrada
-   e na largura toda; badge e selo (secundários) seguem escondidos pelos utilitários. */
-@media (max-width:767px) { .app-shell { grid-template-columns:minmax(0,1fr); } .sidebar { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
+/* Colapso do shell abaixo de lg (1023 = lg-1, escala): a lateral do AppShell deixa o fluxo e
+   vira a gaveta definida abaixo. A regra mira o filho `[popover]` de propósito: uma `Sidebar`
+   standalone dentro de um preview estreito continua sendo o componente inteiro, não herda
+   comportamento do shell que não existe ao redor dela. */
+/* Abaixo de lg o topo QUEBRA em duas linhas em vez de esconder a navegação: perder o acesso
+   a uma área inteira não é colapso responsivo, é bug. A nav vai pra segunda linha, centrada
+   e na largura toda; badge e selo (secundários) seguem escondidos pelos utilitários. */
+@media (max-width:1023px) { .app-shell { grid-template-columns:minmax(0,1fr); } .app-shell > .sidebar[popover] { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
   .topbar { flex-wrap:wrap; row-gap:var(--space-2); }
   .topbar > nav { order:3; flex-basis:100%; justify-content:center; }
   /* e a nav quebra entre os PRÓPRIOS itens: mandar a barra pra segunda linha não bastava,
@@ -389,12 +562,13 @@ img,svg { display:block; }
   .topbar > nav { flex-wrap:wrap; row-gap:var(--space-1); } }
 
 /* ── GAVETA DE NAVEGAÇÃO (achado A8) ───────────────────────────────────────────────
-   Empilhar a lateral acima do conteúdo passava, no gate de rolagem lateral, e era
+   Empilhar a lateral acima do conteúdo passava, no gate de rolagem lateral, e era
    inutilizável: medido em 375px, o `h1` da página começava 4,6 telas abaixo, atrás dos 65
-   itens da navegação. Abaixo de md ela sai do fluxo e vira gaveta.
-   SEM UMA LINHA DE JS: o <aside> é um popover nativo e o botão do topo é o invoker. O
-   navegador entrega Escape, clique fora para fechar, `aria-expanded` no disparador, a volta
-   do foco ao fechar e o ::backdrop. Baseline desde 04/2025; verificado em 30/07/2026.
+   itens da navegação. Abaixo de lg ela sai do fluxo e vira gaveta — o mesmo corte da
+   referência e o breakpoint `--breakpoint-lg` já publicado pela Aurea.
+   A MECÂNICA é nativa: o <aside> é popover e o botão do topo é o invoker. O navegador entrega
+   Escape, clique fora, `aria-expanded` e ::backdrop; o AppShell normaliza entrada e retorno de
+   foco nos três motores, porque o WebKit não os entregou sozinho (ADR-0019).
    Não-modal de propósito (o foco não fica preso), como o CommandPaletteShell: declarar
    modalidade sem entregá-la é pior que não declarar. */
 .btn.nav-toggle { display:none; }
@@ -408,14 +582,16 @@ img,svg { display:block; }
    Medido: sem esta linha a lateral seguia empilhada em 375px, com o botão já visível.
    O @supports é a rede: em navegador sem popover a regra inteira não aplica, a lateral volta a
    empilhar (o comportamento de antes, feio e usável) em vez de sumir sem botão que a abra. */
-@supports selector(:popover-open) {
-@media (max-width:767px) {
+@supports selector(:popover-open) {
+@media (max-width:1023px) {
   .sidebar[popover]:not(:popover-open) { display:none; }
   .btn.nav-toggle { display:inline-flex; }
   /* altura EXPLÍCITA, não `auto`: medido em 30/07/2026, com `top` e `bottom` postos e
      `height:auto` o Chromium resolveu pela altura do CONTEÚDO (3.498px de lateral rolando a
      página inteira), não pelas âncoras. `dvh` porque a barra do navegador móvel some e volta. */
-  .sidebar[popover]:popover-open { position:fixed; inset-block:var(--space-4); inset-inline-start:var(--space-4); width:min(20rem,calc(100vw - var(--space-8))); height:calc(100dvh - var(--space-4) * 2); margin:0; }
+  /* 296px no teto: `--sidebar-width` (264) + as duas folgas externas (32), a mesma medida
+     do drawer da referência. Em viewport menor, a segunda conta sempre preserva as bordas. */
+  .sidebar[popover]:popover-open { position:fixed; inset-block:var(--space-4); inset-inline-start:var(--space-4); width:min(calc(var(--sidebar-width) + var(--space-4)*2),calc(100vw - var(--space-8))); height:calc(100dvh - var(--space-4) * 2); margin:0; }
   .sidebar[popover]::backdrop { background:var(--overlay); }
 }
 }
@@ -432,30 +608,236 @@ img,svg { display:block; }
 .sidebar-list { display:flex; flex-direction:column; gap:var(--space-1); margin:0; padding:0; list-style:none; }
 /* `width:100%` + `font:inherit` + `border:0`: o item também é <button> quando não navega, e
    sem isto o botão vem com a caixa do navegador e quebra a fila. */
-.sidebar-item { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:var(--control-h-md); padding:var(--space-1) var(--space-3); border:0; border-radius:var(--radius-control); background:transparent; color:var(--sidebar-foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
+.sidebar-item { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:var(--control-h-md); padding:var(--space-1) var(--space-3); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--sidebar-foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
 .sidebar-item .icon { flex:none; opacity:.8; }
 /* min-width:0 é o que deixa o ellipsis funcionar dentro do flex; sem ele o nome longo empurra
    o acessório para fora da caixa em vez de cortar. */
 .sidebar-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--secondary); } }
-.sidebar-item[aria-current] { background:var(--secondary); color:var(--foreground); font-weight:var(--weight-medium); }
+/* A LATERAL SE PINTA COM OS TOKENS DELA, e isto é conserto de 20/08/2026 — o Victor viu.
+   Estas duas regras usavam `--secondary` e `--foreground`, que são tokens da PÁGINA. Na Aurea
+   isso nunca apareceu porque o painel e a página têm a mesma claridade nos dois temas; sob a
+   marca `lory`, onde a lateral é escura mesmo no tema claro (decisão de produto da Mallory), o
+   item atual virava uma pílula QUASE BRANCA com texto escuro em cima de um painel escuro. Ele
+   chamou de "cores invertidas", e é exatamente o que era.
+   `--sidebar-accent` e `--sidebar-accent-foreground` já eram PUBLICADOS e não tinham um único
+   uso no core — token publicado que ninguém usa é promessa sem entrega, e era o par certo o
+   tempo todo. O defeito não é da marca: a marca só o tornou visível. */
+@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--sidebar-accent); } }
+.sidebar-item[aria-current] { background:var(--sidebar-accent); color:var(--sidebar-accent-foreground); font-weight:var(--weight-medium); }
 .sidebar-item[aria-current] .icon { opacity:1; }
-.sidebar-group-label { margin:var(--space-3) var(--space-2) var(--space-1); color:var(--subtle-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* Alinha com o TEXTO do item: padding do painel (4) + padding do item (12) = 16px. Com o
+   painel apertado, os 8px de antes deixavam a rubrica fora do prumo da lista. */
+/* O rótulo de grupo também sai da escala da LATERAL, pelo mesmo motivo: `--subtle-foreground` é
+   apagado contra a página, e contra um painel escuro num tema claro ele some. Derivado do próprio
+   `--sidebar-foreground` em vez de token novo — a lateral não publica um "muted" dela. */
+.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:color-mix(in oklab, var(--sidebar-foreground) 62%, transparent); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 .sidebar-sub { padding-inline-start:var(--space-5); }
 /* RECOLHIDA — a lateral vira trilho de ícones. O rótulo NÃO some do DOM: o React troca a
    classe dele por `.sr-only`, então quem usa leitor de tela continua ouvindo o nome. Ícone
    sozinho não nomeia nada, e essa é a falha clássica do padrão de trilho. */
 .sidebar-collapsed { padding-inline:var(--space-2); }
-.sidebar-collapsed .sidebar-item { justify-content:center; padding-inline:var(--space-2); }
+/* NO TRILHO O ITEM É QUADRADO E CENTRADO, não uma linha esticada. Medido no fonte da referência
+   em 18/08/2026: `NavButton` com `iconOnly` é `size-9` — 36×36, exatamente o nosso `--control-h-md`.
+   Antes o item herdava `width:100%` e virava 71×36 dentro de um trilho de 88: um retângulo largo
+   que, com o raio de linha, fechava nas pontas e lia como CÁPSULA. Quadrado é o que a referência
+   desenha, e é o que o olho reconhece como botão de ícone. */
+.sidebar-collapsed .sidebar-item { justify-content:center; width:var(--control-h-md); padding-inline:0; margin-inline:auto; }
 .sidebar-collapsed .sidebar-sub { padding-inline-start:0; }
-/* A ÚNICA regra que toca `.app-shell`, e está aqui porque a coluna do grid é do shell: a
-   lateral não consegue encolher a própria coluna.
+/* Estas regras tocam `.app-shell` porque a coluna do grid é do shell: a
+   lateral não consegue encolher a própria trilha. `--sidebar-rail` continua sendo a largura
+   do PAINEL; a flutuante soma as margens na trilha, a rente usa o token cru.
    O `>` NÃO É ENFEITE, e quem achou isso foi o navegador em 06/08/2026. Escrita como
    `:has(.sidebar-collapsed)`, a regra casa com QUALQUER descendente — e a página do catálogo
    que mostra uma lateral recolhida como EXEMPLO, dentro do <main>, recolhia a lateral de
    verdade do documento inteiro. Medido: a coluna do shell saía 88px numa página que não pediu
    nada. Gate nenhum via, porque `sidebar.html` não tem baseline de pixel. */
-.app-shell:has(> .sidebar-collapsed) { grid-template-columns:var(--sidebar-rail) minmax(0,1fr); }
+.app-shell:has(> .sidebar-collapsed) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-4)*2); }
+.app-shell:has(> .sidebar-collapsed.sidebar-flush) { --sidebar-track:var(--sidebar-rail); }
+
+/* ── Navegação inferior — o vocabulário de APLICATIVO ───────────────────────────────
+   Lacuna estrutural medida no `CONSUMIDOR-GARAGEM.md` §4.1: `.topbar` e `.sidebar` são
+   vocabulário de DESKTOP, e aplicativo não navega assim.
+   `sticky` e NÃO `fixed`, e a razão é o catálogo: fixo escapa do contêiner e a prévia
+   cobriria a página inteira — o mesmo defeito que o `:has(> …)` da linha acima pagou.
+   Grudado no fim do fluxo dá o mesmo efeito e degrada para estático sem rolagem.
+   O `max()` do recuo inferior é o que impede a barra de ficar SOB o indicador de tela
+   cheia do iPhone. Ele só tem efeito se o consumidor declarar `viewport-fit=cover` na
+   meta viewport (está na ficha); sem isso `env()` devolve 0 e o `max()` entrega o
+   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); }
+/* `--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; }
+.bottom-nav-item .icon { flex:none; opacity:.8; }
+.bottom-nav-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+/* O CONTADOR PENDURA NO ÍCONE — canto superior da ponta, encostando na borda dele.
+   A primeira versão pendurava no ITEM, com `inset-inline-start:50%`: em barra de coluna passa
+   despercebido, e na variante de LINHA os 50% do item caem no meio do RÓTULO. O Victor achou
+   assim, com o número cobrindo o nome inteiro (17/08/2026).
+   A pesquisa que corrigiu: Material 3 põe o distintivo "sobre o ícone, no canto superior
+   direito", e os guias de barra de abas do iOS dizem o mesmo com a razão junto — encostar na
+   borda é para ser visto, sobrepor conteúdo é hesitação num controle que se usa o tempo todo.
+   `inset-inline-end` e não `right`: o eixo espelha sozinho em RTL, e transform não espelharia.
+   O `min-` da caixa é para o contador ter onde se ancorar quando o item não tem ícone.
+   A CAIXA É `--icon-lg` (24px) e o contador `--space-4` (16px) porque a PROPORÇÃO foi medida
+   em aplicativo que roda: WhatsApp, YouTube, Mercado Livre e Shopee, nos prints do Victor de
+   17/08/2026 — ícone ~24, contador ~16, razão **0,67**. A primeira versão tinha ícone de 16 e
+   contador de 18: razão 1,12, o contador MAIOR que o ícone. Foi o que ele viu e mandou refazer. */
+/* A MOLDURA É FIXA E VALE PARA OS SETE INDICADORES. Medido em 20/08/2026, e quem viu foi o
+   Victor: os três indicadores redondos saíam com a BARRA MAIS LARGA que os outros quatro, porque
+   só eles davam largura à moldura e a largura do item vinha do conteúdo. Trocar de indicador
+   mudava a medida da barra — que é o defeito estrutural que esta reescrita existe para acabar.
+   O achado 8 da auditoria pede a mesma coisa por outro caminho: o contador tem de se ancorar na
+   caixa do ícone e ficar PREVISÍVEL, e caixa que muda de tamanho conforme a variante não é
+   ancoragem previsível. Agora quem pinta é o indicador; quem MEDE é sempre esta regra.
+
+   O NÚMERO É PESQUISADO, e a exigência é do Victor em 20/08/2026: *"vá pesquisar e descubra qual
+   padrão é usado, pesquise não invente medidas"*. Ele pegou 2.25rem saído da minha cabeça.
+   `2rem` = 32px é a ALTURA DO INDICADOR ATIVO do Material 3 (`m3.material.io/components/
+   navigation-bar/specs` e a doc do `material-components-android`: indicador 64×32dp, canto
+   totalmente arredondado, sobre um ícone de 24dp). 24 de ícone dentro de 32 deixa 4 de folga de
+   cada lado, que é a mesma folga de 4dp que o M3 usa entre o indicador e o rótulo.
+   O ALVO DE TOQUE não é este número e continua sendo o `min-height` do item: `--control-h-lg`
+   entrega 42px em comfortable e 48 em spacious, contra os 44pt mínimos da HIG da Apple e os
+   48dp do Material. A moldura é a caixa do DESENHO; o alvo é o item inteiro. */
+.bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--bottomnav-ring); height:var(--bottomnav-ring); border-radius:var(--radius-control); }
+/* `inline-flex` no envoltório: como `<span>` solto ele é caixa de LINHA, e mede a entrelinha do
+   item (18px) em vez do contador que carrega (16px). A diferença não aparece na tela — aparece
+   na medição, e medição errada é o que faz a razão parecer 0,75 quando é 0,67. */
+.bottom-nav-badge { position:absolute; display:inline-flex; inset-block-start:calc(var(--space-05)*-1); inset-inline-end:calc(var(--space-05)*-1); }
+/* O contador da barra usa `<Badge size="xs">`, e NÃO uma sobrescrita local de `.badge` aqui.
+   A primeira versão sobrescrevia, e o `geometry.spec` reprovou com razão: `.badge` tem altura
+   ÚNICA por contrato, e uma regra contextual fazia o mesmo nome medir 16px numa página e 24px
+   noutra. Tamanho é do componente, não do lugar onde ele cai. */
+/* SEM NÚMERO, É PONTO. Três dos quatro aplicativos medidos usam o ponto puro para "tem coisa
+   nova" — YouTube (Inscrições), WhatsApp (Atualizações e Você). O consumidor pede pelo vazio:
+   `badge: ""`. A cor é a de AVISO e não a da marca, também como nos quatro: o contador não é
+   decoração do item atual, é alerta.
+   ⚠ Ponto não tem nome acessível — não há o que ler. Quem usa ponto põe o sentido no RÓTULO do
+   item (`label: <>Updates <span className="sr-only">(new)</span></>`). Está na ficha. */
+.bottom-nav-badge:empty { width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:var(--primary); }
+/* SEM REALCE DE PASSAR O MOUSE, e isso é decisão do Victor em 20/08/2026: *"essa bola cinza
+   que aparece quando mouse passar em cima pode retirar, é um recurso irrelevante no celular"*.
+   Ele tem razão pelo escopo do componente: esta barra é o chrome de aplicativo de TELEFONE, e o
+   dedo não tem estado de passar por cima. Pior: o realce cinza desenhava a MESMA forma que o
+   indicador `subtle` usa para dizer "você está aqui", então passar o mouse por um item inativo
+   fingia seleção — dois significados no mesmo desenho.
+   O FOCO CONTINUA, e a diferença não é de gosto: `:focus-visible` é o que o teclado enxerga, vem
+   do contrato de foco global e o `geometry.spec` cobra. Tirar hover é tirar enfeite; tirar foco
+   seria tirar acesso. */
+.bottom-nav-item[aria-current] { color:var(--foreground); font-weight:var(--weight-medium); }
+.bottom-nav-item[aria-current] .icon { opacity:1; }
+/* ── A GRAMÁTICA: DOIS EIXOS, E ELES NÃO SE MISTURAM ────────────────────────────────
+   Reescrito em 20/08/2026 pela auditoria de UI/UX do BottomNav que o Victor encomendou.
+   O achado dela não é estético, é ESTRUTURAL: `flat`, `surface`, `pill` e `dock` eram quatro
+   implementações conceitualmente separadas — cada uma dizia "esta é a página atual" com uma
+   linguagem diferente (uma pela cor, outra por cápsula cinza, outra por bloco amarelo), e duas
+   delas escondiam o rótulo. Trocar de variante trocava o MODELO MENTAL do componente, não a
+   forma dele.
+
+   Agora são dois eixos independentes, e é isso que faz variante ser variante:
+
+   • LAYOUT (a barra)   — `floating` (padrão, pílula solta) e `edge` (encostada, fio em cima).
+   • INDICADOR (o item) — a FORMA que marca o atual. A SEMÂNTICA é sempre a mesma: ouro.
+
+   O que TODO indicador compartilha, e por isso vive aqui em cima e não dentro de cada um:
+   altura de alvo, moldura do ícone, tipografia, ancoragem do contador, rótulo sempre visível.
+   A auditoria pedia exatamente isso — "a variante altera a forma, não toda a lógica visual".
+
+   O RÓTULO NUNCA SOME em nenhum indicador. Era o defeito 6/7 da auditoria: a `dock` escondia
+   todos e a `pill` escondia os inativos, e as sete telas que o Victor desenhou mostram o rótulo
+   em todos os itens, nas sete. Ícone sozinho só funciona quando o símbolo é inequívoco, e
+   `Garage`/`Fuel`/`Service` não são.
+
+   `--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; }
+/* `--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); }
+.bottom-nav-ind-none .bottom-nav-item[aria-current] .icon { opacity:1; }
+/* SUAVE e PÍLULA envolvem ícone E rótulo — muda só o raio. O fundo é o amarelo a 12%, a mesma
+   receita do `.badge-primary`, e não um cinza: a auditoria mediu que a cápsula cinza da antiga
+   `surface` tirava a cor da marca justo do estado mais importante da barra. */
+.bottom-nav-ind-subtle .bottom-nav-item[aria-current],.bottom-nav-ind-pill .bottom-nav-item[aria-current] { background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-emphasis); }
+.bottom-nav-ind-subtle .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-pill .bottom-nav-item[aria-current] .icon { opacity:1; }
+.bottom-nav-ind-subtle .bottom-nav-item { border-radius:calc(var(--radius-card) - var(--space-1)); }
+.bottom-nav-ind-pill .bottom-nav-item { border-radius:var(--radius-control); }
+/* OS QUATRO REDONDOS envolvem SÓ O ÍCONE, e o rótulo fica embaixo, fora da forma. É o que as
+   quatro telas do Victor mostram e o que o WhatsApp faz no aplicativo que roda; pintar o item
+   inteiro não aparece em nenhum dos dois lugares. A moldura vira quadrado de lado fixo para ser
+   CÍRCULO e não elipse — o rótulo é que é largo, e ele está fora daqui. */
+.bottom-nav-ind-circle .bottom-nav-mark,.bottom-nav-ind-circle-raised .bottom-nav-mark,.bottom-nav-ind-circle-outline .bottom-nav-mark { border-radius:var(--radius-full); }
+.bottom-nav-ind-circle .bottom-nav-item[aria-current],.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current],.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] { color:var(--primary-emphasis); }
+.bottom-nav-ind-circle .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .icon { opacity:1; }
+.bottom-nav-ind-circle .bottom-nav-item[aria-current] .bottom-nav-mark { background:color-mix(in srgb,var(--primary) 14%,transparent); }
+/* ELEVADO: a moldura é uma superfície PRÓPRIA sobre a barra — por isso `--popover` e sombra, e
+   não uma cor de fundo. É o único indicador que usa profundidade em vez de cor para separar. */
+.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--popover); box-shadow:var(--shadow-md); }
+.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .bottom-nav-mark { border:1px solid var(--primary-emphasis); }
+/* CHEIO é o único que preenche com o amarelo sólido, e por isso é o único que troca o primeiro
+   plano inteiro para `--primary-foreground` — ícone, rótulo e contador juntos dentro da forma.
+   A auditoria recusou a antiga `pill` sólida (achado 5: "o ativo assume presença de CTA"), e a
+   diferença aqui é a FORMA: círculo do tamanho do alvo de toque lê como destino marcado; cápsula
+   larga, esticada pelo rótulo, lê como botão de ação primária dentro da navegação. */
+/* 3.5rem = 56px, e também é número de fora: é a largura do indicador ativo do Material 3
+   Expressive (56dp) e a altura do indicador expandido na mesma doc. É a única forma aqui que
+   envolve ícone E rótulo, então usa a medida expandida e não a de 32. */
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { flex:none; width:var(--bottomnav-bold,3.5rem); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .icon { opacity:1; }
+/* O contador do `circle-bold` INVERTE, como o do `.btn-primary`, e a volta atrás está medida.
+   Tentei em 20/08/2026 deixá-lo dourado com um anel da cor da barra em volta — é o que as telas
+   do Victor mostram. O gate de contraste reprovou no tema CLARO: sobre o amarelo sólido, nem o
+   fundo do contador nem o anel branco chegam a 3:1. No escuro passava, e é assim que este defeito
+   se esconde. Fio fino não substitui contraste quando as duas cores são claras. */
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-foreground); }
+
+/* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-GARAGEM) ──────────────────────────
+   A LISTA NÃO PINTA SUPERFÍCIE. Quem dá o card é o `Card`, e repintar aqui seria um segundo
+   lugar para a mesma coisa — a `DIRECTION.md` §3.9 diz que composto REUSA o menor.
+   E SEM DIVISOR entre as linhas, que é decisão e não esquecimento: o realce de linha desta casa
+   é a PÍLULA (é o que `.sidebar-item` faz), e pílula com traço embaixo se contradizem — o traço
+   promete grade, a pílula promete alvo. Quem agrupa é a superfície de fora. */
+.nav-list { display:flex; flex-direction:column; gap:var(--space-05); margin:0; padding:0; list-style:none; }
+/* ── O RAIO DA LINHA SAI DE UMA CONTA, NÃO DE UM NÚMERO ─────────────────────────────
+   `raio do filho = raio do pai − padding do pai`. É o que faz o vão ser CONSTANTE na curva; sem
+   isso a curva da linha e a curva do painel divergem e o olho vê o desalinhamento antes de
+   qualquer medição — foi o Victor que achou, riscando o canto num print (18/08/2026).
+   POR QUE A PÍLULA NÃO SERVE AQUI, medido: `999px` não desenha 999 — o navegador limita à METADE
+   DA ALTURA. Então o raio efetivo da pílula MUDA com a altura da linha: 21px numa linha de um
+   texto, 26,8px numa de dois. Com o card em 22px e padding 4px o erro era de **8,8px**, e nenhum
+   raio de card conserta os dois casos ao mesmo tempo. A conta conserta sempre.
+   Escrito como `calc()` de propósito: se alguém mudar o raio do card ou o padding, a linha segue
+   sozinha. Número cravado divergiria em silêncio. */
+.nav-list-row { display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:var(--control-h-lg); padding:var(--space-2) var(--space-3); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
+.nav-list-row .icon { flex:none; opacity:.8; }
+/* O TEXTO É A ÚNICA TRILHA QUE ENCOLHE, e o par `flex:1` + `min-width:0` é o que faz isso: sem o
+   `min-width:0` o conteúdo mínimo do flex é o texto inteiro, e o rótulo longo empurra o valor e a
+   seta para fora da linha em vez de reticenciar. É a mesma família do defeito que a `pill` da
+   barra inferior pagou em 18/08/2026 — lá o rótulo virava zero, aqui ele expulsaria os vizinhos. */
+.nav-list-text { flex:1; min-width:0; display:flex; flex-direction:column; }
+.nav-list-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.nav-list-description { overflow:hidden; color:var(--muted-foreground); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
+/* O VALOR E A SETA NÃO ENCOLHEM: valor cortado MENTE (um "R$ 1.2" no lugar de "R$ 1.234"), e seta
+   cortada deixa de dizer que a linha abre. Quem cede espaço é o texto, que reticencia dizendo. */
+.nav-list-value { flex:none; color:var(--muted-foreground); font-size:var(--text-sm); }
+.nav-list-row .nav-list-chevron { flex:none; opacity:.6; }
+@media (hover:hover) and (pointer:fine) { .nav-list-row:hover { background:var(--secondary); } }
+/* `aria-disabled` e NÃO `:disabled` — a razão está escrita ao lado de `.btn:disabled`, medida em
+   13/08/2026: `:disabled` tira da ordem de foco e quem usa teclado nunca acha a linha. */
+.nav-list-row[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
+/* O PAINEL DÁ QUASE NADA, A LINHA DÁ O RESTO. Medido em 18/08/2026, depois de o Victor circular a
+   folga no print: com o `--card-pad` de 20px o realce da linha começava a 21px da borda e o texto
+   a 65px, e a linha ocupava só 88% da largura — realce flutuando no meio de uma caixa grande em
+   vez de preencher o painel. `--card-pad` é padding de CONTEÚDO; lista de linhas tocáveis quer
+   outra escala. É a anatomia dos dois exemplos de `NavigationMenu` que ele mandou: o item leva
+   `p-3` (que a nossa linha já tem) e o contêiner quase não leva nada.
+   Filho DIRETO de propósito: um card com layout grande e uma lista pequena dentro não pode perder
+   o padding dele. E `:has()` já é idioma desta folha (quatro usos antes deste). */
+.card:has(> .nav-list) { padding:var(--space-1); }
 
 /* ── Visibilidade responsiva — o mecanismo PADRÃO de colapsar uma barra ─────────────
    Regra do projeto (enraizada): todo layout horizontal que aperta esconde o secundário
@@ -471,9 +853,9 @@ img,svg { display:block; }
 /* .nav-group-label é o rótulo de categoria SEM ser título de documento: mesma aparência do
    h4 histórico, mas o grupo se nomeia por aria-labelledby e não entra na lista de títulos
    do leitor de tela (senão a lateral vem antes do h1 da página). É o jeito preferido. */
-.doc-nav h4,.doc-nav .nav-group-label { margin:16px 8px 8px; color:var(--subtle-foreground); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+.doc-nav h4,.doc-nav .nav-group-label { margin:16px 8px 8px; color:color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 .doc-nav .nav-group { display:grid; gap:var(--space-1); }
-.doc-nav a { display:flex; align-items:center; gap:10px; min-height:40px; margin:0; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:var(--muted-foreground); text-decoration:none; box-shadow:none; }
+.doc-nav a { display:flex; align-items:center; gap:10px; min-height:40px; margin:0; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); text-decoration:none; box-shadow:none; }
 .doc-nav a:hover { color:var(--sidebar-accent-foreground); background:var(--sidebar-accent); border-color:var(--sidebar-border); }
 .doc-nav a.active { border-color:var(--sidebar-border); }
 /* o glifo da família fica na frente do rótulo e nunca encolhe o texto */
@@ -649,29 +1031,119 @@ img,svg { display:block; }
    grita mais que o próprio rótulo. No tema CLARO o amarelo puro como texto dá 1.6:1, longe
    dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar. */
 .is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"],
-.segmented button.active,.doc-nav a.active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
+.segmented button.active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
+/* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
+   marca `lory`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
+   é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
+   escuro: as cores invertidas que ele apontou.
+   `--sidebar-accent` e `--sidebar-primary` já eram publicados e não tinham uso no core. O segundo
+   é o que mantém a MARCA no item atual: fundo da lateral, texto da marca. */
+.doc-nav a.active { position:relative; background:var(--sidebar-accent); color:var(--sidebar-primary); }
+/* E O ITEM EM REPOUSO PRECISA DA MESMA PROTEÇÃO, por um motivo de ESPECIFICIDADE que só apareceu
+   medindo a tela do Victor em 20/08/2026 — eu tinha medido o ATIVO e dado o conserto por pronto.
+   Os links da lateral do catálogo não têm atributo `class`, então `[data-theme="light"]
+   a:not([class])` — a regra que existe para LINK DE PROSA — casa com eles. Ela pesa (0,2,1) e a
+   `.doc-nav a` pesa (0,1,1): a regra de prosa ganhava e pintava o item com
+   `color-mix(--primary, --foreground)`. Sob a marca `lory` isso deu MARROM ESCURO
+   (`oklab(0.44 0.059 0.051)`) sobre um painel escuro — ilegível, e foi o que ele viu.
+   Mesmo peso, e depois na folha: quem manda no que está DENTRO da lateral é a lateral.
+   `:not(.active)` NÃO é enfeite — a primeira versão desta linha não tinha, pesava igual à regra do
+   item atual e, vindo depois, APAGAVA o laranja dele. Medido no mesmo minuto: ativo e inativo
+   saíram com a mesma cor. Com o `:not` ela pesa (0,3,1) e só alcança quem está em repouso. */
+[data-theme="light"] .doc-nav a:not(.active) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
 .is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
 .btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,
 .doc-nav a.active::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
+/* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
+.doc-nav a.active::after { background:color-mix(in oklab, var(--sidebar-primary) 75%, transparent); }
 [data-theme="light"] .is-selected,[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]),
-[data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active,
-[data-theme="light"] .doc-nav a.active { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+[data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active
+  { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+/* A NAV DA LATERAL SAIU DESTA LISTA em 20/08/2026. O ajuste existe porque o amarelo puro não se lê
+   sobre o claro — mas ele mistura o `--foreground` da PÁGINA, e o item da lateral não está sobre a
+   página: está sobre `--sidebar-accent`. Sob a marca `lory`, onde esse fundo é escuro no tema
+   claro, a mistura escurecia o texto contra um fundo escuro. Quem manda ali é `--sidebar-primary`,
+   que cada marca já publica com a claridade certa para o painel dela. */
 
 /* `line-height:1` não é enfeite: sem ele o .badge herdava a entrelinha do pai e a MESMA
    classe media 26px dentro do .brand (lh 18px) e 22px dentro de um .btn-nav (lh 12px) — na
    mesma barra (achado A2, 26/07/2026). Geometria de componente não se decide pelo contexto.
    O .chip do catálogo já tinha aprendido isso; o .badge não. */
-.badge { display:inline-flex; align-items:center; gap:6px; min-height:var(--space-6); padding:3px 9px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--secondary); color:var(--secondary-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--leading-none); white-space:nowrap; }
+.badge { --badge-accent:var(--secondary-foreground); display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--space-6); padding:3px 9px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--secondary); color:var(--secondary-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--leading-none); white-space:nowrap; }
 /* O glifo do badge tem tamanho PRÓPRIO, senão o `.icon` padrão (20px) estoura os 24px e o
    badge com ícone fica mais alto que o badge de texto na mesma fila. 16px + 3+3 de padding
    + 1+1 de borda = 24px exatos: com ícone ou sem, mede o mesmo. */
 .badge .icon { width:var(--icon-sm); height:var(--icon-sm); }
-.badge-primary { color:var(--primary-emphasis); border-color:var(--primary-outline); background:color-mix(in srgb,var(--primary) 10%,transparent); }
+.badge-primary { --badge-accent:var(--primary-emphasis); color:var(--primary-emphasis); border-color:var(--primary-outline); background:color-mix(in srgb,var(--primary) 10%,transparent); }
+/* TAMANHOS. O md é a base (24px), que não muda — é o que as 103 fichas já usam. */
+.badge-xs { min-height:var(--space-4); padding:0 var(--space-1); border-width:0; }
+.badge-sm { min-height:var(--space-5); padding:0 var(--space-2); }
+.badge-lg { min-height:var(--space-7); padding:0 var(--space-3); font-size:var(--text-sm); }
+/* ACESSÓRIOS de dentro do chip. O ponto herda a cor do texto por `currentColor`, então ele
+   acompanha variante e ênfase sem uma regra por combinação. */
+.badge-dot { flex:none; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:currentColor; }
+.badge-image { flex:none; width:var(--space-4); height:var(--space-4); border-radius:var(--radius-full); object-fit:cover; }
+.badge-dismiss { display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--space-4); height:var(--space-4); margin-inline-end:calc(var(--space-1)*-1); padding:0; border:0; border-radius:var(--radius-full); background:transparent; color:inherit; cursor:pointer; }
+.badge-dismiss:hover { background:color-mix(in srgb,currentColor 16%,transparent); }
+.badge-dismiss .icon { width:var(--space-3); height:var(--space-3); }
+
+/* ── O BADGE SOBREPOSTO — contador no canto de outra coisa ──────────────────────────
+   Anatomia da `Badge.js` da MUI, medida no fonte: raiz `relative/inline-flex/flex-shrink:0`,
+   o contador `absolute` com `z-index:1`, e o deslocamento do canto valendo **0 para caixa
+   quadrada e 14% para redonda** — é `overlap`, e sem ele o contador de um avatar fica solto
+   fora do círculo.
+   O ANEL DE RECORTE é o que faltava e o que fazia parecer sujo: um fio da cor da superfície
+   entre o contador e o que está atrás. Três fontes independentes: `ring-[1.5px] ring-bg-primary`
+   da Untitled UI, `border-background border-2` do ReUI e `box-shadow: 0 0 0 2px background.paper`
+   do exemplo de contato da MUI.
+   A superfície de trás NÃO é adivinhável em CSS — dentro de um card ela é `--card`, não
+   `--background`. Por isso ela é uma propriedade: sobrescreva `--badge-ring` no contêiner. */
+.badge-anchor { position:relative; display:inline-flex; vertical-align:middle; flex-shrink:0; }
+.badge-overlay { --badge-ring:var(--background); --badge-inset:0%; position:absolute; z-index:1; min-height:var(--space-4); padding:0 var(--space-1); box-shadow:0 0 0 var(--space-05) var(--badge-ring); }
+.badge-on-circle { --badge-inset:14%; }
+/* O ponto sozinho não tem conteúdo, então ele precisa de medida própria. */
+.badge-overlay.badge-is-dot { width:var(--space-2); min-width:var(--space-2); height:var(--space-2); min-height:var(--space-2); padding:0; }
+.badge-at-top-end { inset-block-start:var(--badge-inset); inset-inline-end:var(--badge-inset); transform:translate(50%,-50%); }
+.badge-at-top-start { inset-block-start:var(--badge-inset); inset-inline-start:var(--badge-inset); transform:translate(-50%,-50%); }
+.badge-at-bottom-end { inset-block-end:var(--badge-inset); inset-inline-end:var(--badge-inset); transform:translate(50%,50%); }
+.badge-at-bottom-start { inset-block-end:var(--badge-inset); inset-inline-start:var(--badge-inset); transform:translate(-50%,50%); }
+/* `transform` não espelha sozinho, e `inset-inline-*` sim: em RTL o par sai trocado e o
+   contador vai para dentro da caixa. As quatro regras abaixo são o preço disso. */
+.badge-at-top-end:dir(rtl) { transform:translate(-50%,-50%); }
+.badge-at-top-start:dir(rtl) { transform:translate(50%,-50%); }
+.badge-at-bottom-end:dir(rtl) { transform:translate(-50%,50%); }
+.badge-at-bottom-start:dir(rtl) { transform:translate(50%,50%); }
+/* ACESSÓRIO SOBRE A MARCA — o badge INVERTE quando o que está debaixo dele é o amarelo.
+   Achado pelo Victor em 17/08/2026 na barra inferior, e a pergunta obrigatória do CLAUDE.md
+   ("quem mais tem esse problema?") devolveu um defeito ANTIGO e publicado: `.badge-primary`
+   dentro de `.btn-primary` é amarelo translúcido com texto `--primary-emphasis` — medido no
+   navegador, texto `oklch(0.795 0.184 86.047)` sobre fundo `oklch(0.795 0.184 86.047)`.
+   Contraste 1:1, literalmente invisível, e nenhum gate via: check nenhum compara a cor de um
+   filho com a do pai.
+   A inversão é a saída óbvia e a única que não inventa cor nova — o par da marca já existe
+   (`--primary`/`--primary-foreground`) e é o mesmo que o botão usa.
+   O ENVOLTÓRIO leva só a cor de texto, nunca fundo: ele é a caixa de posição do acessório, e
+   pintá-lo desenharia um retângulo atrás de um badge que é pílula. */
+.btn-primary .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+/* O `circle-bold` é o único indicador que preenche com o amarelo sólido, então é o único onde
+   o contador cai sobre a cor da marca e precisa da mesma inversão do botão primário. Os outros
+   seis deixam o contador sobre a superfície da barra, onde ele já se lê. */
 
-.badge-success { color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
-.badge-warning { color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
-.badge-danger { color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
-.badge-info,.badge-running { color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+.badge-success { --badge-accent:var(--success-400); color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
+.badge-warning { --badge-accent:var(--warning-400); color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
+.badge-danger { --badge-accent:var(--danger-400); color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
+.badge-info,.badge-running { --badge-accent:var(--info-400); color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+/* ── AS TRÊS ÊNFASES — e elas vêm DEPOIS das variantes de propósito ─────────────────
+   Cada variante declara só o ACENTO; as ênfases saem dele. Antes cada variante escrevia
+   cor + fundo + borda na mão, e uma ênfase nova custaria seis regras novas.
+   A POSIÇÃO NO ARQUIVO É A REGRA, não estilo: `.badge-solid` e `.badge-success` têm a MESMA
+   especificidade (0,1,0), então quem vem depois vence. Escritas antes, as três não faziam
+   nada em quatro das seis variantes — medido no navegador, `solid` e `outline` devolviam o
+   número do `soft`. É a mesma armadilha que o `.banner` e o `.data-list` já pagaram aqui.
+   `--background` como texto do sólido serve aos DOIS temas porque o acento já vira com o
+   tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
+.badge-solid { background:var(--badge-accent); color:var(--background); border-color:transparent; }
+.badge-outline { background:transparent; color:var(--badge-accent); border-color:var(--badge-accent); }
 .status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
 /* Status: condição operacional (DIRECTION §3.6) — NÃO é o pill do Badge; é ponto + rótulo
    solto na linha. A variante pinta o .status (o ponto herda por currentColor) e o rótulo
@@ -1605,7 +2077,7 @@ button.graph-node-body { cursor:pointer; }
 /* Padrões compostos Aurea 1.7: blocos de operação, não widgets de domínio. */
 /* Alvo de toque. `.tabs`/`.segmented` no lugar de `.tab`/`.segmented button`: agora a altura
    mora na cápsula, então é ela que precisa crescer — o filho estica atrás. */
-@media (pointer:coarse) { .btn:not(.btn-link),.tabs,.segmented,.pagination button,.schedule-grid button,.media-control { min-height:var(--target-min); } .btn-icon,.media-control { min-width:var(--target-min); } }
+@media (pointer:coarse) { .btn:not(.btn-link),.tabs,.segmented,.pagination button,.schedule-grid button,.media-control,.nav-list-row { min-height:var(--target-min); } .btn-icon,.media-control { min-width:var(--target-min); } }
 @media (forced-colors:active) {
   :focus-visible { outline:2px solid CanvasText; outline-offset:2px; box-shadow:none; }
   .badge,.pattern-gallery button[aria-pressed="true"],.device-grid button[aria-pressed="true"] { border:1px solid CanvasText; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "The Aurea UDS stylesheet and its vanilla behaviour. Import @aurea-uds/fonts/css before this.",
   "keywords": ["aurea", "design-system", "css", "design-tokens"],
   "license": "Apache-2.0",