@aurea-uds/core 0.25.0 → 0.28.0

package/dist/aurea.css

@@ -5,6 +5,7 @@
   --brand-yellow-foreground:oklch(0.421 0.095 57.708);
   --brand-yellow-text:oklch(0.516 0.105 86.047);
   --font-ui:"Atkinson Hyperlegible Next","Segoe UI",sans-serif;
+  --font-heading:"Atkinson Hyperlegible Next","Segoe UI",sans-serif;
   --font-editorial:"Atkinson Hyperlegible Next","Segoe UI",sans-serif;
   --font-code:"Atkinson Hyperlegible Mono",SFMono-Regular,Consolas,monospace;
   --text-xs:0.75rem;
@@ -117,6 +118,7 @@
   --weight-medium:500;
   --weight-semibold:600;
   --weight-bold:700;
+  --weight-extrabold:800;
   --icon-sm:1rem;
   --icon-md:1.25rem;
   --icon-lg:1.5rem;
@@ -130,53 +132,53 @@
   --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);
@@ -185,66 +187,85 @@
   --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);
@@ -255,26 +276,42 @@
   --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);
@@ -817,7 +854,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
@@ -1196,7 +1235,11 @@ img,svg { display:block; }
 /* A base do botão carrega as VARIÁVEIS DE PASSO da camada responsiva (`--step-*`), e cada
    fallback é exatamente o valor fixo de antes — então o botão sem valor responsivo desenha o
    mesmo pixel. É o que permite a camada `size-*` repor a grandeza sem tocar no componente. */
-.btn { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--step-gap,8px); block-size:var(--step-h,var(--control-h-md)); padding-inline:var(--step-px,15px); border:1px solid var(--btn-border); border-radius:var(--radius-control); background:var(--btn-bg); color:var(--btn-fg); font-size:var(--step-fs,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 { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--step-gap,8px); block-size:var(--step-h,var(--control-h-md)); border:1px solid var(--btn-border); border-radius:var(--radius-control); background:var(--btn-bg); color:var(--btn-fg); font-size:var(--step-fs,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); }
+/* GAR-14 (0.28.0): o recheio do botão vale também para o aviso preso a ele (`.toast-anchored`),
+   que tem a MEDIDA do botão — pedido do Victor na bancada. Uma regra só, para os dois nunca
+   divergirem e para o número não se repetir. */
+.btn,.toast-anchored { padding-inline:var(--step-px,15px); }
 .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
@@ -1259,11 +1302,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
@@ -1283,7 +1326,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); }
@@ -1326,24 +1369,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
@@ -1440,7 +1485,7 @@ img,svg { display:block; }
    Largura em token para caber de 3 a 4 dígitos sem virar caixa de texto. */
 .number-field { display:inline-flex; }
 .number-field-group { display:inline-flex; align-items:center; gap:var(--space-1); }
-.number-field-input { width:var(--space-16); text-align:center; }
+.number-field-input { width:var(--space-16); text-align:center; font-variant-numeric:tabular-nums; }
 /* A ALÇA DE ARRASTO (G-API-02), e só quando `scrubbable` está ligada.
    O motor já põe por ESTILO EM LINHA tudo o que é mecânica — `touch-action:none` e
    `user-select:none` na alça, e `position:fixed` mais o `transform` no cursor virtual, que ele
@@ -1795,10 +1840,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.
@@ -1808,7 +1865,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
@@ -1817,10 +1877,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).
@@ -1881,7 +1941,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); }
@@ -1893,10 +1953,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
@@ -1990,7 +2050,9 @@ img,svg { display:block; }
    `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); }
+/* GAR-16 (0.28.0): a tabela inteira com algarismos da mesma largura — a coluna de preço e de ano
+   alinha. Só os algarismos mudam; o texto das outras colunas fica igual. */
+.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); font-variant-numeric:tabular-nums; }
 .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; }
 .table tr:last-child td,.table-wrap tr:last-child td { border-bottom:0; }
 .table tbody tr:hover,.table-wrap tbody tr:hover { background:var(--surface-2); }
@@ -2047,13 +2109,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>. */
@@ -2161,7 +2237,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                                                 */
@@ -2325,6 +2401,18 @@ img,svg { display:block; }
 .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); }
+/* GAR-15 (0.28.0): a moldura de celular do `Image frame="phone"`. GENÉRICA de propósito — sem ilha,
+   sem entalhe, sem botões: as regras de marketing de um fabricante proíbem simular o aparelho dele,
+   e a Aurea não leva marca de terceiro. A moldura segue o tema (a superfície do cartão, a borda e a
+   sombra de sempre) e o canto é o da folha de baixo, o maior que a Aurea tem; o de dentro acompanha. */
+.image-frame { display:block; }
+.image-frame-phone { padding:var(--space-2); border:var(--border-width) solid var(--border); border-radius:var(--radius-sheet); background:var(--card); box-shadow:var(--shadow-md); }
+.image-frame-phone > .image { aspect-ratio:9 / 19.5; object-position:top; border-radius:calc(var(--radius-sheet) - var(--space-2)); }
+/* A captura de cada tema (`srcDark`). Sem `data-theme` na página, vale a clara. A guarda é a do
+   GAR-05 espelhada: uma faixa CLARA dentro da página escura volta a mostrar a captura clara. */
+.image-theme-dark { display:none; }
+[data-theme="dark"] .image-theme-dark:where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *) { display:block; }
+[data-theme="dark"] .image-theme-light:where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *) { display:none; }
 
 /* VÍDEO INCORPORADO (achado N-10, 24/09/2026). A caixa é a mesma superfície do `.media-player` —
    raio de cartão, borda e o fundo `--media-canvas` —, então um trailer do YouTube e um vídeo
@@ -2390,7 +2478,7 @@ img,svg { display:block; }
    A margem vai a zero porque `h1`…`h6` e `p` trazem a do navegador; o espaço entre blocos é de
    quem os empilha (`Stack`), não do texto. */
 .typography { margin:0; color:var(--foreground); }
-.typography-h1,.typography-h2,.typography-h3,.typography-h4,.typography-h5,.typography-h6 { font-weight:var(--weight-semibold); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); }
+.typography-h1,.typography-h2,.typography-h3,.typography-h4,.typography-h5,.typography-h6 { font-family:var(--font-heading); font-weight:var(--weight-semibold); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); }
 .typography-h1 { font-size:var(--text-4xl); }
 .typography-h2 { font-size:var(--text-3xl); }
 .typography-h3 { font-size:var(--text-2xl); }
@@ -2406,6 +2494,10 @@ img,svg { display:block; }
 .typography-weight-medium { font-weight:var(--weight-medium); }
 .typography-weight-semibold { font-weight:var(--weight-semibold); }
 .typography-weight-bold { font-weight:var(--weight-bold); }
+.typography-weight-extrabold { font-weight:var(--weight-extrabold); }
+/* GAR-16 (0.28.0): algarismos da mesma largura, para número que alinha em coluna ou muda na tela.
+   Ligado só onde se pede — no texto corrido o "1" estreito é o certo. */
+.typography-numeric { font-variant-numeric:tabular-nums; }
 .typography-align-start { text-align:start; }
 .typography-align-center { text-align:center; }
 .typography-align-end { text-align:end; }
@@ -2559,6 +2651,20 @@ img,svg { display:block; }
 .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); }
+/* GAR-14 (0.28.0): o aviso do `Button share`, preso ao botão — "Link copiado", ou o erro com o link à
+   mostra. Tem a medida do botão (a altura, o recheio da regra de cima, a letra e a cápsula) e a pele
+   do aviso de sempre. O ícone é desenho de máscara, como a seta do `KPI`: a mesma marcação serve ao
+   React (o motor posiciona) e ao HTML puro (o `aurea.js` posiciona, com `.toast-anchored-fixed`). */
+.toast-anchored { display:inline-flex; align-items:center; gap:var(--space-2); min-block-size:var(--step-h,var(--control-h-md)); max-inline-size:calc(100vw - 2 * var(--space-4)); padding-block:var(--space-1); border:var(--border-width) solid var(--border); border-radius:var(--radius-control); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); font-size:var(--step-fs,var(--text-sm)); font-weight:var(--weight-medium); line-height:var(--leading-tight); transition:opacity var(--duration-fast) var(--ease-standard); }
+.toast-anchored[data-starting-style],.toast-anchored[data-ending-style] { opacity:0; }
+.toast-anchored-icon { --toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); background:currentColor; color:var(--success-400); -webkit-mask:var(--toast-glifo) center/contain no-repeat; mask:var(--toast-glifo) center/contain no-repeat; }
+.toast-anchored-danger { border-color:color-mix(in srgb,var(--danger-400) 38%,var(--border)); background:var(--danger-bg); }
+.toast-anchored-danger .toast-anchored-icon { --toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E"); color:var(--danger-400); }
+/* O erro leva o link logo abaixo do aviso, já selecionado, para a pessoa copiar com o teclado. */
+.toast-anchored-stack { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); inline-size:max-content; max-inline-size:calc(100vw - 2 * var(--space-4)); }
+.toast-anchored-link { inline-size:100%; }
+.toast-anchored-fixed { position:fixed; z-index:var(--z-toast); }
+.toast-anchored-positioner { z-index:var(--z-toast); }
 /* 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

package/dist/aurea.js

@@ -47,15 +47,48 @@
     activateTab(tabs[next]);
   });
 
+  // O texto padrão dos avisos que este script escreve sozinho, pela língua da página. Quem emite a
+  // marcação (o React, o catálogo) pode mandar o seu pelo atributo `data-aurea-*` de cada gatilho.
+  var PT = /^pt/i.test(root.lang || "");
+  var TEXTO = PT
+    ? {copied: "Copiado", linkCopied: "Link copiado", linkCopyFailed: "Não deu para copiar. Copie o link abaixo."}
+    : {copied: "Copied", linkCopied: "Link copied", linkCopyFailed: "Could not copy. Copy the link below."};
+
+  // GAR-14 (0.28.0) · UMA região de status, montada cedo, para os avisos que não têm outra voz.
+  // Região que nasce junto com o texto nem sempre é lida; a que já existe, é (WCAG 4.1.3, a
+  // mensagem de status). Para repetir o mesmo texto, ela é esvaziada e preenchida de novo um
+  // instante depois.
+  var regiao = null;
+  function regiaoDeStatus() {
+    if (regiao && regiao.isConnected) return regiao;
+    regiao = document.createElement("div");
+    regiao.className = "sr-only";
+    regiao.setAttribute("role", "status");
+    regiao.setAttribute("aria-live", "polite");
+    regiao.setAttribute("data-aurea-status", "");
+    document.body.appendChild(regiao);
+    return regiao;
+  }
+  function anunciar(texto) {
+    var r = regiaoDeStatus();
+    r.textContent = "";
+    setTimeout(function () { r.textContent = texto; }, 100);
+  }
+  if (document.body) regiaoDeStatus();
+  else document.addEventListener("DOMContentLoaded", regiaoDeStatus);
+
   // Copiar código: comportamento do CORE, não do catálogo. Quem marca o gatilho com
   // [data-aurea-copy] ganha o copiar de graça — o CodeBlock do React emite esse mesmo
   // markup. Sem permissão de área de transferência, seleciona o texto pro Ctrl+C.
+  // 0.28.0: o "copiado" também é dito ao leitor de tela — antes só o ícone mudava, e quem não vê
+  // não sabia se tinha copiado.
   function copy(trigger) {
     var scope = trigger.closest("[data-aurea-copy-scope]") || trigger.parentElement;
     var source = scope && scope.querySelector("code, pre, [data-aurea-copy-source]");
     if (!source) return;
     function done() {
       trigger.classList.add("is-done");
+      anunciar(trigger.getAttribute("data-aurea-copy-done") || TEXTO.copied);
       setTimeout(function () { trigger.classList.remove("is-done"); }, 1500);
     }
     function select() {
@@ -75,6 +108,121 @@
     if (trigger) copy(trigger);
   });
 
+  // GAR-14 (0.28.0) · COMPARTILHAR. O gatilho marcado com [data-aurea-share] (o `Button share` do
+  // React emite isto) pergunta ao navegador se ele sabe compartilhar ESTE link — detectar o recurso,
+  // e não adivinhar o aparelho, é o padrão da web. Sabe: abre a janela do aparelho; a pessoa
+  // cancelar (`AbortError`) não é erro e não diz nada. Não sabe: copia o link e mostra "Link
+  // copiado" preso ao botão. A cópia falhou: avisa e mostra o link selecionado, para o Ctrl+C.
+  // O aviso tem a medida do botão (`.toast-anchored`, no aurea.css).
+  var avisoAberto = null;
+  function fecharAviso(devolverFoco) {
+    if (!avisoAberto) return;
+    var a = avisoAberto;
+    avisoAberto = null;
+    clearTimeout(a.timer);
+    window.removeEventListener("scroll", a.fechar, true);
+    window.removeEventListener("resize", a.fechar);
+    document.removeEventListener("keydown", a.tecla, true);
+    document.removeEventListener("pointerdown", a.fora, true);
+    a.el.remove();
+    if (devolverFoco && a.gatilho.isConnected) a.gatilho.focus();
+  }
+  function posicionar(el, gatilho) {
+    var r = gatilho.getBoundingClientRect();
+    // A distância é o token, lido da página — não um número escrito aqui.
+    var rem = parseFloat(getComputedStyle(root).fontSize) || 16;
+    var espaco = (parseFloat(getComputedStyle(root).getPropertyValue("--space-2")) || 0) * rem;
+    el.style.top = (r.bottom + espaco) + "px";
+    var largura = el.getBoundingClientRect().width;
+    var rtl = getComputedStyle(gatilho).direction === "rtl";
+    var x = rtl ? r.right - largura : r.left;
+    el.style.left = Math.max(espaco, Math.min(x, window.innerWidth - largura - espaco)) + "px";
+  }
+  function avisoAncorado(gatilho, falhou, texto, url) {
+    fecharAviso(false);
+    var aviso = document.createElement("div");
+    aviso.className = "toast-anchored" + (falhou ? " toast-anchored-danger" : "");
+    var icone = document.createElement("span");
+    icone.className = "toast-anchored-icon";
+    icone.setAttribute("aria-hidden", "true");
+    var rotulo = document.createElement("span");
+    rotulo.textContent = texto;
+    aviso.appendChild(icone);
+    aviso.appendChild(rotulo);
+    var el = aviso, campo = null;
+    if (falhou) {
+      el = document.createElement("div");
+      el.className = "toast-anchored-stack toast-anchored-fixed";
+      el.appendChild(aviso);
+      campo = document.createElement("input");
+      campo.className = "input toast-anchored-link";
+      campo.readOnly = true;
+      campo.value = url;
+      campo.setAttribute("aria-label", texto);
+      el.appendChild(campo);
+    } else {
+      aviso.className += " toast-anchored-fixed";
+      // O texto vai pela região de status; o desenho é só para quem vê, e não fala duas vezes.
+      aviso.setAttribute("aria-hidden", "true");
+    }
+    document.body.appendChild(el);
+    posicionar(el, gatilho);
+    var estado = {el: el, gatilho: gatilho, timer: 0};
+    // Rolar a PÁGINA solta o aviso do botão, e ele fecha. Mas o campo do link rola o próprio texto
+    // quando é selecionado — rolagem de dentro do aviso não conta (medido no navegador: sem esta
+    // guarda, o aviso de erro fechava no mesmo instante em que abria).
+    estado.fechar = function (e) { if (e && e.target && e.target.nodeType === 1 && el.contains(e.target)) return; fecharAviso(false); };
+    estado.tecla = function (e) { if (e.key === "Escape") fecharAviso(true); };
+    estado.fora = function (e) { if (!el.contains(e.target) && e.target !== gatilho) fecharAviso(false); };
+    avisoAberto = estado;
+    window.addEventListener("scroll", estado.fechar, true);
+    window.addEventListener("resize", estado.fechar);
+    if (falhou) {
+      // O erro fica até a pessoa resolver: Esc devolve o foco ao botão, clicar fora fecha.
+      document.addEventListener("keydown", estado.tecla, true);
+      document.addEventListener("pointerdown", estado.fora, true);
+      campo.focus();
+      campo.select();
+    } else {
+      estado.timer = setTimeout(estado.fechar, 1500);
+    }
+    anunciar(texto);
+  }
+  function share(trigger) {
+    var url = trigger.getAttribute("data-aurea-share-url") || location.href;
+    var dados = {url: url};
+    var titulo = trigger.getAttribute("data-aurea-share-title");
+    var texto = trigger.getAttribute("data-aurea-share-text");
+    if (titulo) dados.title = titulo;
+    if (texto) dados.text = texto;
+    var copiado = trigger.getAttribute("data-aurea-share-copied") || TEXTO.linkCopied;
+    var falhou = trigger.getAttribute("data-aurea-share-failed") || TEXTO.linkCopyFailed;
+    function copiar() {
+      if (!navigator.clipboard || !navigator.clipboard.writeText) {
+        avisoAncorado(trigger, true, falhou, url);
+        return Promise.resolve();
+      }
+      return navigator.clipboard.writeText(url).then(
+        function () { avisoAncorado(trigger, false, copiado); },
+        function () { avisoAncorado(trigger, true, falhou, url); });
+    }
+    if (typeof navigator.share === "function" && (!navigator.canShare || navigator.canShare(dados))) {
+      return navigator.share(dados).catch(function (e) {
+        if (!e || e.name !== "AbortError") return copiar();
+      });
+    }
+    return copiar();
+  }
+
+  document.addEventListener("click", function (event) {
+    // O `Button` do React faz o mesmo no próprio clique e marca o evento com `preventDefault`,
+    // para não compartilhar duas vezes quando os dois estão na página.
+    if (event.defaultPrevented) return;
+    var trigger = event.target.closest && event.target.closest("[data-aurea-share]");
+    if (!trigger || trigger.disabled || trigger.getAttribute("aria-disabled") === "true") return;
+    share(trigger);
+  });
+
   // TableOfContents: marca sozinho a seção em vista. IntersectionObserver com uma faixa
   // estreita no alto da janela — a seção "atual" é a que cruza essa faixa, não a maior
   // visível, senão o item pisca entre duas ao rolar. Sem observer (browser antigo), o
@@ -258,6 +406,7 @@
       root.dataset.theme = root.dataset.theme === "dark" ? "light" : "dark";
     },
     showToast: showToast,
-    copy: copy
+    copy: copy,
+    share: share
   };
 })();

package/package.json

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