@aurea-uds/core 0.2.0 → 0.3.0

package/dist/aurea.css

@@ -286,6 +286,20 @@ button,a,[role="button"],input,textarea,select { outline:none; }
 :focus-visible { outline:2px solid var(--focus-strong); outline-offset:2px; box-shadow:none; border-color:var(--focus-strong)!important; }
 button { color:inherit; }
 a { color:var(--primary); text-underline-offset:3px; }
+/* LINK DE TEXTO NO TEMA CLARO — reprovação de WCAG AA que estava latente desde sempre, e que só
+   apareceu quando o catálogo ganhou a primeira página com link em corpo de texto (a do `Prose`,
+   item L5). Medido em 15/08/2026 na página gerada: o amarelo puro sobre a superfície clara dá
+   **1,68:1**, contra os 4,5:1 do AA. Com a correção, **6,92:1**.
+   NÃO é decisão de aparência nova, e é por isso que entra sem interromper o lote: a fórmula, o
+   guarda de tema e a razão já estão neste arquivo, escritos para o `.btn-link-primary` (linha
+   ~247) e para a linguagem de selecionado — "no tema claro o amarelo puro como texto dá 1.6:1,
+   longe dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar". O bare `<a>`
+   simplesmente nunca tinha recebido o mesmo tratamento.
+   `:not([class])` é a parte cirúrgica, e não zelo: sem ele esta regra (0,2,1) passaria por cima
+   de `.btn` (0,1,0), de `.doc-nav a` e de `.toc a`, trocando a cor de componentes que já resolvem
+   a própria. Assim ela alcança exatamente o que está quebrado — o link que o conteúdo escreve —
+   e nenhum outro. Limite declarado: link de conteúdo que carregue classe própria é do consumidor. */
+[data-theme="light"] a:not([class]) { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 img,svg { display:block; }
 /* O `display:none` que o browser dá pro atributo `hidden` vem da folha do UA e PERDE de
    qualquer `display:` de classe nossa — o painel some do fluxo de acessibilidade mas
@@ -475,8 +489,14 @@ img,svg { display:block; }
 /* 04. COMPONENTES PRIMITIVOS                                                  */
 /* ========================================================================== */
 .btn { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--control-h-md); padding:0 15px; border:1px solid var(--btn-border); border-radius:var(--radius-control); background:var(--btn-bg); color:var(--btn-fg); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--leading-none); text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast),opacity var(--duration-fast); }
-.btn:hover:not(:disabled) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
-.btn:disabled { opacity:.45; cursor:not-allowed; }
+.btn:hover:not(:disabled):not([aria-disabled="true"]) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
+/* Duas formas de "não dá para fazer isto", e a diferença é QUEM alcança a explicação.
+   `:disabled` tira o controle da ordem de foco — medido em 13/08/2026: quem usa teclado nunca
+   chega nele, então uma dica pendurada ali não é lida por ninguém. O embrulho de <span> que a
+   referência do MUI documenta resolve o ponteiro e NÃO resolve o teclado (o span nasce com
+   tabIndex -1, medido). `[aria-disabled="true"]` mantém o controle focável e inerte — é ele
+   que se usa quando existe um PORQUÊ a dizer. A pele é a mesma; o que muda é o alcance. */
+.btn:disabled,.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
 /* Cinco alturas, todas de token de densidade (autorizado pelo Victor em 24/07/2026). O raio
    é pill em TODAS — o tamanho muda altura e respiro, nunca a forma. Em ponteiro grosso o
    mínimo de 44px lá embaixo pega o xs e o sm, então alvo pequeno não vira alvo impossível. */
@@ -487,22 +507,22 @@ img,svg { display:block; }
 /* Largura total: para rodapé de formulário e tela estreita. Só a largura muda. */
 .btn-block { width:100%; }
 .btn-primary { --btn-bg:var(--primary); --btn-fg:var(--primary-foreground); --btn-border:transparent; }
-.btn-primary:hover:not(:disabled) { --btn-bg:var(--primary-hover); --btn-border:transparent; }
+.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--primary-hover); --btn-border:transparent; }
 .btn-secondary { --btn-bg:var(--secondary); --btn-fg:var(--secondary-foreground); --btn-border:transparent; }
-.btn-secondary:hover:not(:disabled) { --btn-bg:var(--secondary-hover); --btn-border:transparent; }
+.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--secondary-hover); --btn-border:transparent; }
 .btn-outline { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:var(--border-strong); }
-.btn-outline:hover:not(:disabled) { --btn-bg:var(--accent); }
+.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--accent); }
 .btn-ghost { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; }
-.btn-ghost:hover:not(:disabled) { --btn-bg:var(--accent); --btn-fg:var(--accent-foreground); }
+.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--accent); --btn-fg:var(--accent-foreground); }
 .btn-danger { --btn-bg:var(--destructive); --btn-fg:var(--destructive-foreground); --btn-border:transparent; }
-.btn-danger:hover:not(:disabled) { --btn-bg:var(--danger-400); }
+.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--danger-400); }
 /* Destrutivo em OUTRAS hierarquias: apagar não é sempre a ação principal da tela. O tom é o
    mesmo (--destructive); o que muda é o peso. No claro o vermelho puro como texto não chega
    a 4.5:1, então aprofunda com --foreground — mesmo tratamento do amarelo. */
 .btn-danger-outline { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:var(--destructive); }
-.btn-danger-outline:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
+.btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
 .btn-danger-ghost { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:transparent; }
-.btn-danger-ghost:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
+.btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
 [data-theme="light"] .btn-danger-outline,[data-theme="light"] .btn-danger-ghost,[data-theme="light"] .btn-link-danger { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
 /* LINK: aparência de texto, sem cápsula e sem altura de controle — o sublinhado é o que diz
    que é clicável, então ele existe desde o repouso (revelar no hover esconde a affordance).
@@ -511,7 +531,7 @@ img,svg { display:block; }
    medido no catálogo, o "Learn more" é ação isolada dentro de um flex, não link no meio de
    prosa, e media 67×13px. O texto continua onde está — a caixa cresce centrada nele. */
 .btn-link { height:auto; min-height:24px; padding:0; gap:6px; border:0; border-radius:var(--radius-sm); --btn-bg:transparent; --btn-fg:var(--foreground); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
-.btn-link:hover:not(:disabled) { text-decoration-thickness:2px; }
+.btn-link:hover:not(:disabled):not([aria-disabled="true"]) { text-decoration-thickness:2px; }
 .btn-link-primary { --btn-fg:var(--primary); }
 [data-theme="light"] .btn-link-primary { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 .btn-link-danger { --btn-fg:var(--destructive); }
@@ -530,7 +550,7 @@ img,svg { display:block; }
    "ativa", porque ele também anuncia "página atual" pro leitor de tela. O traço é
    ::after, pill, alinhado ao padding do texto; posição pelo eixo bloco (não espelha RTL). */
 .btn-nav { --btn-bg:transparent; --btn-fg:var(--muted-foreground); --btn-border:transparent; }
-.btn-nav:hover:not(:disabled) { --btn-fg:var(--foreground); }
+.btn-nav:hover:not(:disabled):not([aria-disabled="true"]) { --btn-fg:var(--foreground); }
 .btn-icon { width:var(--control-h-md); padding:0; border-radius:var(--radius-md); }
 .btn-icon.btn-xs { width:var(--control-h-xs); border-radius:var(--radius-sm); }
 .btn-icon.btn-sm { width:var(--control-h-sm); border-radius:var(--radius-sm); } .btn-icon.btn-lg { width:var(--control-h-lg); border-radius:var(--radius-md); }
@@ -590,6 +610,10 @@ img,svg { display:block; }
 /* HoverCard (Lote 1) reusa `.popover`; só limita a largura, porque prévia é conteúdo, não rótulo. */
 .hover-card { max-width:min(20rem,calc(100vw - var(--space-8))); }
 .input-wrap { position:relative; } .input-wrap>.icon { position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--subtle-foreground); pointer-events:none; } .input-wrap .input { padding-inline-start:40px; }
+/* 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); }
 .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; }
@@ -688,6 +712,10 @@ img,svg { display:block; }
 @media (max-width:640px) { .banner { grid-template-columns:auto minmax(0,1fr); } .banner>:last-child { grid-column:2; justify-self:start; } }
 .progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
 .progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
+/* 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); }
 .skeleton { position:relative; overflow:hidden; border-radius:7px; background:var(--surface-3); }
 .skeleton { animation:skeleton-pulse 1.35s ease-in-out infinite; } @keyframes skeleton-pulse { 50% { opacity:.55; } }
 
@@ -731,7 +759,16 @@ img,svg { display:block; }
    tabela; `DataGrid` embrulha em `.table-wrap`; e as 3 tabelas da página legada estão todas
    dentro de `.table-wrap`. Nenhuma <table> do repositório fica descoberta — o gate de pixel é
    quem prova, e ele tem de acusar ZERO mudança nas superfícies de tabela. */
-.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
+/* `.table-region` entrou nesta regra em 13/08/2026, e a linha acima ("o gate tem de acusar ZERO
+   mudança nas superfícies de tabela") vale para o ESCOPO daquele lote, não para sempre: aqui a
+   mudança de superfície é o pedido. O `Table` embrulhava em `.table-region`, que tinha só
+   `overflow` e `--radius-lg` — sem borda e sem fundo. Resultado na tela: a tabela aparecia solta
+   na página enquanto o `DataGrid`, do lado, tinha a caixa flutuante da marca. Duas peles para a
+   mesma coisa, e a do componente mais simples era a errada.
+   Somar o seletor em vez de copiar os valores: copiar deixaria duas listas para manter em sincronia,
+   que é como as duas peles divergiram. O que continua só do `.table-region` é o foco — ele é
+   `tabIndex=0` (região rolável precisa ser alcançável pelo teclado) e o `.table-wrap` não é. */
+.table-wrap,.table-region { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
 .table,.table-wrap table { width:100%; border-collapse:collapse; min-width:720px; }
 .table th,.table td,.table-wrap th,.table-wrap td { height:var(--row-h); padding:0 14px; text-align:start; border-bottom:1px solid var(--border); }
 .table th,.table-wrap th { color:var(--subtle-foreground); background:var(--surface-2); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; }
@@ -760,9 +797,27 @@ img,svg { display:block; }
 /* 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>. */
-.data-list { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--space-2) var(--space-6); margin:0; }
-.data-list dt { color:var(--muted-foreground); }
+/* A coluna do TERMO era `max-content`, que não encolhe nunca: um `dt` comprido empurrava a
+   PÁGINA para fora em telas estreitas — medido em 16/08/2026 a 320px, quando a página de hooks
+   estreou termos de frase inteira e a varredura acusou +179px de rolagem lateral. `auto` sizes
+   igual quando há espaço (por isso nenhuma baseline mudou) e cai para min-content quando não há,
+   deixando o termo quebrar em vez de arrastar o documento. O defeito era do COMPONENTE, não da
+   página nova: o `DataList` é publicado, e quem escrevesse um termo longo levava o mesmo.
+   `auto` foi TENTADO primeiro e não resolveu — medido, não suposto: a trilha `auto` tem
+   max-content como máximo e não encolhe abaixo dele quando o contêiner aperta, e a sobra caiu de
+   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; }
+/* 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
+   `.log-line` já usam aqui. A regra mora DEPOIS da base de propósito: escrita antes, ela não
+   valia nada — mídia não soma especificidade, então a base vencia por vir por último. Foi
+   exatamente o que aconteceu na primeira tentativa, e é a armadilha que o comentário do
+   `.banner` lá em cima já registrava. */
+@media (max-width:640px) { .data-list { grid-template-columns:minmax(0,1fr); } }
 /* Timeline: o trilho existia e o PONTO não — `.timeline-dot` media 0×0 (achado A13), então a
    linha do tempo saía com a régua e sem as marcas, e o <ol> ainda mostrava a numeração do
    navegador. Agora os dois derivam do MESMO token: o trilho fica a meio diâmetro do ponto, e
@@ -880,7 +935,7 @@ img,svg { display:block; }
 .calendar-months { position:relative; }
 .calendar nav { position:absolute; inset-block-start:0; inset-inline:0; display:flex; justify-content:space-between; }
 .calendar nav button { display:inline-flex; align-items:center; justify-content:center; width:var(--control-h-sm); height:var(--control-h-sm); padding:0; border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); cursor:pointer; }
-.calendar nav button:hover:not(:disabled) { background:var(--secondary); color:var(--foreground); }
+.calendar nav button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); color:var(--foreground); }
 .calendar nav button:disabled { opacity:.4; cursor:not-allowed; }
 .calendar nav svg { width:var(--icon-sm); height:var(--icon-sm); fill:currentColor; }
 .calendar-caption { display:flex; align-items:center; justify-content:center; height:var(--control-h-sm); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
@@ -893,7 +948,7 @@ img,svg { display:block; }
 .calendar th { padding:0 0 var(--space-1); text-align:center; color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-regular); }
 .calendar td { padding:0; text-align:center; }
 .calendar td button { display:flex; align-items:center; justify-content:center; width:var(--control-h-md); height:var(--control-h-md); border:0; border-radius:var(--radius-control); background:transparent; color:var(--foreground); font-size:var(--text-sm); font-variant-numeric:tabular-nums; cursor:pointer; }
-.calendar td button:hover:not(:disabled) { background:var(--secondary); }
+.calendar td button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); }
 .calendar td[data-today] button { font-weight:var(--weight-medium); box-shadow:inset 0 0 0 1px var(--border-strong); }
 .calendar td[data-selected] button { background:var(--primary); color:var(--primary-foreground); font-weight:var(--weight-medium); box-shadow:none; }
 .calendar td[data-outside] button { color:var(--subtle-foreground); }
@@ -946,6 +1001,151 @@ img,svg { display:block; }
 .media-time { padding:0 7px; color:var(--media-muted); font:var(--text-xs) var(--font-code); white-space:nowrap; }
 .media-volume { width:82px; accent-color:var(--primary); }
 
+/* IMAGEM (PLANO-1.0, item L4). A caixa é reservada ANTES do byte chegar — é a mesma razão que o
+   comentário do `--media-ar` acima registra: sem proporção, a imagem mede zero até carregar e a
+   página salta quando ela chega (CLS). O fundo é a superfície do esqueleto, e o bitmap a cobre ao
+   pintar — marcador de carregamento sem uma linha de JavaScript.
+
+   ⚠ NÃO declare `aspect-ratio` aqui, e isto foi MEDIDO em 15/08/2026, não deduzido. A primeira
+   versão desta regra tinha `aspect-ratio:var(--image-ratio,auto)`, e o fallback `auto` PASSA POR
+   CIMA do `aspect-ratio: auto <width> / <height>` que o navegador deriva dos atributos do
+   elemento. Resultado medido numa caixa de 400px: com `width=300 height=200` e sem a prop `ratio`,
+   a imagem saía **400×0** — ou seja, a regra escrita para impedir o salto de layout produzia
+   exatamente o salto. Sem a declaração, o mesmo caso reserva 400×267. Quem tem proporção declarada
+   recebe `aspect-ratio` inline, do componente; quem não tem fica com o comportamento do navegador,
+   que já é o certo. */
+.image { display:block; width:100%; height:auto; object-fit:cover; border-radius:var(--radius-lg); background:var(--surface-3); }
+.image-contain { object-fit:contain; background:transparent; }
+.image-broken { display:grid; place-items:center; color:var(--muted-foreground); }
+
+/* GALERIA (PLANO-1.0, item L2). A grade se adapta sozinha — `auto-fill` com um mínimo, e não um
+   número de colunas —, porque quem sabe quanta largura existe é o contêiner, não o componente.
+   `--gallery-min` é a válvula, no idioma do `--carousel-slide` e do `--qr-size`.
+   O SELECIONADO NÃO INVENTA LINGUAGEM: o ladrilho recebe `.is-selected`, a mesma classe da aba
+   ativa, do item de lateral e do botão alternado — cápsula elevada, rótulo na cor da marca e o
+   fio amarelo embaixo. É a regra "uma linguagem só" deste arquivo, e por isso aqui não há uma
+   segunda maneira de dizer "este está escolhido". O recuo existe para a cápsula aparecer: com
+   `padding:0` o fundo do selecionado fica exatamente sob a foto e não se vê.
+   Foco também não tem regra própria: a global do topo deste arquivo já desenha o anel, e ele é
+   de cor DIFERENTE da seleção — senão focar e escolher viram o mesmo sinal. */
+.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--gallery-min,8rem),1fr)); gap:var(--space-3); margin:0; padding:0; list-style:none; }
+.gallery-item { min-width:0; }
+.gallery-tile { display:grid; gap:var(--space-1); width:100%; padding:var(--space-1); border:0; border-radius:var(--radius-lg); font:inherit; text-align:start; cursor:pointer; }
+/* `:not(.is-selected)` e não uma regra de selecionado própria, e a diferença foi MEDIDA em
+   15/08/2026: `.gallery-tile` e `.is-selected` têm a MESMA especificidade, e a do ladrilho vem
+   depois no arquivo — então `background:transparent` matava a cápsula da linguagem da casa e o
+   selecionado saía só com o fio amarelo. Reescrever a cápsula aqui seria a segunda cópia da
+   linguagem "uma linguagem só" existe para impedir; tirar o fundo só de quem NÃO está escolhido
+   deixa a regra de lá governar sem competição. O fundo de botão do navegador precisa morrer de
+   qualquer forma — ele é `buttonface`, não transparente. */
+.gallery-tile:not(.is-selected) { background:transparent; color:var(--muted-foreground); }
+.gallery-caption { font-size:var(--text-sm); }
+
+/* PROSA (PLANO-1.0, item L5). É a PELE do texto longo, não o parser — quem transforma Markdown em
+   elementos é o consumidor. Aqui só se decide como esses elementos se leem.
+
+   ⚠ TODA regra abaixo é ESCOPADA em `.prose`, e isso não é estilo de escrita: é a trava do item, e
+   ela tem uma conta paga atrás. As cinco regras de tabela deste arquivo eram de ELEMENTO e valiam
+   para toda <table> do documento — o calendário nasceu com 720px de largura por causa disso, e
+   nenhum gate viu, porque os checks 15 e 18 comparam CLASSE e seletor de elemento não tem
+   nenhuma. Escrever `blockquote{...}` aqui repetiria o Lote 4 com outro elemento.
+
+   O tamanho sobe para `--text-base`: o corpo do documento é `--text-md` (14px), que serve a
+   interface e é pequeno para ler artigo. A entrelinha é `--leading-relaxed`, que existe no token
+   e não tinha uso. A MEDIDA de linha é `--prose-measure`, no idioma das outras válvulas.
+
+   A FONTE não muda: `--font-editorial` (IBM Plex Serif) existe e está sem uso, e usá-la aqui
+   seria decisão de APARÊNCIA que o BUILDING.md §3.1 manda levar ao Victor com imagem do antes e
+   do depois. Quem quiser serifa na prosa aponta a variável; a Aurea não decide isso sozinha. */
+.prose { max-width:var(--prose-measure,68ch); font-size:var(--text-base); line-height:var(--leading-relaxed); }
+.prose > * + * { margin-block-start:var(--space-4); }
+.prose > h2,.prose > h3,.prose > h4 { margin-block-start:var(--space-8); }
+.prose h1,.prose h2,.prose h3,.prose h4 { line-height:var(--leading-tight); font-weight:var(--weight-semibold); }
+.prose h1 { font-size:var(--text-3xl); }
+.prose h2 { font-size:var(--text-2xl); }
+.prose h3 { font-size:var(--text-xl); }
+.prose h4 { font-size:var(--text-lg); }
+.prose blockquote { margin-inline:0; padding-inline-start:var(--space-4); border-inline-start:2px solid var(--border-strong); color:var(--muted-foreground); }
+.prose ul,.prose ol { padding-inline-start:var(--space-6); }
+.prose li + li { margin-block-start:var(--space-2); }
+/* `0.9em` e não um token: código dentro do texto se mede em relação à LINHA em que está, e um
+   valor absoluto o deixaria maior que o parágrafo dentro de um h2. É o mesmo motivo pelo qual o
+   `.badge` tem `line-height:1` — geometria que depende do contexto se escreve relativa. */
+.prose code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:0.9em; }
+.prose pre { overflow-x:auto; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-2); }
+.prose pre code { padding:0; border-radius:0; background:transparent; font-size:var(--text-sm); }
+.prose img { max-width:100%; height:auto; border-radius:var(--radius-lg); }
+.prose hr { border:0; border-block-start:1px solid var(--border); }
+.prose figcaption { color:var(--muted-foreground); font-size:var(--text-sm); }
+/* A tabela da prosa NÃO é a tabela de dados: sem `min-width:720px`, sem faixa de cabeçalho em
+   caixa alta e sem hover de linha. Uma tabela de três colunas no meio de um artigo não é uma
+   grade — forçá-la a 720px é exatamente o defeito que o calendário sofreu. */
+.prose table { width:100%; border-collapse:collapse; font-size:var(--text-md); }
+.prose th,.prose td { padding:var(--space-2) var(--space-3); text-align:start; border-block-end:1px solid var(--border); }
+.prose th { color:var(--subtle-foreground); font-weight:var(--weight-semibold); }
+
+/* LISTA ORDENÁVEL (PLANO-1.0, item L3). Duas regras aqui não são decoração e quebram
+   comportamento se saírem:
+   • `touch-action:none` na alça — sem ela o navegador rola a página em vez de deixar arrastar, e
+     o componente não funciona em toque nenhum. É o par obrigatório do `setPointerCapture`;
+   • `cursor:grab`/`grabbing`, que é a única affordance de que aquilo se arrasta.
+   O item PEGO se marca com `data-grabbed`, e o sinal é ELEVAÇÃO e borda — não cor sozinha
+   (WCAG 1.4.1), e não a cápsula de `.is-selected`: pego e escolhido são coisas diferentes e não
+   podem falar a mesma língua. */
+.sortable-list { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+.sortable-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); }
+.sortable-item[data-grabbed] { border-color:var(--border-strong); box-shadow:var(--shadow-lg); }
+.sortable-handle { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); cursor:grab; touch-action:none; }
+.sortable-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
+.sortable-label { min-width:0; }
+
+/* EDITOR POR BLOCOS (PLANO-1.0, item N1). A Aurea é dona da MOLDURA; o texto rico de dentro é do
+   consumidor — ADR-0025, e o comentário do `inputs.tsx` traz a medição inteira.
+   Duas regras aqui são COMPORTAMENTO e não enfeite, as mesmas da lista ordenável, porque o
+   protocolo de arrasto é o mesmo (`useReorder`):
+   • `touch-action:none` na alça — sem ela o navegador rola a página em vez de deixar arrastar, e
+     o componente não funciona em toque nenhum. É o par obrigatório do `setPointerCapture`;
+   • `cursor:grab`/`grabbing`, a única affordance de que aquilo se arrasta.
+   `min-width:0` no corpo NÃO é enfeite tampouco: sem ele um filho largo (imagem, tabela, bloco de
+   código) estoura a coluna do grid em vez de encolher, e a página ganha rolagem lateral — que é
+   exatamente o que o `catalog-sweep` reprova.
+   O raio é `--radius-lg` e não `--radius-card`: bloco é LINHA de uma lista, no mesmo idioma do
+   `.sortable-item`, e não um cartão flutuante. Sai da identidade que já existe, sem decisão de
+   aparência nova. O bloco PEGO se marca com `data-grabbed`, e o sinal é ELEVAÇÃO e borda — não
+   cor sozinha (WCAG 1.4.1). */
+.block-editor { display:grid; gap:var(--space-3); margin:0; padding:0; list-style:none; }
+.block-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); }
+.block-item[data-grabbed] { border-color:var(--border-strong); box-shadow:var(--shadow-lg); }
+.block-rail { display:grid; grid-auto-rows:min-content; gap:var(--space-1); }
+.block-handle,.block-remove { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); }
+.block-handle { cursor:grab; touch-action:none; }
+.block-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
+.block-body { min-width:0; }
+
+/* CARROSSEL (PLANO-1.0, item L1). A pele É o motor: o encaixe, a rolagem por toque, a inércia e
+   as setas de teclado saem de `scroll-snap` num contêiner nativo — o React só descobre em qual
+   slide se está. Por isso estas regras não são decoração, e apagá-las quebra comportamento.
+   `--carousel-slide` é a válvula que faz o caso `multiple` da referência sem uma prop: quantos
+   aparecem por vez é decisão de layout da página, no idioma do `--qr-size` e do `--media-h`.
+   `scroll-behavior:smooth` mora AQUI e não no JavaScript de propósito: `scrollBy` sem `behavior`
+   obedece ao valor computado, e a regra global de `prefers-reduced-motion` deste arquivo já o
+   derruba para `auto` — quem pediu menos movimento recebe menos movimento, sem código novo. */
+.carousel { display:grid; gap:var(--space-3); }
+.carousel-track { display:flex; gap:var(--space-3); overflow-x:auto; overflow-y:hidden; scroll-snap-type:inline mandatory; scroll-behavior:smooth; overscroll-behavior-inline:contain; scrollbar-width:none; }
+.carousel-track::-webkit-scrollbar { width:0; height:0; }
+/* Sem regra de foco própria: a global do topo deste arquivo já dá o anel, e ela usa
+   `--focus-strong` — que é `--primary` no escuro e `--brand-yellow-foreground` no claro. A versão
+   anterior desta linha fixava `--primary` nos dois e teria trocado a cor do foco num deles. */
+.carousel-slide { flex:0 0 var(--carousel-slide,100%); min-width:0; scroll-snap-align:start; }
+.carousel-controls { display:flex; align-items:center; justify-content:center; gap:var(--space-2); }
+.carousel-dots { display:flex; align-items:center; gap:var(--space-1); }
+/* 24×24 de ALVO com 8×8 de desenho: abaixo disso é reprovação do WCAG 2.2 AA (2.5.8), e uma fila
+   de pontos é onde esse erro nasce. O ponto vem do ::before para não custar um elemento nem uma
+   classe a mais — o alvo é o botão inteiro, o desenho é o miolo. */
+.carousel-dot { width:var(--space-6); height:var(--space-6); display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
+.carousel-dot::before { content:""; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:var(--border); }
+.carousel-dot[aria-current="true"]::before { background:var(--primary); }
+
 /* ========================================================================== */
 /* 08. ÍCONES                                                                  */
 /* ========================================================================== */
@@ -957,10 +1157,28 @@ img,svg { display:block; }
 .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>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
+   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); }
 .drawer-wrap { position:fixed; inset:0; z-index:var(--z-drawer); display:none; background:var(--overlay); } .drawer-wrap.open { display:block; }
 .drawer-backdrop { position:fixed; inset:0; z-index:var(--z-drawer); background:var(--overlay); }
 .drawer { position:fixed; top:0; bottom:0; z-index:var(--z-drawer); width:min(480px,92vw); padding:24px; background:var(--surface-1); box-shadow:var(--shadow-lg); overflow:auto; } .drawer-right { right:0; border-left:1px solid var(--border); } .drawer-left { left:0; border-right:1px solid var(--border); }
 .toast-stack { position:fixed; inset-inline-end:22px; bottom:22px; z-index:var(--z-toast); width:min(360px,calc(100vw - 44px)); display:flex; flex-direction:column; gap:10px; } .toast { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); transition:opacity .28s var(--ease-standard), transform .28s var(--ease-emphasized); } .toast>:first-child { flex:1; min-width:0; } .toast-text { display:flex; flex-direction:column; gap:2px; min-width:0; } .toast[data-starting-style],.toast[data-ending-style] { opacity:0; transform:translateY(12px); }
+/* As quatro faces do `AureaToastType`, escritas em 16/08/2026 — elas NÃO existiam, e o tipo
+   publicado não pintava nada. O `system.tsx` emite `toast-${t.type}` desde sempre; classe por
+   template é o ponto CEGO do check 18, que só enxerga classe literal — o mesmo defeito que o
+   `log-${level}` já tinha tido. Varridos os 18 padrões dinâmicos do pacote React: este era o
+   ÚNICO órfão (o `ev-${e.id}` do agents.tsx é `id`, não classe).
+   Mecanismo REUSADO do .alert/.banner, não inventado: borda tingida + fundo semântico. Vêm
+   DEPOIS da base `.toast` de propósito — mesma especificidade, a última regra vence, e é a
+   armadilha que o comentário do .banner já registrava lá em cima. */
+.toast-info { border-color:color-mix(in srgb,var(--info-400) 38%,var(--border)); background:var(--info-bg); }
+.toast-success { border-color:color-mix(in srgb,var(--success-400) 38%,var(--border)); background:var(--success-bg); }
+.toast-warning { border-color:color-mix(in srgb,var(--warning-400) 38%,var(--border)); background:var(--warning-bg); }
+.toast-danger { border-color:color-mix(in srgb,var(--danger-400) 38%,var(--border)); background:var(--danger-bg); }
 /* CommandPaletteShell (Fase 11, achado A13). A superfície já existia aqui sob o nome
    `.command` — e `.command` é chrome da página de docs manual: nenhum componente React a
    emite. Ela passava no check 15 por ACIDENTE, porque o rótulo padrão "Type a command…" põe
@@ -977,6 +1195,18 @@ img,svg { display:block; }
 .menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 10px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--foreground); font:inherit; text-align:start; cursor:pointer; }
 .menu-item[data-highlighted],.menu-item:hover:not([data-disabled]) { background:var(--surface-3); outline:none; }
 .menu-item[data-disabled] { opacity:.5; cursor:not-allowed; }
+/* CommandPalette (M6): a lista dentro da paleta. Reusa `.menu` e `.menu-item` — a paleta nao
+   inventa uma segunda pele de lista, que e o defeito que a `.table-region` cobrou caro. O que se
+   acrescenta e o teto de altura (a lista rola, a caixa nao cresce sem fim) e a linha do item,
+   que tem icone, rotulo que se estica e atalho no fim.
+   DEPOIS do `.menu-item` de proposito: as duas regras tem a MESMA especificidade, entao quem vem
+   por ultimo vence. Escrita antes, a grade de tres colunas era apagada pelo `display:flex` do
+   menu — medido em 13/08/2026, e o gate de pele foi quem pegou. */
+.command-positioner { inline-size:var(--anchor-width); }
+.command-list { max-height:min(50vh,360px); overflow-y:auto; overscroll-behavior:contain; }
+.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; }
+
 .menu-sep { height:1px; margin:6px 4px; background:var(--border); border:0; }
 /* Combobox: reaproveita .menu/.menu-item; só dimensionamento e a coluna do check são próprios.
    --anchor-width e --available-height vêm do positioner do Base UI. */
@@ -993,6 +1223,10 @@ img,svg { display:block; }
 .combobox-multi:hover { border-color:var(--border); }
 .combobox-multi:focus-within { outline:2px solid var(--focus-strong); outline-offset:2px; border-color:var(--focus-strong); }
 .combobox-multi>.combobox-actions { position:static; inset-inline-end:auto; }
+/* o campo de chips não é `.input`, então a regra de :disabled dos campos não o alcança. Quem
+   marca aqui é o `data-disabled` que o Base UI põe no InputGroup a partir do estado da Root. */
+.combobox-multi[data-disabled] { opacity:.5; cursor:not-allowed; }
+.combobox-multi[data-disabled] .combobox-chip-input { cursor:not-allowed; }
 .combobox-chips { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-width:0; }
 .combobox-chip { display:inline-flex; align-items:center; gap:var(--space-1); padding-block:var(--space-1); padding-inline:var(--space-3) var(--space-1); background:var(--secondary); color:var(--foreground); border-radius:var(--radius-control); font-size:var(--text-sm); }
 .combobox-chip-remove { display:inline-flex; padding:0; border:0; background:transparent; color:var(--muted-foreground); border-radius:var(--radius-full); cursor:pointer; }
@@ -1380,7 +1614,9 @@ button.graph-node-body { cursor:pointer; }
 
 /* Aurea v1.7 stabilization patch — visual design unchanged. */
 .badge-running{background:var(--success-bg);color:var(--success-400);border-color:color-mix(in oklab,var(--success-400) 32%,transparent)}
-.table-region{overflow:auto;outline:none;border-radius:var(--radius-lg)}
+/* superfície (overflow, borda, fundo, raio) mora junto com a do `.table-wrap` lá em cima — aqui
+   fica só o que é DESTA região: ela é focável, e o anel dela é o box-shadow abaixo. */
+.table-region{outline:none}
 .table-region:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 38%,transparent)}
 /* CONTAINER QUERY, e não breakpoint de viewport — Parte D, item D3 (08/08/2026).
    Era `@media (max-width:400px)`, o último dos seis legados do achado M13. Trocar por um degrau

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The Aurea UDS stylesheet and its vanilla behaviour. Import @aurea-uds/fonts/css before this.",
   "keywords": ["aurea", "design-system", "css", "design-tokens"],
   "license": "Apache-2.0",