@aurea-uds/core 0.59.0 → 0.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aurea.css +97 -56
- package/dist/aurea.js +4 -3
- package/package.json +1 -1
package/dist/aurea.css
CHANGED
|
@@ -1225,10 +1225,10 @@ img,svg { display:block; }
|
|
|
1225
1225
|
/* `docs` (lote T, 17/10/2026): o bloco da documentação, `--docs-width` (1400) — o da referência; a escala de pontos não
|
|
1226
1226
|
tem esse número. */
|
|
1227
1227
|
.container-docs { max-inline-size:var(--docs-width); }
|
|
1228
|
-
@media (min-width:
|
|
1228
|
+
@media (min-width:48em) { .container { padding-inline:var(--space-8); } }
|
|
1229
1229
|
/* E o recheio dela é o da barra da referência: 16 no celular (o de todo `Container`) e 24 de 768 para cima, e não 32 — a
|
|
1230
1230
|
768, com 32, a busca e as ações não cabiam na linha da marca e desciam (a bancada do lote T pegou). */
|
|
1231
|
-
@media (min-width:
|
|
1231
|
+
@media (min-width:48em) { .container-docs { padding-inline:var(--space-6); } }
|
|
1232
1232
|
/* GAR-04 e GAR-05 (06/10/2026): `Section` — a faixa de ponta a ponta de uma página de site, com
|
|
1233
1233
|
fundo próprio e respiro vertical de site. Nenhuma referência aberta tem a peça (as seções de uma
|
|
1234
1234
|
delas são pagas, não lidas), então o respiro é escolha da Aurea, com tokens que já existem: `--space-16`
|
|
@@ -1239,7 +1239,7 @@ img,svg { display:block; }
|
|
|
1239
1239
|
.section-card { background:var(--card); color:var(--card-foreground); }
|
|
1240
1240
|
.section-inset { background:var(--surface-inset); }
|
|
1241
1241
|
.section-spacing-sm { padding-block:var(--space-8); }
|
|
1242
|
-
@media (min-width:
|
|
1242
|
+
@media (min-width:48em) { .section { padding-block:var(--space-24); } .section-spacing-sm { padding-block:var(--space-12); } }
|
|
1243
1243
|
/* GAR-21 e GAR-22 (lote U, 19/10/2026): a `Section` variant="hero" — a abertura de página. Os vãos são os do início da
|
|
1244
1244
|
referência (medidos em 15/10/2026): a sobrelinha a 8 do título (16 a partir de 1024), o texto colado no título, os
|
|
1245
1245
|
botões a 16, o que vier depois a 8 (16 a partir de 1024); o texto 16/24, e 18/28 a partir de 768, em 672 de largura (o
|
|
@@ -1297,7 +1297,7 @@ img,svg { display:block; }
|
|
|
1297
1297
|
.section-footer-inline-links { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin:0; padding:0; list-style:none; }
|
|
1298
1298
|
.section-footer-line .section-footer-link { display:inline-flex; align-items:center; }
|
|
1299
1299
|
.section-footer-line .section-footer-link:hover { color:var(--foreground); }
|
|
1300
|
-
@media (min-width:
|
|
1300
|
+
@media (min-width:48em) {
|
|
1301
1301
|
.section-footer-top { flex-direction:row; justify-content:space-between; }
|
|
1302
1302
|
.section-footer-brand { flex:1 1 0; min-inline-size:0; }
|
|
1303
1303
|
.section-footer-nav { flex:2 1 0; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }
|
|
@@ -1413,14 +1413,14 @@ img,svg { display:block; }
|
|
|
1413
1413
|
DENTRO da área, como o do item de menu — por fora, ele seria cortado embaixo. */
|
|
1414
1414
|
.topbar-tabs { flex-basis:100%; display:flex; align-items:flex-end; gap:var(--space-1); min-block-size:var(--space-10);
|
|
1415
1415
|
overflow-x:auto; overflow-y:hidden; }
|
|
1416
|
-
@media (min-width:
|
|
1416
|
+
@media (min-width:48em) { .topbar-tabs { gap:var(--space-3); } }
|
|
1417
1417
|
/* A PONTA DA LINHA DAS ÁREAS (`Header tabsEnd`, bloco 1 — 23/10/2026): a chave Web | Native da documentação da
|
|
1418
1418
|
referência, do lado oposto das áreas e no meio da altura da linha. As áreas continuam rolando de lado quando não cabem;
|
|
1419
1419
|
a ponta não encolhe. Abaixo de 768 ela some, como lá. */
|
|
1420
1420
|
.topbar-tabs-row { flex-basis:100%; display:flex; align-items:center; gap:var(--space-4); min-inline-size:0; }
|
|
1421
1421
|
.topbar-tabs-row > .topbar-tabs { flex:1 1 auto; min-inline-size:0; }
|
|
1422
1422
|
.topbar-tabs-end { flex:none; }
|
|
1423
|
-
@media (max-width:
|
|
1423
|
+
@media (max-width:47.9375em) { .topbar-tabs-end { display:none; } }
|
|
1424
1424
|
.topbar-tab { position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:var(--space-2);
|
|
1425
1425
|
padding:0 var(--space-1) calc(var(--space-2) + var(--focus-width)); color:var(--muted-foreground); font-size:var(--text-sm);
|
|
1426
1426
|
font-weight:var(--weight-medium); white-space:nowrap; text-decoration:none; }
|
|
@@ -1468,7 +1468,7 @@ img,svg { display:block; }
|
|
|
1468
1468
|
.topbar-menu-panel:popover-open { position-anchor:--aurea-header; inset-block-start:calc(anchor(bottom) - var(--border-width)); inset-inline-start:anchor(start); inset-inline-end:anchor(end); }
|
|
1469
1469
|
}
|
|
1470
1470
|
@supports selector(:popover-open) {
|
|
1471
|
-
@media (max-width:
|
|
1471
|
+
@media (max-width:47.9375em) { .topbar-site .topbar-nav { display:none; } .topbar-site .topbar-actions { margin-inline-start:auto; } .topbar-site .btn.topbar-menu-toggle { display:inline-flex; } .topbar-menu-panel:popover-open { display:block; } }
|
|
1472
1472
|
}
|
|
1473
1473
|
/* altura fixa = janela menos topo e as 3 folgas; assim a caixa parece cheia mesmo com
|
|
1474
1474
|
poucos itens (é o que as referências mostram) e sobra o que rolar por dentro. */
|
|
@@ -1527,8 +1527,8 @@ img,svg { display:block; }
|
|
|
1527
1527
|
(`.app-shell-collapsible > .sidebar`, mais abaixo na folha) prende TODA lateral na coluna 1, e com
|
|
1528
1528
|
a mesma força ganharia por vir depois. */
|
|
1529
1529
|
.app-shell-with-aside > .sidebar.app-shell-aside { grid-column:-2 / -1; grid-row:auto; }
|
|
1530
|
-
@media (max-width:
|
|
1531
|
-
@media (min-width:
|
|
1530
|
+
@media (max-width:79.9375em) { .app-shell-with-aside > .sidebar.app-shell-aside { position:static; height:auto; max-height:none; } }
|
|
1531
|
+
@media (min-width:80em) {
|
|
1532
1532
|
.app-shell-with-aside { grid-template-columns:var(--sidebar-track) minmax(0,1fr) var(--aside-track); }
|
|
1533
1533
|
.app-shell-with-aside > .content.content { grid-column:2; grid-row:2; margin-inline-end:0; }
|
|
1534
1534
|
.app-shell-with-aside > .sidebar.app-shell-aside { grid-column:3; grid-row:2; }
|
|
@@ -1567,18 +1567,18 @@ img,svg { display:block; }
|
|
|
1567
1567
|
/* As colunas ficam a --space-4 das bordas da tela, alinhadas com a pílula (sem isto, abaixo de 1432 a lateral e o índice
|
|
1568
1568
|
encostavam na borda — medido a 1280). De 768 para cima, e não de 1024 (0.52.1, aprovado pela imagem em 01/11/2026): de
|
|
1569
1569
|
768 a 1023 a lateral é coluna, e encostava na borda com a cápsula a 16. */
|
|
1570
|
-
@media (min-width:
|
|
1570
|
+
@media (min-width:48em) { .app-shell-docs.app-shell-pill { padding-inline:var(--space-4); } .app-shell-docs.app-shell-pill > .topbar { padding-inline:0; }
|
|
1571
1571
|
/* A lateral com caixa vai até 16 do pé da tela, e não mais (o desenho, medido em 31/10/2026). */
|
|
1572
1572
|
.app-shell-docs.app-shell-pill > .sidebar:not(.app-shell-aside, .sidebar-plain) { block-size:auto; max-block-size:calc(100vh - var(--shell-top) - var(--space-4)); } }
|
|
1573
1573
|
/* O conteúdo começa a 18 da pílula, como a lateral (78 + 18 = 96); de 768 a 1279, sem o índice, ele vai até a borda do
|
|
1574
1574
|
bloco, a 28 da lateral; no celular, o bloco fica a 16 das bordas. */
|
|
1575
|
-
@media (min-width:
|
|
1576
|
-
@media (max-width:
|
|
1575
|
+
@media (min-width:48em) and (max-width:79.9375em) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) 0 0 var(--space-7); } }
|
|
1576
|
+
@media (max-width:47.9375em) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) var(--space-4) 0; } }
|
|
1577
1577
|
.app-shell-docs > .content > * { max-inline-size:var(--docs-text-width); }
|
|
1578
1578
|
/* O texto a 24 da borda também no celular (o da página da referência a 375 e a 768; com o recheio de sempre do
|
|
1579
1579
|
`AppShell`, ele encostava a 16 — a bancada do lote T pegou). */
|
|
1580
1580
|
.app-shell-docs > .content.content { margin:0; padding:var(--space-4) var(--space-6); }
|
|
1581
|
-
@media (min-width:
|
|
1581
|
+
@media (min-width:64em) {
|
|
1582
1582
|
.app-shell-docs { grid-template-columns:minmax(0,1fr) var(--docs-sidebar-width) minmax(0,calc(var(--docs-width) - var(--docs-sidebar-width))) minmax(0,1fr); }
|
|
1583
1583
|
/* As duas colunas COMEÇAM 16 abaixo da linha e PARAM 32 acima da borda de baixo da tela, como as da referência
|
|
1584
1584
|
medidas na página dela (17/10/2026, o Victor: "a distância do sidebar em relação aos itens de cima está muito
|
|
@@ -1608,7 +1608,7 @@ img,svg { display:block; }
|
|
|
1608
1608
|
o "On this page" descia para 49 da linha (medido); assim, sem o recheio de cima, ele fica a 24, como o da referência. */
|
|
1609
1609
|
/* E ele ocupa a largura da coluna (o `align-self:start` de sempre o encolhia até o nome mais largo, 168). */
|
|
1610
1610
|
.app-shell-docs > .sidebar.app-shell-aside > .toc { position:static; align-self:stretch; }
|
|
1611
|
-
@media (min-width:
|
|
1611
|
+
@media (min-width:80em) {
|
|
1612
1612
|
.app-shell-docs { grid-template-columns:minmax(0,1fr) var(--docs-sidebar-width) minmax(0,calc(var(--docs-width) - var(--docs-sidebar-width) - var(--docs-aside-width))) var(--docs-aside-width) minmax(0,1fr); }
|
|
1613
1613
|
.app-shell-docs > .content.content { padding:var(--space-8) var(--space-12) var(--space-4); }
|
|
1614
1614
|
/* O índice tem 240 (`--docs-toc-width`) no começo da coluna de 268, com 16 dos dois lados, como o da referência: a
|
|
@@ -1639,7 +1639,7 @@ img,svg { display:block; }
|
|
|
1639
1639
|
.topbar > * { min-width:0; }
|
|
1640
1640
|
/* QUEBRA POR CONTEÚDO. O `flex-wrap` vivia só dentro do @media abaixo, ou seja, a barra só
|
|
1641
1641
|
quebrava quando a JANELA era estreita. Texto a 200% (WCAG 1.4.4) aumenta o conteúdo sem
|
|
1642
|
-
mexer no viewport: o @media não disparava e a nav passava
|
|
1642
|
+
mexer no viewport: o @media não disparava e a nav passava 1.6875em da borda direita, em todas
|
|
1643
1643
|
as páginas. Quebrar por conteúdo cobre os dois casos e não muda nada quando cabe. */
|
|
1644
1644
|
.topbar,.topbar > nav { flex-wrap:wrap; }
|
|
1645
1645
|
/* Colapso do shell abaixo de lg (1023 = lg-1, escala): a lateral do AppShell deixa o fluxo e
|
|
@@ -1649,7 +1649,7 @@ img,svg { display:block; }
|
|
|
1649
1649
|
/* Abaixo de lg o topo QUEBRA em duas linhas em vez de esconder a navegação: perder o acesso
|
|
1650
1650
|
a uma área inteira não é colapso responsivo, é bug. A nav vai pra segunda linha, centrada
|
|
1651
1651
|
e na largura toda; badge e selo (secundários) seguem escondidos pelos utilitários. */
|
|
1652
|
-
@media (max-width:
|
|
1652
|
+
@media (max-width:63.9375em) { .app-shell { grid-template-columns:minmax(0,1fr); } .app-shell > .sidebar[popover] { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
|
|
1653
1653
|
.topbar { flex-wrap:wrap; row-gap:var(--space-2); }
|
|
1654
1654
|
.topbar > nav { order:3; flex-basis:100%; justify-content:center; }
|
|
1655
1655
|
/* e a nav quebra entre os PRÓPRIOS itens: mandar a barra pra segunda linha não bastava,
|
|
@@ -1678,7 +1678,7 @@ img,svg { display:block; }
|
|
|
1678
1678
|
O @supports é a rede: em navegador sem popover a regra inteira não aplica, a lateral volta a
|
|
1679
1679
|
empilhar (o comportamento de antes, feio e usável) em vez de sumir sem botão que a abra. */
|
|
1680
1680
|
@supports selector(:popover-open) {
|
|
1681
|
-
@media (max-width:
|
|
1681
|
+
@media (max-width:63.9375em) {
|
|
1682
1682
|
.sidebar[popover]:not(:popover-open) { display:none; }
|
|
1683
1683
|
.btn.nav-toggle { display:inline-flex; }
|
|
1684
1684
|
/* altura EXPLÍCITA, não `auto`: medido em 30/07/2026, com `top` e `bottom` postos e
|
|
@@ -1700,7 +1700,7 @@ img,svg { display:block; }
|
|
|
1700
1700
|
referência desenha um círculo de progresso; aqui é o ícone de lista, e nenhuma linha (ADR-0072).
|
|
1701
1701
|
Estas regras vêm DEPOIS das da gaveta de sempre e levam a classe do arranjo — com a mesma força, a ordem decide. */
|
|
1702
1702
|
.docs-toc-bar { display:none; }
|
|
1703
|
-
@media (min-width:
|
|
1703
|
+
@media (min-width:48em) and (max-width:63.9375em) {
|
|
1704
1704
|
.app-shell.app-shell-docs { grid-template-columns:var(--docs-sidebar-width) minmax(0,1fr); }
|
|
1705
1705
|
.app-shell-docs .btn.nav-toggle { display:none; }
|
|
1706
1706
|
.app-shell-docs > .sidebar[popover]:not(.app-shell-aside):not(:popover-open) { display:flex; }
|
|
@@ -1713,12 +1713,12 @@ img,svg { display:block; }
|
|
|
1713
1713
|
.app-shell-docs > .docs-toc-bar { grid-column:2; grid-row:2; }
|
|
1714
1714
|
.app-shell-docs > .content.content { grid-column:2; grid-row:3; }
|
|
1715
1715
|
}
|
|
1716
|
-
@media (min-width:
|
|
1716
|
+
@media (min-width:64em) and (max-width:79.9375em) {
|
|
1717
1717
|
.app-shell-docs > .sidebar:not(.app-shell-aside):not(.sidebar-flush) { grid-row:2 / span 2; }
|
|
1718
1718
|
.app-shell-docs > .docs-toc-bar { grid-column:3; grid-row:2; }
|
|
1719
1719
|
.app-shell-docs > .content.content { grid-row:3; }
|
|
1720
1720
|
}
|
|
1721
|
-
@media (max-width:
|
|
1721
|
+
@media (max-width:79.9375em) {
|
|
1722
1722
|
.app-shell-docs > .docs-toc-bar { display:block; position:sticky; inset-block-start:var(--docs-top); z-index:var(--z-sticky); background:var(--background); }
|
|
1723
1723
|
.docs-toc-toggle { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--space-10); padding:0 var(--space-6);
|
|
1724
1724
|
border:0; background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-sm); text-align:start; cursor:pointer; }
|
|
@@ -1728,7 +1728,7 @@ img,svg { display:block; }
|
|
|
1728
1728
|
.app-shell-docs:has(> .app-shell-aside:popover-open) .docs-toc-toggle > .icon:last-child { rotate:180deg; }
|
|
1729
1729
|
}
|
|
1730
1730
|
@supports selector(:popover-open) {
|
|
1731
|
-
@media (max-width:
|
|
1731
|
+
@media (max-width:79.9375em) {
|
|
1732
1732
|
.app-shell-docs > .sidebar.app-shell-aside[popover]:not(:popover-open) { display:none; }
|
|
1733
1733
|
/* Aberto, ele desce da barra: preso logo abaixo dela, na largura da coluna do texto, uma superfície que flutua por cima
|
|
1734
1734
|
do texto (o fundo opaco do popover, o canto do cartão). Sem véu: a lista é um atalho, não uma janela. */
|
|
@@ -1738,10 +1738,10 @@ img,svg { display:block; }
|
|
|
1738
1738
|
overflow:auto; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
|
|
1739
1739
|
.app-shell-docs > .sidebar.app-shell-aside[popover]::backdrop { background:transparent; }
|
|
1740
1740
|
}
|
|
1741
|
-
@media (min-width:
|
|
1741
|
+
@media (min-width:48em) and (max-width:79.9375em) {
|
|
1742
1742
|
.app-shell-docs > .sidebar.app-shell-aside[popover]:popover-open { inset-inline-start:calc(var(--docs-sidebar-width) + var(--space-4)); }
|
|
1743
1743
|
}
|
|
1744
|
-
@media (max-width:
|
|
1744
|
+
@media (max-width:47.9375em) {
|
|
1745
1745
|
/* A gaveta ABERTA é uma superfície, mesmo com a lateral sem caixa (`sidebarVariant="plain"`) do desktop: sem o fundo,
|
|
1746
1746
|
a lista se misturava ao texto da página por baixo (medido a 375). O fundo e o canto do popover, como o do índice. */
|
|
1747
1747
|
.app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open { inset-inline-start:auto; inset-inline-end:var(--space-4);
|
|
@@ -1752,11 +1752,11 @@ img,svg { display:block; }
|
|
|
1752
1752
|
}
|
|
1753
1753
|
/* De 1280 para cima o índice é a coluna, e o atributo de gaveta não pode encolhê-lo: a regra da gaveta fechada
|
|
1754
1754
|
(`.sidebar[popover]:not(:popover-open)`, `width:auto`) vem antes na folha com a mesma força e o deixava com 200 (medido). */
|
|
1755
|
-
@media (min-width:
|
|
1755
|
+
@media (min-width:80em) {
|
|
1756
1756
|
.app-shell-docs > .sidebar.app-shell-aside[popover] { inline-size:var(--docs-toc-width); }
|
|
1757
1757
|
}
|
|
1758
1758
|
/* No celular o título fica a 32 da barra do índice, como o da referência a 375 (de 768 para cima, 16 nas duas). */
|
|
1759
|
-
@media (max-width:
|
|
1759
|
+
@media (max-width:47.9375em) {
|
|
1760
1760
|
.app-shell-docs > .content.content { padding-block-start:var(--space-8); }
|
|
1761
1761
|
}
|
|
1762
1762
|
|
|
@@ -1976,7 +1976,7 @@ img,svg { display:block; }
|
|
|
1976
1976
|
.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;
|
|
1977
1977
|
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); }
|
|
1978
1978
|
@media (pointer:coarse) { .sidebar-toggle-slot > .btn.sidebar-toggle { --toggle-size:var(--target-min); } }
|
|
1979
|
-
@media (max-width:
|
|
1979
|
+
@media (max-width:63.9375em) {
|
|
1980
1980
|
.sidebar-toggle-slot { display:none; }
|
|
1981
1981
|
.app-shell-collapsible > .sidebar, .app-shell-collapsible > .content { grid-column:auto; grid-row:auto; } }
|
|
1982
1982
|
/* A LATERAL ATÉ O TOPO (MNT-34, `AppShell layout="sidebar"`, 23/10/2026) — o pedido do app de rede (*"sidebar de canto e
|
|
@@ -1989,7 +1989,7 @@ img,svg { display:block; }
|
|
|
1989
1989
|
.app-shell-lateral.app-shell-collapsible > .sidebar { grid-row:1; }
|
|
1990
1990
|
/* A lateral começa no topo da janela: a flutuante com a margem dela, a de canto encostada. Só na tela larga — abaixo de
|
|
1991
1991
|
1024 ela é gaveta, com a altura e a margem da gaveta. */
|
|
1992
|
-
@media (min-width:
|
|
1992
|
+
@media (min-width:64em) {
|
|
1993
1993
|
.app-shell-lateral > .sidebar { top:var(--space-4); height:calc(100vh - var(--space-4) * 2); max-height:none; }
|
|
1994
1994
|
.app-shell-lateral > .sidebar-flush { top:0; height:100vh; }
|
|
1995
1995
|
}
|
|
@@ -1999,10 +1999,10 @@ img,svg { display:block; }
|
|
|
1999
1999
|
título — na barra do conteúdo, o primeiro dela. A bolinha da junção (ADR-0056) fica só no arranjo de sempre. Abaixo de
|
|
2000
2000
|
1024 ele some: a lateral é gaveta, e quem abre é o botão da gaveta. */
|
|
2001
2001
|
.app-shell-lateral > .app-shell-column > .topbar { gap:var(--space-3); justify-content:flex-start; }
|
|
2002
|
-
@media (max-width:
|
|
2002
|
+
@media (max-width:63.9375em) { .btn.sidebar-collapse-trigger { display:none; } }
|
|
2003
2003
|
/* Sem barra, abaixo de 1024, uma faixa com o botão da gaveta e a marca (a altura da barra pequena, 56). */
|
|
2004
2004
|
.app-shell-narrow-bar { display:none; }
|
|
2005
|
-
@media (max-width:
|
|
2005
|
+
@media (max-width:63.9375em) {
|
|
2006
2006
|
.app-shell-lateral > .app-shell-column { grid-column:1; }
|
|
2007
2007
|
.app-shell-narrow-bar { display:flex; align-items:center; gap:var(--space-3); min-height:calc(var(--space-12) + var(--space-2)); padding-inline:var(--space-4); }
|
|
2008
2008
|
}
|
|
@@ -2329,8 +2329,8 @@ img,svg { display:block; }
|
|
|
2329
2329
|
Regra do projeto (enraizada): todo layout horizontal que aperta esconde o secundário
|
|
2330
2330
|
por breakpoint da escala, nunca rola de lado. Estas 4 classes são esse mecanismo; o
|
|
2331
2331
|
gate (check 4b) trava os breakpoints. Mobile-first: `below` some acima do ponto. */
|
|
2332
|
-
@media (max-width:
|
|
2333
|
-
@media (max-width:
|
|
2332
|
+
@media (max-width:63.9375em) { .hide-below-lg { display:none !important; } }
|
|
2333
|
+
@media (max-width:47.9375em) { .hide-below-md { display:none !important; } }
|
|
2334
2334
|
.brand { min-height:var(--topbar-height); display:flex; align-items:center; gap:12px; padding:2px 4px 16px; margin:0 0 16px; border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; box-shadow:none; }
|
|
2335
2335
|
.brand strong { display:block; letter-spacing:var(--tracking-tight); } .brand small { display:block; color:var(--muted-foreground); font-size:11px; }
|
|
2336
2336
|
/* minmax(0,1fr): a trilha `auto` do grid crescia até o nome mais longo e os itens
|
|
@@ -2382,7 +2382,7 @@ img,svg { display:block; }
|
|
|
2382
2382
|
deixa a regra com a força de UMA classe: a peça que tem medida própria de ícone (o X do
|
|
2383
2383
|
`CloseButton`, o link do `MediaEmbed`) continua mandando. */
|
|
2384
2384
|
.btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-md); }
|
|
2385
|
-
@media (min-width:
|
|
2385
|
+
@media (min-width:40em) { .btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); } }
|
|
2386
2386
|
.btn-sm :where(.icon:not(.icon-lg,.icon-xl)),.btn-xs :where(.icon:not(.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); }
|
|
2387
2387
|
.btn:hover:not(:disabled):not([aria-disabled="true"]) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
|
|
2388
2388
|
/* Duas formas de "não dá para fazer isto", e a diferença é QUEM alcança a explicação.
|
|
@@ -2735,7 +2735,7 @@ img,svg { display:block; }
|
|
|
2735
2735
|
/* ESCALA DA REFERÊNCIA (ADR-0050, 24/09/2026): no computador o texto digitado é 14, como toda peça;
|
|
2736
2736
|
no telefone ele sobe para 16. É a regra dela (a troca é em 640px), e a razão
|
|
2737
2737
|
é do Safari do iPhone: campo com letra menor que 16 faz a página AMPLIAR sozinha ao ganhar foco. */
|
|
2738
|
-
@media (max-width:
|
|
2738
|
+
@media (max-width:39.99875em) { .input,.textarea,.number-field-input,.select-value { font-size:var(--text-base); } }
|
|
2739
2739
|
[data-theme="light"] .input:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .textarea:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .select:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color-scheme:light; }
|
|
2740
2740
|
/* NumberField (Lote 1): menos · campo · mais numa peça só, que é onde as referências convergem.
|
|
2741
2741
|
O campo é `.input` — a mesma altura, o mesmo raio, o mesmo foco de qualquer campo do sistema.
|
|
@@ -3554,7 +3554,7 @@ img,svg { display:block; }
|
|
|
3554
3554
|
para baixo do texto, na mesma coluna — a referência repete o botão no celular; aqui ele só muda de lugar. */
|
|
3555
3555
|
.alert-has-action { grid-template-columns:auto minmax(0,1fr) auto auto; }
|
|
3556
3556
|
.alert-action { display:flex; align-items:center; align-self:center; gap:var(--space-2); }
|
|
3557
|
-
@media (max-width:
|
|
3557
|
+
@media (max-width:39.9375em) { .alert-has-action { grid-template-columns:auto minmax(0,1fr) auto; } .alert-has-action > .alert-action { grid-column:2; grid-row:2; justify-self:start; align-self:start; } }
|
|
3558
3558
|
/* Banner: aviso de largura de página. Base ANTES das variantes — mesma
|
|
3559
3559
|
especificidade, então a última regra vence e a base apagaria as cores. */
|
|
3560
3560
|
.banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 18px; border:1px solid transparent; border-radius:var(--radius-card); background:var(--secondary); }
|
|
@@ -3596,7 +3596,7 @@ img,svg { display:block; }
|
|
|
3596
3596
|
.banner-consent-required { display:grid; gap:var(--space-1); }
|
|
3597
3597
|
.banner-consent-required-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
|
|
3598
3598
|
.banner-consent-required p { margin:0; color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
|
|
3599
|
-
@media (max-width:
|
|
3599
|
+
@media (max-width:40em) { .banner:not(.banner-consent) { grid-template-columns:auto minmax(0,1fr); } .banner:not(.banner-consent)>:last-child { grid-column:2; justify-self:start; } }
|
|
3600
3600
|
.progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
|
|
3601
3601
|
.progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
|
|
3602
3602
|
/* AN-07 (03/10/2026): a caixa de fora, o texto de apoio e o tom. A anatomia é a da barra de progresso da
|
|
@@ -4106,7 +4106,7 @@ button.tag-main { cursor:pointer; }
|
|
|
4106
4106
|
valia nada — mídia não soma especificidade, então a base vencia por vir por último. Foi
|
|
4107
4107
|
exatamente o que aconteceu na primeira tentativa, e é a armadilha que o comentário do
|
|
4108
4108
|
`.banner` lá em cima já registrava. */
|
|
4109
|
-
@media (max-width:
|
|
4109
|
+
@media (max-width:40em) { .data-list { grid-template-columns:minmax(0,1fr); } }
|
|
4110
4110
|
/* Timeline: o trilho existia e o PONTO não — `.timeline-dot` media 0×0 (achado A13), então a
|
|
4111
4111
|
linha do tempo saía com a régua e sem as marcas, e o <ol> ainda mostrava a numeração do
|
|
4112
4112
|
navegador. Agora os dois derivam do MESMO token: o trilho fica a meio diâmetro do ponto, e
|
|
@@ -4299,6 +4299,14 @@ button.tag-main { cursor:pointer; }
|
|
|
4299
4299
|
botão (a distância da borda, o botão e um vão), e a linha mais longa ROLA antes de chegar nele. Vale para todo bloco
|
|
4300
4300
|
com copiar: o sozinho, o do texto do site (`.prose pre`) e o do exemplo (`.demo-code`) — por isso vem depois deles. */
|
|
4301
4301
|
.code-block-wrap > .code-block { padding-inline-end:calc(var(--space-3) + var(--control-h-md) + var(--space-2)); }
|
|
4302
|
+
/* O CÓDIGO É SEMPRE DA ESQUERDA PARA A DIREITA (06/11/2026, a auditoria externa A-014 — o desenho do FigCraft aprovado
|
|
4303
|
+
pelo Victor). Numa página `dir="rtl"` o navegador espelhava o código: a pontuação pulava para o outro lado
|
|
4304
|
+
(`;"import …`) e o número de linha ia para a direita. O código fica da esquerda para a direita, como em todo editor; a
|
|
4305
|
+
moldura em volta continua espelhada — o botão de copiar fica no fim da linha DELA (à esquerda), e o código reserva o
|
|
4306
|
+
lugar dele também desse lado. `[dir="rtl"]`, e não `:dir()`: o empacotador do app reescreve o `:dir()` (§11 do
|
|
4307
|
+
CLAUDE.md). Quem cobra: `tests/visual/rtl-codigo.spec.ts`. */
|
|
4308
|
+
.code-block { direction:ltr; unicode-bidi:isolate; text-align:left; }
|
|
4309
|
+
[dir="rtl"] .code-block-wrap > .code-block { padding-inline-start:calc(var(--space-3) + var(--control-h-md) + var(--space-2)); }
|
|
4302
4310
|
.copy-code .c-done { display:none; }
|
|
4303
4311
|
.copy-code.is-done .c-copy { display:none; } .copy-code.is-done .c-done { display:block; color:var(--primary); }
|
|
4304
4312
|
/* A CABEÇA DO ARQUIVO (`CodeBlock filename`, o site B — aprovada pela bancada em 01/11/2026, o item 6, "Ícone + nome"): o
|
|
@@ -4803,12 +4811,12 @@ button.tag-main { cursor:pointer; }
|
|
|
4803
4811
|
.dialog { --dialog-margin:var(--space-4); --dialog-w:28rem; position:fixed; inset-inline:0; top:50%; translate:0 -50%; z-index:var(--z-modal); display:flex; flex-direction:column; inline-size:min(var(--dialog-w),calc(100vw - 2 * var(--dialog-margin))); max-block-size:calc(100dvh - 2 * var(--dialog-margin)); margin-inline:auto; padding:var(--space-6); border:var(--border-width) solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); outline:none; transition:opacity var(--duration-slow) var(--ease-standard),scale var(--duration-slow) var(--ease-standard); }
|
|
4804
4812
|
.dialog[data-starting-style] { opacity:0; scale:1.05; }
|
|
4805
4813
|
.dialog[data-ending-style] { opacity:0; scale:.95; transition-duration:var(--duration-fast); }
|
|
4806
|
-
@media (min-width:
|
|
4814
|
+
@media (min-width:40em) { .dialog { --dialog-margin:var(--space-10); } }
|
|
4807
4815
|
/* `placement` (o dela): `auto` senta a janela EMBAIXO no celular, onde o polegar alcança, e no meio de
|
|
4808
4816
|
640 para cima. Sem o atributo (a marcação pura), a janela fica no meio, como sempre ficou. */
|
|
4809
4817
|
.dialog[data-placement="top"] { top:var(--dialog-margin); translate:none; }
|
|
4810
4818
|
.dialog[data-placement="bottom"] { top:auto; bottom:var(--dialog-margin); translate:none; }
|
|
4811
|
-
@media (max-width:
|
|
4819
|
+
@media (max-width:39.99875em) { .dialog[data-placement="auto"] { top:auto; bottom:var(--dialog-margin); translate:none; } }
|
|
4812
4820
|
/* size (B-03), decisão do Victor em 24/09/2026: as quatro larguras da referência — as do
|
|
4813
4821
|
pacote de estilos dela, 20/24/28/32rem = 320/384/448/512 — mais 1024
|
|
4814
4822
|
(o token --breakpoint-lg) e a tela cheia. O padrão passou a ser o `md` da referência, 448; até a 0.8.14
|
|
@@ -4856,7 +4864,7 @@ button.tag-main { cursor:pointer; }
|
|
|
4856
4864
|
.drawer[data-swiping] { transition-duration:0ms; }
|
|
4857
4865
|
.drawer[data-ending-style] { transition-duration:calc(var(--drawer-swipe-strength,1) * var(--duration-slow)); }
|
|
4858
4866
|
.drawer-left,.drawer-right { top:0; bottom:0; inline-size:min(20rem,85vw); transform:translateX(var(--drawer-swipe-movement-x,0px)); }
|
|
4859
|
-
@media (min-width:
|
|
4867
|
+
@media (min-width:40em) { .drawer-left,.drawer-right { inline-size:min(24rem,85vw); } }
|
|
4860
4868
|
.drawer-right { right:0; border-left-width:var(--border-width); border-radius:var(--radius-card) 0 0 var(--radius-card); }
|
|
4861
4869
|
.drawer-left { left:0; border-right-width:var(--border-width); border-radius:0 var(--radius-card) var(--radius-card) 0; }
|
|
4862
4870
|
.drawer-top,.drawer-bottom { left:0; right:0; max-block-size:85dvh; transform:translateY(var(--drawer-swipe-movement-y,0px)); }
|
|
@@ -4900,7 +4908,7 @@ button.tag-main { cursor:pointer; }
|
|
|
4900
4908
|
.toast-description { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
|
|
4901
4909
|
.toast-action { flex:none; align-self:center; }
|
|
4902
4910
|
/* No celular a ação desce para baixo do texto, alinhada com ele — como a dela. */
|
|
4903
|
-
@media (max-width:
|
|
4911
|
+
@media (max-width:39.99875em) { .toast-content { flex-wrap:wrap; } .toast-text { flex-basis:calc(100% - var(--space-6) - var(--space-1) - var(--space-05)); } .toast-action { margin-inline-start:calc(var(--space-6) + var(--space-1) + var(--space-05)); } }
|
|
4904
4912
|
/* As faces do tipo (desde 16/08/2026 elas pintam; o check 18 não enxerga classe por template). Em
|
|
4905
4913
|
0.32.0 o tipo deixou de tingir o fundo e a borda: pinta o ícone e o título, no par `-400` da
|
|
4906
4914
|
ADR-0061, como o aviso da referência. */
|
|
@@ -5077,7 +5085,7 @@ button.tag-main { cursor:pointer; }
|
|
|
5077
5085
|
border-radius:var(--radius-card); background:var(--fill-1); }
|
|
5078
5086
|
.command-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); }
|
|
5079
5087
|
.command-foot > .command-shortcuts { padding:0; }
|
|
5080
|
-
@media (max-width:
|
|
5088
|
+
@media (max-width:80em) { .command-body { grid-template-columns:minmax(0,1fr); } .command-preview { display:none; } }
|
|
5081
5089
|
|
|
5082
5090
|
.menu-sep { height:1px; margin:6px 4px; background:var(--border); border:0; }
|
|
5083
5091
|
/* G-API-02 — a anatomia que o menu ganhou quando o dado deixou de ter uma forma só.
|
|
@@ -5414,7 +5422,7 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
|
|
|
5414
5422
|
honesta: grade estreita dentro de janela larga divide mesmo assim — o escape é
|
|
5415
5423
|
`--datagrid-detail-w`. */
|
|
5416
5424
|
.datagrid-split { display:grid; gap:var(--space-3); align-items:start; }
|
|
5417
|
-
@media (min-width:
|
|
5425
|
+
@media (min-width:48em) {
|
|
5418
5426
|
.datagrid-split { grid-template-columns:1fr var(--datagrid-detail-w,20rem); }
|
|
5419
5427
|
}
|
|
5420
5428
|
.datagrid-detail { border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); padding:var(--space-4); }
|
|
@@ -5806,11 +5814,11 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5806
5814
|
Agora vale SÓ para o shell que não tem gaveta — o `apps/docs/index.html`, que traz a
|
|
5807
5815
|
própria `.doc-sidebar` e o próprio JS de abrir. O shell do sistema segue em grid de uma
|
|
5808
5816
|
coluna com a gaveta acima. Sai junto com aquela página (achado M13). */
|
|
5809
|
-
@media (max-width:
|
|
5817
|
+
@media (max-width:40em) { :root { --card-pad:16px; --section-gap:16px; } .doc-actions .select { flex:1; width:auto!important; min-width:0; } .doc-actions>.btn-primary { width:var(--control-h-md); padding:0; font-size:0; } .doc-actions>.btn-primary .mono { display:none; } .tabs,.pagination,.segmented { max-width:100%; overflow-x:auto; } .step:nth-child(3):before { display:none; } .alert { grid-template-columns:auto minmax(0,1fr); } .alert>:last-child { grid-column:2; justify-self:start; } .log-line { grid-template-columns:70px 58px minmax(0,1fr); gap:6px; } .queue-item>.badge { grid-column:2; justify-self:start; } .event-row>.badge { grid-column:3; justify-self:start; } .message { grid-template-columns:1fr; } .media-player { min-height:330px; aspect-ratio:auto; } .media-overlay-title { top:12px; left:12px; right:12px; } .media-controls { padding:10px; } .media-control-row { align-items:flex-start; flex-direction:column; gap:8px; } .media-control-row>.media-control-group { width:100%; justify-content:space-between; } .media-optional,.media-volume { display:none; } .media-time { padding:0 4px; font-size:11px; } .toast-stack { inset-inline:12px; bottom:12px; } .toast { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) auto; } .drawer { width:100%; padding:20px; } .dialog { padding:20px; } }
|
|
5810
5818
|
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
|
|
5811
5819
|
|
|
5812
5820
|
/* Padrões compostos Aurea 1.7: blocos de operação, não widgets de domínio. */
|
|
5813
|
-
.operational-grid .demo{min-height:0}@media(max-width:
|
|
5821
|
+
.operational-grid .demo{min-height:0}@media(max-width:40em){.operational-grid .demo{grid-column:span 12}}
|
|
5814
5822
|
.universal-grid .demo { min-height:0; }
|
|
5815
5823
|
.pattern-toolbar .input-group { flex:1 1 180px; }
|
|
5816
5824
|
.media-library-row.active { border-color:transparent; background:color-mix(in oklab,var(--primary) 10%,transparent); }
|
|
@@ -5846,6 +5854,15 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5846
5854
|
cor do texto), e o glifo pinta na cor do texto. */
|
|
5847
5855
|
.accordion-plus .accordion-chevron, .accordion-plus .accordion-item[open] > summary .accordion-chevron { background:transparent; }
|
|
5848
5856
|
.accordion-plus .accordion-chevron::before { forced-color-adjust:none; background:CanvasText; }
|
|
5857
|
+
/* O ESCOLHIDO SE VÊ (06/11/2026, a auditoria externa A-015 — a forma "B" do desenho no FigCraft, aprovada pelo Victor:
|
|
5858
|
+
*"o alto contraste aprovo a B"*). O segmento e a aba escolhidos se distinguiam só pelo FUNDO, que a troca apaga: ficavam
|
|
5859
|
+
iguais aos outros. Agora o fundo é o destaque do sistema (Highlight) e a letra a cor sobre ele (HighlightText) — as
|
|
5860
|
+
duas são cores do sistema, que a troca respeita. A referência não trata esse modo. E o ponto do selo (`.badge-dot`),
|
|
5861
|
+
que é fundo, sai da troca na cor do texto. A Ember recebe também (o Victor, 06/11/2026: *"Ember entra"* — no alto
|
|
5862
|
+
contraste o sistema troca as cores de toda marca, e a dela sumia igual).
|
|
5863
|
+
Quem cobra: `tests/visual/alto-contraste-escolhido.spec.ts`. */
|
|
5864
|
+
/* (o segmento e a aba: a regra está depois das do tema escolhido, mais abaixo — ver "O ESCOLHIDO NO ALTO CONTRASTE") */
|
|
5865
|
+
.badge-dot { forced-color-adjust:none; background:CanvasText; }
|
|
5849
5866
|
}
|
|
5850
5867
|
|
|
5851
5868
|
|
|
@@ -5857,10 +5874,10 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5857
5874
|
.table-region{outline:none}
|
|
5858
5875
|
.table-region:focus-visible{outline:var(--focus-width) solid var(--focus-strong);outline-offset:calc(-1 * var(--focus-width));box-shadow:none}
|
|
5859
5876
|
/* CONTAINER QUERY, e não breakpoint de viewport — Parte D, item D3 (08/08/2026).
|
|
5860
|
-
Era `@media (max-width:
|
|
5861
|
-
da escala (
|
|
5862
|
-
controles é a do PLAYER, não a da janela. Um player numa lateral de
|
|
5863
|
-
de
|
|
5877
|
+
Era `@media (max-width:25em)`, o último dos seis legados do achado M13. Trocar por um degrau
|
|
5878
|
+
da escala (39.9375em) teria resolvido o gate e mantido o defeito: a largura que aperta os
|
|
5879
|
+
controles é a do PLAYER, não a da janela. Um player numa lateral de 25em dentro de uma tela
|
|
5880
|
+
de 120em tem exatamente o mesmo aperto, e o breakpoint de viewport nunca o via.
|
|
5864
5881
|
`.media-player` já era `position:relative` + `overflow:hidden`, então a contenção não muda o
|
|
5865
5882
|
posicionamento do que está dentro — medido antes de escrever. */
|
|
5866
5883
|
.media-player { container-type:inline-size; }
|
|
@@ -5954,7 +5971,7 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5954
5971
|
emitida e o valor computado são os mesmos (a geometria e as baselines de pixel cobram isso).
|
|
5955
5972
|
|
|
5956
5973
|
O NOME DIZ O MENSURÁVEL: `vp-md:` é viewport, `ct-md:` é container. Uma escala só, um nome um
|
|
5957
|
-
número — `md` é sempre
|
|
5974
|
+
número — `md` é sempre 48em, e o prefixo diz 48em DE QUÊ. Era a condição do Victor para os
|
|
5958
5975
|
nomes não ficarem ambíguos.
|
|
5959
5976
|
|
|
5960
5977
|
`@media`/`@container` não leem `var()`, então os valores aqui são literais da escala — o
|
|
@@ -6303,6 +6320,30 @@ button.graph-node-body { cursor:pointer; }
|
|
|
6303
6320
|
(o `AppShell`) refaz a conta para o que tem dentro. Na raiz (`<html>`) não: lá o `font-size` mudaria o `rem`. */
|
|
6304
6321
|
[data-text="lg"]:not(:root) { font-size:var(--text-sm); }
|
|
6305
6322
|
|
|
6323
|
+
/* O ESCOLHIDO NO ALTO CONTRASTE (06/11/2026, a auditoria externa A-015, a forma "B" — ver a nota no bloco
|
|
6324
|
+
`forced-colors` lá em cima). Mora AQUI, na seção dos modos — depois das regras do escolhido de cada tema (na paleta, lá em cima) e fora da paleta,
|
|
6325
|
+
que deixa a Ember de fora —, e com a forma
|
|
6326
|
+
`[data-theme] …`, que pesa o mesmo que elas: antes, a do claro (mais forte) ganhava e a letra ficava preta sobre o
|
|
6327
|
+
ciano. A Ember recebe também (o Victor, 06/11/2026: *"Ember entra"*). */
|
|
6328
|
+
@media (forced-colors:active) {
|
|
6329
|
+
:is(.segmented :is(button,a).active,.tab[data-active]),
|
|
6330
|
+
[data-theme] :is(.segmented :is(button,a).active,.tab[data-active])
|
|
6331
|
+
{ background:Highlight; color:HighlightText; }
|
|
6332
|
+
/* E as outras sete que a pergunta "quem mais?" achou (06/11/2026, o Victor: "vamos fazer logo todas agora"), a mesma
|
|
6333
|
+
forma B: o botão ligado (`Toggle`, `ToggleGroup`, o filtro fixo — o `toggle-area` entra na lista para o `:is()` pesar
|
|
6334
|
+
o que ele pesa), a etiqueta escolhida do `TagGroup`, o item escolhido da `ListBox` (lá o visto já aparecia; fica a
|
|
6335
|
+
mesma forma), o dia escolhido do `Calendar` e do `DatePicker`, e a linha escolhida da `Table`/`DataGrid`. */
|
|
6336
|
+
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed],.btn.toggle.toggle-area[aria-pressed="true"],.tag[data-selected],
|
|
6337
|
+
.list-box-item[aria-selected="true"],.calendar td[data-selected] button,tr[data-selected] > :is(td,th)),
|
|
6338
|
+
[data-theme] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed],.btn.toggle.toggle-area[aria-pressed="true"],
|
|
6339
|
+
.tag[data-selected],.list-box-item[aria-selected="true"],.calendar td[data-selected] button,tr[data-selected] > :is(td,th))
|
|
6340
|
+
{ background:Highlight; color:HighlightText; }
|
|
6341
|
+
/* O ponto do `Carousel` é FUNDO (o `::before`), e a troca apagava TODOS — não só o atual. Saem da troca: os outros na cor
|
|
6342
|
+
do texto, o atual no destaque. */
|
|
6343
|
+
.carousel-dot::before { forced-color-adjust:none; background:CanvasText; }
|
|
6344
|
+
.carousel-dot[aria-current="true"]::before { background:Highlight; }
|
|
6345
|
+
}
|
|
6346
|
+
|
|
6306
6347
|
/* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
|
|
6307
6348
|
/* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
|
|
6308
6349
|
de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */
|
|
@@ -6331,13 +6372,13 @@ button.graph-node-body { cursor:pointer; }
|
|
|
6331
6372
|
.container-scope { container:aurea / inline-size; }
|
|
6332
6373
|
|
|
6333
6374
|
/* por VIEWPORT — a decisão depende do tamanho da APLICAÇÃO */
|
|
6334
|
-
@media (min-width:
|
|
6335
|
-
@media (min-width:
|
|
6336
|
-
@media (min-width:
|
|
6337
|
-
@media (min-width:
|
|
6338
|
-
@media (min-width:
|
|
6339
|
-
@media (min-width:
|
|
6340
|
-
@media (min-width:
|
|
6375
|
+
@media (min-width:22.5em) { .vp-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xs\: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; } .vp-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
|
|
6376
|
+
@media (min-width:30em) { .vp-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xs\: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; } .vp-xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xs\:grid-span-12 { grid-column:span 12 / span 12; } }
|
|
6377
|
+
@media (min-width:40em) { .vp-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-sm\: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; } .vp-sm\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-sm\:field-horizontal>*:not(.label) { grid-column:2; } .vp-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-sm\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-sm\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-sm\:grid-span-1 { grid-column:span 1 / span 1; } .vp-sm\:grid-span-2 { grid-column:span 2 / span 2; } .vp-sm\:grid-span-3 { grid-column:span 3 / span 3; } .vp-sm\:grid-span-4 { grid-column:span 4 / span 4; } .vp-sm\:grid-span-5 { grid-column:span 5 / span 5; } .vp-sm\:grid-span-6 { grid-column:span 6 / span 6; } .vp-sm\:grid-span-7 { grid-column:span 7 / span 7; } .vp-sm\:grid-span-8 { grid-column:span 8 / span 8; } .vp-sm\:grid-span-9 { grid-column:span 9 / span 9; } .vp-sm\:grid-span-10 { grid-column:span 10 / span 10; } .vp-sm\:grid-span-11 { grid-column:span 11 / span 11; } .vp-sm\:grid-span-12 { grid-column:span 12 / span 12; } }
|
|
6378
|
+
@media (min-width:48em) { .vp-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-md\: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; } .vp-md\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-md\:field-horizontal>*:not(.label) { grid-column:2; } .vp-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-md\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-md\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-md\:grid-span-1 { grid-column:span 1 / span 1; } .vp-md\:grid-span-2 { grid-column:span 2 / span 2; } .vp-md\:grid-span-3 { grid-column:span 3 / span 3; } .vp-md\:grid-span-4 { grid-column:span 4 / span 4; } .vp-md\:grid-span-5 { grid-column:span 5 / span 5; } .vp-md\:grid-span-6 { grid-column:span 6 / span 6; } .vp-md\:grid-span-7 { grid-column:span 7 / span 7; } .vp-md\:grid-span-8 { grid-column:span 8 / span 8; } .vp-md\:grid-span-9 { grid-column:span 9 / span 9; } .vp-md\:grid-span-10 { grid-column:span 10 / span 10; } .vp-md\:grid-span-11 { grid-column:span 11 / span 11; } .vp-md\:grid-span-12 { grid-column:span 12 / span 12; } }
|
|
6379
|
+
@media (min-width:64em) { .vp-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-lg\: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; } .vp-lg\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-lg\:field-horizontal>*:not(.label) { grid-column:2; } .vp-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-lg\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-lg\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-lg\:grid-span-1 { grid-column:span 1 / span 1; } .vp-lg\:grid-span-2 { grid-column:span 2 / span 2; } .vp-lg\:grid-span-3 { grid-column:span 3 / span 3; } .vp-lg\:grid-span-4 { grid-column:span 4 / span 4; } .vp-lg\:grid-span-5 { grid-column:span 5 / span 5; } .vp-lg\:grid-span-6 { grid-column:span 6 / span 6; } .vp-lg\:grid-span-7 { grid-column:span 7 / span 7; } .vp-lg\:grid-span-8 { grid-column:span 8 / span 8; } .vp-lg\:grid-span-9 { grid-column:span 9 / span 9; } .vp-lg\:grid-span-10 { grid-column:span 10 / span 10; } .vp-lg\:grid-span-11 { grid-column:span 11 / span 11; } .vp-lg\:grid-span-12 { grid-column:span 12 / span 12; } }
|
|
6380
|
+
@media (min-width:80em) { .vp-xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xl\: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; } .vp-xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xl\:grid-span-12 { grid-column:span 12 / span 12; } }
|
|
6381
|
+
@media (min-width:96em) { .vp-2xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xl\: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; } .vp-2xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xl\:grid-span-12 { grid-column:span 12 / span 12; } }
|
|
6341
6382
|
|
|
6342
6383
|
/* por CONTAINER — o componente responde ao ESPAÇO EM QUE FOI COLOCADO */
|
|
6343
6384
|
@container aurea (min-width:360px) { .ct-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .ct-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .ct-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-2xs\: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; } .ct-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .ct-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .ct-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .ct-2xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .ct-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-2xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .ct-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .ct-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .ct-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .ct-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .ct-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .ct-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .ct-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .ct-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .ct-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .ct-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .ct-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .ct-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
|
package/dist/aurea.js
CHANGED
|
@@ -395,10 +395,11 @@
|
|
|
395
395
|
});
|
|
396
396
|
// 2. Subir para o desktop fecha. O top layer é estado do DOM, e nenhuma media query tira um
|
|
397
397
|
// elemento de lá: sem isto a gaveta ficava flutuando, sem véu, e o botão que a fecharia sumia.
|
|
398
|
-
//
|
|
399
|
-
//
|
|
398
|
+
// 64em é o `--breakpoint-lg` (1024 ÷ 16), o mesmo corte do `@media (max-width:63.9375em)` acima — em `em`, como
|
|
399
|
+
// os pontos de quebra do CSS (ADR-0092): em px, com a fonte do navegador aumentada, o CSS ainda mostrava a gaveta e
|
|
400
|
+
// isto já a fechava. O `consumidores-lote1.test` reprova se os dois divergirem.
|
|
400
401
|
if (typeof window.matchMedia === "function") {
|
|
401
|
-
var desktop = window.matchMedia("(min-width:
|
|
402
|
+
var desktop = window.matchMedia("(min-width: 64em)");
|
|
402
403
|
var aoSubir = function (e) {
|
|
403
404
|
if (!e.matches) return;
|
|
404
405
|
var abertas = document.querySelectorAll(".sidebar[popover]");
|