@aurea-uds/core 0.16.1 → 0.18.0

package/dist/aurea.css

@@ -494,6 +494,14 @@ img,svg { display:block; }
 .cluster-justify-center { justify-content:center; } .cluster-justify-end { justify-content:flex-end; } .cluster-justify-between { justify-content:space-between; }
 .cluster-nowrap { flex-wrap:nowrap; }
 .grid-fixed { grid-template-columns:repeat(var(--grid-cols,1),minmax(0,1fr)); }
+/* AN-08 (03/10/2026): a largura mínima da coluna, por nome — a trava de um consumidor reprova medida
+   escrita, e `min="sm"` virava UMA coluna sem aviso (o `--grid-min` inválido derruba a regra inteira).
+   O HeroUI não tem `Grid`; nenhum número é novo, cada um já mede uma grade ou uma caixa daqui:
+     xs  8rem — a miniatura da `.gallery` (`--gallery-min`)
+     sm 12rem — a célula da `.health-matrix`
+     md 15rem — o padrão do `.grid`, logo acima (sem classe)
+     lg 20rem — o `.dialog-xs`, o `max-w-xs` do HeroUI */
+.grid-min-xs { --grid-min:8rem; } .grid-min-sm { --grid-min:12rem; } .grid-min-lg { --grid-min:20rem; }
 
 /* ========================================================================== */
 /* 03. APP SHELL E DOCUMENTAÇÃO                                                */
@@ -587,7 +595,10 @@ img,svg { display:block; }
    encostado, não sobre a lateral — a rente já encosta sozinha. */
 .app-shell-flush .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
 .app-shell-flush .content { margin-block-start:var(--space-05); }
-.content { min-width:0; margin:var(--space-4) var(--space-4) var(--space-4) 0; padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
+/* A margem é LÓGICA desde 03/10/2026 (AN-01): era `margin:space-4 space-4 space-4 0`, física, e na
+   escrita da direita para a esquerda o conteúdo encostava na borda da página e deixava 32 de vão na
+   junção com a lateral. Medido no banco da moldura; na esquerda para a direita nada muda. */
+.content { min-width:0; margin-block:var(--space-4); margin-inline:0 var(--space-4); padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
 /* contentVariant="plain" (B-10): a área de conteúdo sem caixa. Os `Card` da tela passam a ser as
    únicas superfícies. A margem continua: é ela que afasta o conteúdo da lateral e da barra. */
 .content-plain { padding:0; border:0; border-radius:0; background:none; color:inherit; }
@@ -717,6 +728,33 @@ img,svg { display:block; }
    nada. Gate nenhum via, porque `sidebar.html` não tem baseline de pixel. */
 .app-shell:has(> .sidebar-collapsed) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-4)*2); }
 .app-shell:has(> .sidebar-collapsed.sidebar-flush) { --sidebar-track:var(--sidebar-rail); }
+/* AN-01 (03/10/2026): O BOTÃO DE RECOLHER, no alto da junção do menu com o conteúdo — o lugar que o
+   Victor marcou. Só com `sidebarCollapsible`, e por isso mora sob `.app-shell-collapsible`: o
+   `.app-shell` cru (o catálogo escrito à mão o usa como raiz) não muda.
+   O botão é um item da grade na MESMA célula da lateral, e por isso a lateral e o conteúdo ganham
+   lugar escrito: sem ele, o posicionamento automático da grade empurraria a lateral para a coluna
+   do conteúdo. A caixa do botão é de tamanho zero na borda da coluna e copia da lateral a margem de
+   cima e o `--shell-top`, então gruda junto quando a página rola; o botão se centra nela.
+   No alto: o centro do botão na altura do centro do primeiro item da lateral (borda + `space-1` +
+   metade do `control-h-md`). Na junção: no meio do vão de `space-4` entre as duas caixas, ou em cima
+   do fio, na lateral rente. */
+.app-shell-collapsible > .sidebar { grid-column:1; grid-row:2; }
+.app-shell-collapsible > .content { grid-column:2; grid-row:2; }
+.sidebar-toggle-slot { --toggle-top:calc(var(--topbar-height) + var(--space-4)*2); --toggle-x:calc(var(--space-4) / -2); --toggle-edge:var(--border-width);
+  grid-column:1; grid-row:2; justify-self:end; align-self:start; position:sticky; top:var(--toggle-top); z-index:var(--z-sticky); width:0; height:0; margin-block-start:var(--space-4); }
+.app-shell-flush > .sidebar-toggle-slot { --toggle-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
+.app-shell-collapsible:has(> .sidebar-flush) > .sidebar-toggle-slot { --toggle-top:var(--topbar-height); --toggle-x:0px; --toggle-edge:0px; margin-block-start:0; }
+/* O botão se centra por conta, com o lado dele escrito, e não por `translate` — que é físico e pede
+   `:dir(rtl)` para virar, e o empacotador do app reescreve `:dir()` (medido no Vite, 03/10/2026).
+   Com as margens lógicas ele vira sozinho. O lado é o `control-h-xs` do `IconButton size="xs"`, e o
+   alvo de toque com o dedo (`target-min`, a mesma troca do `.btn-icon` lá embaixo). A seta, quem
+   vira é o React, pela direção do provedor. */
+.sidebar-toggle-slot > .btn.sidebar-toggle { --toggle-size:var(--control-h-xs); --btn-bg:var(--card); --btn-border:var(--border-strong); position:absolute; inline-size:var(--toggle-size); block-size:var(--toggle-size); min-inline-size:0; min-block-size:0;
+  inset-block-start:calc(var(--toggle-edge) + var(--space-1) + var(--control-h-md) / 2 - var(--toggle-size) / 2); inset-inline-start:calc(var(--toggle-x) - var(--toggle-size) / 2); }
+@media (pointer:coarse) { .sidebar-toggle-slot > .btn.sidebar-toggle { --toggle-size:var(--target-min); } }
+@media (max-width:1023px) {
+  .sidebar-toggle-slot { display:none; }
+  .app-shell-collapsible > .sidebar, .app-shell-collapsible > .content { grid-column:auto; grid-row:auto; } }
 
 /* ── Navegação inferior — o vocabulário de APLICATIVO ───────────────────────────────
    Lacuna estrutural medida no `CONSUMIDOR-1.md` §4.1: `.topbar` e `.sidebar` são
@@ -782,7 +820,7 @@ img,svg { display:block; }
    nativo (`navigation.tsx`). ~~A folga de 4dp do M3 entre o indicador e o rótulo~~ vale só para
    os redondos agora. */
 .bottom-nav-mark { height:var(--icon-lg); }
-.bottom-nav-ind-circle .bottom-nav-mark, .bottom-nav-ind-circle-raised .bottom-nav-mark, .bottom-nav-ind-circle-outline .bottom-nav-mark, .bottom-nav-ind-circle-bold .bottom-nav-mark { height:var(--bottomnav-ring); }
+.bottom-nav-ind-circle .bottom-nav-mark, .bottom-nav-ind-circle-raised .bottom-nav-mark, .bottom-nav-ind-circle-outline .bottom-nav-mark { height:var(--bottomnav-ring); }
 /* `inline-flex` no envoltório: como `<span>` solto ele é caixa de LINHA, e mede a entrelinha do
    item (18px) em vez do contador que carrega (16px). A diferença não aparece na tela — aparece
    na medição, e medição errada é o que faz a razão parecer 0,75 quando é 0,67. */
@@ -807,7 +845,30 @@ img,svg { display:block; }
    O FOCO CONTINUA, e a diferença não é de gosto: `:focus-visible` é o que o teclado enxerga, vem
    do contrato de foco global e o `geometry.spec` cobra. Tirar hover é tirar enfeite; tirar foco
    seria tirar acesso. */
-.bottom-nav-item[aria-current] { color:var(--foreground); font-weight:var(--weight-medium); }
+/* O PESO DO RÓTULO NÃO MUDA COM A ESCOLHA — 03/10/2026, pedido do Victor: *"quero ele estático,
+   apenas os botões dinâmicos"*. Era `--weight-medium` só no escolhido, e texto mais grosso é texto
+   mais LARGO: no `width="content"` a barra mudava de largura a cada toque, nos sete indicadores
+   (medido: 247,7 contra 249,0). Agora todos os rótulos são `--weight-medium` — o "Label medium" do
+   Material 3, que no Expressive também deixou de engrossar o escolhido. O que marca a escolha é a
+   cor, o ícone cheio e a forma. Quem cobra: `geometry.spec`, "a barra não se mexe". */
+.bottom-nav-item { font-weight:var(--weight-medium); }
+/* A ALTURA DO TELEGRAM — 03/10/2026, pedido do Victor (*"ainda acho ele muito largo comparado a
+   bottomnav como do telegram"*; "largo" é a grossura). Medido no fonte do Telegram para Android
+   12.10.6: pílula de 56, botão de 48, ícone de 24, nome de 12 numa linha de 16. O recheio de cima
+   e de baixo cai de `--space-1` para `--space-05`, e a linha do nome é a do Telegram: o tamanho
+   mais `--space-1` (12 + 4). Com a do corpo (1,5) ela media 18; com a `--leading-tight` (14,4) a
+   perna do "j" passava 1 da caixa, e a caixa corta (`overflow:hidden`, para as reticências).
+   Fica 56 nos indicadores sem moldura e 64 nos que têm a de 32 — a altura do Material 3
+   Expressive. O mesmo no `navigation.tsx`. */
+.bottom-nav-item { padding-block:var(--space-05); }
+/* O NOME COLADO NO ÍCONE — 03/10/2026, pedido do Victor (*"o texto pode ficar mais próximo do
+   ícone"*): vão ZERO, como no Telegram, em que o nome começa onde a caixa do ícone acaba. O
+   `--space-05` de 30/09/2026 somava 2 aos 2 de folga da linha do nome: medido de tinta a tinta,
+   eram 9 no `pill` e 13 no `circle-bold`. No `circle-bold` a moldura de 32 também sai (logo
+   abaixo): lá o círculo é o disco, não ela. */
+.bottom-nav-item, .bottom-nav-disc { gap:0; }
+.bottom-nav-label { line-height:calc(1em + var(--space-1)); }
+.bottom-nav-item[aria-current] { color:var(--foreground); }
 .bottom-nav-item[aria-current] .icon { opacity:1; }
 /* ── A GRAMÁTICA: DOIS EIXOS, E ELES NÃO SE MISTURAM ────────────────────────────────
    Reescrito em 20/08/2026 pela auditoria de UI/UX do BottomNav que o Victor encomendou.
@@ -876,7 +937,15 @@ img,svg { display:block; }
 /* `padding-inline: space-1` — o recheio de sempre do item (`.bottom-nav-item`). No `width="content"`
    o item ganha `space-3` dos lados, e dentro dos 56 sobravam 32 para o rótulo: "Avisos" (35)
    saía "Avis…". Medido em 02/10/2026, no navegador e no nativo; igual no `navigation.tsx`. */
-.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { flex:none; width:var(--bottomnav-bold,3.5rem); padding-inline:var(--space-1); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-foreground); }
+/* ~~O disco ERA o item escolhido~~ (até a `0.16.1`): ele media 56 e os outros mediam o conteúdo,
+   então trocar de aba mudava a largura da barra (249 a 257 no app, medido em 03/10/2026) e, no
+   `full`, os outros itens andavam. Agora o disco é uma caixa DENTRO do item (`.bottom-nav-disc`),
+   em todos os itens, e o recheio passa do item para ele: o item mede o mesmo escolhido ou não, e a
+   altura da barra não muda. O mesmo no `navigation.tsx`. */
+.bottom-nav.bottom-nav-ind-circle-bold .bottom-nav-item { padding:0; }
+.bottom-nav-disc { display:flex; flex-direction:column; align-items:center; justify-content:center; inline-size:var(--bottomnav-bold,3.5rem); max-inline-size:100%; min-height:var(--control-h-lg); padding:var(--space-1); border-radius:var(--radius-full); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-foreground); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc { background:var(--primary); }
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .icon { opacity:1; }
 /* O contador do `circle-bold` INVERTE, como o do `.btn-primary`, e a volta atrás está medida.
    Tentei em 20/08/2026 deixá-lo dourado com um anel da cor da barra em volta — é o que as telas
@@ -885,6 +954,36 @@ img,svg { display:block; }
    se esconde. Fio fino não substitui contraste quando as duas cores são claras. */
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-foreground); }
+/* ── CÁPSULA (`capsule`) — a "A" da bancada do Victor, 03/10/2026: o Material 3 Expressive ────
+   A moldura do ícone vira a cápsula de 56 × 32 do indicador ativo do M3 Expressive
+   (`--bottomnav-bold` × `--bottomnav-ring`), em TODOS os itens; só a do escolhido é pintada, de
+   amarelo sólido. O rótulo fica embaixo, fora dela — é isso que a separa do antigo bloco amarelo
+   que a auditoria de 20/08/2026 recusou (achado 5): a forma não estica com o nome.
+   O contador fica no canto do ÍCONE, e não da cápsula: sem a cápsula pintada ele ficaria solto,
+   longe do sino. São os (56 − 32) / 2 a mais para dentro. E ele INVERTE sobre o amarelo, pela
+   mesma razão medida do `circle-bold`, logo acima. */
+.bottom-nav-ind-capsule .bottom-nav-mark { width:var(--bottomnav-bold,3.5rem); height:var(--bottomnav-ring); border-radius:var(--radius-full); }
+.bottom-nav-ind-capsule .bottom-nav-badge { inset-inline-end:calc((var(--bottomnav-bold,3.5rem) - var(--bottomnav-ring)) / 2 - var(--space-05)); }
+.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .icon { opacity:1; }
+.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+/* No `content`, o recheio de sempre (`--space-1`) e não o `--space-3`: com ele cada item teria 80. */
+.bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-capsule .bottom-nav-item { padding-inline:var(--space-1); }
+/* ── EXPANDE (`expand`) — a "C" da bancada do Victor, 03/10/2026 ───────────────────────────────
+   Os outros itens mostram só o ícone; o escolhido vira cápsula amarela com o nome ao lado.
+   ⚠ É a exceção à regra "o rótulo nunca some" (auditoria de 20/08/2026, achado 6/7), por ordem do
+   Victor: o nome dos não escolhidos sai da TELA e fica para o leitor de tela (o componente põe a
+   `.sr-only` nele), então o link continua com nome.
+   É o ÚNICO em que o botão escolhido cresce — os botões andam, a BARRA não: a vaga do escolhido é
+   FIXA, e não do tamanho do nome. Ícone + vão (`--space-2`) + lugar do nome (`--space-20`) +
+   recheio (`--space-3` dos dois lados) = 136. Nome maior que 80 termina em "…". */
+.bottom-nav-ind-expand .bottom-nav-item { flex-direction:row; gap:var(--space-2); min-width:var(--target-min); min-height:var(--target-min); padding:0; }
+.bottom-nav-ind-expand .bottom-nav-mark { width:var(--icon-lg); }
+.bottom-nav-ind-expand .bottom-nav-label { font-size:var(--text-sm); }
+.bottom-nav-ind-expand .bottom-nav-item[aria-current] { flex:none; inline-size:calc(var(--icon-lg) + var(--space-2) + var(--space-20) + 2 * var(--space-3)); padding-inline:var(--space-3); background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-expand .bottom-nav-item[aria-current] .icon { opacity:1; }
+.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+.bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-expand .bottom-nav-item:not([aria-current]) { flex:none; inline-size:var(--target-min); padding-inline:0; }
 
 /* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-1) ──────────────────────────
    A LISTA NÃO PINTA SUPERFÍCIE. Quem dá o card é o `Card`, e repintar aqui seria um segundo
@@ -918,6 +1017,11 @@ img,svg { display:block; }
 /* O VALOR E A SETA NÃO ENCOLHEM: valor cortado MENTE (um "R$ 1.2" no lugar de "R$ 1.234"), e seta
    cortada deixa de dizer que a linha abre. Quem cede espaço é o texto, que reticencia dizendo. */
 .nav-list-value { flex:none; color:var(--muted-foreground); font-size:var(--text-sm); }
+/* AN-04 (03/10/2026): os sinais ao lado do valor — fixada, silenciada. Pequenos (`sm`), apagados como o
+   valor, e o vão é o mesmo de dentro do texto (`space-1`). A foto é o `.avatar` de sempre. */
+.nav-list-indicators { flex:none; display:inline-flex; align-items:center; gap:var(--space-1); color:var(--muted-foreground); }
+.nav-list-indicators>span { display:inline-flex; }
+.nav-list-row>.avatar { flex:none; }
 .nav-list-row .nav-list-chevron { flex:none; opacity:.6; }
 @media (hover:hover) and (pointer:fine) { .nav-list-row:hover { background:var(--secondary); } }
 /* `aria-disabled` e NÃO `:disabled` — a razão está escrita ao lado de `.btn:disabled`, medida em
@@ -1630,6 +1734,28 @@ img,svg { display:block; }
 @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); }
 .progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
+/* AN-07 (03/10/2026): a caixa de fora, o texto de apoio e o tom. A anatomia é a do `ProgressBar` do
+   HeroUI 3.2.6 (`@heroui/styles`, progress-bar.css): a saída no alto à direita, `text-sm` médio com
+   algarismos de largura igual, e `gap-1` até o trilho. O tom é a lista fechada do `ButtonTone`:
+   pausado é `neutral`, falha é `danger`. */
+.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); }
+/* Sem total, um pedaço de 2/5 corre pelo trilho: os números do HeroUI (`w-2/5`, de -100% a 350% da
+   própria largura, 1,5 s, a curva dele). O HeroUI 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
+   a esquerda sem `:dir(rtl)` — o empacotador do app reescreve `:dir()` como lista de idiomas e a
+   regra deixa de pegar (medido no Vite, 03/10/2026). O pedaço tem 8 de altura: a conta por quadro é
+   desprezível.
+   Com menos movimento ele não corre: a barra inteira, apagada — nunca um pedaço parado, que leria
+   como 40% feito. */
+.progress-indeterminate>span { width:40%; animation:progress-indeterminate 1.5s cubic-bezier(0.65,0,0.35,1) infinite; }
+@keyframes progress-indeterminate { from { margin-inline-start:-40%; } to { margin-inline-start:140%; } }
+@media (prefers-reduced-motion:reduce) { .progress-indeterminate>span { width:100%; animation:none; opacity:var(--opacity-disabled); } }
 /* DataState (M3): a região que troca de cara. Ela NÃO desenha nada próprio — só empilha o que
    já existe (esqueleto, alerta, estado vazio, conteúdo) com respiro entre eles. Se ganhar borda
    ou fundo, viram duas superfícies para a mesma coisa — o defeito que a `.table-region` cobrou. */

package/package.json

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