@aurea-uds/core 0.24.1 → 0.27.0

package/dist/aurea.css

@@ -47,6 +47,7 @@
   --focus-width:2px;
   --focus-offset:2px;
   --opacity-disabled:0.5;
+  --shadow-sm:0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.06);
   --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;
@@ -129,53 +130,54 @@
   --tracking-widest:0.12em;
 }
 [data-theme="dark"]{
-  --background:oklch(0.145 0 0);
-  --foreground:oklch(0.985 0 0);
-  --card:oklch(0.205 0 0);
-  --card-foreground:oklch(0.985 0 0);
-  --popover:oklch(0.205 0 0);
-  --popover-foreground:oklch(0.985 0 0);
+  --background:#1f1f1f;
+  --foreground:#ffffff;
+  --card:#292929;
+  --card-foreground:#ffffff;
+  --popover:#292929;
+  --popover-foreground:#ffffff;
   --primary:var(--brand-yellow);
   --primary-foreground:var(--brand-yellow-foreground);
   --link:var(--brand-yellow);
   --link-hover:var(--brand-yellow);
-  --secondary:oklch(0.274 0.006 286.033);
-  --secondary-foreground:oklch(0.985 0 0);
-  --muted:oklch(0.269 0 0);
-  --muted-foreground:oklch(0.708 0 0);
-  --accent:oklch(0.269 0 0);
-  --accent-foreground:oklch(0.985 0 0);
-  --destructive:oklch(0.704 0.191 22.216);
-  --destructive-foreground:oklch(0.2 0.02 22);
-  --border:oklch(1 0 0 / 0.1);
-  --input:oklch(1 0 0 / 0.15);
-  --ring:oklch(0.556 0 0);
+  --secondary:#333333;
+  --secondary-foreground:#ffffff;
+  --muted:#333333;
+  --muted-foreground:#adadad;
+  --accent:#333333;
+  --accent-foreground:#ffffff;
+  --destructive:#c50f1f;
+  --destructive-foreground:#ffffff;
+  --border:#525252;
+  --input:#525252;
+  --ring:#666666;
   --chart-1:oklch(0.809 0.105 251.813);
   --chart-2:oklch(0.623 0.214 259.815);
   --chart-3:oklch(0.546 0.245 262.881);
   --chart-4:oklch(0.488 0.243 264.376);
   --chart-5:oklch(0.424 0.199 265.638);
-  --sidebar:oklch(0.205 0 0);
-  --sidebar-foreground:oklch(0.985 0 0);
+  --sidebar:#292929;
+  --sidebar-foreground:#ffffff;
   --sidebar-primary:var(--brand-yellow);
   --sidebar-primary-foreground:var(--brand-yellow-foreground);
-  --sidebar-accent:oklch(0.269 0 0);
-  --sidebar-accent-foreground:oklch(0.985 0 0);
-  --sidebar-border:oklch(1 0 0 / 0.1);
-  --sidebar-ring:oklch(0.556 0 0);
+  --sidebar-accent:#333333;
+  --sidebar-accent-foreground:#ffffff;
+  --sidebar-border:#525252;
+  --sidebar-ring:#666666;
   --surface-1:var(--card);
   --surface-2:var(--secondary);
   --surface-3:var(--muted);
-  --surface-inset:oklch(0.145 0 0);
-  --surface-hover:oklch(0.3 0 0);
+  --surface-inset:#141414;
+  --surface-hover:#383838;
   --foreground-strong:var(--foreground);
-  --subtle-foreground:oklch(0.76 0 0);
-  --border-strong:oklch(0.58 0 0);
+  --subtle-foreground:#adadad;
+  --border-strong:#adadad;
   --field-bg:var(--muted);
-  --overlay:oklch(0 0 0 / 0.74);
+  --overlay:oklch(0 0 0 / 0.5);
   --primary-hover:oklch(0.835 0.19 89);
   --primary-active:oklch(0.74 0.17 84);
-  --secondary-hover:oklch(0.31 0.006 286.033);
+  --secondary-hover:#3d3d3d;
+  --segment:oklch(0.3964 0.01 285.93);
   --focus:var(--primary);
   --focus-strong:var(--primary);
   --primary-emphasis:var(--primary);
@@ -183,95 +185,131 @@
   --control-selected:var(--primary);
   --control-selected-foreground:var(--primary-foreground);
   --selection:oklch(0.795 0.184 86.047 / 0.22);
-  --success-bg:oklch(0.42 0.11 150 / 0.36);
-  --warning-bg:oklch(0.34 0.08 60 / 0.64);
-  --danger-bg:oklch(0.32 0.1 22 / 0.62);
-  --info-bg:oklch(0.29 0.08 260 / 0.62);
-  --warning-400:var(--warning);
-  --success:#42d392;
-  --success-foreground:oklch(0.2 0.02 160);
-  --success-hover:oklch(0.83 0.145 160);
-  --info:#8ec5ff;
-  --info-foreground:oklch(0.2 0.02 250);
-  --info-hover:oklch(0.86 0.075 250);
-  --warning:oklch(0.72 0.175 60);
-  --warning-foreground:oklch(0.2 0.02 60);
-  --warning-hover:oklch(0.78 0.16 60);
+  --success-bg:#052505;
+  --warning-bg:#4a1e04;
+  --danger-bg:#3b0509;
+  --info-bg:#002440;
+  --category-red:oklch(0.85 0.08 25);
+  --category-red-bg:oklch(0.28 0.07 25 / 0.62);
+  --category-orange:oklch(0.76 0.13 55);
+  --category-orange-bg:oklch(0.36 0.089 55 / 0.62);
+  --category-green:oklch(0.85 0.13 150);
+  --category-green-bg:oklch(0.28 0.07 150 / 0.62);
+  --category-teal:oklch(0.76 0.13 180);
+  --category-teal-bg:oklch(0.36 0.065 180 / 0.62);
+  --category-cyan:oklch(0.85 0.098 225);
+  --category-cyan-bg:oklch(0.28 0.053 225 / 0.62);
+  --category-blue:oklch(0.76 0.121 260);
+  --category-blue-bg:oklch(0.36 0.09 260 / 0.62);
+  --category-violet:oklch(0.85 0.086 300);
+  --category-violet-bg:oklch(0.28 0.07 300 / 0.62);
+  --category-pink:oklch(0.76 0.13 350);
+  --category-pink-bg:oklch(0.36 0.09 350 / 0.62);
+  --warning-400:#faa06b;
+  --success-400:#54b054;
+  --danger-400:#eeacb2;
+  --info-400:#5caae5;
+  --success:#107c10;
+  --success-foreground:#ffffff;
+  --success-hover:#0e700e;
+  --info:#0078d4;
+  --info-foreground:#ffffff;
+  --info-hover:#006cbf;
+  --warning:#f7630c;
+  --warning-foreground:#242424;
+  --warning-hover:#de590b;
 }
 [data-theme="light"]{
-  --background:oklch(0.965 0 0);
-  --foreground:oklch(0.145 0 0);
-  --card:oklch(1 0 0);
-  --card-foreground:oklch(0.145 0 0);
-  --popover:oklch(1 0 0);
-  --popover-foreground:oklch(0.145 0 0);
+  --background:#f5f5f5;
+  --foreground:#242424;
+  --card:#ffffff;
+  --card-foreground:#242424;
+  --popover:#ffffff;
+  --popover-foreground:#242424;
   --primary:var(--brand-yellow);
   --primary-foreground:var(--brand-yellow-foreground);
   --link:oklch(0.52 0.106 86.047);
   --link-hover:oklch(0.44 0.106 86.047);
-  --secondary:oklch(0.94 0 0);
-  --secondary-foreground:oklch(0.21 0.006 285.885);
+  --secondary:#ebebeb;
+  --secondary-foreground:#242424;
   --muted:var(--secondary);
-  --muted-foreground:oklch(0.43 0 0);
+  --muted-foreground:#616161;
   --accent:var(--secondary);
-  --accent-foreground:oklch(0.205 0 0);
-  --destructive:oklch(0.577 0.245 27.325);
-  --destructive-foreground:oklch(0.985 0 0);
-  --border:oklch(0.89 0 0);
-  --input:oklch(0.922 0 0);
-  --ring:oklch(0.708 0 0);
+  --accent-foreground:#242424;
+  --destructive:#c50f1f;
+  --destructive-foreground:#ffffff;
+  --border:#e0e0e0;
+  --input:#e0e0e0;
+  --ring:#d1d1d1;
   --chart-1:oklch(0.809 0.105 251.813);
   --chart-2:oklch(0.623 0.214 259.815);
   --chart-3:oklch(0.546 0.245 262.881);
   --chart-4:oklch(0.488 0.243 264.376);
   --chart-5:oklch(0.424 0.199 265.638);
   --sidebar:var(--card);
-  --sidebar-foreground:oklch(0.145 0 0);
+  --sidebar-foreground:#242424;
   --sidebar-primary:var(--primary-emphasis);
   --sidebar-primary-foreground:var(--brand-yellow-foreground);
   --sidebar-accent:var(--secondary);
-  --sidebar-accent-foreground:oklch(0.205 0 0);
-  --sidebar-border:oklch(0.89 0 0);
-  --sidebar-ring:oklch(0.708 0 0);
+  --sidebar-accent-foreground:#242424;
+  --sidebar-border:#e0e0e0;
+  --sidebar-ring:#d1d1d1;
   --surface-1:var(--card);
   --surface-2:var(--secondary);
   --surface-3:var(--muted);
-  --surface-inset:oklch(0.955 0 0);
-  --surface-hover:oklch(0.925 0 0);
+  --surface-inset:#f0f0f0;
+  --surface-hover:#e6e6e6;
   --foreground-strong:var(--foreground);
-  --subtle-foreground:oklch(0.43 0 0);
-  --border-strong:oklch(0.56 0 0);
+  --subtle-foreground:#616161;
+  --border-strong:#616161;
   --field-bg:var(--muted);
-  --overlay:oklch(0.145 0 0 / 0.4);
+  --overlay:oklch(0 0 0 / 0.4);
   --primary-hover:oklch(0.835 0.19 89);
   --primary-active:oklch(0.74 0.17 84);
   --secondary-hover:var(--surface-hover);
+  --segment:oklch(1 0 0);
   --focus:var(--primary);
   --focus-strong:var(--brand-yellow-foreground);
   --primary-emphasis:var(--brand-yellow-text);
   --primary-outline:var(--brand-yellow-text);
   --control-selected:var(--brand-yellow-foreground);
   --control-selected-foreground:oklch(0.985 0 0);
-  --success-400:var(--success);
-  --warning-400:var(--warning);
-  --danger-400:#9f2330;
-  --info-400:var(--info);
+  --success-400:#0e700e;
+  --warning-400:#8a3707;
+  --danger-400:#b10e1c;
+  --info-400:#006cbf;
   --oracle-300:var(--chart-4);
   --oracle-400:var(--chart-4);
   --selection:oklch(0.795 0.184 86.047 / 0.18);
-  --success-bg:oklch(0.94 0.05 150);
-  --warning-bg:oklch(0.95 0.06 61);
-  --danger-bg:oklch(0.95 0.05 22);
-  --info-bg:oklch(0.95 0.045 260);
-  --success:#0f6b3e;
-  --success-foreground:oklch(0.985 0 0);
-  --success-hover:oklch(0.4 0.1 155);
-  --info:#164f9d;
-  --info-foreground:oklch(0.985 0 0);
-  --info-hover:oklch(0.38 0.13 258);
-  --warning:oklch(0.525 0.131 61);
-  --warning-foreground:oklch(0.985 0 0);
-  --warning-hover:oklch(0.47 0.115 61);
+  --success-bg:#f1faf1;
+  --warning-bg:#fff9f5;
+  --danger-bg:#fdf3f4;
+  --info-bg:#f3f9fd;
+  --category-red:oklch(0.52 0.15 25);
+  --category-red-bg:oklch(0.96 0.019 25);
+  --category-orange:oklch(0.47 0.115 55);
+  --category-orange-bg:oklch(0.925 0.044 55);
+  --category-green:oklch(0.52 0.141 150);
+  --category-green-bg:oklch(0.96 0.035 150);
+  --category-teal:oklch(0.47 0.084 180);
+  --category-teal-bg:oklch(0.925 0.055 180);
+  --category-cyan:oklch(0.52 0.097 225);
+  --category-cyan-bg:oklch(0.96 0.025 225);
+  --category-blue:oklch(0.47 0.15 260);
+  --category-blue-bg:oklch(0.925 0.035 260);
+  --category-violet:oklch(0.52 0.15 300);
+  --category-violet-bg:oklch(0.96 0.022 300);
+  --category-pink:oklch(0.47 0.15 350);
+  --category-pink-bg:oklch(0.925 0.044 350);
+  --success:#107c10;
+  --success-foreground:#ffffff;
+  --success-hover:#0e700e;
+  --info:#0078d4;
+  --info-foreground:#ffffff;
+  --info-hover:#006cbf;
+  --warning:#f7630c;
+  --warning-foreground:#242424;
+  --warning-hover:#de590b;
 }
 [data-brand="lory"][data-theme="dark"]{
   --background:oklch(0.16 0.018 250);
@@ -295,6 +333,7 @@
   --secondary:oklch(0.245 0.02 250);
   --secondary-foreground:oklch(0.96 0.006 250);
   --secondary-hover:oklch(0.28 0.02 250);
+  --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);
@@ -437,7 +476,17 @@ body { margin:0; background:var(--background); color:var(--foreground); font-fam
 ::selection { background:var(--selection); }
 button,input,textarea,select { font:inherit; }
 button,a,[role="button"],input,textarea,select { outline:none; }
-:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); box-shadow:none; border-color:var(--focus-strong)!important; }
+:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); box-shadow:none; }
+/* UMA LINHA SÓ (ADR-0059, 08/10/2026). O anel afastado, sozinho, é uma linha — mas na peça que tem
+   BORDA PRÓPRIA ele desenhava borda + vão + anel: duas linhas, em 39 peças medidas no catálogo. E a
+   regra de cima pintava TODA borda de amarelo com `!important`, o que dava uma segunda linha até no
+   botão de borda transparente, depois da transição. Agora só a peça com borda muda a borda: ela
+   passa para a cor do foco e o anel ENCOSTA nela, sem vão — uma faixa só, de borda + anel, como o
+   anel colado do campo da referência principal. A peça sem borda (o botão cheio, a aba) continua com
+   o vão: colado, o anel amarelo sumiria no botão amarelo.
+   Quem cobra que nenhuma peça ficou de fora é o catálogo inteiro, no navegador:
+   `tests/visual/foco-uma-linha.spec.ts`. */
+:is(.input,.textarea,.select,.btn-outline,.btn-primary-outline,.btn-danger-outline,.media-control,.card,.code-block,.graph-node-body):focus-visible { outline-offset:0; border-color:var(--focus-strong); }
 button { color:inherit; }
 /* O link NÃO é `--primary`. Medido em 22/08/2026 com o axe e depois à mão: o amarelo da
    marca sobre o fundo do tema CLARO dá 1,73:1, e o AA de texto (WCAG 1.4.3) pede 4,5:1 —
@@ -803,7 +852,9 @@ img,svg { display:block; }
 /* O rótulo de grupo também sai da escala da LATERAL, pelo mesmo motivo: `--subtle-foreground` é
    apagado contra a página, e contra um painel escuro num tema claro ele some. Derivado do próprio
    `--sidebar-foreground` em vez de token novo — a lateral não publica um "muted" dela. */
-.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:color-mix(in oklab, var(--sidebar-foreground) 62%, transparent); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* 72% e não 62% desde a 0.27.0 (ADR-0061): com a letra da paleta nova (#242424, menos preta) os 62%
+   davam 4,4:1 sobre o branco — o axe pegou na varredura. 72% é o cinza de texto apagado da paleta. */
+.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 .sidebar-sub { padding-inline-start:var(--space-5); }
 /* RECOLHIDA — a lateral vira trilho de ícones. O rótulo NÃO some do DOM: o React troca a
    classe dele por `.sr-only`, então quem usa leitor de tela continua ouvindo o nome. Ícone
@@ -1245,11 +1296,11 @@ img,svg { display:block; }
 .btn-primary-outline:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
 .btn-primary-ghost { --btn-bg:transparent; --btn-fg:var(--primary); --btn-border:transparent; }
 .btn-primary-ghost:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
-.btn-danger-outline { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:var(--destructive); }
+.btn-danger-outline { --btn-bg:transparent; --btn-fg:var(--danger-400); --btn-border:var(--danger-400); }
 .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 { --btn-bg:transparent; --btn-fg:var(--danger-400); --btn-border: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:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-link-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
+[data-theme="light"] .btn-danger-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-link-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:var(--danger-400); }
 /* A MESMA correção para a marca, que estava faltando. Medido em 21/08/2026 na varredura de AA
    da matriz de tom: `.btn-primary-outline` e `.btn-primary-ghost` pintavam o rótulo com
    `--primary` cru, e no tema claro isso dá **1.73:1** — reprovação grave, em componente
@@ -1269,7 +1320,7 @@ img,svg { display:block; }
 .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:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
-.btn-link-danger { --btn-fg:var(--destructive); }
+.btn-link-danger { --btn-fg:var(--danger-400); }
 /* pressed entra na linguagem única de "selecionado" acima; só-ícone não leva o fio. */
 /* Kbd — a tecla que dispara a ação, dentro ou fora do botão. Peça própria, não decoração. */
 .kbd { display:inline-flex; align-items:center; justify-content:center; gap:2px; min-width:20px; height:20px; padding:0 6px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--secondary); color:var(--muted-foreground); font:500 11px/1 var(--font-code); }
@@ -1312,24 +1363,26 @@ img,svg { display:block; }
 .btn-solid.btn-tone-info:hover:not(:disabled) { --btn-bg:var(--info-hover); --btn-fg:var(--info-foreground); }
 .btn-solid.btn-tone-warning { --btn-bg:var(--warning); --btn-fg:var(--warning-foreground); --btn-border:transparent; }
 .btn-solid.btn-tone-warning:hover:not(:disabled) { --btn-bg:var(--warning-hover); --btn-fg:var(--warning-foreground); }
-/* e o mesmo tom SEM caixa: contorno, fantasma, link e navegação. O token de tom já é
-   "esta cor, legível contra a superfície DESTE tema", então não há correção por tema aqui. */
+/* e o mesmo tom SEM caixa: contorno, fantasma, link e navegação. ⚠ Desde a 0.27.0 (ADR-0061) o
+   token de tom (`--success`) é o FUNDO cheio — a mesma cor funda nos dois temas —, e não serve
+   de letra no escuro. Letra, ícone, borda e barra sobre a superfície usam o par de letra
+   (`--success-400`, `--info-400`, `--warning-400`, `--danger-400`), que cada tema ajusta. */
 .btn-tone-brand,.btn-tone-brand:hover:not(:disabled) { --btn-fg:var(--primary); }
 [data-theme="light"] .btn-tone-brand:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-brand:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 .btn-outline.btn-tone-brand { --btn-border:var(--primary); }
 .btn-tone-brand:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
-.btn-tone-danger,.btn-tone-danger:hover:not(:disabled) { --btn-fg:var(--destructive); }
-[data-theme="light"] .btn-tone-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-danger:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
-.btn-outline.btn-tone-danger { --btn-border:var(--destructive); }
+.btn-tone-danger,.btn-tone-danger:hover:not(:disabled) { --btn-fg:var(--danger-400); }
+[data-theme="light"] .btn-tone-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-danger:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:var(--danger-400); }
+.btn-outline.btn-tone-danger { --btn-border:var(--danger-400); }
 .btn-tone-danger:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
-.btn-tone-success,.btn-tone-success:hover:not(:disabled) { --btn-fg:var(--success); }
-.btn-outline.btn-tone-success { --btn-border:var(--success); }
+.btn-tone-success,.btn-tone-success:hover:not(:disabled) { --btn-fg:var(--success-400); }
+.btn-outline.btn-tone-success { --btn-border:var(--success-400); }
 .btn-tone-success:not(.btn-link):not(.btn-solid):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--success) 14%, transparent); }
-.btn-tone-info,.btn-tone-info:hover:not(:disabled) { --btn-fg:var(--info); }
-.btn-outline.btn-tone-info { --btn-border:var(--info); }
+.btn-tone-info,.btn-tone-info:hover:not(:disabled) { --btn-fg:var(--info-400); }
+.btn-outline.btn-tone-info { --btn-border:var(--info-400); }
 .btn-tone-info:not(.btn-link):not(.btn-solid):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--info) 14%, transparent); }
-.btn-tone-warning,.btn-tone-warning:hover:not(:disabled) { --btn-fg:var(--warning); }
-.btn-outline.btn-tone-warning { --btn-border:var(--warning); }
+.btn-tone-warning,.btn-tone-warning:hover:not(:disabled) { --btn-fg:var(--warning-400); }
+.btn-outline.btn-tone-warning { --btn-border:var(--warning-400); }
 .btn-tone-warning:not(.btn-link):not(.btn-solid):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--warning) 14%, transparent); }
 .btn-nav:hover:not(:disabled):not([aria-disabled="true"]) { --btn-fg:var(--foreground); }
 /* O botão só de ícone é REDONDO, em todos os tamanhos — decisão do Victor, 25/09/2026
@@ -1463,7 +1516,7 @@ img,svg { display:block; }
    contorno do input de dentro ficaria escondido atrás da borda do grupo. */
 .input-group { display:flex; flex-wrap:wrap; align-items:center; inline-size:100%; min-inline-size:0; min-block-size:var(--control-h-md); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast),box-shadow var(--duration-fast); }
 .input-group:hover { border-color:var(--border); }
-.input-group:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.input-group:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:var(--focus-strong); }
 .input-group:has(.input-sm) { min-block-size:var(--control-h-sm); }
 .input-group:has(.input-lg) { min-block-size:var(--control-h-lg); }
 /* O controle dentro do grupo abre mão da própria moldura: quem desenha a caixa é o grupo. */
@@ -1598,7 +1651,12 @@ img,svg { display:block; }
 .control-mark-lg { --step-h:var(--control-h-lg); }
 .checkbox .control-mark { border-radius:5px; } .radio .control-mark { border-radius:50%; }
 .checkbox input:checked + .control-mark { background:var(--control-selected); border-color:var(--control-selected); color:var(--control-selected-foreground); }
-.checkbox input:focus-visible + .control-mark,.radio input:focus-visible + .control-mark,.switch input:focus-visible + .switch-track { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.checkbox input:focus-visible + .control-mark,.radio input:focus-visible + .control-mark,.switch input:focus-visible + .switch-track { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:var(--focus-strong); }
+/* Cheia com a cor do foco (marcada, ligada), a peça volta ao VÃO (ADR-0059): colado, o anel sumiria
+   no recheio, como no botão amarelo. A borda dela já é da cor do recheio, então continua uma linha
+   só — é o que a referência principal faz no checkbox e no switch. Inválida, a borda é vermelha e o
+   anel volta a colar (vermelho, pela regra do inválido). */
+.checkbox input:focus-visible:checked:not([aria-invalid="true"],:user-invalid) + .control-mark,.switch input:focus-visible:checked:not([aria-invalid="true"],:user-invalid) + .switch-track { outline-offset:var(--focus-offset); }
 .checkbox input:checked + .control-mark:after { content:""; width:8px; height:4px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg) translateY(-1px); }
 .radio input:checked + .control-mark:after { content:""; width:8px; height:8px; border-radius:50%; background:var(--control-selected); }
 .switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; } .switch input { position:absolute; opacity:0; }
@@ -1646,7 +1704,7 @@ img,svg { display:block; }
    os filhos esticam sozinhos (align-items é stretch por padrão) e a conta fecha nas TRÊS. */
 .segmented { display:inline-flex; gap:3px; padding:3px; min-height:var(--control-h-md); border-radius:var(--radius-control); background:var(--muted); border:1px solid transparent; box-shadow:none; }
 .segmented button { padding:0 14px; border:0; border-radius:var(--radius-control); color:var(--muted-foreground); background:transparent; cursor:pointer; }
-.segmented button.active { color:var(--foreground); background:var(--secondary); box-shadow:none; border:0; }
+.segmented button.active { color:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); border:0; }
 /* `fullWidth` (A5, 06/10/2026): ocupa a linha, e cada segmento cresce a partir do rótulo sem
    encolher abaixo dele — o mesmo desenho do nativo. `1 0 auto` e não `1` (= `1 1 0%`): base zero
    reparte a largura em partes iguais, e é isso que quebrava o rótulo no nativo rodando no
@@ -1666,6 +1724,11 @@ img,svg { display:block; }
    dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar. */
 .is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"],
 .segmented button.active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
+/* A CÁPSULA ELEVADA que a regra acima promete, e que no trilho não se via (ADR-0059, 08/10/2026):
+   o segmento aceso e a aba escolhida vivem sobre --muted, e --secondary dava 1:1 contra ele no
+   claro e 1,02:1 no escuro. Sobre o trilho a cápsula é --segment, com a sombra pequena — como a
+   aba da referência principal. O rótulo na cor da marca e o fio continuam. */
+.segmented button.active { --btn-bg:var(--segment); background:var(--segment); box-shadow:var(--shadow-sm); }
 /* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
    marca `lory`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
    é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
@@ -1771,10 +1834,22 @@ img,svg { display:block; }
    o contador cai sobre a cor da marca e precisa da mesma inversão do botão primário. Os outros
    seis deixam o contador sobre a superfície da barra, onde ele já se lê. */
 
-.badge-success { --badge-accent:var(--success-400); color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
-.badge-warning { --badge-accent:var(--warning-400); color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
-.badge-danger { --badge-accent:var(--danger-400); color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
-.badge-info,.badge-running { --badge-accent:var(--info-400); color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+.badge-success { --badge-accent:var(--success-400); --badge-fill:var(--success); --badge-on:var(--success-foreground); color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
+.badge-warning { --badge-accent:var(--warning-400); --badge-fill:var(--warning); --badge-on:var(--warning-foreground); color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
+.badge-danger { --badge-accent:var(--danger-400); --badge-fill:var(--destructive); --badge-on:var(--destructive-foreground); color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
+.badge-info,.badge-running { --badge-accent:var(--info-400); --badge-fill:var(--info); --badge-on:var(--info-foreground); color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+/* AS OITO CORES DE CATEGORIA (GAR-07, ADR-0060, 09/10/2026): marcam GRUPO, não estado — "Motos" e
+   "Carros" num site de notícias. Mesma receita dos quatro propósitos acima (acento, fundo suave e
+   o fio misturado com a borda), e por isso as três ênfases valem para elas sem regra nova. O
+   amarelo fica de fora: é da marca. Quem cobra o AA nos dois temas é o `badge-categoria.spec.ts`. */
+.badge-red { --badge-accent:var(--category-red); color:var(--category-red); background:var(--category-red-bg); border-color:color-mix(in srgb,var(--category-red) 35%,var(--border)); }
+.badge-orange { --badge-accent:var(--category-orange); color:var(--category-orange); background:var(--category-orange-bg); border-color:color-mix(in srgb,var(--category-orange) 35%,var(--border)); }
+.badge-green { --badge-accent:var(--category-green); color:var(--category-green); background:var(--category-green-bg); border-color:color-mix(in srgb,var(--category-green) 35%,var(--border)); }
+.badge-teal { --badge-accent:var(--category-teal); color:var(--category-teal); background:var(--category-teal-bg); border-color:color-mix(in srgb,var(--category-teal) 35%,var(--border)); }
+.badge-cyan { --badge-accent:var(--category-cyan); color:var(--category-cyan); background:var(--category-cyan-bg); border-color:color-mix(in srgb,var(--category-cyan) 35%,var(--border)); }
+.badge-blue { --badge-accent:var(--category-blue); color:var(--category-blue); background:var(--category-blue-bg); border-color:color-mix(in srgb,var(--category-blue) 35%,var(--border)); }
+.badge-violet { --badge-accent:var(--category-violet); color:var(--category-violet); background:var(--category-violet-bg); border-color:color-mix(in srgb,var(--category-violet) 35%,var(--border)); }
+.badge-pink { --badge-accent:var(--category-pink); color:var(--category-pink); background:var(--category-pink-bg); border-color:color-mix(in srgb,var(--category-pink) 35%,var(--border)); }
 /* ── AS TRÊS ÊNFASES — e elas vêm DEPOIS das variantes de propósito ─────────────────
    Cada variante declara só o ACENTO; as ênfases saem dele. Antes cada variante escrevia
    cor + fundo + borda na mão, e uma ênfase nova custaria seis regras novas.
@@ -1784,7 +1859,10 @@ img,svg { display:block; }
    número do `soft`. É a mesma armadilha que o `.banner` e o `.data-list` já pagaram aqui.
    `--background` como texto do sólido serve aos DOIS temas porque o acento já vira com o
    tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
-.badge-solid { background:var(--badge-accent); color:var(--background); border-color:transparent; }
+/* 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, a marca, o neutro) segue
+   enchendo com o acento, como antes. */
+.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:var(--badge-accent); }
 .status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
 /* Status: condição operacional (DIRECTION §3.6) — NÃO é o pill do Badge; é ponto + rótulo
@@ -1793,10 +1871,10 @@ img,svg { display:block; }
    nomes operacionais e os semânticos apontam pro mesmo par de tokens de propósito. */
 .status { display:inline-flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-sm); }
 .status-label { color:var(--foreground); }
-.status-online,.status-success { color:var(--success); }
-.status-away,.status-warning { color:var(--warning); }
+.status-online,.status-success { color:var(--success-400); }
+.status-away,.status-warning { color:var(--warning-400); }
 .status-busy,.status-danger { color:var(--danger-400); }
-.status-running,.status-info { color:var(--info); }
+.status-running,.status-info { color:var(--info-400); }
 /* offline é o único que NÃO é "mais uma cor": --subtle-foreground e --muted-foreground
    colapsam no MESMO valor no tema claro, então offline sairia idêntico ao neutral. Ponto
    VAZADO resolve nos dois temas e ainda diz a coisa certa (ausência, não outro estado).
@@ -1857,7 +1935,7 @@ img,svg { display:block; }
 .alert h4,.alert strong { display:block; margin:0 0 2px; font-size:var(--text-sm); } .alert p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
 /* A cor do glifo é a da variante, senão o ícone vira enfeite cinza e não repete o sinal.
    Só o ícone DIRETO do alerta: um ícone dentro do corpo (num botão, num link) é do corpo. */
-.alert>.icon { color:var(--info); } .alert-success>.icon { color:var(--success); } .alert-warning>.icon { color:var(--warning); } .alert-danger>.icon { color:var(--danger-400); }
+.alert>.icon { color:var(--info-400); } .alert-success>.icon { color:var(--success-400); } .alert-warning>.icon { color:var(--warning-400); } .alert-danger>.icon { color:var(--danger-400); }
 .banner strong { font-size:var(--text-sm); } .banner p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
 @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); }
@@ -1869,10 +1947,10 @@ img,svg { display:block; }
 .progress-field { display:grid; gap:var(--space-1); }
 .progress-detail { justify-self:end; color:var(--muted-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
 .progress-tone-neutral>span { background:var(--muted-foreground); }
-.progress-tone-success>span { background:var(--success); }
-.progress-tone-warning>span { background:var(--warning); }
-.progress-tone-danger>span { background:var(--destructive); }
-.progress-tone-info>span { background:var(--info); }
+.progress-tone-success>span { background:var(--success-400); }
+.progress-tone-warning>span { background:var(--warning-400); }
+.progress-tone-danger>span { background:var(--danger-400); }
+.progress-tone-info>span { background:var(--info-400); }
 /* Sem total, um pedaço de 2/5 corre pelo trilho: os números da referência (a largura de 2/5, de -100% a 350%
    da própria largura, 1,5 s, a curva dela). A referência anda com `translateX`; aqui anda a MARGEM LÓGICA
    (de -40% a 140% do trilho, o mesmo percurso), para correr ao contrário na escrita da direita para
@@ -1905,7 +1983,7 @@ img,svg { display:block; }
    sai serrilhada, que é o mesmo defeito que o `.btn-group-vertical` resolve com `stretch`. */
 .tabs[data-orientation="vertical"] .tab { min-block-size:var(--control-h-md); text-align:start; }
 .tab { position:relative; padding:0 14px; border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); cursor:pointer; }
-.tab.active,.tab[data-active] { color:var(--foreground); background:var(--secondary); } .tab.active:after,.tab[data-active]:after { display:none; }
+.tab.active,.tab[data-active] { color:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); } .tab.active:after,.tab[data-active]:after { display:none; }
 /* `panel="plain"` (MNT-05 e C9, 06/10/2026): o painel sem caixa, como o painel de abas da
    referência. Sem recheio dos lados — o conteúdo começa na linha do que está fora do `Tabs` —, e o
    espaço de cima é o mesmo `space-3` do painel do nativo. Na vertical, quem separa é o `gap` da
@@ -2023,13 +2101,27 @@ img,svg { display:block; }
 /* O "+N" é um avatar como os outros — mesma caixa, mesma borda —, só que menor por dentro e sem
    peso de nome próprio: ele conta, não identifica. */
 .avatar-count { background:var(--secondary); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
-.kpi { display:flex; flex-direction:column; gap:5px; }
+.kpi { display:flex; flex-direction:column; gap:var(--space-1); }
 /* O NÚMERO do KPI (08/10/2026, pedido de um consumidor com baixa visão): a ficha sempre prometeu
    `--text-3xl`, e o CSS nunca aplicou — medido no navegador, o valor saía com 14, igual ao rótulo,
    e a tendência com 11,7 (o `small` do navegador encolhe a letra). O número é a razão do
    componente; os algarismos ficam tabulares para não dançar quando o valor muda. */
 .kpi > strong { font-size:var(--text-3xl); line-height:var(--leading-tight); font-variant-numeric:tabular-nums; }
 .kpi > small { font-size:var(--text-sm); }
+/* A TENDÊNCIA COM DIREÇÃO (GAR-09, ADR-0060, 09/10/2026): seta, palavra para o leitor de tela e cor,
+   nunca a cor sozinha. A seta é o `trend-up`/`trend-down`/`minus` do Phosphor (o mesmo desenho do
+   sprite), por máscara — o KPI é marcação pura e o `Icon` precisa de hook; o menu do `Header` já
+   faz assim. A cor é a do texto do selo de cada estado, que já passa AA nos dois temas. */
+/* A seta fica na PRIMEIRA linha: com `center`, uma tendência que quebra em duas linhas deixava a
+   seta solta entre elas (visto na bancada, 09/10/2026). `1lh` é a altura da linha do próprio texto. */
+.kpi-trend { display:inline-flex; align-items:flex-start; gap:var(--space-1); }
+.kpi-trend-icon { flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); margin-block-start:calc((1lh - var(--icon-sm)) / 2); background:currentColor; -webkit-mask:var(--kpi-glifo) center/contain no-repeat; mask:var(--kpi-glifo) center/contain no-repeat; }
+.kpi-trend-up { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z'/%3E%3C/svg%3E"); }
+.kpi-trend-down { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128v64a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h44.69L136,107.31l-34.34,34.35a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,29.66,58.34L96,124.69l34.34-34.35a8,8,0,0,1,11.32,0L224,172.69V128a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E"); }
+.kpi-trend-flat { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
+.kpi-tone-success { color:var(--success-400); }
+.kpi-tone-danger { color:var(--danger-400); }
+.kpi-tone-neutral { color:var(--muted-foreground); }
 /* 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>. */
@@ -2137,7 +2229,7 @@ img,svg { display:block; }
    log e a cor primária da Aurea são duas intenções, e ficavam indistinguíveis. `text-transform`
    porque o React passa o valor em minúsculas (é ele que casa a regra) e o nível tem de LER como
    nível. */
-.log-line { display:grid; grid-template-columns:86px 72px minmax(0,1fr); gap:12px; padding:3px 0; } .log-time { color:var(--subtle-foreground); } .log-level { color:var(--primary); text-transform:uppercase; } .log-level.info { color:var(--info); } .log-level.warn { color:var(--warning); } .log-level.error { color:var(--danger-400); }
+.log-line { display:grid; grid-template-columns:86px 72px minmax(0,1fr); gap:12px; padding:3px 0; } .log-time { color:var(--subtle-foreground); } .log-level { color:var(--primary); text-transform:uppercase; } .log-level.info { color:var(--info-400); } .log-level.warn { color:var(--warning-400); } .log-level.error { color:var(--danger-400); }
 
 /* ========================================================================== */
 /* 05. GRÁFICOS E VISUALIZAÇÃO                                                 */
@@ -2643,7 +2735,7 @@ img,svg { display:block; }
 /* MultiCombobox (Fase 4) — chips de multi-seleção + grupos. Espaçamento novo tokenizado. */
 .combobox-multi { display:flex; align-items:center; gap:var(--space-2); width:100%; min-width:0; min-height:var(--control-h-md); padding:var(--space-1) var(--space-2); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast); }
 .combobox-multi:hover { border-color:var(--border); }
-.combobox-multi:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); border-color:var(--focus-strong); }
+.combobox-multi:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; 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. */
@@ -2669,7 +2761,7 @@ img,svg { display:block; }
    o arrastar-soltar é reforço. Espaçamento novo tokenizado; superfície = card. */
 .dropzone { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-8) var(--space-6); text-align:center; color:var(--muted-foreground); background:var(--surface-inset); border:1px dashed var(--border-strong); border-radius:var(--radius-card); cursor:pointer; transition:border-color var(--duration-fast),background-color var(--duration-fast); }
 .dropzone:hover { border-color:var(--border); }
-.dropzone:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); border-color:var(--focus-strong); }
+.dropzone:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:var(--focus-strong); }
 .dropzone[data-dragging="true"] { border-style:solid; border-color:var(--primary); background:var(--surface-2); }
 .dropzone strong { color:var(--foreground); }
 .dropzone-icon { color:var(--primary); }
@@ -2737,7 +2829,11 @@ img,svg { display:block; }
 .combobox-multi:has([aria-invalid="true"]),
 .combobox-multi:has(:user-invalid),
 .dropzone:has([aria-invalid="true"]),
-.dropzone:has(:user-invalid) { border-color:var(--danger-400); }
+.dropzone:has(:user-invalid) { border-color:var(--danger-400); --focus-strong:var(--danger-400); }
+/* ↑ `--focus-strong` (ADR-0059, 08/10/2026): o anel de foco agora COLA na borda e a pinta — com o
+   amarelo, o campo inválido perdia o vermelho justo enquanto a pessoa corrige. No inválido o anel é
+   da cor do perigo, como o campo inválido da referência principal. Cor por contexto se faz assim,
+   redefinindo `--focus-strong` (check 44). */
 
 
 /* TreeView (Fase 4) — árvore headless própria (Base UI 1.6 não tem tree).

package/package.json

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