@aurea-uds/core 0.27.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;
@@ -1233,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
@@ -1479,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
@@ -2044,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); }
@@ -2393,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
@@ -2458,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); }
@@ -2474,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; }
@@ -2627,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.27.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",