@aurea-uds/core 0.35.0 → 0.36.0

package/dist/aurea.css

@@ -4,6 +4,7 @@
   --brand-yellow:oklch(0.795 0.184 86.047);
   --brand-yellow-foreground:oklch(0.421 0.095 57.708);
   --brand-yellow-text:oklch(0.516 0.105 86.047);
+  --brand-yellow-ink:#242424;
   --white:oklch(1 0 0);
   --black:oklch(0 0 0);
   --font-ui:"Atkinson Hyperlegible Next","Segoe UI",sans-serif;
@@ -20,6 +21,8 @@
   --text-3xl:1.875rem;
   --text-4xl:2.25rem;
   --text-5xl:3rem;
+  --text-6xl:3.75rem;
+  --text-7xl:4.5rem;
   --leading-tight:1.2;
   --leading-normal:1.5;
   --leading-relaxed:1.7;
@@ -152,7 +155,7 @@
   --popover:#292929;
   --popover-foreground:#ffffff;
   --primary:var(--brand-yellow);
-  --primary-foreground:var(--brand-yellow-foreground);
+  --primary-foreground:var(--brand-yellow-ink);
   --link:var(--brand-yellow);
   --link-hover:var(--brand-yellow);
   --secondary:#333333;
@@ -174,7 +177,7 @@
   --sidebar:#292929;
   --sidebar-foreground:#ffffff;
   --sidebar-primary:var(--brand-yellow);
-  --sidebar-primary-foreground:var(--brand-yellow-foreground);
+  --sidebar-primary-foreground:var(--brand-yellow-ink);
   --sidebar-accent:#333333;
   --sidebar-accent-foreground:#ffffff;
   --sidebar-border:#525252;
@@ -198,7 +201,9 @@
   --primary-emphasis:var(--primary);
   --primary-outline:var(--primary);
   --control-selected:var(--primary);
-  --control-selected-foreground:var(--primary-foreground);
+  --control-selected-foreground:var(--brand-yellow-ink);
+  --control-selected-dot:oklch(0.985 0 0);
+  --primary-mark:var(--brand-yellow-foreground);
   --selection:oklch(0.795 0.184 86.047 / 0.22);
   --success-bg:#052505;
   --warning-bg:#4a1e04;
@@ -242,9 +247,9 @@
   --popover:#ffffff;
   --popover-foreground:#242424;
   --primary:var(--brand-yellow);
-  --primary-foreground:var(--brand-yellow-foreground);
-  --link:oklch(0.52 0.106 86.047);
-  --link-hover:oklch(0.44 0.106 86.047);
+  --primary-foreground:var(--brand-yellow-ink);
+  --link:var(--brand-yellow);
+  --link-hover:var(--brand-yellow);
   --secondary:#ebebeb;
   --secondary-foreground:#242424;
   --muted:var(--secondary);
@@ -264,7 +269,7 @@
   --sidebar:var(--card);
   --sidebar-foreground:#242424;
   --sidebar-primary:var(--primary-emphasis);
-  --sidebar-primary-foreground:var(--brand-yellow-foreground);
+  --sidebar-primary-foreground:var(--brand-yellow-ink);
   --sidebar-accent:var(--secondary);
   --sidebar-accent-foreground:#242424;
   --sidebar-border:#e0e0e0;
@@ -284,11 +289,13 @@
   --secondary-hover:var(--surface-hover);
   --segment:oklch(1 0 0);
   --focus:var(--primary);
-  --focus-strong:var(--brand-yellow-foreground);
-  --primary-emphasis:var(--brand-yellow-text);
-  --primary-outline:var(--brand-yellow-text);
-  --control-selected:var(--brand-yellow-foreground);
-  --control-selected-foreground:oklch(0.985 0 0);
+  --focus-strong:var(--foreground);
+  --primary-emphasis:var(--brand-yellow);
+  --primary-outline:var(--brand-yellow);
+  --control-selected:var(--brand-yellow);
+  --control-selected-foreground:var(--brand-yellow-ink);
+  --control-selected-dot:oklch(0.985 0 0);
+  --primary-mark:var(--brand-yellow-foreground);
   --success-400:#0e700e;
   --warning-400:#8a3707;
   --danger-400:#b10e1c;
@@ -366,6 +373,8 @@
   --selection:oklch(0.32 0.08 50);
   --control-selected:oklch(0.72 0.19 48);
   --control-selected-foreground:oklch(0.16 0.02 250);
+  --control-selected-dot:oklch(0.16 0.02 250);
+  --primary-mark: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);
@@ -428,6 +437,8 @@
   --selection:oklch(0.96 0.04 60);
   --control-selected:oklch(0.682 0.197 44.5);
   --control-selected-foreground:oklch(1 0 0);
+  --control-selected-dot:oklch(1 0 0);
+  --primary-mark: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);
@@ -450,6 +461,8 @@
   --warning-bg:oklch(0.95 0.06 80);
   --danger-bg:oklch(0.95 0.05 25);
   --info-bg:oklch(0.95 0.04 235);
+  --link:oklch(0.52 0.106 86.047);
+  --link-hover:oklch(0.44 0.106 86.047);
 }
 [data-density="compact"]{
   --control-h-xs:1.5rem;
@@ -618,6 +631,43 @@ img,svg { display:block; }
 .section-inset { background:var(--surface-inset); }
 .section-spacing-sm { padding-block:var(--space-8); }
 @media (min-width:768px) { .section { padding-block:var(--space-24); } .section-spacing-sm { padding-block:var(--space-12); } }
+/* GAR-21 e GAR-22 (lote U, 19/10/2026): a `Section` variant="hero" — a abertura de página. Os vãos são os do início da
+   referência (medidos em 15/10/2026): a sobrelinha a 8 do título (16 a partir de 1024), o texto colado no título, os
+   botões a 16, o que vier depois a 8 (16 a partir de 1024); o texto 16/24, e 18/28 a partir de 768, em 672 de largura (o
+   640 da escala mais o --space-8). O título 36, 60 a partir de 768 e 72 a partir de 1024 (os três tamanhos são decisão
+   do Victor; as larguras, desta peça). Com imagem e align="start", o texto e a imagem lado a lado a partir de 1024;
+   abaixo disso, a imagem desce.
+   As larguras são da FAIXA, e não da janela (`@container`, como o `.media-player`): de ponta a ponta, a faixa tem a
+   largura da janela e dá o mesmo; numa coluna mais estreita (a prévia do catálogo), o título não passa dela. O 72 entra
+   em 1024, e não em 1280: numa janela de 1280 a barra de rolagem deixa a faixa com menos de 1280, e o 72 não apareceria
+   na tela larga mais comum. */
+.section-hero { container:aurea-hero / inline-size; }
+.section-hero-content { display:grid; justify-items:start; min-inline-size:0; }
+.section-hero-center .section-hero-content { justify-items:center; text-align:center; }
+.section-hero-text { display:grid; justify-items:inherit; }
+/* A sobrelinha em flex: com um selo ou link dentro de um bloco comum, a linha de texto do bloco somava 2 à altura dele. */
+.section-hero-eyebrow { display:flex; align-items:center; }
+.section-hero-content > * + * { margin-block-start:var(--space-2); }
+.section-hero-content > * + .section-hero-actions { margin-block-start:var(--space-4); }
+.section-hero-title { margin:0; color:var(--foreground); font-family:var(--font-heading); font-size:var(--text-4xl); line-height:var(--text-4xl-leading); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); text-wrap:balance; }
+.section-hero-description { max-inline-size:calc(var(--breakpoint-sm) + var(--space-8)); margin:0; color:var(--muted-foreground); font-size:var(--text-base); line-height:var(--leading-normal); text-wrap:pretty; }
+.section-hero-center .section-hero-description { text-wrap:balance; }
+.section-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
+.section-hero-center .section-hero-actions { justify-content:center; }
+/* O campo de e-mail no lugar dos botões: o formulário cresce até 480 (o --breakpoint-xs), e não fica do tamanho do texto
+   de exemplo. */
+.section-hero-actions > form { flex:1 1 auto; max-inline-size:var(--breakpoint-xs); }
+.section-hero-media { min-inline-size:0; margin-block-start:var(--space-12); }
+@container aurea-hero (min-width:768px) {
+  .section-hero-title { font-size:var(--text-6xl); line-height:var(--leading-none); }
+  .section-hero-description { font-size:var(--text-lg); line-height:var(--text-lg-leading); }
+}
+@container aurea-hero (min-width:1024px) {
+  .section-hero-content > * + :not(.section-hero-actions) { margin-block-start:var(--space-4); }
+  .section-hero-split .section-hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--space-12); }
+  .section-hero-split .section-hero-media { margin-block-start:0; }
+  .section-hero-title { font-size:var(--text-7xl); }
+}
 /* GAR-06 (07/10/2026): a `Section` variant="footer" — o rodapé de site, uma faixa como as outras
    (fundo, respiro e tema vêm dela). No celular tudo empilha numa coluna; a partir de 768 a marca
    fica à esquerda e as colunas de links se repartem à direita, cada uma com pelo menos 8rem (a
@@ -982,6 +1032,75 @@ img,svg { display:block; }
 }
 }
 
+/* O ARRANJO DE DOCUMENTAÇÃO NO CELULAR E NO TABLET (`AppShell layout="docs"`, lote U, 19/10/2026 — o Victor: "tudo como
+   ela"), medido na página da documentação da referência a 375, 768 e 1100:
+   - a LATERAL é coluna desde 768 (e não desde 1024): de 768 a 1023 ela fica à esquerda do texto, como lá;
+   - abaixo de 768 ela é a gaveta, e abre pela DIREITA, do lado do botão (que o `AppShell` põe no fim da barra);
+   - o índice ("On this page") é coluna só de 1280 para cima. Abaixo, ele é a GAVETA da BARRA DO ÍNDICE: uma barra de 40
+     presa logo abaixo do topo, na coluna do texto, com o nome da seção em vista e a setinha; tocar desce a lista. A
+     referência desenha um círculo de progresso; aqui é o ícone de lista, e nenhuma linha (ADR-0072).
+   Estas regras vêm DEPOIS das da gaveta de sempre e levam a classe do arranjo — com a mesma força, a ordem decide. */
+.docs-toc-bar { display:none; }
+@media (min-width:768px) and (max-width:1023px) {
+  .app-shell.app-shell-docs { grid-template-columns:var(--docs-sidebar-width) minmax(0,1fr); }
+  .app-shell-docs .btn.nav-toggle { display:none; }
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):not(:popover-open) { display:flex; }
+  .app-shell-docs > .sidebar:not(.app-shell-aside):not(.sidebar-flush) { --shell-top:calc(var(--docs-top) + var(--space-4)); grid-column:1; grid-row:2 / span 2;
+    position:sticky; inset-block-start:var(--shell-top); align-self:start; block-size:calc(100vh - var(--shell-top) - var(--space-8));
+    max-block-size:none; margin:var(--space-4) 0 0; border-width:0; padding-block:var(--space-2) var(--space-4); padding-inline:var(--space-4); }
+  .app-shell-docs > .sidebar > .sidebar-nav > .sidebar-list > li:first-child > .sidebar-group-label { margin-block-start:0; }
+  .app-shell-docs > .sidebar .sidebar-item { padding-inline:var(--space-2); }
+  .app-shell-docs > .sidebar .sidebar-group-label { margin-inline:var(--space-2); }
+  .app-shell-docs > .docs-toc-bar { grid-column:2; grid-row:2; }
+  .app-shell-docs > .content.content { grid-column:2; grid-row:3; }
+}
+@media (min-width:1024px) and (max-width:1279px) {
+  .app-shell-docs > .sidebar:not(.app-shell-aside):not(.sidebar-flush) { grid-row:2 / span 2; }
+  .app-shell-docs > .docs-toc-bar { grid-column:3; grid-row:2; }
+  .app-shell-docs > .content.content { grid-row:3; }
+}
+@media (max-width:1279px) {
+  .app-shell-docs > .docs-toc-bar { display:block; position:sticky; inset-block-start:var(--docs-top); z-index:var(--z-sticky); background:var(--background); }
+  .docs-toc-toggle { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--space-10); padding:0 var(--space-6);
+    border:0; background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-sm); text-align:start; cursor:pointer; }
+  .docs-toc-toggle:hover { color:var(--foreground); }
+  .docs-toc-toggle:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
+  .docs-toc-current { flex:1; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .app-shell-docs:has(> .app-shell-aside:popover-open) .docs-toc-toggle > .icon:last-child { rotate:180deg; }
+}
+@supports selector(:popover-open) {
+@media (max-width:1279px) {
+  .app-shell-docs > .sidebar.app-shell-aside[popover]:not(:popover-open) { display:none; }
+  /* Aberto, ele desce da barra: preso logo abaixo dela, na largura da coluna do texto, uma superfície que flutua por cima
+     do texto (o fundo opaco do popover, o canto do cartão). Sem véu: a lista é um atalho, não uma janela. */
+  .app-shell-docs > .sidebar.app-shell-aside[popover]:popover-open { position:fixed; inset-block-start:calc(var(--docs-top) + var(--space-10));
+    inset-block-end:auto; inset-inline:var(--space-4); inline-size:auto; block-size:auto;
+    max-block-size:calc(100dvh - var(--docs-top) - var(--space-10) - var(--space-4)); margin:0; padding:var(--space-2) var(--space-4) var(--space-4);
+    overflow:auto; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+  .app-shell-docs > .sidebar.app-shell-aside[popover]::backdrop { background:transparent; }
+}
+@media (min-width:768px) and (max-width:1279px) {
+  .app-shell-docs > .sidebar.app-shell-aside[popover]:popover-open { inset-inline-start:calc(var(--docs-sidebar-width) + var(--space-4)); }
+}
+@media (max-width:767px) {
+  /* A gaveta ABERTA é uma superfície, mesmo com a lateral sem caixa (`sidebarVariant="plain"`) do desktop: sem o fundo,
+     a lista se misturava ao texto da página por baixo (medido a 375). O fundo e o canto do popover, como o do índice. */
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open { inset-inline-start:auto; inset-inline-end:var(--space-4);
+    padding:var(--space-2) var(--space-4) var(--space-4); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open .sidebar-item { padding-inline:var(--space-2); }
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open .sidebar-group-label { margin-inline:var(--space-2); }
+}
+}
+/* De 1280 para cima o índice é a coluna, e o atributo de gaveta não pode encolhê-lo: a regra da gaveta fechada
+   (`.sidebar[popover]:not(:popover-open)`, `width:auto`) vem antes na folha com a mesma força e o deixava com 200 (medido). */
+@media (min-width:1280px) {
+  .app-shell-docs > .sidebar.app-shell-aside[popover] { inline-size:var(--docs-toc-width); }
+}
+/* No celular o título fica a 32 da barra do índice, como o da referência a 375 (de 768 para cima, 16 nas duas). */
+@media (max-width:767px) {
+  .app-shell-docs > .content.content { padding-block-start:var(--space-8); }
+}
+
 /* ── A LISTA DA LATERAL (PLANO-1.0, item B1) ───────────────────────────────────────
    Até 06/08/2026 a Sidebar era só a caixa: item, grupo, aninhamento e marca de item atual
    existiam neste arquivo como `.doc-nav`, que é CHROME do catálogo (achado A6) e nunca foi
@@ -1279,7 +1398,7 @@ img,svg { display:block; }
    altura da barra não muda. O mesmo no `navigation.tsx`. */
 .bottom-nav.bottom-nav-ind-circle-bold .bottom-nav-item { padding:0; }
 .bottom-nav-disc { display:flex; flex-direction:column; align-items:center; justify-content:center; inline-size:var(--bottomnav-bold,3.5rem); max-inline-size:100%; min-height:var(--control-h-lg); padding:var(--space-1); border-radius:var(--radius-full); }
-.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-foreground); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-mark); }
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc { background:var(--primary); }
 .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.
@@ -1287,8 +1406,8 @@ img,svg { display:block; }
    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); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-mark); }
 /* ── CÁPSULA (`capsule`) — a "A" da bancada do Victor, 03/10/2026: o modelo de uma das referências ─
    A moldura do ícone vira a cápsula de 56 × 32 do indicador ativo dessa referência
    (`--bottomnav-bold` × `--bottomnav-ring`), em TODOS os itens; só a do escolhido é pintada, de
@@ -1299,9 +1418,9 @@ img,svg { display:block; }
    mesma razão medida do `circle-bold`, logo acima. */
 .bottom-nav-ind-capsule .bottom-nav-mark { width:var(--bottomnav-bold,3.5rem); height:var(--bottomnav-ring); border-radius:var(--radius-full); }
 .bottom-nav-ind-capsule .bottom-nav-badge { inset-inline-end:calc((var(--bottomnav-bold,3.5rem) - var(--bottomnav-ring)) / 2 - var(--space-05)); }
-.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-mark); }
 .bottom-nav-ind-capsule .bottom-nav-item[aria-current] .icon { opacity:1; }
-.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
 /* No `content`, o recheio de sempre (`--space-1`) e não o `--space-3`: com ele cada item teria 80. */
 .bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-capsule .bottom-nav-item { padding-inline:var(--space-1); }
 /* ── EXPANDE (`expand`) — a "C" da bancada do Victor, 03/10/2026 ───────────────────────────────
@@ -1315,9 +1434,9 @@ img,svg { display:block; }
 .bottom-nav-ind-expand .bottom-nav-item { flex-direction:row; gap:var(--space-2); min-width:var(--target-min); min-height:var(--target-min); padding:0; }
 .bottom-nav-ind-expand .bottom-nav-mark { width:var(--icon-lg); }
 .bottom-nav-ind-expand .bottom-nav-label { font-size:var(--text-sm); }
-.bottom-nav-ind-expand .bottom-nav-item[aria-current] { flex:none; inline-size:calc(var(--icon-lg) + var(--space-2) + var(--space-20) + 2 * var(--space-3)); padding-inline:var(--space-3); background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-expand .bottom-nav-item[aria-current] { flex:none; inline-size:calc(var(--icon-lg) + var(--space-2) + var(--space-20) + 2 * var(--space-3)); padding-inline:var(--space-3); background:var(--primary); color:var(--primary-mark); }
 .bottom-nav-ind-expand .bottom-nav-item[aria-current] .icon { opacity:1; }
-.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
 .bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-expand .bottom-nav-item:not([aria-current]) { flex:none; inline-size:var(--target-min); padding-inline:0; }
 
 /* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-1) ──────────────────────────
@@ -2054,7 +2173,12 @@ img,svg { display:block; }
 /* A opção marcada fica CHEIA, com o ponto no meio, como a da referência (o ponto dela tem 8 numa
    marca de 16: a metade). Era vazia, com o ponto amarelo. */
 .radio input:checked + .control-mark { background:var(--control-selected); border-color:transparent; }
-.radio input:checked + .control-mark:after { content:""; width:50%; height:50%; border-radius:50%; background:var(--control-selected-foreground); }
+/* A BOLINHA tem 6 de 14, a da referência (`scale: 0.4286` no CSS publicado dela, 3.2.6), e é ENCOLHIDA POR ESCALA a
+   partir do miolo inteiro, e não desenhada pequena (17/10/2026 — o Victor: "a bolinha do rádio não está centralizada, é
+   torta"). Medido na imagem: a de antes, 7 dentro de 14, ficava meio ponto acima e à esquerda do centro em todo zoom —
+   a folga de 3,5 virava 3 de um lado e 4 do outro. A escala gira em torno do centro exato da caixa. */
+.radio input:checked + .control-mark:after { content:""; inline-size:100%; block-size:100%; border-radius:50%;
+  background:var(--control-selected-dot); scale:calc(3 / 7); }
 .switch { display:inline-flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; } .switch input { position:absolute; opacity:0; }
 /* O TRILHO DO SWITCH (0.32.0): o da referência, 40 × 20 (sm 32 × 16, lg 48 × 24) — a largura é o
    dobro da altura. Era 42 × 24. A altura é a de controle MENOS 16: dá exatamente os três dela
@@ -2078,7 +2202,7 @@ img,svg { display:block; }
    mesma distância nos dois sentidos de escrita. */
 .switch-track:after { --thumb-h:calc(var(--switch-h) - 2 * var(--space-05)); --thumb-w:calc(var(--thumb-h) * 11 / 8); content:""; position:absolute; inset-inline-start:calc(var(--space-05) - var(--border-width)); top:calc(var(--space-05) - var(--border-width)); block-size:var(--thumb-h); inline-size:var(--thumb-w); border-radius:var(--radius-full); background:var(--muted-foreground); transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard); }
 .switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
-.switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--control-selected-foreground); }
+.switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--primary-mark); }
 .range { width:100%; accent-color:var(--primary); }
 /* Slider VERTICAL, no `<input type=range>` NATIVO — sem trocar de motor.
 
@@ -2118,7 +2242,7 @@ img,svg { display:block; }
 .slider-track { position:relative; inline-size:100%; block-size:var(--space-5); border-inline:var(--space-3) solid transparent; border-radius:var(--radius-full); background:var(--secondary); }
 .slider-fill { box-sizing:content-box; block-size:100%; margin-inline-start:calc(-1 * var(--space-3)); padding-inline-start:var(--space-3); border-radius:var(--radius-full); background:var(--primary); }
 .slider-thumb { display:grid; place-items:center; inline-size:calc(var(--space-6) + var(--space-1)); block-size:100%; border-radius:var(--radius-full); background:var(--primary); cursor:grab; }
-.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--primary-foreground); box-shadow:var(--shadow-sm); transition:scale var(--duration-fast) var(--ease-standard); }
+.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--primary-mark); box-shadow:var(--shadow-sm); transition:scale var(--duration-fast) var(--ease-standard); }
 .slider-thumb[data-dragging] { cursor:grabbing; }
 .slider-thumb[data-dragging]::after { scale:.9; }
 .slider-thumb:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
@@ -2258,7 +2382,8 @@ img,svg { display:block; }
 /* `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. */
+   A etiqueta de código do SITE (a classe `.chip` do `scripts/build-catalog.mjs`, que não é peça da Aurea) já tinha
+   aprendido isso; o .badge não. Desde 19/10/2026 (GAR-20), o componente `Chip` existe: é outro nome do `Badge`. */
 /* 0.32.0: as medidas do Chip da referência (o `Badge` da Aurea é o Chip dela), lidas no CSS publicado:
    24 de altura, 10 até o texto (8 da caixa + 2 do rótulo — aqui, com a borda de 1 que é nossa, 9), 4
    entre o glifo e o texto (era 6); `sm` 20 com 6 até o texto, `lg` 28 com 14 e letra de 14. A cápsula e a
@@ -2272,7 +2397,9 @@ img,svg { display:block; }
    numa fila, `align-self:flex-start` tiraria o selo do meio; o tamanho definido só desliga o
    esticar, que é o que a coluna faz com um item sem tamanho. */
 .badge-fit { inline-size:fit-content; }
-.badge-primary { --badge-accent:var(--primary-emphasis); color:var(--primary-emphasis); border-color:transparent; background:color-mix(in srgb,var(--primary) 10%,transparent); }
+/* O cheio da marca enche com o acento e escreve com a letra do botão amarelo (`--primary-foreground`): desde a ADR-0073
+   o acento do claro é o próprio amarelo, e a letra de antes (`--background`, clara) media 1,75:1 em cima dele. */
+.badge-primary { --badge-accent:var(--primary-emphasis); --badge-on:var(--primary-foreground); color:var(--primary-emphasis); border-color:transparent; 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 calc(var(--space-1) + var(--space-05) - var(--border-width)); }
@@ -2357,8 +2484,8 @@ img,svg { display:block; }
    `--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. */
 /* O selo CHEIO de estado é o botão cheio do mesmo tom (ADR-0061): a mesma cor funda e a mesma letra
-   (`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, a marca, o neutro) segue
-   enchendo com o acento, como antes. */
+   (`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, o neutro) segue enchendo com o
+   acento, como antes; a marca enche com o acento e declara só a letra (ADR-0073). */
 .badge-solid { background:var(--badge-fill, var(--badge-accent)); color:var(--badge-on, var(--background)); border-color:transparent; }
 .badge-outline { background:transparent; color:var(--badge-accent); border-color:transparent; }
 /* flat (15/10/2026): o tom de sempre sem a linha em volta — o selo da referência não tem borda em forma nenhuma. A
@@ -2478,7 +2605,23 @@ img,svg { display:block; }
    Só o ícone DIRETO do alerta: um ícone dentro do corpo (num botão, num link) é do corpo. */
 .alert>.icon { --step-icon:var(--icon-sm); margin:var(--space-1); color:var(--alert-tone); }
 .banner strong { font-size:var(--text-sm); } .banner p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
-@media (max-width:640px) { .banner { grid-template-columns:auto minmax(0,1fr); } .banner>:last-child { grid-column:2; justify-self:start; } }
+/* GAR-19 (lote U, 19/10/2026): o aviso de cookies, Banner variant="consent". Uma coluna: o título (h2), o texto e os
+   três botões de MESMO peso numa linha que quebra — rejeitar tão fácil de ver quanto aceitar (o guia da ANPD) —; depois
+   da escolha, a confirmação no lugar deles. O aviso mora no alto da página e não fica preso: com position:fixed ele
+   cobriria o que recebe o foco (WCAG 2.4.11). A janela de preferências é o Dialog, e as categorias, o Switch. */
+/* O fundo e a sombra são os do cartão, como os do Alert: no fundo cinza do Banner comum, os botões cinza sumiam (medido na
+   bancada). */
+.banner-consent { grid-template-columns:minmax(0,1fr); align-items:start; gap:var(--space-3); background:var(--card); box-shadow:var(--shadow-sm); }
+.banner-consent-title { margin:0; color:var(--foreground); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-tight); }
+.banner-consent-text { min-inline-size:0; color:var(--muted-foreground); font-size:var(--text-sm); }
+.banner-consent-text > * + * { margin-block-start:var(--space-2); }
+.banner-consent-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
+.banner-consent-message { color:var(--foreground); font-size:var(--text-sm); }
+.banner-consent-categories { display:grid; gap:var(--space-5); }
+.banner-consent-required { display:grid; gap:var(--space-1); }
+.banner-consent-required-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
+.banner-consent-required p { margin:0; color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
+@media (max-width:640px) { .banner:not(.banner-consent) { grid-template-columns:auto minmax(0,1fr); } .banner:not(.banner-consent)>:last-child { grid-column:2; justify-self:start; } }
 .progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
 .progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
 /* AN-07 (03/10/2026): a caixa de fora, o texto de apoio e o tom. A anatomia é a da barra de progresso da
@@ -3177,15 +3320,17 @@ button.tag-main { cursor:pointer; }
    `.image`; aqui fica só o que não varia. O `<iframe>` é absoluto porque a altura é da caixa, não
    dele. A fachada é um `<button>` que cobre a caixa inteira: o alvo de clique é o vídeo todo, e o
    anel de foco é o `:focus-visible` global da casa. A pastilha de tocar é amarela porque é a ação
-   da tela — o mesmo combinado do `Card variant="brand"`: amarelo só para pedir ação. O anel de
-   `--media-scrim` em volta dela não é enfeite: a capa é do consumidor, e numa capa amarela a
-   pastilha sumia — medido na primeira imagem mostrada ao Victor, em 24/09/2026. */
+   da tela — o mesmo combinado do `Card variant="brand"`: amarelo só para pedir ação. O ícone dela
+   é o marrom da marca (`--primary-mark`), e ela não tem mais o anel escuro em volta: decisão do
+   Victor, 17/10/2026 (*"não quero preto"*). Numa capa amarela, quem a separa é a sombra. A caixa
+   pinta o fundo só por dentro da borda transparente (`background-clip`): sem isso, o fundo escuro
+   aparecia como um aro de 1 em volta da capa. */
 .media-embed { display:grid; gap:var(--space-2); min-inline-size:0; }
-.media-embed-frame { position:relative; overflow:hidden; border:1px solid transparent; border-radius:var(--radius-card); background:var(--media-canvas); }
+.media-embed-frame { position:relative; overflow:hidden; border:1px solid transparent; border-radius:var(--radius-card); background:var(--media-canvas); background-clip:padding-box; }
 .media-embed-frame>iframe { position:absolute; inset:0; inline-size:100%; block-size:100%; border:0; }
 .media-embed-facade { position:absolute; inset:0; display:grid; place-items:center; padding:0; border:0; border-radius:inherit; background:var(--media-canvas); color:var(--media-foreground); cursor:pointer; }
 .media-embed-facade>img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
-.media-embed-play { position:relative; display:grid; place-items:center; inline-size:var(--control-h-lg); block-size:var(--control-h-lg); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-foreground); box-shadow:0 0 0 var(--space-1) var(--media-scrim),var(--shadow-lg); }
+.media-embed-play { position:relative; display:grid; place-items:center; inline-size:var(--control-h-lg); block-size:var(--control-h-lg); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-mark); box-shadow:var(--shadow-lg); }
 .media-embed-facade:hover .media-embed-play { transform:scale(1.06); }
 .media-embed-link { display:inline-flex; align-items:center; gap:var(--space-1); justify-self:start; color:var(--muted-foreground); font-size:var(--text-sm); }
 .media-embed-link:hover { color:var(--foreground); }
@@ -3302,7 +3447,10 @@ button.tag-main { cursor:pointer; }
 /* `0.9em` e não um token: código dentro do texto se mede em relação à LINHA em que está, e um
    valor absoluto o deixaria maior que o parágrafo dentro de um h2. É o mesmo motivo pelo qual o
    `.badge` tem `line-height:1` — geometria que depende do contexto se escreve relativa. */
-.prose code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:0.9em; }
+/* `overflow-wrap:anywhere` (18/10/2026, lote U): código no meio do texto é uma palavra só — `window.Aurea.setDensity("compact")`
+   —, e sem a quebra ele empurrava a página para o lado a 320 (medido na página Density do site; a WCAG 1.4.10 pede que
+   nada role para o lado). Dentro do `pre` ela não age: lá o `white-space` não quebra, e a caixa rola. */
+.prose code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:0.9em; overflow-wrap:anywhere; }
 .prose pre { overflow-x:auto; padding:var(--space-4); border:1px solid transparent; border-radius:var(--radius-card); background:var(--surface-2); }
 .prose pre code { padding:0; border-radius:0; background:transparent; font-size:var(--text-sm); }
 .prose img { max-width:100%; height:auto; border-radius:var(--radius-lg); }
@@ -3616,7 +3764,8 @@ button.tag-main { cursor:pointer; }
 /* A largura é a do GLIFO que mora dentro (`--icon-sm`, o mesmo do `<Icon size="sm">`), e não um
    px cru: assim o slot acompanha a escala de glifo do sistema em vez de fixar um número. */
 .menu-mark { flex:none; display:inline-flex; align-items:center; justify-content:center; inline-size:var(--icon-sm); block-size:var(--icon-sm); color:var(--primary); }
-/* METADE do slot, pela mesma razão do `.control-mark:after` do rádio: a marca é proporcional. */
+/* METADE do slot: a marca é proporcional, e PAR (8 em 16), então fica no centro em qualquer zoom — o ponto do `Radio`
+   precisou de escala porque o dele era ímpar (17/10/2026). */
 .menu-ponto { inline-size:calc(var(--icon-sm) / 2); block-size:calc(var(--icon-sm) / 2); border-radius:50%; background:currentColor; }
 /* O rótulo de grupo NÃO é item: não é focável, não é clicável, e a pele não pode sugerir que é. */
 .menu-label { padding:var(--space-2) var(--menu-px) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
@@ -4150,6 +4299,15 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
 .graph-node { position:relative; inline-size:var(--graph-node-w,180px); }
 .graph-node-body { display:grid; gap:var(--space-05); inline-size:100%; padding:var(--space-2) var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--foreground); font-family:inherit; font-size:var(--text-sm); text-align:start; }
 button.graph-node-body { cursor:pointer; }
+/* O PONTEIRO NOS BOTÕES DO NÓ (lote U, 19/10/2026 — o pedido 16 do app de topologia). Fora do modo de arrumar, o nó vai ao
+   motor como não escolhível (`selectable:false`, pela trava `alvo-clicavel`), e o motor tira o ponteiro do invólucro
+   (`.react-flow__node`) quando o nó não é escolhível nem arrastável e o app não passa `onNodeClick`/`onNodeMouse*` — os
+   botões de dentro herdavam o `none`, e o clique de mouse no corpo não chegava ao `onSelect` (pelo teclado chegava). Os
+   botões pegam o ponteiro de volta: o corpo só é botão quando há `onSelect` (sem ele, segue sem ponteiro, como a trava
+   pede); o de recolher e o de fechar o contêiner são sempre botões. A regra sai presa ao `.dependency-graph`, e não à
+   classe do motor (o check 15 barra classe de terceiro no core): o `pointer-events` herda, e o `auto` no botão vale
+   embaixo de qualquer invólucro. */
+.dependency-graph :is(button.graph-node-body,.graph-node-toggle,.graph-group-toggle) { pointer-events:auto; }
 .graph-node[data-selected] .graph-node-body { border-color:transparent; background:color-mix(in oklab,var(--primary) 14%,var(--card)); }
 .graph-node-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--weight-medium); }
 /* `kind` é TEXTO, e não cor: a referência pinta dez tipos de nó em dez cores, e é a quarta vez
@@ -4495,6 +4653,11 @@ button.graph-node-body { cursor:pointer; }
    da "C" dos botões): com a letra de sempre, o verde caía a 3,79:1 no claro e o `success` a 4,15:1 no escuro, dentro do
    cartão. Medido em 16/10/2026: o pior caso passa a 4,79:1. Os outros selos (suave, plano) têm fundo próprio e não mudam. */
 .badge-outline { background-color:color-mix(in oklab,var(--badge-accent) 16%,transparent); color:color-mix(in oklab,var(--badge-accent) 80%,var(--foreground)); }
+/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio amarelo, a mesma
+   do selo suave e do botão de contorno da marca — misturado ao texto, ele virava mostarda (2,36:1) só nesta peça. A
+   referência principal usa a mesma letra no suave e no contorno. Só sem `data-brand`: na `lory` do claro, sem a
+   mistura, a letra cairia de 5,56 para 4,42:1. */
+.badge-primary.badge-outline:not(:where([data-brand],[data-brand] *)) { color:var(--badge-accent); }
 /* O registro ganhou o fundo dos campos; o nível `info` (o azul) caía a 4,08:1 sobre ele no claro. A mesma letra 20% para o texto. */
 .log-stream .log-level.info { color:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
 .step:not(.step-done,.step-active,.step-error,.done,.active) .step-dot { background-color:var(--fill-3-solid); }

package/dist/aurea.js

@@ -240,6 +240,10 @@
     }
     if (!targets.length) return;
     var seen = {};
+    // A BARRA DO ÍNDICE do `AppShell layout="docs"` (lote U, 19/10/2026): abaixo de 1280 o índice é a gaveta dela, e ela
+    // mostra o nome da seção em vista, como a da referência. É o mesmo cálculo; aqui só se escreve o nome lá.
+    var shell = toc.closest ? toc.closest(".app-shell") : null;
+    var nomeNaBarra = shell ? shell.querySelector("[data-toc-current]") : null;
     var observer = new IntersectionObserver(function (entries) {
       // Se o React assumiu este índice depois de nós, saímos. A ordem importa e não é
       // controlável: `initTocs` roda no DOMContentLoaded, e a hidratação pode vir depois. Sem
@@ -255,6 +259,7 @@
         if (id === current) links[id].setAttribute("aria-current", "true");
         else links[id].removeAttribute("aria-current");
       }
+      if (nomeNaBarra && links[current]) nomeNaBarra.textContent = links[current].textContent;
     }, {rootMargin: "0px 0px -75% 0px"});
     for (var k = 0; k < targets.length; k++) observer.observe(targets[k]);
   }
@@ -350,6 +355,19 @@
       for (var g = 0; g < abertas.length; g++) if (estaAberta(abertas[g])) abertas[g].hidePopover();
     };
     if (desktop.addEventListener) desktop.addEventListener("change", aoSubir);
+    // No `layout="docs"` (lote U) a lateral é coluna desde 768 e o índice desde 1280: cada gaveta fecha no corte DELA.
+    // 768 e 1280 são o `--breakpoint-md` e o `--breakpoint-xl`, os cortes do arranjo na folha.
+    var cortes = [["(min-width: 768px)", ".app-shell-docs > .sidebar[popover]:not(.app-shell-aside)"],
+      ["(min-width: 1280px)", ".app-shell-docs > .sidebar.app-shell-aside[popover]"]];
+    cortes.forEach(function (par) {
+      var mq = window.matchMedia(par[0]);
+      if (!mq.addEventListener) return;
+      mq.addEventListener("change", function (e) {
+        if (!e.matches) return;
+        var gavetas = document.querySelectorAll(par[1]);
+        for (var g = 0; g < gavetas.length; g++) if (estaAberta(gavetas[g])) gavetas[g].hidePopover();
+      });
+    });
   }
 
   function toastStack() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "O CSS da Aurea UDS e o comportamento em JavaScript puro. Importe @aurea-uds/fonts/css antes deste.",
   "keywords": [
     "aurea",