@aurea-uds/core 0.8.13 → 0.9.0

package/dist/aurea.css

@@ -42,6 +42,7 @@
   --radius-control:999px;
   --radius-full:var(--radius-control);
   --border-width:1px;
+  --opacity-disabled:0.5;
   --shadow-md:0 16px 42px rgba(0,0,0,0.28);
   --shadow-lg:0 28px 80px rgba(0,0,0,0.42);
   --duration-fast:120ms;
@@ -469,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
@@ -476,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                                                */
@@ -938,6 +953,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
@@ -1122,7 +1139,7 @@ img,svg { display:block; }
 .input,.textarea,.select { width:100%; min-width:0; block-size:var(--step-h,var(--control-h-md)); padding-block:0; padding-inline:var(--step-field-px,13px); color:var(--foreground); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast); }
 .input:hover,.textarea:hover,.select:hover { border-color:var(--border); }
 .input::placeholder,.textarea::placeholder { color:var(--subtle-foreground); }
-.input:disabled,.textarea:disabled,.select:disabled { opacity:.5; cursor:not-allowed; }
+.input:disabled,.textarea:disabled,.select:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
 /* O `padding-inline` daqui tem de LER a variável também, e com o próprio padrão: a base do
    textarea vem DEPOIS da regra compartilhada e a sobrescrevia, congelando o padding em 14px nos
    três degraus. Medido em 22/08/2026 contra o estado anterior — era 12/14/16 e virou 14/14/14.
@@ -1158,7 +1175,7 @@ img,svg { display:block; }
    descrevendo um comportamento que não é o que acontece. */
 .number-field-scrub-vertical { cursor:ns-resize; }
 .number-field-scrub:hover { background:var(--surface-hover); color:var(--foreground); }
-.number-field-scrub[data-disabled] { opacity:.5; cursor:not-allowed; }
+.number-field-scrub[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
 /* O cursor virtual é PORTALADO para o <body> — o ponteiro do sistema fica escondido pelo Pointer
    Lock durante o arraste, e este elemento é o que a pessoa vê no lugar dele. Portalado, ele sai
    de qualquer contexto de empilhamento local, então precisa do degrau de overlay para não ficar
@@ -1419,6 +1436,10 @@ img,svg { display:block; }
    badge com ícone fica mais alto que o badge de texto na mesma fila. 16px + 3+3 de padding
    + 1+1 de borda = 24px exatos: com ícone ou sem, mede o mesmo. */
 .badge .icon { width:var(--icon-sm); height:var(--icon-sm); }
+/* fit="content" (R-01): o tamanho do texto mesmo numa coluna. `fit-content` e não `align-self`:
+   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; }
 .badge-primary { --badge-accent:var(--primary-emphasis); color:var(--primary-emphasis); border-color:var(--primary-outline); background:color-mix(in srgb,var(--primary) 10%,transparent); }
 /* 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; }
@@ -1512,6 +1533,8 @@ 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-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.
@@ -2033,11 +2056,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); }
@@ -2082,7 +2114,7 @@ img,svg { display:block; }
 .menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
 .menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); 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; }
+.menu-item[data-disabled] { opacity:var(--opacity-disabled); 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,
@@ -2161,7 +2193,7 @@ img,svg { display:block; }
 .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] { opacity:var(--opacity-disabled); 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); }

package/package.json

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