@aurea-uds/core 0.54.1 → 0.56.0

package/dist/aurea.css

@@ -381,7 +381,9 @@
   --field-bg:oklch(0.19 0.02 250);
   --ring:oklch(0.72 0.19 48);
   --focus:oklch(0.72 0.19 48);
-  --focus-strong:oklch(0.85 0.14 60);
+  --focus-strong:oklch(0.72 0.19 48);
+  --link:oklch(0.72 0.19 48);
+  --link-hover:oklch(0.78 0.17 50);
   --selection:oklch(0.32 0.08 50);
   --control-selected:oklch(0.72 0.19 48);
   --control-selected-foreground:oklch(1 0 0);
@@ -452,7 +454,7 @@
   --field-bg:oklch(1 0 0);
   --ring:oklch(0.682 0.197 44.5);
   --focus:oklch(0.682 0.197 44.5);
-  --focus-strong:oklch(0.52 0.17 45);
+  --focus-strong:#ff6600;
   --selection:oklch(0.96 0.04 60);
   --control-selected:oklch(0.682 0.197 44.5);
   --control-selected-foreground:oklch(1 0 0);
@@ -484,8 +486,8 @@
   --warning-bg:oklch(0.95 0.06 80);
   --danger-bg:oklch(0.95 0.05 25);
   --info-bg:oklch(0.95 0.04 235);
-  --link:oklch(0.52 0.106 86.047);
-  --link-hover:oklch(0.44 0.106 86.047);
+  --link:oklch(0.682 0.197 44.5);
+  --link-hover:oklch(0.63 0.197 44.5);
   --brand-yellow-ink:#242424;
   --warning-foreground:#242424;
   --control-thumb:var(--primary-mark);
@@ -1096,6 +1098,15 @@
   --card-pad:1.25rem;
   --section-gap:2rem;
 }
+[data-text="lg"]{
+  --text-xs:0.875rem;
+  --text-sm:1rem;
+  --text-base:1.125rem;
+  --text-lg:1.25rem;
+  --text-xl:1.375rem;
+  --text-2xl:1.625rem;
+  --control-h-md:var(--target-min);
+}
 /* Aurea core — component styles. Built with @aurea-uds/tokens into dist/aurea.css. Load @aurea-uds/fonts/css for Inter, Sora and IBM Plex Mono (ADR-0077). */
 /* ========================================================================== */
 /* 02. RESET, ACESSIBILIDADE E BASE                                            */
@@ -2623,13 +2634,16 @@ img,svg { display:block; }
    que um grupo vertical tem de não ter. */
 .btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; }
 :is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn { position:relative; border-radius:0; }
-:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:first-child { border-start-start-radius:var(--radius-full); border-end-start-radius:var(--btn-group-h); border-start-end-radius:var(--btn-group-v); }
-:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:last-child { border-end-end-radius:var(--radius-full); border-start-end-radius:var(--btn-group-h); border-end-start-radius:var(--btn-group-v); }
-:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:only-child { border-radius:var(--radius-full); }
-:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn + .btn::before { content:""; position:absolute; inset-inline-start:var(--btn-group-sep-i); inset-block-start:var(--btn-group-sep-b); inline-size:var(--btn-group-sep-w); block-size:var(--btn-group-sep-h); border-radius:var(--radius-full); background:currentColor; opacity:.15; pointer-events:none; }
+/* O PRIMEIRO e o ÚLTIMO BOTÃO, e não o primeiro e o último filho (o Victor, 04/11/2026: "quando clico botão fica quadrado"): com
+   um menu aberto, o motor dele põe marcadores de foco invisíveis ao lado do gatilho, e a setinha de um botão dividido deixava
+   de ser o último filho — perdia a ponta redonda e a linha do meio. `:where()` mantém a força de antes. */
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:where(:not(.btn ~ .btn)) { border-start-start-radius:var(--radius-full); border-end-start-radius:var(--btn-group-h); border-start-end-radius:var(--btn-group-v); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:where(:not(:has(~ .btn))) { border-end-end-radius:var(--radius-full); border-start-end-radius:var(--btn-group-h); border-end-start-radius:var(--btn-group-v); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:where(:not(.btn ~ .btn):not(:has(~ .btn))) { border-radius:var(--radius-full); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn ~ .btn::before { content:""; position:absolute; inset-inline-start:var(--btn-group-sep-i); inset-block-start:var(--btn-group-sep-b); inline-size:var(--btn-group-sep-w); block-size:var(--btn-group-sep-h); border-radius:var(--radius-full); background:currentColor; opacity:.15; pointer-events:none; }
 :is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:active:not(:disabled) { transform:none; }
-:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:not(:last-child) { border-inline-end-width:var(--btn-group-bi); border-block-end-width:var(--btn-group-bb); }
-:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:not(:first-child) { border-inline-start-width:var(--btn-group-bi); border-block-start-width:var(--btn-group-bb); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:where(:has(~ .btn)) { border-inline-end-width:var(--btn-group-bi); border-block-end-width:var(--btn-group-bb); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:where(.btn ~ .btn) { border-inline-start-width:var(--btn-group-bi); border-block-start-width:var(--btn-group-bb); }
 /* o anel de foco de um botão do meio fica por cima dos vizinhos, e não por baixo */
 :is(.btn-group,.toggle-group) > .btn:focus-visible { z-index:1; }
 .btn-group-detached,.toggle-group-detached { flex-wrap:wrap; gap:var(--space-1); }
@@ -4936,6 +4950,15 @@ button.tag-main { cursor:pointer; }
    DropdownMenu, ContextMenu, Menubar e a lista da CommandPalette. */
 .menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
 .menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; text-decoration:none; cursor:pointer; }
+/* O ITEM COM EXPLICAÇÃO e o ÍCONE NA PONTA (0.55.0, o Victor, 04/11/2026: "pegue o código" da referência): a anatomia do
+   item dela — o nome e, embaixo, a explicação na letra pequena e na cor de apoio; o recheio de 6 em cima e embaixo; o ícone
+   da ponta (o "abre fora" de um link) empurrado para o fim. Só com `description` ou `trailingIcon`: sem eles, o item é o
+   de sempre. */
+.menu-item:has(> .menu-item-text) { padding-block:calc(var(--space-1) + var(--space-05)); }
+.menu-item-text { display:grid; gap:var(--space-05); min-inline-size:0; }
+.menu-item-description { font-size:var(--text-xs); line-height:var(--leading-normal); font-weight:var(--weight-regular); color:var(--muted-foreground);
+  overflow-wrap:break-word; }
+.menu-item > .menu-item-trailing { margin-inline-start:auto; color:var(--muted-foreground); }
 .menu-item[data-highlighted],.menu-item:hover:not([data-disabled]) { background:var(--surface-3); }
 /* Foco de TECLADO no item: a linha de foco, por dentro, porque a lista recorta o que passa da borda
    (B-09 e a ordem de 25/09/2026, "a referência sempre primeiro": o item de menu dela
@@ -6206,6 +6229,32 @@ button.graph-node-body { cursor:pointer; }
 :is([data-ring="true"] :is(.badge:not(.badge-solid),.btn-soft,.btn-outline,.btn-primary-outline,.btn-danger-outline):not([data-ring]),:is(.badge:not(.badge-solid),.btn-soft,.btn-outline,.btn-primary-outline,.btn-danger-outline)[data-ring="true"]) {
   box-shadow:inset 0 0 0 var(--border-width) color-mix(in oklab, var(--ring-tone, currentColor) 30%, transparent); }
 
+/* ═══ OS MODOS DE LEITURA (ADR-0090, 04/11/2026) ═══════════════════════════════════════════════════════════════
+   Seção própria, FORA da paleta do passo A: a Ember recebe os dois modos ("Sim, recebe"), e as regras da paleta, não. */
+/* O ALTO CONTRASTE E O TEXTO GRANDE NO APP INTEIRO (o MNT-30, bloco 3 — ADR-0090, 04/11/2026). O app liga, e não o
+   sistema: `data-contrast="high"` e `data-text="lg"` em qualquer contêiner (a raiz do app inclusive), ou o `highContrast` e
+   o `textSize="lg"` do `AppShell`. As formas que o Victor escolheu no esboço e aprovou na bancada: o contraste "C" e o
+   texto "B". Valem em todas as marcas, a Ember inclusive ("Sim, recebe"); sem o atributo, nada disto existe.
+   O CONTRASTE: o mesmo do "aumentar contraste" do sistema (o contorno de 3:1 nos campos, as marcas na tinta, o foco do
+   campo no `--focus-strong`) e mais: o texto de apoio mais perto do texto, contorno nos cartões, o link sempre sublinhado
+   e o contorno do botão (por dentro, como os aros — nunca borda). São linhas que SÓ este modo acende: exceção nomeada à
+   ADR-0072, como o contorno do `prefers-contrast`. */
+[data-contrast="high"],[data-contrast="high"] [data-theme] {
+  --muted-foreground:color-mix(in oklab, var(--foreground) 80%, var(--background));
+  --control-thumb:var(--brand-yellow-ink); --control-selected-foreground:var(--brand-yellow-ink); --control-selected-dot:var(--brand-yellow-ink); }
+[data-contrast="high"] :is(.input,.textarea,.select,.input-group,.combobox-multi,.input-secondary,.textarea-secondary) { border-color:var(--input-strong); }
+[data-contrast="high"] .input-group > :is(.input,.select,.textarea) { border:0; }
+[data-contrast="high"] .card { border-color:var(--input-strong); }
+[data-contrast="high"] :is(a,.link) { text-decoration-line:underline; text-decoration-color:currentColor; text-decoration-thickness:var(--border-width); text-underline-offset:0.2em; }
+[data-contrast="high"] .btn { box-shadow:inset 0 0 0 var(--border-width) var(--input-strong); }
+[data-contrast="high"] .btn.btn-primary { box-shadow:inset 0 0 0 var(--border-width) var(--primary-foreground); }
+[data-contrast="high"] :is(.input,.textarea,.select):focus-visible,
+[data-contrast="high"] :is(.input-group,.combobox-multi,.command-field):focus-within { outline-color:var(--focus-strong); }
+/* O TEXTO GRANDE: os tokens do `[data-text="lg"]` (a letra 2 acima, o controle médio a 44) vêm do `aurea.tokens.css`.
+   Aqui só a letra do corpo: o `body` resolve a dele com os tokens de onde ELE está, então um contêiner que liga o modo
+   (o `AppShell`) refaz a conta para o que tem dentro. Na raiz (`<html>`) não: lá o `font-size` mudaria o `rem`. */
+[data-text="lg"]:not(:root) { font-size:var(--text-sm); }
+
 /* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
 /* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
    de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */

package/package.json

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