@aurea-uds/core 0.36.0 → 0.37.1

package/dist/aurea.css

@@ -5,6 +5,7 @@
   --brand-yellow-foreground:oklch(0.421 0.095 57.708);
   --brand-yellow-text:oklch(0.516 0.105 86.047);
   --brand-yellow-ink:#242424;
+  --brand-blue:#0246f1;
   --white:oklch(1 0 0);
   --black:oklch(0 0 0);
   --font-ui:"Atkinson Hyperlegible Next","Segoe UI",sans-serif;
@@ -248,8 +249,8 @@
   --popover-foreground:#242424;
   --primary:var(--brand-yellow);
   --primary-foreground:var(--brand-yellow-ink);
-  --link:var(--brand-yellow);
-  --link-hover:var(--brand-yellow);
+  --link:var(--brand-blue);
+  --link-hover:var(--brand-blue);
   --secondary:#ebebeb;
   --secondary-foreground:#242424;
   --muted:var(--secondary);
@@ -290,8 +291,8 @@
   --segment:oklch(1 0 0);
   --focus:var(--primary);
   --focus-strong:var(--foreground);
-  --primary-emphasis:var(--brand-yellow);
-  --primary-outline:var(--brand-yellow);
+  --primary-emphasis:var(--brand-blue);
+  --primary-outline:var(--brand-blue);
   --control-selected:var(--brand-yellow);
   --control-selected-foreground:var(--brand-yellow-ink);
   --control-selected-dot:oklch(0.985 0 0);
@@ -358,7 +359,7 @@
   --segment:oklch(0.312 0.02 250);
   --muted:oklch(0.19 0.02 250);
   --muted-foreground:oklch(0.72 0.015 250);
-  --subtle-foreground:oklch(0.58 0.016 250);
+  --subtle-foreground:oklch(0.72 0.015 250);
   --accent:oklch(0.32 0.08 50);
   --accent-foreground:oklch(0.85 0.14 60);
   --destructive:oklch(0.7 0.19 25);
@@ -421,8 +422,8 @@
   --secondary-foreground:oklch(0.24 0.022 250);
   --secondary-hover:oklch(0.94 0.006 70);
   --muted:oklch(0.965 0.006 70);
-  --muted-foreground:oklch(0.52 0.018 255);
-  --subtle-foreground:oklch(0.65 0.014 255);
+  --muted-foreground:oklch(0.49 0.018 255);
+  --subtle-foreground:oklch(0.49 0.018 255);
   --accent:oklch(0.96 0.04 60);
   --accent-foreground:oklch(0.52 0.17 45);
   --destructive:oklch(0.62 0.21 26);
@@ -1977,6 +1978,11 @@ img,svg { display:block; }
    linha passa a ser só o adorno de 100%, que é o que se quer. */
 .input-group>.input,.input-group>.select,.input-group>.textarea { flex:1 1 0; min-inline-size:0; background:transparent; border:0; border-radius:0; }
 .input-group>.input:focus-visible,.input-group>.select:focus-visible,.input-group>.textarea:focus-visible { outline:none; }
+/* Desativado (lote 1, 20/10/2026): no grupo, quem pinta o estado é a moldura, como no inválido — só o texto recuava, e o
+   fundo e o ícone ficavam iguais. O campo de dentro não recua de novo (seriam 0,25). Só o CAMPO conta: um botão
+   desativado no adorno (o de limpar, sem texto) não desativa o grupo. */
+.input-group:has(> :is(.input,.select,.textarea):disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
+.input-group>.input:disabled,.input-group>.select:disabled,.input-group>.textarea:disabled { opacity:1; }
 /* O adorno não estica nem encolhe, e nunca rouba o clique do campo — a menos que ele PRÓPRIO
    seja clicável, e aí quem devolve o ponteiro é o botão de dentro. */
 .input-group-addon { display:inline-flex; flex:none; align-items:center; gap:var(--space-1); color:var(--subtle-foreground); }
@@ -2082,7 +2088,9 @@ img,svg { display:block; }
    de virar a seta seriam dois idiomas para "isto está aberto". */
 .collapsible { display:grid; }
 .collapsible-trigger { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--control-h-sm); padding:0; border:0; background:transparent; color:var(--foreground); font:inherit; font-weight:var(--weight-medium); text-align:start; cursor:pointer; }
-.collapsible-trigger:hover { color:var(--primary); }
+.collapsible-trigger:hover:not([data-disabled]) { color:var(--primary); }
+/* Desativado (lote 1, 20/10/2026): o motor marca o gatilho com `data-disabled`; ele recua e não acende no hover. */
+.collapsible-trigger[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
 .collapsible-chevron { flex:none; transition:transform var(--duration-fast) var(--ease-standard); }
 .collapsible-trigger[data-panel-open] .collapsible-chevron { transform:rotate(180deg); }
 .collapsible-panel { overflow:hidden; }
@@ -2099,7 +2107,10 @@ img,svg { display:block; }
 /* Form (M1): empilhar campos com respiro. Nada além disso — sem borda, sem fundo, sem largura.
    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); }
+/* `minmax(0, 1fr)` (MNT-33, 21/10/2026): a coluna implícita (`auto`) não fica menor que o conteúdo, e uma tabela larga
+   dentro de um invólucro do app alargava a PÁGINA em vez de rolar na caixa dela (a 640 px, 104 px para o lado). O mesmo
+   no `.data-state` e no `.dialog-body`: as grades que embrulham conteúdo do app. */
+.form { display:grid; grid-template-columns:minmax(0, 1fr); 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); line-height:var(--space-4); }
 /* o erro com 4 de recuo, como o da referência (0.32.0) */
@@ -2203,6 +2214,10 @@ img,svg { display:block; }
 .switch-track:after { --thumb-h:calc(var(--switch-h) - 2 * var(--space-05)); --thumb-w:calc(var(--thumb-h) * 11 / 8); content:""; position:absolute; inset-inline-start:calc(var(--space-05) - var(--border-width)); top:calc(var(--space-05) - var(--border-width)); block-size:var(--thumb-h); inline-size:var(--thumb-w); border-radius:var(--radius-full); background:var(--muted-foreground); transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard); }
 .switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
 .switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--primary-mark); }
+/* DESATIVADO (lote 1, as travas, 20/10/2026 — o check 49 achou): o `<input>` é invisível e quem desenha é a marca,
+   então o `disabled` chegava ao campo e nada mudava na tela. A peça inteira recua, marca e nome, como na referência
+   (o estado de desativado dela vai na raiz do controle, a 0,5). Vale também para as opções de um grupo desativado. */
+.checkbox:has(> input:disabled),.radio:has(> input:disabled),.switch:has(> input:disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
 .range { width:100%; accent-color:var(--primary); }
 /* Slider VERTICAL, no `<input type=range>` NATIVO — sem trocar de motor.
 
@@ -2369,7 +2384,14 @@ img,svg { display:block; }
 .btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,.tabs-secondary .tab[data-active]::after,
 .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,.sidebar-item[aria-current]::after { background:color-mix(in oklab, var(--sidebar-primary) 75%, transparent); }
+.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:var(--sidebar-current-line, color-mix(in oklab, var(--sidebar-primary) 75%, transparent)); }
+/* ADR-0076 (20/10/2026), o Victor olhando a bancada: "não quero ele azul, não pode ser na cor do botão?". No claro da Aurea
+   padrão, o item atual da lateral é o botão primário: o fundo amarelo e a letra cinza-escura dele (8,13:1). O fundo já
+   marca o estado, e o fio de baixo some (`--sidebar-current-line` transparente: regra no `::after` não aceitaria a guarda
+   de tema no fim). Só sem `data-brand` (a `lory` tem a lateral dela) e só no claro (no escuro, a letra amarela continua).
+   Sobre o amarelo, a letra de destaque de DENTRO do item (o selo primário de contagem, um ícone de destaque) é a tinta do
+   botão: o azul sobre o amarelo mede 3,49:1 — o axe da varredura achou, no "12" do exemplo da `Sidebar`. */
+[data-theme="light"] :is(.sidebar-item[aria-current],.doc-nav a.active):not(:where([data-brand],[data-brand] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --sidebar-current-line:transparent; --primary-emphasis:var(--primary-foreground); --sidebar-primary:var(--primary-foreground); background:var(--primary); color:var(--primary-foreground); }
 [data-theme="light"] .is-selected:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
 [data-theme="light"] .btn[aria-pressed="true"]:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .segmented button.active:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
   { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
@@ -2397,9 +2419,14 @@ img,svg { display:block; }
    numa fila, `align-self:flex-start` tiraria o selo do meio; o tamanho definido só desliga o
    esticar, que é o que a coluna faz com um item sem tamanho. */
 .badge-fit { inline-size:fit-content; }
-/* O cheio da marca enche com o acento e escreve com a letra do botão amarelo (`--primary-foreground`): desde a ADR-0073
-   o acento do claro é o próprio amarelo, e a letra de antes (`--background`, clara) media 1,75:1 em cima dele. */
+/* O cheio da marca escreve com a letra do botão amarelo (`--primary-foreground`): na ADR-0073 o acento do claro virou o
+   próprio amarelo, e a letra de antes (`--background`, clara) media 1,75:1 em cima dele. O fundo, na Aurea padrão, é o
+   primário desde a ADR-0076 (a regra logo abaixo). */
 .badge-primary { --badge-accent:var(--primary-emphasis); --badge-on:var(--primary-foreground); color:var(--primary-emphasis); border-color:transparent; background:color-mix(in srgb,var(--primary) 10%,transparent); }
+/* ADR-0076 (20/10/2026): na Aurea padrão a letra de destaque do claro é o AZUL, e o cheio continua o AMARELO — o fundo do
+   selo cheio é o primário, e não o acento (com o acento, sairia a letra cinza no azul, 1,99:1). Só sem `data-brand`, como o
+   contorno lá embaixo: na `lory` do claro o primário com a letra dela mede 3,08:1, e o acento dela já é o fundo certo. */
+.badge-primary:not(:where([data-brand],[data-brand] *)) { --badge-fill:var(--primary); }
 /* TAMANHOS. O md é a base (24px), que não muda — é o que as 103 fichas já usam. */
 .badge-xs { min-height:var(--space-4); padding:0 var(--space-1); border-width:0; }
 .badge-sm { min-height:var(--space-5); padding:0 calc(var(--space-1) + var(--space-05) - var(--border-width)); }
@@ -2485,7 +2512,7 @@ img,svg { display:block; }
    tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
 /* O selo CHEIO de estado é o botão cheio do mesmo tom (ADR-0061): a mesma cor funda e a mesma letra
    (`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, o neutro) segue enchendo com o
-   acento, como antes; a marca enche com o acento e declara só a letra (ADR-0073). */
+   acento, como antes; a marca declara a letra (ADR-0073) e, na Aurea padrão, o fundo é o primário (ADR-0076). */
 .badge-solid { background:var(--badge-fill, var(--badge-accent)); color:var(--badge-on, var(--background)); border-color:transparent; }
 .badge-outline { background:transparent; color:var(--badge-accent); border-color:transparent; }
 /* flat (15/10/2026): o tom de sempre sem a linha em volta — o selo da referência não tem borda em forma nenhuma. A
@@ -2656,7 +2683,7 @@ img,svg { display:block; }
 /* DataState (M3): a região que troca de cara. Ela NÃO desenha nada próprio — só empilha o que
    já existe (esqueleto, alerta, estado vazio, conteúdo) com respiro entre eles. Se ganhar borda
    ou fundo, viram duas superfícies para a mesma coisa — o defeito que a `.table-region` cobrou. */
-.data-state { display:grid; gap:var(--space-3); }
+.data-state { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-3); }
 .skeleton { position:relative; overflow:hidden; border-radius:var(--radius-sm); background:var(--surface-3); }
 .skeleton { animation:skeleton-pulse 1.35s ease-in-out infinite; } @keyframes skeleton-pulse { 50% { opacity:.55; } }
 /* 0.32.0: `animation="none"` para o pulso; e quem pediu menos movimento ao sistema também não o vê. */
@@ -3068,6 +3095,26 @@ button.tag-main { cursor:pointer; }
    é inalcançável por teclado (axe scrollable-region-focusable). Quem escreve esta marcação à
    mão precisa de `tabindex="0"` no <pre> — o componente React já o emite. */
 .code-block { overflow:auto; padding:16px; border:1px solid transparent; border-radius:var(--radius-lg); background:var(--surface-inset); color:var(--muted-foreground); font:12px/1.7 var(--font-code); }
+/* Lote V (20/10/2026): o número da linha e as cores do código (`CodeBlock lineNumbers` e `highlight`). O número é o da
+   referência, medido na página dela: uma coluna de 16 (--space-4), alinhada à direita, a 24 do código (--space-6); ela
+   cresce com os algarismos da última linha (`--code-line-digits`, que o componente escreve), para a coluna não pular
+   na linha 100. A cor é a apagada da Aurea, que se lê (a da referência apaga até ~2:1). O número é DESENHO: não entra
+   no texto copiado (`user-select:none`) nem no leitor de tela (o texto alternativo vazio depois da barra; quem não
+   entende a barra fica com a linha de cima).
+   As cores são as do `CodeEditor` (o `aureaHighlightStyle`), pelos mesmos tokens. Com cor, o texto sem cor é o do
+   tema (`--foreground`), e não o apagado: o apagado fica para o comentário. */
+.code-block-numbered { counter-reset:aurea-linha; }
+.code-block-numbered .code-line::before { counter-increment:aurea-linha; content:counter(aurea-linha); content:counter(aurea-linha) / ""; display:inline-block; min-inline-size:max(var(--space-4), calc(var(--code-line-digits, 2) * 1ch)); margin-inline-end:var(--space-6); color:var(--muted-foreground); text-align:end; -webkit-user-select:none; user-select:none; }
+.code-block-highlighted { color:var(--foreground); }
+.code-block .tok-comment { color:var(--muted-foreground); font-style:italic; }
+/* As cores levam 20% do texto, como o nível do registro, que mora no mesmo fundo (`.log-stream`, ADR-0072): puras, o azul
+   caía a 4,08:1 no claro e o verde a 4,44:1 no escuro (medido no site, 20/10/2026). */
+.code-block .tok-keyword { color:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
+.code-block .tok-string { color:color-mix(in oklab,var(--success-400) 80%,var(--foreground)); }
+.code-block .tok-number { color:color-mix(in oklab,var(--warning-400) 80%,var(--foreground)); }
+.code-block .tok-property { color:var(--foreground); }
+.code-block .tok-function { color:var(--foreground); font-weight:var(--weight-semibold); }
+.code-block .tok-invalid { color:color-mix(in oklab,var(--danger-400) 80%,var(--foreground)); }
 /* Bloco de código COM copiar: a moldura não rola, o <pre> rola por dentro e o gatilho fica
    parado no canto. O comportamento é do core (aurea.js, [data-aurea-copy]); aqui só a pele.
    O check em amarelo é confirmação instantânea — dura 1,5s e volta ao ícone de copiar. */
@@ -3575,7 +3622,7 @@ button.tag-main { cursor:pointer; }
 .dialog-icon-success { background:var(--success-bg); color:var(--success-400); }
 .dialog-icon-warning { background:var(--warning-bg); color:var(--warning-400); }
 .dialog-icon-danger { background:var(--danger-bg); color:var(--danger-400); }
-.dialog-body { --dialog-ring:calc(var(--focus-width) + var(--focus-offset)); display:grid; gap:14px; flex:1 1 auto; min-block-size:0; overflow-y:auto; overscroll-behavior:contain; margin-inline:calc(-1 * var(--dialog-ring)); padding:var(--dialog-ring); color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
+.dialog-body { --dialog-ring:calc(var(--focus-width) + var(--focus-offset)); display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; flex:1 1 auto; min-block-size:0; overflow-y:auto; overscroll-behavior:contain; margin-inline:calc(-1 * var(--dialog-ring)); padding:var(--dialog-ring); color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
 .dialog-header + .dialog-body { margin-block-start:calc(var(--space-2) - var(--dialog-ring)); }
 .dialog-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-2); }
 .dialog-body + .dialog-footer { margin-block-start:calc(var(--space-5) - var(--dialog-ring)); }
@@ -4653,8 +4700,9 @@ button.graph-node-body { cursor:pointer; }
    da "C" dos botões): com a letra de sempre, o verde caía a 3,79:1 no claro e o `success` a 4,15:1 no escuro, dentro do
    cartão. Medido em 16/10/2026: o pior caso passa a 4,79:1. Os outros selos (suave, plano) têm fundo próprio e não mudam. */
 .badge-outline { background-color:color-mix(in oklab,var(--badge-accent) 16%,transparent); color:color-mix(in oklab,var(--badge-accent) 80%,var(--foreground)); }
-/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio amarelo, a mesma
-   do selo suave e do botão de contorno da marca — misturado ao texto, ele virava mostarda (2,36:1) só nesta peça. A
+/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio acento (o amarelo no
+   escuro; o azul no claro, desde a ADR-0076), a mesma do selo suave e do botão de contorno da marca — misturado ao texto,
+   o amarelo virava mostarda (2,36:1) só nesta peça. A
    referência principal usa a mesma letra no suave e no contorno. Só sem `data-brand`: na `lory` do claro, sem a
    mistura, a letra cairia de 5,56 para 4,42:1. */
 .badge-primary.badge-outline:not(:where([data-brand],[data-brand] *)) { color:var(--badge-accent); }

package/package.json

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