@aurea-uds/core 0.23.0 → 0.24.1

package/dist/aurea.css

@@ -1970,6 +1970,40 @@ img,svg { display:block; }
 .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); }
+/* GAR-12 e GAR-13 (08/10/2026): a tabela de COMPARAÇÃO — as chaves da `Table` e a pele do HTML de
+   comparação. A referência principal só tem o cabeçalho preso, à mão, numa caixa de altura fixa; o
+   resto veio do mercado, por escolha do Victor (o detalhe está no comentário da `Table`).
+   O NOME DA LINHA (`<th scope="row">`) é texto de corpo, não rótulo de coluna: sem caixa-alta, na
+   cor do texto, peso médio. Antes herdava a pele do cabeçalho — e ninguém no repositório usava
+   `th` no corpo (medido), então nenhum exemplo muda. A FAIXA DE GRUPO (`<th scope="rowgroup">`)
+   continua com a pele do cabeçalho de propósito: é rótulo, no idioma que a tabela já usa. */
+.table tbody th[scope="row"],.table-wrap tbody th[scope="row"] { color:var(--foreground); background:transparent; font-size:inherit; font-weight:var(--weight-medium); letter-spacing:normal; text-transform:none; }
+.table tbody tr:last-child th,.table-wrap tbody tr:last-child th { border-bottom:0; }
+/* O melhor valor: negrito. O selo "Melhor", em TEXTO, é um `Badge` que o site põe na célula — a
+   cor sozinha não diz nada a quem não a enxerga (WCAG 1.4.1). */
+.table td[data-best],.table-wrap td[data-best] { font-weight:var(--weight-semibold); }
+/* `fit`: sem o mínimo de 720 — a comparação de dois itens cabe num celular de 360. */
+.table.table-fit { min-width:0; }
+/* `differencesOnly`: o "Só diferenças" esconde as linhas que o site marcou como iguais. */
+.table-differences-only tr[data-same] { display:none; }
+/* `stickyHeader`: o mesmo mecanismo do `DataGrid` (F6, mais abaixo). A caixa é o contêiner de
+   rolagem, então precisa de teto para rolar por dentro; `--table-max-h` é a válvula do consumidor.
+   O cabeçalho gruda no topo da CAIXA, não da página: com a caixa rolando de lado, um elemento
+   grudento só gruda no contêiner de rolagem mais próximo. */
+.table-sticky-header { max-block-size:var(--table-max-h,60vh); }
+.table-sticky-header thead th { position:sticky; inset-block-start:0; z-index:1; }
+/* `stickyFirstColumn`: a primeira célula de cada linha fica parada ao rolar de lado, com fundo
+   próprio (o de cartão; o do cabeçalho no cabeçalho e na faixa de grupo) para o que rola passar
+   POR BAIXO dela. O canto (cabeçalho × primeira coluna) fica por cima dos dois. O fio do fim da
+   coluna é um pseudo-elemento, porque a borda de célula grudenta, com `border-collapse`, fica para
+   trás quando a tabela rola. `isolation` prende os `z-index` daqui dentro da caixa: eles não
+   disputam com menu e janela da página. */
+.table-sticky-header,.table-sticky-first { isolation:isolate; }
+.table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child { position:sticky; inset-inline-start:0; z-index:1; background:var(--card); }
+.table-sticky-first thead > tr > :first-child { z-index:2; background:var(--surface-2); }
+.table-sticky-first tbody > tr > th[scope="rowgroup"]:first-child { background:var(--surface-2); }
+.table-sticky-first tbody > tr:hover > :first-child { background:var(--surface-2); }
+.table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child:not([colspan])::after { content:""; position:absolute; inset-block:0; inset-inline-end:0; inline-size:var(--border-width); background:var(--border); }
 /* Avatar (Lote 2): `overflow:hidden` e o `object-fit` da imagem são a correção do defeito que
    a medição achou — foto que não é quadrada vazava inteira da caixa redonda, porque
    `border-radius` não recorta filho sozinho. Foto de perfil raramente vem quadrada, então isto
@@ -1990,6 +2024,12 @@ img,svg { display:block; }
    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; }
+/* 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); }
 /* 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>. */
@@ -2118,11 +2158,15 @@ img,svg { display:block; }
    EditorView.theme do CodeMirror e não daqui. O motor põe stroke/fill como ATRIBUTO de
    apresentação (#ccc nas linhas de grade, #666 nos rótulos), e CSS vence atributo — medido em
    01/08/2026: 20 <line> e 9 <text> num gráfico de linha com grade e dois eixos. */
-.chart svg line { stroke:var(--border); } .chart svg text { fill:var(--muted-foreground); font-size:var(--text-xs); }
+/* `--chart-text` (08/10/2026): o tamanho do texto dos eixos e da legenda, com o padrão de sempre
+   (`--text-xs`). Pedido de um consumidor com baixa visão: a regra é CSS e vence o `tick` do motor,
+   então o app não tinha como aumentar sem sobrescrever a Aurea. Agora pede no contêiner — por
+   exemplo `--chart-text: var(--text-sm)` —, o mesmo idioma de válvula do `--datagrid-max-h`. */
+.chart svg line { stroke:var(--border); } .chart svg text { fill:var(--muted-foreground); font-size:var(--chart-text,var(--text-xs)); }
 .chart-tooltip { display:grid; gap:var(--space-1); pointer-events:none; } .chart-tooltip strong { color:var(--foreground); font-weight:var(--weight-medium); }
 .chart-tooltip b { margin-inline-start:auto; color:var(--foreground); font-variant-numeric:tabular-nums; }
 .chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-1) var(--space-4); margin:0; padding:0; list-style:none; }
-.chart-key { display:flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-xs); } .chart-key i { flex:none; width:9px; height:9px; border-radius:var(--radius-sm); }
+.chart-key { display:flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--chart-text,var(--text-xs)); } .chart-key i { flex:none; width:9px; height:9px; border-radius:var(--radius-sm); }
 /* O cursor precisa de DOIS pontos de especificidade porque `.chart svg line` acima já tem dois
    elementos: `.chart .chart-cursor` (0,2,0) vence `.chart svg line` (0,1,2). Em gráfico de linha
    o cursor é <line> e em barra é <rect>, então a regra dá stroke E fill — cada um usa o seu. */

package/package.json

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