@aurea-uds/core 0.8.14 → 0.10.0

package/dist/aurea.css

@@ -470,6 +470,11 @@ img,svg { display:block; }
    de um piso: sem `min-height` ele mede ZERO num pai que não define altura, e desaparece. */
 .separator { flex:none; width:100%; height:1px; margin:0; border:0; background:var(--border); }
 .separator-vertical { align-self:stretch; width:1px; height:auto; min-height:var(--space-2); }
+/* spacing (C-04): os três degraus da ADR-0051. Na vertical a folga vai para os lados. */
+.separator-space-tight { margin-block:var(--space-2); } .separator-space-normal { margin-block:var(--space-4); } .separator-space-loose { margin-block:var(--space-6); }
+.separator-vertical.separator-space-tight { margin-block:0; margin-inline:var(--space-2); }
+.separator-vertical.separator-space-normal { margin-block:0; margin-inline:var(--space-4); }
+.separator-vertical.separator-space-loose { margin-block:0; margin-inline:var(--space-6); }
 /* Grid: o terceiro primitivo de layout, com o mesmo gap do .stack. A pele nasceu na Fase 11
    (achado A13): o componente existia desde sempre e saía `display:block` — empilhava. Ninguém
    via porque o chrome do catálogo REDEFINIA .grid, então ele parecia pronto na nossa
@@ -477,6 +482,15 @@ img,svg { display:block; }
    estoura o contêiner quando o texto vai a 200% e a coluna fica maior que a caixa (lição do
    M12); --grid-min é o botão de ajuste, no idioma de --qr-module e --demo-height. */
 .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(var(--grid-min,15rem),100%),1fr)); gap:var(--space-4); }
+/* B-01 (24/09/2026): as props de layout. `gap` tem três degraus — ADR-0051. Os nomes de alinhamento
+   são os mesmos do `Cluster` nativo (R-09). Sem prop, nenhuma destas classes sai. */
+.stack-gap-tight,.cluster-gap-tight,.grid-gap-tight { gap:var(--space-2); }
+.stack-gap-loose,.cluster-gap-loose,.grid-gap-loose { gap:var(--space-6); }
+.stack-align-start { align-items:flex-start; } .stack-align-center { align-items:center; } .stack-align-end { align-items:flex-end; }
+.cluster-align-start { align-items:flex-start; } .cluster-align-end { align-items:flex-end; } .cluster-align-baseline { align-items:baseline; }
+.cluster-justify-center { justify-content:center; } .cluster-justify-end { justify-content:flex-end; } .cluster-justify-between { justify-content:space-between; }
+.cluster-nowrap { flex-wrap:nowrap; }
+.grid-fixed { grid-template-columns:repeat(var(--grid-cols,1),minmax(0,1fr)); }
 
 /* ========================================================================== */
 /* 03. APP SHELL E DOCUMENTAÇÃO                                                */
@@ -498,6 +512,11 @@ img,svg { display:block; }
    `--space-4` dos dois lados; reservar só o token fazia 264px virarem 232px. A rente não tem
    margem, então a trilha dela continua sendo o token cru. */
 .app-shell:has(> .sidebar-flush) { --sidebar-track:var(--sidebar-width); }
+/* Sem linhas declaradas, o grid repartia a sobra do `min-height:100vh` entre as linhas `auto`:
+   em tela estreita (a lateral vira gaveta) e página curta, a BARRA DO TOPO esticava. Medido no
+   desenho da B-10 (24/09/2026): 78px viraram 100px com `contentVariant="plain"`. A sobra vai
+   para a linha do conteúdo. Só com topo: sem ele, a primeira linha já é o conteúdo. */
+.app-shell:has(> .topbar) { grid-template-rows:auto 1fr; }
 /* 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
@@ -509,6 +528,8 @@ img,svg { display:block; }
    e sem superfície própria: ela se funde ao fundo e cola no conteúdo, que começa logo
    abaixo. É o topo do nosso catálogo. */
 .topbar-flush { top:0; padding:var(--space-2) var(--space-5); background:var(--background); }
+/* 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 var(--border); }
 .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 var(--border); border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); }
 /* .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. */
@@ -564,6 +585,9 @@ img,svg { display:block; }
 .app-shell-flush .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
 .app-shell-flush .content { margin-block-start:var(--space-05); }
 .content { min-width:0; margin:var(--space-4) var(--space-4) var(--space-4) 0; padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
+/* contentVariant="plain" (B-10): a área de conteúdo sem caixa. Os `Card` da tela passam a ser as
+   únicas superfícies. A margem continua: é ela que afasta o conteúdo da lateral e da barra. */
+.content-plain { padding:0; border:0; border-radius:0; background:none; color:inherit; }
 /* O topo é presentational — não conhece o conteúdo — então garante o mínimo universal:
    os filhos encolhem em vez de forçar rolagem lateral. O COLAPSO de conteúdo (esconder a
    busca, trocar a nav por menu) é do consumidor, com os utilitários responsivos abaixo. */
@@ -649,7 +673,16 @@ img,svg { display:block; }
    uso no core — token publicado que ninguém usa é promessa sem entrega, e era o par certo o
    tempo todo. O defeito não é da marca: a marca só o tornou visível. */
 @media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--sidebar-accent); } }
-.sidebar-item[aria-current] { background:var(--sidebar-accent); color:var(--sidebar-accent-foreground); font-weight:var(--weight-medium); }
+/* A-05 (24/09/2026), decisão do Victor: o item atual da lateral passa a usar a MARCA DA CASA para
+   "selecionado" — fundo, texto na cor da marca e o fio de 2px embaixo —, que o `Toggle`, o
+   `SegmentedControl`, o `Button variant="nav"` e a navegação do catálogo (`.doc-nav`) já usavam.
+   Era o único de fora: pílula cinza com texto branco, e um app copiou a regra da casa à mão.
+   As cores saem da escala DA LATERAL (`--sidebar-accent`, `--sidebar-primary`), exatamente como o
+   `.doc-nav a.active` — não da página. Foi a lição de 20/08/2026 sob a marca `lory`: com
+   `--secondary`/`--primary` da página, a lateral escura desenhava as cores invertidas.
+   O FIO não mora aqui: a lateral entrou na lista da regra da casa (`.is-selected::after`, mais
+   abaixo), com o do `.doc-nav`. Copiar a regra faria duas cópias do mesmo fio divergirem. */
+.sidebar-item[aria-current] { position:relative; background:var(--sidebar-accent); color:var(--sidebar-primary); font-weight:var(--weight-medium); }
 .sidebar-item[aria-current] .icon { opacity:1; }
 /* Alinha com o TEXTO do item: padding do painel (4) + padding do item (12) = 16px. Com o
    painel apertado, os 8px de antes deixavam a rubrica fora do prumo da lista. */
@@ -668,6 +701,8 @@ img,svg { display:block; }
    que, com o raio de linha, fechava nas pontas e lia como CÁPSULA. Quadrado é o que a referência
    desenha, e é o que o olho reconhece como botão de ícone. */
 .sidebar-collapsed .sidebar-item { justify-content:center; width:var(--control-h-md); padding-inline:0; margin-inline:auto; }
+/* recolhida, o item tem só a largura do ícone: com os 15px de cada lado o fio sumiria. */
+.sidebar-collapsed .sidebar-item[aria-current]::after { inset-inline:var(--space-2); }
 .sidebar-collapsed .sidebar-sub { padding-inline-start:0; }
 /* Estas regras tocam `.app-shell` porque a coluna do grid é do shell: a
    lateral não consegue encolher a própria trilha. `--sidebar-rail` continua sendo a largura
@@ -837,9 +872,12 @@ img,svg { display:block; }
 /* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-1) ──────────────────────────
    A LISTA NÃO PINTA SUPERFÍCIE. Quem dá o card é o `Card`, e repintar aqui seria um segundo
    lugar para a mesma coisa — a `DIRECTION.md` §3.9 diz que composto REUSA o menor.
-   E SEM DIVISOR entre as linhas, que é decisão e não esquecimento: o realce de linha desta casa
-   é a PÍLULA (é o que `.sidebar-item` faz), e pílula com traço embaixo se contradizem — o traço
-   promete grade, a pílula promete alvo. Quem agrupa é a superfície de fora. */
+   E SEM DIVISOR entre as linhas, que é decisão e não esquecimento: um traço ENTRE linhas promete
+   grade, e quem agrupa é a superfície de fora.
+   ⚠ Até 24/09/2026 este comentário dizia também que "o realce desta casa é a PÍLULA, e pílula com
+   traço embaixo se contradizem". Era falso: cinco seletores da casa faziam pílula com fio, e desde
+   a A-05 a lateral também. O fio embaixo do item ATUAL não é divisor — é a marca de "selecionado",
+   uma por lista, e não promete grade nenhuma. */
 .nav-list { display:flex; flex-direction:column; gap:var(--space-05); margin:0; padding:0; list-style:none; }
 /* ── O RAIO DA LINHA SAI DE UMA CONTA, NÃO DE UM NÚMERO ─────────────────────────────
    `raio do filho = raio do pai − padding do pai`. É o que faz o vão ser CONSTANTE na curva; sem
@@ -939,6 +977,8 @@ img,svg { display:block; }
 .btn-xl { --step-h:var(--control-h-xl); --step-px:26px; --step-gap:10px; --step-fs:var(--text-base); border-radius:var(--radius-control); }
 /* Largura total: para rodapé de formulário e tela estreita. Só a largura muda. */
 .btn-block { width:100%; }
+/* grow (C-03): parte igual de uma fila. `min-width:0` deixa o rótulo encolher em vez de estourar. */
+.btn-grow { flex:1 1 0%; min-width:0; }
 /* SKIP LINK — WCAG 2.2 SC 2.4.1 (Bypass Blocks), nível A.
    Medido em 21/08/2026: existia só no `apps/docs/index.html`, escrito à mão. O core não tinha,
    o `AppShell` não tinha, e as 200 páginas do catálogo não tinham — ou seja, a página de
@@ -1301,6 +1341,8 @@ img,svg { display:block; }
    Formulário é ARRANJO, e arranjo é do Stack/Grid; se esta classe crescer, ela vira uma terceira
    maneira de fazer layout e passa a brigar com as duas que já existem. */
 .form { display:grid; gap:var(--space-5); }
+/* description (B-12): a frase de ajuda embaixo do controle, com a letra e a cor do `.hint`. */
+.field-description { color:var(--muted-foreground); font-size:var(--text-xs); }
 .field-error { color:var(--danger-400); font-size:var(--text-xs); }
 .checkbox,.radio { display:inline-flex; align-items:flex-start; gap:9px; color:var(--foreground); cursor:pointer; }
 .checkbox input,.radio input { position:absolute; opacity:0; pointer-events:none; }
@@ -1399,9 +1441,9 @@ img,svg { display:block; }
 [data-theme="light"] .doc-nav a:not(.active) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
 .is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
 .btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,
-.doc-nav a.active::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
+.doc-nav a.active::after,.sidebar-item[aria-current]::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
 /* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
-.doc-nav a.active::after { background:color-mix(in oklab, var(--sidebar-primary) 75%, transparent); }
+.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:color-mix(in oklab, var(--sidebar-primary) 75%, transparent); }
 [data-theme="light"] .is-selected,[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]),
 [data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active
   { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
@@ -1517,6 +1559,18 @@ img,svg { display:block; }
 .status-offline .status-dot { background:transparent; box-shadow:inset 0 0 0 2px currentColor,0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
 
 .card { min-width:0; padding:var(--card-pad); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
+/* padding="none" (C-05): sem respiro, e a mídia recortada no raio 22 do próprio cartão. */
+.card-flush { padding:0; overflow:hidden; }
+/* Card.Media e orientation (A-14). Vertical: a mídia primeira sangra até a borda de cima e dos
+   lados. Horizontal (o modo lista): a mídia à esquerda, 96 de largura (o `size-24` do exemplo do
+   HeroUI, nosso --space-24), 16 até o texto, e o raio concêntrico da casa. */
+.card-media { display:block; overflow:hidden; }
+.card-media > :is(img,video,.image) { display:block; width:100%; }
+.card:not(.card-horizontal) > .card-media:first-child { margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad); border-radius:calc(var(--radius-card) - var(--border-width)) calc(var(--radius-card) - var(--border-width)) 0 0; }
+.card-flush:not(.card-horizontal) > .card-media:first-child { margin:0; }
+.card-horizontal { display:grid; grid-template-columns:var(--space-24) minmax(0,1fr); align-items:start; column-gap:var(--space-4); }
+.card-horizontal > .card-media { grid-row:1 / span 99; border-radius:calc(var(--radius-card) - var(--card-pad)); }
+.card-horizontal > :not(.card-media) { grid-column:2; min-width:0; }
 .card-raised { box-shadow:none; } .card-inset { background:var(--secondary); }
 /* A variante interativa é o ALVO, e desde o G-A11Y-11 ela exige `render` — o elemento vem de
    quem consome, e é `<button>` ou `<a href>` conforme a promessa seja ação ou navegação.
@@ -2038,11 +2092,20 @@ img,svg { display:block; }
 .icon-tile { min-height:86px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--secondary); color:var(--muted-foreground); cursor:pointer; text-align:start; transition:transform var(--duration-fast) var(--ease-standard),border-color var(--duration-fast),color var(--duration-fast); }
 @media (hover:hover) and (pointer:fine) { .icon-tile:hover { color:var(--foreground); border-color:var(--primary); transform:translateY(-1px); } } .icon-tile:focus-visible { color:var(--foreground); border-color:var(--primary); } .icon-tile span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font:11px var(--font-code); }
 .dialog-backdrop { position:fixed; inset:0; z-index:var(--z-modal); background:var(--overlay); backdrop-filter:blur(5px); }
-.dialog { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:var(--z-modal); width:min(560px,calc(100vw - 40px)); max-height:calc(100vh - 40px); overflow:auto; padding:24px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+.dialog { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:var(--z-modal); width:min(28rem,calc(100vw - 40px)); max-height:calc(100vh - 40px); overflow:auto; padding:24px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+/* size (B-03), decisão do Victor em 24/09/2026: as quatro larguras do HeroUI — `max-w-xs` a
+   `max-w-lg` do @heroui/styles 3.2.6, 20/24/28/32rem = 320/384/448/512 — mais 1024 (o token
+   --breakpoint-lg) e a tela cheia. O padrão passou a ser o `md` do HeroUI, 448; até a 0.8.14
+   era 560. */
+.dialog-xs { width:min(20rem,calc(100vw - 40px)); }
+.dialog-sm { width:min(24rem,calc(100vw - 40px)); }
+.dialog-lg { width:min(32rem,calc(100vw - 40px)); }
+.dialog-xl { width:min(var(--breakpoint-lg),calc(100vw - 40px)); }
+.dialog-full { width:calc(100vw - 40px); height:calc(100vh - 40px); }
 .dialog>header,.drawer>header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; } .dialog-body { display:grid; gap:14px; }
 /* O ConfirmDialog é o MESMO `.dialog` — não nasce uma segunda superfície flutuante, que seria a
    pele divergindo como divergiu entre `.table-wrap` e `.table-region`. O que muda é a caixa mais
-   estreita (uma frase e dois botões não precisam de 560px) e o rodapé alinhado ao fim, com o
+   estreita (uma frase e dois botões não precisam da largura do Dialog) e o rodapé alinhado ao fim, com o
    destrutivo por último: a ordem visual é cancelar → agir, e é onde as quatro referências batem. */
 .dialog-confirm { width:min(420px,calc(100vw - 40px)); }
 .dialog-confirm>footer { display:flex; justify-content:flex-end; gap:var(--space-2); margin-block-start:var(--space-5); }

package/package.json

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