@aurea-uds/core 0.51.0 → 0.54.0

package/dist/aurea.css

@@ -243,6 +243,7 @@
   --control-thumb:#ffffff;
   --link-mark:rgba(0,0,0,0);
   --link-underline:var(--primary);
+  --shadow-sm:0 1px 3px rgba(0,0,0,0.45);
 }
 [data-theme="light"]{
   --background:#f5f5f5;
@@ -342,6 +343,7 @@
   --link-underline:var(--primary);
   --control-thumb:#ffffff;
   --warning-500:#d07612;
+  --shadow-sm:0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.06);
 }
 [data-brand="ember"][data-theme="dark"],[data-brand="ember"] [data-theme="dark"]{
   --background:oklch(0.16 0.018 250);
@@ -1318,8 +1320,9 @@ img,svg { display:block; }
 /* 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
-   de site. Só floating e flush entram no grid do AppShell; a pill é peça avulsa (numa
-   pílula não cabem busca + densidade + tema + comando). */
+   de site. ~~Só floating e flush entram no grid do AppShell; a pill é peça avulsa (numa
+   pílula não cabem busca + densidade + tema + comando).~~ Desde o site B (30/10/2026) a pill
+   entra no AppShell: com `maxWidth`, a cápsula é o miolo, da largura do bloco, e cabe tudo. */
 .topbar { grid-column:1/-1; position:sticky; z-index:var(--z-sticky); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--topbar-height); }
 .topbar-floating { top:var(--space-4); margin:var(--space-4) var(--space-4) 0; padding:var(--space-2) var(--space-4); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
 /* flush: encostada nas bordas. SEM fio embaixo (pedido do Victor — a referência não tem)
@@ -1329,6 +1332,19 @@ img,svg { display:block; }
 /* divider (B-07): a linha que separa a barra grudada do conteúdo que passa por baixo. */
 .topbar-divider { border-block-end:var(--border-width) solid transparent; }
 .topbar-pill { top:var(--space-4); width:max-content; max-width:calc(100% - var(--space-8)); margin:var(--space-4) auto 0; justify-content:flex-start; gap:var(--space-2); padding:var(--space-2); border:1px solid transparent; border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); }
+/* A PÍLULA LARGA (`pill` com `maxWidth` — o topo do site B, aprovado em 26/10/2026; no `AppShell`, `topbarVariant="pill"`):
+   a cápsula é o MIOLO, da largura do `Container`, e não do conteúdo. O cabeçalho em volta vira a faixa transparente que
+   gruda no alto, com a cápsula a --space-4 da borda da tela; a cápsula tem a altura da barra (64), o fundo do cartão e a
+   sombra das superfícies que flutuam (`--shadow-md`). A marca fica a --space-5 da ponta da cápsula; os botões redondos
+   da outra ponta, a --space-2 (o canto da cápsula já afasta o círculo). Entre as partes, --space-3 (o desenho tem 14): com 16,
+   a pílula do site não cabia na tela de 1280 (medido, 30/10/2026). */
+.topbar-pill.topbar-contained { top:0; width:auto; max-width:none; margin:0; padding:calc(var(--space-3) + var(--space-05)) var(--space-4) 0; border-width:0; border-radius:0; background:transparent; }
+.topbar-pill.topbar-contained > .topbar-inner { flex-wrap:nowrap; gap:var(--space-3); padding-inline:var(--space-5) var(--space-2); border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-md); }
+/* O desfoque na pílula (`blurred`): na solta, a própria cápsula; na larga, o miolo. A mesma mistura da `flush` (o cartão a
+   72%, ADR-0086), e o fundo cheio para quem pede menos transparência ou não tem o desfoque. */
+:is(.topbar-pill.topbar-blurred:not(.topbar-contained),.topbar-pill.topbar-blurred > .topbar-inner) { background:color-mix(in oklab, var(--card) 72%, transparent); -webkit-backdrop-filter:blur(var(--space-4)) saturate(160%); backdrop-filter:blur(var(--space-4)) saturate(160%); }
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { :is(.topbar-pill.topbar-blurred:not(.topbar-contained),.topbar-pill.topbar-blurred > .topbar-inner) { background:var(--card); } }
+@media (prefers-reduced-transparency:reduce) { :is(.topbar-pill.topbar-blurred:not(.topbar-contained),.topbar-pill.topbar-blurred > .topbar-inner) { background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; } }
 /* .brand nasceu como cabeçalho VERTICAL da lateral (borda embaixo + respiro); no topo
    ele deita, então some com a borda e a margem — o lockup em si continua o mesmo. */
 .topbar .brand { min-height:auto; margin:0; padding:0; border:0; }
@@ -1531,6 +1547,22 @@ img,svg { display:block; }
    `:not`): mais fraca, ou antes dela, a lateral grudava a 66 do topo, por baixo da barra (medido). A linha de baixo
    fica pendurada fora da barra, como a da referência, e não entra na conta. */
 .app-shell-docs { --docs-top:calc(var(--space-12) + var(--space-2) + var(--space-1) + var(--space-10)); }
+/* Com a PÍLULA (`topbarVariant="pill"`, o site B — 30/10/2026), a cápsula (64) fica a 14 do alto e a página começa 18
+   abaixo dela, a 96, como no desenho aprovado (medido em 31/10/2026). A lateral e o índice grudam a 96: esta conta é a
+   altura em que eles grudam menos o --space-4 que o arranjo soma, e não a altura da barra. */
+.app-shell-docs.app-shell-pill { --docs-top:calc(var(--space-4) + var(--topbar-height)); }
+/* E sem a barra do índice abaixo de 1280: no desenho aprovado o índice só existe na coluna da direita (protótipo). */
+.app-shell-docs.app-shell-pill > .docs-toc-bar { display:none; }
+/* As colunas ficam a --space-4 das bordas da tela, alinhadas com a pílula (sem isto, abaixo de 1432 a lateral e o índice
+   encostavam na borda — medido a 1280). De 768 para cima, e não de 1024 (0.52.1, aprovado pela imagem em 01/11/2026): de
+   768 a 1023 a lateral é coluna, e encostava na borda com a cápsula a 16. */
+@media (min-width:768px) { .app-shell-docs.app-shell-pill { padding-inline:var(--space-4); } .app-shell-docs.app-shell-pill > .topbar { padding-inline:0; }
+  /* A lateral com caixa vai até 16 do pé da tela, e não mais (o desenho, medido em 31/10/2026). */
+  .app-shell-docs.app-shell-pill > .sidebar:not(.app-shell-aside, .sidebar-plain) { block-size:auto; max-block-size:calc(100vh - var(--shell-top) - var(--space-4)); } }
+/* O conteúdo começa a 18 da pílula, como a lateral (78 + 18 = 96); de 768 a 1279, sem o índice, ele vai até a borda do
+   bloco, a 28 da lateral; no celular, o bloco fica a 16 das bordas. */
+@media (min-width:768px) and (max-width:1279px) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) 0 0 var(--space-7); } }
+@media (max-width:767px) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) var(--space-4) 0; } }
 .app-shell-docs > .content > * { max-inline-size:var(--docs-text-width); }
 /* O texto a 24 da borda também no celular (o da página da referência a 375 e a 768; com o recheio de sempre do
    `AppShell`, ele encostava a 16 — a bancada do lote T pegou). */
@@ -1572,6 +1604,16 @@ img,svg { display:block; }
      ponta direita dele fica alinhada com a da barra de cima (o Victor, 17/10/2026: "componentes não alinhados"). */
   .app-shell-docs > .sidebar.app-shell-aside { grid-column:4; grid-row:2; justify-self:start; inline-size:var(--docs-toc-width);
     block-size:calc(100vh - var(--shell-top) - var(--space-8)); padding-block-start:0; padding-inline:var(--space-4); }
+  /* O índice COM CAIXA (o site B, 30/10/2026, protótipo): a caixa tem a altura do que ela mostra — até a da tela, e aí
+     rola —, e um respiro em cima; sem caixa, a coluna inteira, como na referência. */
+  .app-shell-docs > .sidebar.app-shell-aside:not(.sidebar-plain) { block-size:auto; max-block-size:calc(100vh - var(--shell-top) - var(--space-8));
+    padding-block:var(--space-4) var(--space-3); padding-inline:var(--space-3); }
+  /* E O ARRANJO COM A PÍLULA (o site B, protótipo): as colunas encostam no bloco com 28 de vão, como no desenho — o texto
+     começa a 28 da lateral e vai até 28 do índice, que tem 236 e fica na ponta do bloco. */
+  .app-shell-docs.app-shell-pill { --docs-aside-width:calc(var(--docs-toc-width) + var(--space-6)); }
+  .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) 0 0 var(--space-7); }
+  /* Também o índice que abre por cima (`[popover]`): a regra dele, mais adiante, devolvia os 240. */
+  .app-shell-docs.app-shell-pill > .sidebar.app-shell-aside, .app-shell-docs.app-shell-pill > .sidebar.app-shell-aside[popover] { justify-self:end; inline-size:calc(var(--docs-toc-width) - var(--space-1)); }
 }
 /* A margem é LÓGICA desde 03/10/2026 (AN-01): era `margin:space-4 space-4 space-4 0`, física, e na
    escrita da direita para a esquerda o conteúdo encostava na borda da página e deixava 32 de vão na
@@ -1827,6 +1869,10 @@ img,svg { display:block; }
 .sidebar-group-toggle { display:flex; align-items:center; gap:var(--space-1); min-block-size:var(--control-h-xs); padding:0; border:0; border-radius:var(--radius-control); background:transparent; font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); text-align:start; cursor:pointer; }
 .sidebar-group-toggle > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .sidebar-group-caret { flex:none; opacity:.8; }
+/* O SITE B (30/10/2026, protótipo): no grupo que dobra, a seta vai para a PONTA da linha e os itens ficam um passo para
+   dentro do nome do grupo, como no desenho aprovado. */
+.sidebar-group-toggle > span { flex:1; min-inline-size:0; }
+.sidebar-group-list > .sidebar-list { padding-inline-start:var(--space-7); }
 .sidebar-group-action { display:flex; align-items:center; gap:var(--space-1); flex:none; }
 /* 4-A — A LATERAL SOLTA vai do topo da janela até embaixo, como a da referência: fora do `AppShell` não há barra de cima
    para reservar (o item 106 mediu: solta, a lateral ficava 56 mais baixa e mais curta, e o app tinha de zerar o
@@ -2239,6 +2285,25 @@ img,svg { display:block; }
 /* `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; }
+/* A LISTA GRANDE (`NavList size="lg"`, o site B — o menu do celular, aprovado pela bancada em 01/11/2026, o item 10): a linha
+   em cápsula de 56 (o círculo de 40 + 8 em cima e embaixo), 16 entre o círculo e o nome, a letra 18 seminegrito; o ícone de
+   20 num círculo de 40 tingido pela cor de categoria (sem ela, o neutro). A linha ATUAL (`aria-current="page"`, nos dois
+   tamanhos) ganha o fundo `--fill-2`, e o selo dela fica no lugar da seta. Sem `lg`, a lista de sempre. */
+.nav-list-lg { gap:var(--space-1); }
+.nav-list-lg .nav-list-row { min-block-size:calc(var(--space-10) + 2 * var(--space-2)); padding:var(--space-2); gap:var(--space-4); border-radius:var(--radius-control);
+  font-size:var(--text-lg); font-weight:var(--weight-semibold); }
+.nav-list-tile { display:grid; place-items:center; flex:none; inline-size:var(--space-10); block-size:var(--space-10); border-radius:var(--radius-full); background:var(--fill-2); color:var(--foreground); }
+.nav-list-row .nav-list-tile .icon { inline-size:var(--icon-md); block-size:var(--icon-md); opacity:1; }
+.nav-list-tile[data-tone="red"] { background:var(--category-red-bg); color:var(--category-red); }
+.nav-list-tile[data-tone="orange"] { background:var(--category-orange-bg); color:var(--category-orange); }
+.nav-list-tile[data-tone="green"] { background:var(--category-green-bg); color:var(--category-green); }
+.nav-list-tile[data-tone="teal"] { background:var(--category-teal-bg); color:var(--category-teal); }
+.nav-list-tile[data-tone="cyan"] { background:var(--category-cyan-bg); color:var(--category-cyan); }
+.nav-list-tile[data-tone="blue"] { background:var(--category-blue-bg); color:var(--category-blue); }
+.nav-list-tile[data-tone="violet"] { background:var(--category-violet-bg); color:var(--category-violet); }
+.nav-list-tile[data-tone="pink"] { background:var(--category-pink-bg); color:var(--category-pink); }
+.nav-list-row[aria-current="page"] { background:var(--fill-2); }
+.nav-list-here { flex:none; }
 /* 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
@@ -2578,6 +2643,14 @@ img,svg { display:block; }
 /* Vertical sai da pílula: --radius-control (999px) clampa em 50% da menor
    dimensão e vira um oval num container alto. */
 .toolbar[data-orientation="vertical"] { flex-direction:column; align-items:stretch; border-radius:var(--radius-lg); }
+/* A BARRA AMARELA (`Toolbar tone="brand"`, o site B — a seleção em lote da página inicial, aprovada pela bancada em
+   01/11/2026, o D-7.7, a forma B): o amarelo da marca, 52 de altura (`--control-h-xl` + 2), 16 antes e 4 depois, o texto
+   na tinta, 600, o que vem antes e o que vem depois nas pontas; os botões de dentro BRANCOS (as marcas dos controles) com a
+   tinta. Sem `brand`, a barra de sempre. */
+.toolbar.toolbar-brand { justify-content:space-between; min-block-size:calc(var(--control-h-xl) + var(--space-05)); padding:0 var(--space-1) 0 var(--space-4);
+  background:var(--primary); color:var(--primary-foreground); font-weight:var(--weight-semibold); }
+.toolbar-brand .btn { --btn-bg:var(--control-thumb); --btn-fg:var(--primary-foreground); background:var(--btn-bg); color:var(--btn-fg); }
+.toolbar-brand .btn:hover:not(:disabled) { --btn-bg:color-mix(in oklab,var(--control-thumb) 88%,var(--primary-foreground)); }
 .toolbar-group { display:flex; align-items:center; gap:var(--space-1); }
 .toolbar-sep { flex:none; align-self:stretch; inline-size:1px; min-block-size:20px; margin-inline:4px; margin-block:0; background:var(--border); border:0; }
 /* SEPARADOR — a linha de divisão do sistema, num lugar só.
@@ -2910,6 +2983,24 @@ img,svg { display:block; }
 .radio-group > .field-error { margin-block-start:var(--space-2); }
 /* `labelHidden` (15/10/2026): sem o nome na tela, as opções começam no alto — nada do vão de 16 que o separava delas. */
 .radio-group-bare > .label + :is(.radio,.radio-group-items) { margin-block-start:0; }
+/* O CARTÃO DE ESCOLHA (`variant="card"`, o site B — aprovado pela bancada em 01/11/2026, a opção B): o CHK-01 do nativo
+   levado à web. Cada opção é um cartão inteiro (a pele do `Card`: canto 22, recheio do cartão, a cor do cartão), 12 entre
+   eles; o escolhido SOBE 4 com a `--shadow-lg` e a cor da aba escolhida (`--segment`) — parado para quem pede menos
+   movimento. O foco é o do cartão inteiro, uma linha só (ADR-0059): o da marca sai. `indicatorPlacement="none"` tira a
+   bolinha (o Theming do site); o cartão continua o rádio nativo por dentro. Variação: sem `card`, o grupo é o de sempre. */
+.radio-group-cards { display:grid; gap:var(--space-3); align-self:stretch; margin-block-start:var(--space-4); }
+.radio-group-horizontal > .radio-group-cards { grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
+.radio-group-bare > .label + .radio-group-cards { margin-block-start:0; }
+.radio-group-cards > .radio { margin:0; align-items:flex-start; gap:var(--space-3); min-inline-size:0; padding:var(--card-pad); border-radius:var(--radius-card); background:var(--card); cursor:pointer;
+  transition:background-color var(--duration-fast),box-shadow var(--duration-fast),translate var(--duration-fast); }
+.radio-group-cards > .radio:has(input:checked) { background:var(--segment); box-shadow:var(--shadow-lg); translate:0 calc(-1 * var(--space-1)); }
+/* No escuro, o texto de apoio do cartão marcado lia 4,07:1 no --segment (o axe da varredura, 02/11/2026): ali dentro ele é o
+   texto a 80% sobre o --segment, como a letra apagada de uma peça erguida. */
+[data-theme="dark"] .radio-group-cards > .radio:has(input:checked):where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *) { --muted-foreground:color-mix(in oklab, var(--foreground) 80%, var(--segment)); }
+.radio-group-cards > .radio:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.radio-group-cards > .radio input:focus-visible + .control-mark { outline:none; }
+.radio-group-indicator-none > .radio-group-cards > .radio > .control-mark { display:none; }
+@media (prefers-reduced-motion:reduce) { .radio-group-cards > .radio:has(input:checked) { translate:none; } }
 .checkbox > span > .muted { font-size:var(--text-xs); font-weight:var(--weight-regular); line-height:var(--space-4); }
 .checkbox input,.radio input { position:absolute; opacity:0; pointer-events:none; }
 /* A MARCA DE SELEÇÃO acompanha a densidade, e antes não acompanhava. Era `18px` cru: em
@@ -2942,6 +3033,22 @@ img,svg { display:block; }
    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); }
+/* A CÁPSULA (`Checkbox variant="pill"`, o site B — o "Mark as done", aprovado pela bancada em 01/11/2026, o item 4): a
+   cápsula em volta é o alvo inteiro — 44 (`--target-min`) com a caixa de 24, ou 36 (`--control-h-md`) com a caixa de 20; o
+   recheio e o vão saem da conta (altura − caixa) / 2. Fundo `--fill-2` (sem linha, ADR-0072), letra 600. O foco é o da
+   cápsula, uma linha só (ADR-0059). `data-tone="success"`: a marcada é "feito" — a cápsula no verde a 18%, a letra e a caixa
+   no `--success-400`. Variação: sem `pill`, a caixa de sempre. */
+.checkbox.checkbox-pill { --pill-h:var(--target-min); --box:var(--space-6); --pill-in:calc((var(--pill-h) - var(--box)) / 2);
+  align-items:center; gap:var(--pill-in); min-block-size:var(--pill-h); padding-inline:var(--pill-in) var(--space-4);
+  border-radius:var(--radius-control); background:var(--fill-2); font-weight:var(--weight-semibold); white-space:nowrap;
+  transition:background-color var(--duration-fast),color var(--duration-fast); }
+.checkbox.checkbox-pill-md { --pill-h:var(--control-h-md); --box:var(--space-5); padding-inline-end:var(--space-3); }
+.checkbox-pill > .control-mark { --mark:var(--box); margin:0; }
+.checkbox-pill > .control-mark:after { inline-size:70%; block-size:70%; }
+.checkbox-pill:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.checkbox.checkbox-pill input:focus-visible + .control-mark,.checkbox.checkbox-pill input:focus-visible:checked + .control-mark { outline:none; }
+.checkbox-pill[data-tone="success"]:has(input:checked) { background:color-mix(in oklab,var(--success-400) 18%,transparent); color:var(--success-400); }
+.checkbox-pill[data-tone="success"] input:checked + .control-mark { background:var(--success-400); color:var(--background); }
 .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
@@ -3092,11 +3199,44 @@ img,svg { display:block; }
 .segmented a { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); text-decoration:none; }
 /* `size="sm"`: a da referência (abas de 24 numa cápsula de 32, letra 14) — a altura do controle `xs` da densidade. */
 .segmented-sm :is(button,a) { min-block-size:var(--control-h-xs); padding:0 var(--space-4); font-size:var(--text-sm); }
+/* `size="lg"` e `size="xl"` (0.52.1, variação nova aprovada pela imagem em 01/11/2026): os segmentos na altura do controle
+   `md` (36; a cápsula de 44, a chave Web | Native do site B) e na do `lg` (40; a cápsula de 48, as áreas no topo). O `sm` e
+   o `md` não mudam. A referência não tem tamanho nessa peça. */
+.segmented-lg :is(button,a) { min-block-size:var(--control-h-md); }
+.segmented-xl :is(button,a) { min-block-size:var(--control-h-lg); }
+/* O SITE B (aprovado pela bancada em 01/11/2026, os itens 3 e 8), quatro variações; sem elas, a chave de sempre.
+   O ÍCONE no item (`items[].icon`): 16 (`--icon-sm`), 8 do nome; o escolhido troca para a forma cheia (o `-fill`, como a
+   lateral e a barra de baixo). `size="2xl"`: um tamanho a mais — segmento de 48 (`--space-12`), ícone 20, letra 16.
+   `wrap`: a chave QUEBRA linha, e o trilho ganha o canto do cartão (22). `orientation="vertical"`: em pé, cada segmento
+   na largura toda, com o mesmo canto. */
+.segmented :is(button,a):has(> .icon) { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); }
+.segmented :is(button,a) > .icon { inline-size:var(--icon-sm); block-size:var(--icon-sm); flex:none; }
+.segmented-2xl :is(button,a) { min-block-size:var(--space-12); padding-inline:var(--space-4); font-size:var(--text-base); }
+.segmented-2xl :is(button,a) > .icon { inline-size:var(--icon-md); block-size:var(--icon-md); }
+.segmented-wrap { flex-wrap:wrap; border-radius:var(--radius-card); }
+.segmented-vertical { display:flex; flex-direction:column; border-radius:var(--radius-card); }
+.segmented-vertical :is(button,a) { inline-size:100%; padding-block:var(--space-2); text-align:center; }
 /* Toggle (Lote 1): pressionado usa o MESMO par de tokens do segmento aceso, logo acima. Um
    toggle solto e um segmento selecionado dizem a mesma coisa — se parecessem diferentes, o
    sistema teria dois idiomas para "isto está ligado". O estado vem do motor (`data-pressed`),
    não de uma classe que alguém precisa lembrar de pôr. */
 .toggle[data-pressed] { --btn-bg:var(--secondary); --btn-fg:var(--primary); }
+/* A ÁREA (`Toggle area`, o site B — aprovada pela bancada em 01/11/2026, o D-3, o D-5 e o D-6): o toggle que é uma ÁREA
+   clicável em volta de um bloco (a miniatura de uma página, um ícone com o nome). Recheio de 4, o canto concêntrico do
+   cartão (22 − 2), o conteúdo como ele é (alinhado ao início, sem a altura do botão). Com `variant="ghost"`, transparente:
+   com o mouse o amarelo a 18%, ligada a 42% (D-3). Com o fundo (`variant="default"`), o `--fill-2`; com o mouse o
+   `--fill-3`; ligada, o amarelo cheio com a letra do botão primário (D-5, D-6). Sem o fio de baixo do ligado.
+   `area="pill"`: a área do tamanho do conteúdo, em cápsula. Variação: sem `area`, o toggle de sempre. */
+.btn.toggle.toggle-area { --area-bg:transparent; --area-hover:color-mix(in oklab,var(--primary) 18%,transparent);
+  --area-on:color-mix(in oklab,var(--primary) 42%,transparent); --area-on-fg:var(--foreground);
+  display:block; inline-size:100%; min-inline-size:0; block-size:auto; min-block-size:0; padding:var(--space-1);
+  border-radius:calc(var(--radius-card) - var(--space-05)); background:var(--area-bg); color:inherit; text-align:start; font:inherit; white-space:normal;
+  transition:background-color var(--duration-fast); }
+.btn.toggle.toggle-area.btn-tertiary { --area-bg:var(--fill-2); --area-hover:var(--fill-3); --area-on:var(--primary); --area-on-fg:var(--primary-foreground); }
+.btn.toggle.toggle-area:hover:not(:disabled) { background:var(--area-hover); }
+.btn.toggle.toggle-area[aria-pressed="true"],.btn.toggle.toggle-area[aria-pressed="true"]:hover:not(:disabled) { --btn-bg:var(--area-on); background:var(--area-on); color:var(--area-on-fg); }
+.btn.toggle.toggle-area[aria-pressed="true"]::after { content:none; }
+.btn.toggle.toggle-area-pill { inline-size:auto; align-self:flex-start; border-radius:var(--radius-full); }
 /* ── SELECIONADO: uma linguagem só ────────────────────────────────────────────────────
    Item de nav ativo, aba ativa, item de lista lateral e botão alternado ligado mostram o
    MESMO sinal: cápsula elevada + rótulo na cor da marca + fio amarelo encostado na borda de
@@ -3350,6 +3490,12 @@ img,svg { display:block; }
    não. Quem cobra é o `link-sem-sublinhado.spec.ts`. */
 .card-interactive { cursor:pointer; inline-size:100%; text-decoration:none; font:inherit; text-align:inherit; color:inherit; transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
 .card-interactive:hover { transform:translateY(-2px); border-color:transparent; background:var(--surface-2); }
+/* O LEVANTAR (`lift`, o site B — aprovado pela bancada em 01/11/2026): o cartão clicável que SOBE com sombra, em vez de
+   trocar o fundo. Sobe 4 (`--space-1`), fica na cor do cartão e ganha a `--shadow-md`; parado para quem pede menos
+   movimento. Variação: sem `lift`, o cartão clicável continua o de sempre (sobe 2 e troca o fundo). */
+.card-interactive.card-lift { transition:transform var(--duration-base),box-shadow var(--duration-base),background var(--duration-fast); }
+.card-interactive.card-lift:hover { transform:translateY(calc(-1 * var(--space-1))); background:var(--card); box-shadow:var(--shadow-md); }
+@media (prefers-reduced-motion:reduce) { .card-interactive.card-lift:hover { transform:none; } }
 .card-selected { border-color:transparent; background:color-mix(in oklab,var(--primary) 12%,var(--card)); }
 .card-danger { border-color:transparent; background:var(--danger-bg); }
 /* MT-01 (10/10/2026, ADR-0063): o cartão `contrast` traz `data-theme="dark"` no próprio elemento —
@@ -3368,6 +3514,14 @@ img,svg { display:block; }
 .card-accent-brand { --card-accent:var(--primary); } .card-accent-success { --card-accent:var(--success); }
 .card-accent-info { --card-accent:var(--info); } .card-accent-warning { --card-accent:var(--warning); }
 .card-accent-danger { --card-accent:var(--destructive); }
+/* `fill="brand"` (o site B, 02/11/2026 — o Victor escolheu a "B" na imagem): o cartão pintado no amarelo da marca, com a
+   tinta por cima (`--primary-foreground`, 9,28:1 na Aurea Gold) — o título, o texto de apoio e o que lê a cor do cartão
+   passam a ser a tinta e o amarelo. O traço do `accent` some (amarelo sobre amarelo); no clicável, o amarelo fica ao
+   passar o mouse. NA EMBER, o cartão comum (o Victor, 02/11/2026: "Ember no cartão comum" — no claro, o branco no laranja
+   media 3,08:1). Quem cobra: `tests/unit/site-b-pecas-0-54.test.tsx`. */
+.card.card-fill-brand:where(:not([data-brand="ember"],[data-brand="ember"] *)) { --card:var(--primary); --surface-2:var(--primary-hover); --card-foreground:var(--primary-foreground);
+  --foreground:var(--primary-foreground); --muted-foreground:var(--primary-foreground); background:var(--primary); color:var(--primary-foreground); }
+.card.card-fill-brand.card-accent:where(:not([data-brand="ember"],[data-brand="ember"] *)) { box-shadow:none; }
 /* 0.32.0: a descrição 14/20 colada no título. O `.card-header` e o `.card-title` desta linha (o cabeçalho em LINHA, com
    16 de vão e 16 embaixo, da primeira versão pública) saíram em 15/10/2026: nenhuma peça os usava, e vindo DEPOIS das
    partes do cartão eles separavam o título da descrição do `Card.Header` em 16 — na referência, colados. */
@@ -3401,6 +3555,16 @@ img,svg { display:block; }
 /* A cor do glifo é a da variante, senão o ícone vira enfeite cinza e não repete o sinal.
    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); }
+/* `appearance="soft"` (o site B, 02/11/2026 — o Victor escolheu a "B" na imagem): o fundo é a cor do estado a 14%, sem a
+   sombra do cartão; o corpo vai na cor do texto, a 16 com a linha de 1,5 (a do desenho, 1,6, no degrau mais perto — ADR-0088), e o título em negrito na cor do estado. O
+   padrão continua o de cartão. O título é o tom com 25% da cor do texto: puro, o azul (info) no claro media 4,07:1 no
+   fundo do tom (o axe, 02/11/2026). NA EMBER, o cartão de sempre (o Victor, 02/11/2026: "Ember no cartão" — no claro, o título
+   de atenção dela no fundo do tom media 4,23:1).
+   Quem cobra: `tests/unit/site-b-pecas-0-54.test.tsx`. */
+.alert.alert-soft:where(:not([data-brand="ember"],[data-brand="ember"] *)) { background:color-mix(in oklab, var(--alert-tone) 14%, transparent); box-shadow:none; color:var(--foreground);
+  font-size:var(--text-base); line-height:var(--leading-normal); }
+.alert.alert-soft:where(:not([data-brand="ember"],[data-brand="ember"] *)) strong { color:color-mix(in oklab, var(--alert-tone) 75%, var(--foreground)); font-size:var(--text-base); font-weight:var(--weight-bold); line-height:var(--leading-normal); }
+.alert.alert-soft:where(:not([data-brand="ember"],[data-brand="ember"] *)) p { color:var(--foreground); font-size:var(--text-base); }
 .banner strong { font-size:var(--text-sm); } .banner p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
 /* 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
@@ -3525,6 +3689,45 @@ img,svg { display:block; }
    Cor semântica, não a primária — reprovar não é progredir. */
 .step-error { color:var(--danger-400); } .step-error .step-dot { color:var(--danger-400); border-color:transparent; background:var(--danger-bg); }
 .step-optional { display:block; color:var(--muted-foreground); font-size:var(--text-xs); }
+/* O CAMINHO QUE ESCOLHE (`Stepper variant="path"`, o site B — o Roadmap, aprovado pela bancada em 01/11/2026, o item 5): a
+   mesma lista; a bolinha de 50 (`--control-h-xl`) no cartão, com a `--shadow-sm` e o número na `--font-code`; o rótulo fica
+   para o leitor de tela; UM trilho de 8 (`--space-2`, `--fill-2`) de ponta a ponta; a escolhida invertida (fundo na cor do
+   texto) e maior, 56 (50 + 4 + 2); as pontas (`startContent`, `endContent`) não clicam — a do início no amarelo. Estreito
+   (o contêiner até 30rem): 4 por linha, sem trilho. `--stepper-cols` é o número de colunas (as etapas e as pontas). */
+.stepper-path { container-type:inline-size; }
+.stepper-path > .stepper { --dot:var(--control-h-xl); --dot-on:calc(var(--control-h-xl) + var(--space-1) + var(--space-05));
+  position:relative; grid-auto-flow:row; grid-template-columns:repeat(var(--stepper-cols,4),minmax(0,1fr)); align-items:center; gap:var(--space-2) var(--space-1); }
+.stepper-path > .stepper:before { content:""; position:absolute; inset-inline:calc(100% / (2 * var(--stepper-cols,4))); inset-block-start:50%;
+  block-size:var(--space-2); translate:0 -50%; border-radius:var(--radius-full); background:var(--fill-2); }
+.stepper-path > .stepper > .step { z-index:1; display:grid; place-items:center; block-size:var(--dot-on); }
+.stepper-path > .stepper > .step:before { content:none; }
+.stepper-path > .stepper > .step .step-trigger { inline-size:auto; border-radius:var(--radius-full); }
+.stepper-path > .stepper > .step :is(strong,.step-optional) { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.stepper-path > .stepper > .step .step-dot { inline-size:var(--dot); block-size:var(--dot); margin:0; background:var(--card); color:var(--foreground); box-shadow:var(--shadow-sm);
+  font-family:var(--font-code); font-weight:var(--weight-semibold); font-size:var(--text-base);
+  transition:inline-size var(--duration-fast),block-size var(--duration-fast),background-color var(--duration-fast),color var(--duration-fast),box-shadow var(--duration-fast); }
+.stepper-path > .stepper > .step .step-trigger:hover .step-dot { box-shadow:var(--shadow-md); }
+.stepper-path > .stepper > .step-active .step-dot { inline-size:var(--dot-on); block-size:var(--dot-on); background:var(--foreground); color:var(--background); box-shadow:var(--shadow-sm); }
+.stepper-path > .stepper > .step-end { position:relative; z-index:1; justify-self:center; display:grid; place-items:center; block-size:var(--dot); min-inline-size:var(--dot);
+  padding-inline:var(--space-3); border-radius:var(--radius-full); background:var(--fill-3-solid); color:var(--foreground); font-family:var(--font-code); font-size:var(--text-sm); }
+.stepper-path > .stepper > .step-end-start { background:var(--primary); color:var(--primary-foreground); }
+@container (max-width:30rem) {
+  .stepper-path > .stepper { grid-template-columns:repeat(4,minmax(0,1fr)); }
+  .stepper-path > .stepper:before { content:none; }
+}
+/* A BARRA EM PARTES (`Stepper variant="bar"`, o site B — o "Your setup" do Quick Start, aprovado pela bancada em 01/11/2026,
+   o D-1): cada etapa é uma parte da barra, de 12 (`--space-3`), 6 entre elas, e é o LINK (ou o botão) da etapa — o nome
+   fica para o leitor de tela; a feita fica verde (`--success-400`). `startContent` vem antes (o nome, 600) e `endContent`
+   depois (a contagem, mono, anunciada ao mudar). Variação: sem `path` nem `bar`, o `Stepper` de sempre. */
+.stepper-bar { display:flex; align-items:center; gap:var(--space-4); }
+.stepper-bar-label { flex:none; font-weight:var(--weight-semibold); font-size:var(--text-base); white-space:nowrap; }
+.stepper-bar > .stepper { flex:1; display:flex; gap:calc(var(--space-1) + var(--space-05)); }
+.stepper-bar > .stepper > .step { flex:1; display:flex; }
+.stepper-bar > .stepper > .step:before { content:none; }
+.stepper-bar > .stepper > .step > .step-trigger { inline-size:100%; block-size:var(--space-3); border-radius:var(--radius-full); background:var(--fill-2); transition:background-color var(--duration-base); }
+.stepper-bar > .stepper > .step > .step-trigger:hover { background:var(--fill-3); }
+.stepper-bar > .stepper > .step-done > .step-trigger { background:var(--success-400); }
+.stepper-bar-count { flex:none; font-family:var(--font-code); font-weight:var(--weight-semibold); font-size:var(--text-sm); white-space:nowrap; }
 /* Etapa clicável (fluxo não-linear): o alvo é um botão de verdade, com o foco do sistema.
    E ele PRECISA GERAR CAIXA. `display:contents` era o que estava aqui, e um <button> sem caixa
    não recebe foco — o Chromium recusa `.focus()`, e a etapa clicável só funcionava com o mouse.
@@ -3584,6 +3787,36 @@ img,svg { display:block; }
 .table tbody tr:last-child > :last-child,.table-wrap tbody tr:last-child > :last-child { border-end-end-radius:var(--table-cell-r); }
 .table tr:last-child td,.table-wrap tr:last-child td { border-bottom:0; }
 @media (hover:hover) { .table tbody tr:hover > :is(td,th),.table-wrap tbody tr:hover > :is(td,th) { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); } }
+/* AS LINHAS EM CÁPSULA (`Table variant="rows"`, o site B — a lista de membros da página inicial, aprovada pela bancada em
+   01/11/2026, o D-7.6): sem a caixa em volta; cada linha é uma cápsula de 54 (`--target-min` + 10), 4 entre elas; com o
+   mouse o `--fill-1`; a linha com `data-selected` (a que o app marcou), o amarelo a 14% (18% com o mouse). O cabeçalho em
+   mono maiúsculo, apagado, sem fundo e sem os fios entre as colunas. Cabe na largura. Sem `rows`, a tabela de sempre. */
+.table-region.table-region-rows { padding:0; border-radius:0; background:transparent; }
+.table.table-rows { min-width:0; border-spacing:0 var(--space-1); }
+.table.table-rows thead th { background:transparent; font-family:var(--font-code); letter-spacing:.06em; text-transform:uppercase; }
+.table.table-rows thead th::after { content:none; }
+.table.table-rows tbody :is(td,th) { block-size:calc(var(--target-min) + var(--space-2) + var(--space-05)); padding-block:0; border-bottom:0; background:transparent;
+  transition:background-color var(--duration-fast); }
+.table.table-rows tbody tr > :first-child { border-radius:var(--radius-full) 0 0 var(--radius-full); padding-inline-start:var(--space-1); }
+.table.table-rows tbody tr > :last-child { border-radius:0 var(--radius-full) var(--radius-full) 0; padding-inline-end:var(--space-3); }
+.table.table-rows tbody tr > :only-child { border-radius:var(--radius-full); }
+:dir(rtl) .table.table-rows tbody tr > :first-child,[dir="rtl"] .table.table-rows tbody tr > :first-child { border-radius:0 var(--radius-full) var(--radius-full) 0; }
+:dir(rtl) .table.table-rows tbody tr > :last-child,[dir="rtl"] .table.table-rows tbody tr > :last-child { border-radius:var(--radius-full) 0 0 var(--radius-full); }
+@media (hover:hover) { .table.table-rows tbody tr:hover > :is(td,th) { background:var(--fill-1); } }
+.table.table-rows tbody tr[data-selected] > :is(td,th) { background:color-mix(in oklab,var(--primary) 14%,transparent); }
+@media (hover:hover) { .table.table-rows tbody tr[data-selected]:hover > :is(td,th) { background:color-mix(in oklab,var(--primary) 18%,transparent); } }
+/* `striped` (o site B, 02/11/2026 — o Victor escolheu a "B" na imagem): as linhas ímpares do corpo com um fundo, a 1ª, a 3ª,
+   a 5ª…, como o desenho. Na tabela de sempre, o cartão com o texto a 6% (opaco: a célula pinta a cor do cartão); nas
+   linhas em cápsula (`rows`), o `--fill-1` e o canto de 16 (`--radius-lg`), e o mouse escurece para o `--fill-2`. É fundo,
+   não linha (ADR-0072). Quem cobra: `tests/unit/site-b-pecas-0-54.test.tsx`. */
+.table.table-striped:not(.table-rows) tbody tr:nth-child(odd) > :is(td,th) { background:color-mix(in oklab, var(--foreground) 6%, var(--card)); }
+.table.table-striped.table-rows tbody tr:nth-child(odd) > :is(td,th) { background:var(--fill-1); }
+.table.table-striped.table-rows tbody tr > :first-child { border-start-start-radius:var(--radius-lg); border-end-start-radius:var(--radius-lg); }
+.table.table-striped.table-rows tbody tr > :last-child { border-start-end-radius:var(--radius-lg); border-end-end-radius:var(--radius-lg); }
+@media (hover:hover) {
+  .table.table-striped:not(.table-rows) tbody tr:hover > :is(td,th) { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); }
+  .table.table-striped.table-rows tbody tr:hover > :is(td,th) { background:var(--fill-2); }
+}
 /* GAR-12 e GAR-13 (08/10/2026): a tabela de COMPARAÇÃO — as chaves da `Table` e a pele do HTML de
    comparação. A referência principal só tem o cabeçalho preso, à mão, numa caixa de altura fixa; o
    resto veio do mercado, por escolha do Victor (o detalhe está no comentário da `Table`).
@@ -3787,6 +4020,32 @@ button.tag-main { cursor:pointer; }
 .kpi-tone-success { color:var(--success-400); }
 .kpi-tone-danger { color:var(--danger-400); }
 .kpi-tone-neutral { color:var(--muted-foreground); }
+/* O CARTÃO AMARELO E AS BARRAS (o site B — a página inicial, aprovado pela bancada em 01/11/2026, o D-7.3, a forma B "sem
+   marrom"). `variant="brand"`: o cartão no amarelo da marca, com a tinta e a `--shadow-md`; o rótulo na tinta, 600; a
+   tendência na tinta. `bars`: as barras embaixo, 128 de altura (2 × `--space-16`), 8 entre elas, cada uma até 32 de
+   largura, a cápsula em cima. Cada barra é um BOTÃO DE OPÇÃO nativo (o KPI é marcação pura, roda no servidor): o clique e as
+   setas escolhem; a leitura acima diz o nome e o valor da escolhida — e, com o mouse, da que está sob ele. No amarelo, as
+   barras na tinta cheia e a escolhida BRANCA (as marcas dos controles); fora dele, o `--fill-3` e a cor do texto. */
+.kpi.kpi-brand { background:var(--primary); color:var(--primary-foreground); box-shadow:var(--shadow-md); padding:var(--space-5) var(--space-5) var(--space-4); }
+.kpi-brand > .muted { color:inherit; font-weight:var(--weight-semibold); font-size:var(--text-sm); }
+.kpi-brand :is(.kpi-tone-success,.kpi-tone-danger,.kpi-tone-neutral) { color:inherit; }
+.kpi-bars-wrap { position:relative; display:grid; gap:var(--space-1); margin:var(--space-3) 0 0; padding:var(--space-6) 0 0; border:0; min-inline-size:0; }
+.kpi-bars { display:grid; grid-template-columns:repeat(var(--kpi-bars,6),minmax(0,1fr)); gap:var(--space-2); align-items:end; block-size:calc(2 * var(--space-16)); }
+.kpi-bar { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; block-size:100%; color:inherit; cursor:pointer; border-radius:var(--radius-xs); }
+.kpi-bar > .kpi-bar-input { position:absolute; opacity:0; pointer-events:none; }
+.kpi-bar:has(> input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.kpi-bar-fill { inline-size:100%; max-inline-size:var(--space-8); block-size:var(--kpi-bar-h,0%); border-radius:var(--radius-full) var(--radius-full) var(--radius-xs) var(--radius-xs);
+  background:var(--fill-3); transition:background-color var(--duration-base); }
+.kpi-bar-reading { position:absolute; inset-block-start:0; inset-inline-start:0; visibility:hidden; white-space:nowrap;
+  font-family:var(--font-code); font-size:var(--text-sm); font-weight:var(--weight-semibold); }
+.kpi-bar:has(> input:checked) .kpi-bar-fill,.kpi-bar:hover .kpi-bar-fill { background:var(--foreground); }
+.kpi-bar:has(> input:checked) .kpi-bar-reading,.kpi-bar:hover .kpi-bar-reading { visibility:visible; }
+.kpi-bars:has(.kpi-bar:hover) .kpi-bar:has(> input:checked):not(:hover) .kpi-bar-reading { visibility:hidden; }
+.kpi-bars:has(.kpi-bar:hover) .kpi-bar:has(> input:checked):not(:hover) .kpi-bar-fill { background:var(--fill-3); }
+.kpi-brand .kpi-bar-fill,.kpi-brand .kpi-bars:has(.kpi-bar:hover) .kpi-bar:has(> input:checked):not(:hover) .kpi-bar-fill { background:var(--primary-foreground); }
+.kpi-brand .kpi-bar:has(> input:checked) .kpi-bar-fill,.kpi-brand .kpi-bar:hover .kpi-bar-fill { background:var(--control-thumb); }
+.kpi-brand { --focus-strong:var(--primary-foreground); }
+.kpi-bars-x { display:grid; grid-template-columns:repeat(var(--kpi-bars,6),minmax(0,1fr)); gap:var(--space-2); text-align:center; font-family:var(--font-code); font-size:var(--text-xs); }
 /* DataList: chave/valor em duas colunas. O termo é secundário — mesmo idioma do cabeçalho de
    tabela. Sem a regra (achado A13) o <dl> saía cru: dt e dd empilhados, com o recuo de 40px
    que o navegador dá ao <dd>. */
@@ -3801,8 +4060,10 @@ button.tag-main { cursor:pointer; }
    179px para 90px em vez de zerar. `minmax(0,max-content)` é o que encolhe: com espaço mede
    igual ao que media antes (nenhuma baseline mudou), sem espaço o termo quebra. */
 .data-list { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:var(--space-2) var(--space-6); margin:0; }
-.data-list dt { min-width:0; color:var(--muted-foreground); }
-.data-list dd { min-width:0; margin:0; }
+/* A palavra que não cabe QUEBRA dentro da célula (0.52.1, aprovado pela imagem em 01/11/2026): um nome de código longo
+   (`window.Aurea.setTheme`) saía da célula, e numa coluna estreita a página rolava de lado. */
+.data-list dt { min-width:0; color:var(--muted-foreground); overflow-wrap:anywhere; }
+.data-list dd { min-width:0; margin:0; overflow-wrap:anywhere; }
 /* E no ESTREITO ele empilha — a outra metade da correção. Medido a 320px com termos de frase
    inteira: duas colunas não cabem, o termo resolvia em 164px, a calha comia o resto e a coluna do
    valor ficava com `0px`, jogando o texto para fora da PÁGINA. Mesmo remédio que `.message` e
@@ -3856,7 +4117,45 @@ button.tag-main { cursor:pointer; }
 .accordion-item[open] > summary .accordion-chevron { transform:rotate(-180deg); }
 .accordion-content { padding-block:0 var(--space-4); padding-inline:var(--space-4); color:var(--muted-foreground); font-size:var(--text-sm); }
 .accordion-surface { border-radius:var(--radius-card); background:var(--card); }
+/* O SITE B (30/10/2026, protótipo): o "+" numa bolinha (`indicator="plus"`), que gira 45 e vira o "×" no amarelo da
+   marca quando abre; e a linha de 60 com a letra do texto (`size="lg"`) — as perguntas do desenho aprovado. */
+.accordion-plus { --accordion-mais:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
+.accordion-plus .accordion-chevron { display:grid; place-items:center; flex:none; inline-size:var(--space-8); block-size:var(--space-8); border-radius:var(--radius-full);
+  background:var(--fill-2); color:var(--foreground); -webkit-mask:none; mask:none; transition:transform var(--duration-base) var(--ease-standard), background-color var(--duration-base); }
+.accordion-plus .accordion-chevron::before { content:""; inline-size:var(--icon-sm); block-size:var(--icon-sm); background:currentColor;
+  -webkit-mask:var(--accordion-mais) center/contain no-repeat; mask:var(--accordion-mais) center/contain no-repeat; }
+.accordion-plus .accordion-item[open] > summary .accordion-chevron { transform:rotate(45deg); background:var(--primary); color:var(--primary-foreground); }
+.accordion-lg .accordion-item > summary { min-block-size:calc(var(--space-12) + var(--space-3)); gap:calc(var(--space-3) + var(--space-05)); padding-block:0;
+  padding-inline:calc(var(--space-5) + var(--space-05)) var(--space-4); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:normal; }
+.accordion-lg .accordion-content { padding-inline:calc(var(--space-5) + var(--space-05)); padding-block-end:var(--space-5); font-size:var(--text-base); line-height:var(--leading-relaxed); }
+.accordion-lg .accordion-content > p { margin:0; }
 .accordion-surface > .accordion-item::after { inset-inline-start:3%; inline-size:94%; }
+/* O ACORDEÃO DE LADO (`orientation="horizontal"`, o site B — a página inicial, aprovado pela bancada em 01/11/2026, o
+   D-7.1): os itens em pé, lado a lado, 12 entre eles; cada um é um cartão (canto 22, a cor do cartão, sem o fio de baixo),
+   fechado com 104 (`--space-24` + `--space-2`) e o aberto toma o resto, numa curva de duas vezes o tempo lento. A pergunta
+   fechada é uma coluna (o que vem antes em cima, o resto embaixo); aberta, uma linha. O fechado sobe a sombra média com o
+   mouse. A seta sai. A altura é a do pai. Num contêiner estreito (até 47.5rem), vira o acordeão de pé. */
+.accordion-horizontal-frame { container-type:inline-size; block-size:100%; }
+.accordion.accordion-horizontal { flex-direction:row; gap:var(--space-3); block-size:100%; }
+.accordion-horizontal > .accordion-item { display:flex; flex-direction:column; flex:0 0 calc(var(--space-24) + var(--space-2)); min-inline-size:0; overflow:hidden;
+  border-radius:var(--radius-card); background:var(--card);
+  transition:flex-grow calc(2 * var(--duration-slow)) var(--ease-emphasized),flex-basis calc(2 * var(--duration-slow)) var(--ease-emphasized),box-shadow var(--duration-base); }
+.accordion-horizontal > .accordion-item::after { content:none; }
+.accordion-horizontal > .accordion-item[open] { flex:1 1 0; }
+.accordion-horizontal > .accordion-item:not([open]):hover { box-shadow:var(--shadow-md); }
+.accordion-horizontal > .accordion-item > summary { flex:1; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:var(--space-3);
+  padding:var(--space-5); border-radius:var(--radius-card); font-size:var(--text-base); }
+.accordion-horizontal > .accordion-item:not([open]) > summary:hover:not([aria-disabled="true"]) { background:transparent; }
+.accordion-horizontal > .accordion-item[open] > summary { flex:none; flex-direction:row; align-items:center; gap:var(--space-4); padding-block-end:var(--space-2); cursor:default; }
+.accordion-horizontal .accordion-chevron { display:none; }
+.accordion-horizontal > .accordion-item > .accordion-content { flex:1; min-block-size:0; overflow:auto; padding:var(--space-3) var(--space-6) var(--space-6); color:var(--foreground); font-size:var(--text-base); }
+@container (max-width:47.5rem) {
+  .accordion.accordion-horizontal { flex-direction:column; block-size:auto; }
+  .accordion-horizontal > .accordion-item,.accordion-horizontal > .accordion-item[open] { flex:none; }
+  .accordion-horizontal > .accordion-item > summary { flex-direction:row; align-items:center; justify-content:flex-start; }
+  .accordion-horizontal > .accordion-item > .accordion-content { padding:var(--space-3); }
+}
+@media (prefers-reduced-motion:reduce) { .accordion-horizontal > .accordion-item { transition:none; } }
 .accordion-surface > .accordion-item:not([open]) > summary:hover:not([aria-disabled="true"]) { background:var(--secondary); }
 @media (prefers-reduced-motion:reduce) { .accordion-chevron { transition:none; } }
 /* Mockup do kit de origem (apps/docs) — não é o Accordion do sistema, que é <details> nativo. */
@@ -3939,6 +4238,27 @@ button.tag-main { cursor:pointer; }
 .demo-code { display:flex; padding:0; overflow:hidden; }
 .demo-code .code-block-wrap { flex:1; }
 .demo-code .code-block { padding:var(--space-6); border:0; border-radius:0; }
+/* A CAIXA EMPILHADA (`CodeBlock previewLayout="stacked"`, o site B, 02/11/2026 — o Victor: "preciso que seja fiel a
+   referencia", e "Com degradê"; ADR-0089): a peça em cima e o código embaixo, sem a chave Prévia | Código, nas medidas da
+   referência — a peça em 350 (3 x 96 + 48 + 12 + 2) com recheio de 40, no fundo da página; o código no cartão, 16 em cima,
+   12 dos lados e 14 embaixo. Mais de 5 linhas: recolhido em 150 (96 + 48 + 4 + 2), sumindo num DEGRADÊ (a 3ª exceção à
+   regra sem gradiente, só nesta regra — o check 4 cobra), com o "Expand code" (32, letra 12) a 8 do fundo; aberto, o código
+   inteiro e o "Collapse code" embaixo dele. Sem linha: a peça e o código se separam pelo fundo. */
+.demo.demo-stacked { display:flex; flex-direction:column; min-block-size:0; padding:0; overflow:hidden; }
+.demo.demo-stacked > .demo-panel { flex:none; }
+.demo.demo-stacked > .demo-panel[data-panel="preview"] { min-block-size:calc(3 * var(--space-24) + var(--space-12) + var(--space-3) + var(--space-05));
+  padding:var(--space-10); border-radius:var(--radius-card) var(--radius-card) 0 0; background:var(--background); }
+.demo.demo-stacked > .demo-code { position:relative; display:block; overflow:visible; background:var(--card); }
+.demo.demo-stacked > .demo-code .code-block-wrap { position:relative; }
+.demo.demo-stacked > .demo-code .code-block { padding:var(--space-4) var(--space-3) calc(var(--space-3) + var(--space-05)); background:transparent; }
+.demo.demo-stacked > .demo-code .copy-code { top:var(--space-3); inset-inline-end:var(--space-2); z-index:2; }
+.demo.demo-stacked[data-collapsed] > .demo-code .code-block-wrap { max-block-size:calc(var(--space-24) + var(--space-12) + var(--space-1) + var(--space-05)); overflow:hidden;
+  -webkit-mask-image:linear-gradient(to bottom, var(--foreground) 40%, transparent); mask-image:linear-gradient(to bottom, var(--foreground) 40%, transparent); }
+.demo.demo-stacked[data-expanded] > .demo-code .code-block { padding-block-end:calc(var(--space-12) + var(--space-1)); }
+/* No alto contraste do sistema o degradê sai: o código recolhido aparece inteiro até o corte, sem esmaecer. */
+@media (forced-colors:active) { .demo.demo-stacked[data-collapsed] > .demo-code .code-block-wrap { -webkit-mask-image:none; mask-image:none; } }
+.demo-stacked-toggle { --step-fs:var(--text-xs); position:absolute; inset-block-end:var(--space-2); inset-inline-start:50%; translate:-50% 0; z-index:3;
+  font-weight:var(--weight-medium); box-shadow:var(--shadow-sm); }
 .copy-code { position:absolute; top:var(--space-3); inset-inline-end:var(--space-3); z-index:1; }
 /* O fim da linha fica fora do botão de copiar (achado no 3-A, 23/10/2026): no Quick Start, o `pnpm add` de uma linha
    terminava a 915 e o botão começava a 901 — o fim do comando ficava embaixo dele. O código reserva no fim o lugar do
@@ -3947,6 +4267,20 @@ button.tag-main { cursor:pointer; }
 .code-block-wrap > .code-block { padding-inline-end:calc(var(--space-3) + var(--control-h-md) + var(--space-2)); }
 .copy-code .c-done { display:none; }
 .copy-code.is-done .c-copy { display:none; } .copy-code.is-done .c-done { display:block; color:var(--primary); }
+/* A CABEÇA DO ARQUIVO (`CodeBlock filename`, o site B — aprovada pela bancada em 01/11/2026, o item 6, "Ícone + nome"): o
+   bloco é o cartão (canto 22, a cor do cartão); a cabeça tem 52 (`--control-h-md` + `--space-4`), o nome do arquivo em mono
+   12, apagado, e o "Copy" escrito — o botão secundário de 36, o ícone antes do nome; copiado, os dois viram o visto e
+   "Copied". O código a 14, na cor do texto, com 6 em cima e 20 dos lados e embaixo, e a linha longa DESCE (sem rolar). */
+.code-block-wrap.code-block-file { flex-direction:column; border-radius:var(--radius-card); background:var(--card); overflow:hidden; }
+.code-block-head { display:flex; align-items:center; gap:var(--space-3); min-block-size:calc(var(--control-h-md) + var(--space-4));
+  padding:calc(var(--space-1) + var(--space-05)) var(--space-2) 0 var(--space-5); }
+.code-block-title { min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
+  font-family:var(--font-code); font-weight:var(--weight-medium); font-size:var(--text-xs); color:var(--muted-foreground); }
+.code-block-head > .copy-code-text { margin-inline-start:auto; flex:none; }
+.copy-code-text .c-done { display:none; }
+.copy-code-text.is-done .c-copy { display:none; } .copy-code-text.is-done .c-done { display:inline-block; }
+.code-block-wrap.code-block-file > .code-block { padding:calc(var(--space-1) + var(--space-05)) var(--space-5) var(--space-5); border-radius:0; background:transparent;
+  color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); overflow:visible; white-space:pre-wrap; overflow-wrap:anywhere; }
 /* "On this page": índice da própria página, fixo na lateral. Navegação, não decoração —
    por isso é <nav> com rótulo, e o item atual se marca com aria-current. */
 .toc { position:sticky; top:var(--space-4); align-self:start; display:grid; gap:var(--space-1); max-height:calc(100vh - var(--space-8)); overflow:auto; padding:var(--space-2) 0; }
@@ -3965,6 +4299,16 @@ button.tag-main { cursor:pointer; }
 .toc a { position:relative; }
 .toc a[aria-current]::before { content:""; position:absolute; inset-block:0; inset-inline-start:calc(-1 * var(--space-05)); inline-size:var(--space-05); background:var(--primary); }
 .toc a.toc-sub { padding-inline-start:var(--space-6); }
+/* O SITE B (30/10/2026, protótipo): o ANEL DE LEITURA (`progress`) no lugar do ícone do nome, com o número na ponta; e o
+   item atual na CÁPSULA LEVANTADA (`indicator="segment"`), o mesmo desenho do `segment` da `Sidebar` (ADR-0082). */
+.toc-label-progress { color:var(--foreground); font-weight:var(--weight-semibold); }
+.toc-progress { display:inline-flex; flex:none; }
+.toc-progress .progress-circle-track { stroke:var(--fill-3); }
+.toc-progress-value { margin-inline-start:auto; font-family:var(--font-code); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--muted-foreground); }
+.toc-segment a { display:flex; align-items:center; min-block-size:var(--space-10); padding-inline:var(--space-3); border-radius:var(--radius-control); }
+.toc-segment a:hover { background:var(--fill-1); }
+.toc-segment a[aria-current] { background:var(--segment); box-shadow:var(--shadow-sm); font-weight:var(--weight-semibold); }
+.toc-segment a[aria-current]::before { content:none; }
 /* `--log-h` é a QUINTA válvula de altura do core, no idioma de `--chart-h` (I4), `--qr-size` (B6),
    `--datagrid-max-h` (F6) e `--media-h` (I7). Default 240px — o de antes —, então nada muda para
    quem não passa nada. A causa é medida em 11/08/2026: a altura era FIXA, e por isso três prévias
@@ -4405,6 +4749,15 @@ button.tag-main { cursor:pointer; }
 .dialog-backdrop { position:fixed; inset:0; z-index:var(--z-modal); background:var(--overlay); backdrop-filter:blur(5px); transition:opacity var(--duration-slow) var(--ease-standard); }
 .dialog-backdrop[data-starting-style],.dialog-backdrop[data-ending-style] { opacity:0; }
 .dialog-backdrop[data-ending-style] { transition-duration:var(--duration-fast); }
+/* AS JANELAS PRESAS (`data-contained` num contêiner, o site B — aprovado pela bancada em 01/11/2026, o D-4): a janela, a
+   gaveta, o balão e o aviso continuam os de sempre (a pele, as medidas, a entrada e a saída); só a posição muda — em vez da
+   janela inteira do navegador, eles se prendem ao contêiner que os recebe (no React, o `portalContainer` do
+   `AureaProvider` apontando para ele). Para demonstração e para um painel dentro da página. Sem o atributo, nada muda. */
+[data-contained] { position:relative; overflow:hidden; isolation:isolate; }
+[data-contained] :is(.dialog-backdrop,.dialog,.drawer,.toast-stack) { position:absolute; z-index:1; }
+[data-contained] .dialog { inline-size:min(var(--dialog-w),calc(100% - 2 * var(--dialog-margin))); max-block-size:calc(100% - 2 * var(--dialog-margin)); }
+[data-contained] .drawer-right,[data-contained] .drawer-left { inline-size:min(20rem,85%); }
+[data-contained] .toast-stack { inline-size:calc(100% - 2 * var(--space-3)); inset-block-end:var(--space-3); }
 .dialog { --dialog-margin:var(--space-4); --dialog-w:28rem; position:fixed; inset-inline:0; top:50%; translate:0 -50%; z-index:var(--z-modal); display:flex; flex-direction:column; inline-size:min(var(--dialog-w),calc(100vw - 2 * var(--dialog-margin))); max-block-size:calc(100dvh - 2 * var(--dialog-margin)); margin-inline:auto; padding:var(--space-6); border:var(--border-width) solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); outline:none; transition:opacity var(--duration-slow) var(--ease-standard),scale var(--duration-slow) var(--ease-standard); }
 .dialog[data-starting-style] { opacity:0; scale:1.05; }
 .dialog[data-ending-style] { opacity:0; scale:.95; transition-duration:var(--duration-fast); }
@@ -4614,6 +4967,49 @@ button.tag-main { cursor:pointer; }
 .command-shortcuts > span { display:inline-flex; align-items:center; gap:var(--space-1); }
 .command-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-3); align-items:center; }
 .command-item-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+/* A BUSCA GRANDE (`CommandPalette size="lg"`, o site B — aprovada pela bancada em 01/11/2026, o item 2 e o D-2). Sem o
+   `lg`, os invólucros novos não geram caixa (`display:contents`) e a paleta é a de sempre. A janela tem a largura `lg`
+   (1024); o campo é uma cápsula de 64 (`--space-16`) no `--fill-2`, com a lupa de 20, a letra 18 e o "Esc" dentro — o
+   foco é o do campo inteiro, como o `InputGroup`; os filtros do app vêm embaixo; a lista e a prévia lado a lado (a prévia
+   no `--fill-1`, canto 22, presa ao alto); o título do grupo em mono maiúsculo, com a contagem na ponta; o item de 50
+   (`--control-h-xl`) com o ícone num círculo de 40 tingido pela cor de categoria, o título 16/600 e a descrição cortada;
+   o "↵" amarelo só na linha ativa; o pé com as teclas e o encaixe do app. Até 1280 (o `--breakpoint-xl`; o desenho
+   tem 1240, fora da escala), a prévia some. */
+.command-body-plain,.command-foot-plain { display:contents; }
+.command-palette-lg { width:min(var(--breakpoint-lg),100%); gap:var(--space-3); }
+.command-field { display:flex; align-items:center; gap:var(--space-3); block-size:var(--space-16); padding-inline:var(--space-5) var(--space-3);
+  border-radius:var(--radius-control); background:var(--fill-2); }
+.command-field:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; }
+.command-field > .icon { inline-size:var(--icon-md); block-size:var(--icon-md); color:var(--muted-foreground); flex:none; }
+.command-input { flex:1; min-inline-size:0; border:0; padding:0; background:none; color:inherit; font:inherit; font-size:var(--text-lg); outline:none; }
+.command-input::placeholder { color:var(--muted-foreground); }
+.command-filters { display:flex; flex-wrap:wrap; gap:var(--space-2); }
+.command-group-count { flex:none; font-variant-numeric:tabular-nums; }
+.command-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,25rem); gap:var(--space-4); align-items:start; }
+.command-palette-lg .command-list { max-height:none; }
+.command-palette-lg .command-group-label { display:flex; justify-content:space-between; gap:var(--space-2); font-family:var(--font-code); text-transform:uppercase; letter-spacing:.06em; }
+.command-palette-lg .command-item { grid-template-columns:auto minmax(0,1fr) auto; min-block-size:var(--control-h-xl); padding-block:var(--space-1); border-radius:var(--radius-control); }
+.command-item-tile { display:inline-grid; place-items:center; inline-size:var(--space-10); block-size:var(--space-10); border-radius:var(--radius-full); flex:none;
+  background:var(--fill-2); color:var(--foreground); }
+.command-item-tile:empty { visibility:hidden; }
+.command-item-tile[data-tone="red"] { background:var(--category-red-bg); color:var(--category-red); }
+.command-item-tile[data-tone="orange"] { background:var(--category-orange-bg); color:var(--category-orange); }
+.command-item-tile[data-tone="green"] { background:var(--category-green-bg); color:var(--category-green); }
+.command-item-tile[data-tone="teal"] { background:var(--category-teal-bg); color:var(--category-teal); }
+.command-item-tile[data-tone="cyan"] { background:var(--category-cyan-bg); color:var(--category-cyan); }
+.command-item-tile[data-tone="blue"] { background:var(--category-blue-bg); color:var(--category-blue); }
+.command-item-tile[data-tone="violet"] { background:var(--category-violet-bg); color:var(--category-violet); }
+.command-item-tile[data-tone="pink"] { background:var(--category-pink-bg); color:var(--category-pink); }
+.command-item-text { display:grid; min-inline-size:0; }
+.command-palette-lg .command-item-label { font-size:var(--text-base); font-weight:var(--weight-semibold); }
+.command-item-description { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-foreground); font-size:var(--text-sm); }
+.command-item-enter { visibility:hidden; background:var(--primary); color:var(--primary-foreground); }
+.command-item[data-highlighted] .command-item-enter { visibility:visible; }
+.command-preview { position:sticky; inset-block-start:0; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); padding:var(--space-5);
+  border-radius:var(--radius-card); background:var(--fill-1); }
+.command-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); }
+.command-foot > .command-shortcuts { padding:0; }
+@media (max-width:1280px) { .command-body { grid-template-columns:minmax(0,1fr); } .command-preview { display:none; } }
 
 .menu-sep { height:1px; margin:6px 4px; background:var(--border); border:0; }
 /* G-API-02 — a anatomia que o menu ganhou quando o dado deixou de ter uma forma só.
@@ -4787,7 +5183,14 @@ button.tag-main { cursor:pointer; }
 .combobox-multi:has([aria-invalid="true"]),
 .combobox-multi:has(:user-invalid),
 .dropzone:has([aria-invalid="true"]),
-.dropzone:has(:user-invalid) { border-color:transparent; background-color:var(--danger-bg); --focus-strong:var(--danger-400); }
+.dropzone:has(:user-invalid),
+.checkbox-pill[data-tone] input[aria-invalid="true"] + .control-mark,
+.checkbox-pill[data-tone] input:user-invalid + .control-mark,
+.radio-group-cards > .radio:has(input[aria-invalid="true"]),
+.radio-group-cards > .radio:has(input:user-invalid) { border-color:transparent; background-color:var(--danger-bg); --focus-strong:var(--danger-400); }
+/* ↑ A 0.54.0 (02/11/2026, a trava `invalido.spec.ts`): a cápsula com tom (`Checkbox variant="pill" tone`) tem a regra da
+   marcada com a mesma força desta — aqui, depois, o inválido vence; e o cartão de escolha (`RadioGroup variant="card"`)
+   pinta o CARTÃO inteiro, porque com `indicatorPlacement="none"` a marca que pintava está escondida. */
 /* ↑ Sem linha (16/10/2026, o Victor: "quero tudo sem borda sem exceções"): o inválido era a borda vermelha; sem
    borda, ele é o FUNDO de perigo (`--danger-bg`), o mesmo dos avisos. A frase de erro do `Field` continua embaixo.
    `--focus-strong` (ADR-0059, 08/10/2026): o anel de foco agora COLA na borda e a pinta — com o
@@ -4860,6 +5263,9 @@ button.notification-item:hover { background:var(--surface-3); }
    REFERENCES.md; a pele é Aurea. O título vinha com o h3 do NAVEGADOR (16,38px). */
 .empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-10) var(--space-6); color:var(--muted-foreground); text-align:center; }
 .empty-state > .icon { color:var(--subtle-foreground); }
+/* A MOLDURA (`framed`, o site B — aprovada pela bancada em 01/11/2026): o ícone num círculo de 64 (`--space-16`), a
+   mesma do `EmptyState` do nativo (R-15, `IconeEmMoldura`): o fundo e a cor do ícone são os dele (`muted`). */
+.empty-state-frame { display:grid; place-items:center; flex:none; inline-size:var(--space-16); block-size:var(--space-16); border-radius:var(--radius-full); background:var(--muted); color:var(--muted-foreground); }
 .empty-state p { max-width:46ch; margin:0; }
 .empty-title { margin:0; color:var(--foreground); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-tight); }
 
@@ -5363,6 +5769,11 @@ button.graph-node-body { cursor:pointer; }
   /* Sem linha (ADR-0072, 16/10/2026): a rodinha do `Spinner` e o visto do `Checkbox` deixaram de ser linha (que o alto
      contraste pinta) e viraram desenho por máscara — fundo, que a troca apaga. Saem da troca, na cor do texto. */
   .spinner,.checkbox input:checked + .control-mark::after { forced-color-adjust:none; background:CanvasText; }
+  /* O "+" das perguntas (`Accordion indicator="plus"`, o site B — 31/10/2026): o glifo é o `::before` por máscara, e a
+     bolinha em volta é fundo. A bolinha sai (aberta ou fechada: o amarelo da aberta, fora da troca, ficaria sob o glifo na
+     cor do texto), e o glifo pinta na cor do texto. */
+  .accordion-plus .accordion-chevron, .accordion-plus .accordion-item[open] > summary .accordion-chevron { background:transparent; }
+  .accordion-plus .accordion-chevron::before { forced-color-adjust:none; background:CanvasText; }
 }
 
 
@@ -5628,7 +6039,7 @@ button.graph-node-body { cursor:pointer; }
 /* O FOCO DOS CAMPOS no claro é o amarelo, uma linha só, como no escuro (decisão do Victor, 26/10/2026; a medida — 1,75:1
    na página, 1,91:1 no cartão, abaixo dos 3:1 — vai à bancada do passo A). Os botões e o resto continuam com o grafite. */
 [data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
-[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
+[data-theme="light"] :is(.input-group,.combobox-multi,.command-field):focus-within:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
   outline-color:var(--primary); }
 
 /* "AUMENTAR CONTRASTE" do sistema (`prefers-contrast: more`: o "Aumentar contraste" do macOS, do iOS e do Android, o
@@ -5642,7 +6053,7 @@ button.graph-node-body { cursor:pointer; }
   :root:where(:not([data-brand="ember"])),[data-theme]:where(:not([data-brand="ember"],[data-brand="ember"] *)) {
     --control-thumb:var(--brand-yellow-ink); --control-selected-foreground:var(--brand-yellow-ink); --control-selected-dot:var(--brand-yellow-ink); }
   [data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
-  [data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
+  [data-theme="light"] :is(.input-group,.combobox-multi,.command-field):focus-within:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
     outline-color:var(--focus-strong); }
 }
 
@@ -5697,6 +6108,10 @@ button.graph-node-body { cursor:pointer; }
 :is([data-segment-style="brand"] .segmented:not([data-segment-style]),.segmented[data-segment-style="brand"]) :is(button,a).active { --seg-bg:var(--primary); --seg-fg:var(--primary-foreground); --seg-shadow:none; }
 :is([data-segment-style="ring"] .segmented:not([data-segment-style]),.segmented[data-segment-style="ring"]) :is(button,a).active { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary), var(--shadow-sm); }
 :is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a).active { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:var(--shadow-sm); }
+/* `emphasis` (o site B, 02/11/2026 — o Victor escolheu a "C" na imagem): a cápsula erguida do `neutral` com a letra do
+   DESTAQUE, a mesma do escolhido de sempre (`--primary-emphasis`: o amarelo no escuro, a cor do texto no claro), e sem o
+   fio de baixo. */
+:is([data-segment-style="emphasis"] .segmented:not([data-segment-style]),.segmented[data-segment-style="emphasis"]) :is(button,a).active { --seg-bg:var(--segment); --seg-fg:var(--primary-emphasis); --seg-shadow:var(--shadow-sm); }
 :is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active {
   --btn-bg:var(--seg-bg); --btn-fg:var(--seg-fg); background:var(--seg-bg); color:var(--seg-fg); box-shadow:var(--seg-shadow); }
 :is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active::after { content:none; }

package/dist/aurea.js

@@ -108,6 +108,19 @@
     if (trigger) copy(trigger);
   });
 
+  // A CAIXA EMPILHADA (ADR-0089): o [data-aurea-code-expand] abre e recolhe o código da caixa — troca `data-collapsed` por
+  // `data-expanded`, o `aria-expanded` e o texto ("Expand code" / "Collapse code", lidos do próprio botão).
+  document.addEventListener("click", function (event) {
+    var botao = event.target.closest && event.target.closest("[data-aurea-code-expand]");
+    var caixa = botao && botao.closest(".demo-stacked");
+    if (!caixa) return;
+    var abre = caixa.hasAttribute("data-collapsed");
+    caixa.toggleAttribute("data-collapsed", !abre);
+    caixa.toggleAttribute("data-expanded", abre);
+    botao.setAttribute("aria-expanded", abre ? "true" : "false");
+    botao.textContent = botao.getAttribute(abre ? "data-label-collapse" : "data-label-expand") || botao.textContent;
+  });
+
   // GAR-14 (0.28.0) · COMPARTILHAR. O gatilho marcado com [data-aurea-share] (o `Button share` do
   // React emite isto) pergunta ao navegador se ele sabe compartilhar ESTE link — detectar o recurso,
   // e não adivinhar o aparelho, é o padrão da web. Sabe: abre a janela do aparelho; a pessoa
@@ -263,17 +276,54 @@
     }, {rootMargin: "0px 0px -75% 0px"});
     for (var k = 0; k < targets.length; k++) observer.observe(targets[k]);
   }
+  // O ANEL DE LEITURA (`TableOfContents progress`, o site B — 30/10/2026, protótipo): quanto da página já rolou, no anel
+  // e no número da linha do nome. Na página estática quem escreve é este caminho; no React, o próprio componente.
+  function tocProgress(toc) {
+    var anel = toc.querySelector(".toc-progress .progress-circle");
+    var fio = toc.querySelector(".toc-progress .progress-circle-fill");
+    var numero = toc.querySelector(".toc-progress-value");
+    if (!anel || !numero) return;
+    function ler() {
+      var alto = document.documentElement.scrollHeight - window.innerHeight;
+      var v = alto > 0 ? Math.round(Math.min(1, Math.max(0, window.scrollY / alto)) * 100) : 100;
+      numero.textContent = v + "%";
+      anel.setAttribute("aria-valuenow", String(v));
+      if (fio) fio.setAttribute("stroke-dashoffset", String(100 - v));
+    }
+    ler();
+    window.addEventListener("scroll", ler, {passive: true});
+    window.addEventListener("resize", ler);
+  }
   function initTocs() {
     // `[data-toc-spy="react"]` fica de fora: o componente React observa por conta própria desde
     // 21/08/2026, e dois observadores escrevendo o mesmo `aria-current` com faixas diferentes é
     // pior que nenhum. Numa página estática — o catálogo, os docs — a marca não aparece e este
     // caminho segue sendo o único.
     var tocs = document.querySelectorAll('.toc:not([data-toc-spy="react"])');
-    for (var t = 0; t < tocs.length; t++) tocSpy(tocs[t]);
+    for (var t = 0; t < tocs.length; t++) { tocSpy(tocs[t]); tocProgress(tocs[t]); }
   }
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", initTocs);
   else initTocs();
 
+  // O GRUPO QUE DOBRA da lateral (4-D), na página sem React (o site B — 30/10/2026, protótipo): o botão abre e fecha a
+  // lista dele e vira a seta. No React quem faz é o próprio componente; se os dois rodam, chegam ao mesmo estado, porque
+  // os dois partem do mesmo "aberto".
+  document.addEventListener("click", function (e) {
+    var botao = e.target.closest ? e.target.closest(".sidebar-group-toggle[aria-controls]") : null;
+    if (!botao) return;
+    var lista = document.getElementById(botao.getAttribute("aria-controls"));
+    if (!lista) return;
+    var abrir = botao.getAttribute("aria-expanded") !== "true";
+    botao.setAttribute("aria-expanded", abrir ? "true" : "false");
+    lista.hidden = !abrir;
+    var seta = botao.querySelector(".sidebar-group-caret use");
+    if (!seta) return;
+    var rtl = getComputedStyle(botao).direction === "rtl";
+    var nome = abrir ? "caret-down" : rtl ? "caret-left" : "caret-right";
+    var href = seta.getAttribute("href") || "";
+    seta.setAttribute("href", href.replace(/#i-caret-[a-z]+$/, "#i-" + nome));
+  });
+
   // ── Gaveta de navegação do AppShell: o foco ────────────────────────────────────────────
   // O popover nativo NÃO entrega a mesma gestão de foco nos dois motores, e isto foi MEDIDO no
   // item K1 (09/08/2026), abrindo a gaveta e dando oito Tabs:

package/package.json

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