@aurea-uds/core 0.9.0 → 0.10.1

package/README.md

@@ -1,39 +1,38 @@
 # @aurea-uds/core
 
-The **Aurea UDS** stylesheet, plus the small amount of vanilla behaviour that does not need
-React.
+A folha de estilo da **Aurea UDS**, mais o pouco de comportamento em JavaScript puro que não
+precisa de React.
 
 ```bash
 pnpm add @aurea-uds/core @aurea-uds/fonts
 ```
 
 ```js
-import "@aurea-uds/fonts/css";  // before the core: it no longer embeds IBM Plex
+import "@aurea-uds/fonts/css";  // antes do core: ele não embute mais a IBM Plex
 import "@aurea-uds/core/css";
-import "@aurea-uds/core/js";    // optional — tabs, disclosure, and the like, without React
+import "@aurea-uds/core/js";    // opcional — abas, abrir e fechar e afins, sem React
 ```
 
-The JavaScript is a no-op without a DOM, so it is safe to import during server rendering.
+O JavaScript não faz nada sem DOM, então é seguro importá-lo durante a renderização no servidor.
 
-## What is in here
+## O que tem aqui
 
-Every rule the system needs and nothing else. Documentation chrome and product mock-ups used
-to live here; they were moved out, and a gate keeps them out — a class in this stylesheet has
-to be one a component can actually produce.
+Toda regra de que o sistema precisa, e nada além. Enfeite de documentação e maquete de produto já
+moraram aqui; saíram, e um check os mantém fora — uma classe desta folha tem de ser uma que
+algum componente de fato produz.
 
-Values come from `@aurea-uds/tokens`. A raw pixel for spacing, radius, type size, weight or
-line height fails a gate rather than a review.
+Os valores vêm do `@aurea-uds/tokens`. Um pixel cru de espaço, raio, tamanho de letra, peso ou
+altura de linha reprova no CI, e não numa revisão.
 
-## Themes and density
+## Tema e densidade
 
 ```html
 <html data-theme="dark" data-density="comfortable">
 ```
 
-`data-theme` is `dark` or `light`; `data-density` is `compact`, `comfortable` or `spacious`.
-Both are read from the root element, and a control of a given size measures the same in every
-combination.
+`data-theme` é `dark` ou `light`; `data-density` é `compact`, `comfortable` ou `spacious`. Os dois
+são lidos do elemento raiz, e um controle de um dado tamanho mede o mesmo em toda combinação.
 
-## Licence
+## Licença
 
 Apache-2.0.

package/dist/aurea.css

@@ -512,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
@@ -523,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. */
@@ -578,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. */
@@ -663,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. */
@@ -682,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
@@ -851,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
@@ -1317,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; }
@@ -1415,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)); }
@@ -1535,6 +1561,16 @@ img,svg { display:block; }
 .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.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.9.0",
-  "description": "The Aurea UDS stylesheet and its vanilla behaviour. Import @aurea-uds/fonts/css before this.",
+  "version": "0.10.1",
+  "description": "O CSS da Aurea UDS e o comportamento em JavaScript puro. Importe @aurea-uds/fonts/css antes deste.",
   "keywords": [
     "aurea",
     "design-system",
@@ -14,6 +14,10 @@
     "url": "git+https://github.com/victor1mor/aurea-uds.git",
     "directory": "packages/core"
   },
+  "homepage": "https://github.com/victor1mor/aurea-uds/tree/main/packages/core#readme",
+  "bugs": {
+    "url": "https://github.com/victor1mor/aurea-uds/issues"
+  },
   "publishConfig": {
     "access": "public"
   },