@aurea-uds/core 0.56.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 +151 -62
- 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.
|
|
@@ -3161,8 +3161,8 @@ img,svg { display:block; }
|
|
|
3161
3161
|
.slider-color .slider-thumb { box-sizing:border-box; inline-size:var(--space-4); block-size:var(--space-4); align-self:center; border:0; background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--space-4) var(--slider-thumb-color,var(--primary)), var(--shadow-md); forced-color-adjust:none; }
|
|
3162
3162
|
.slider-color .slider-thumb::after { content:none; }
|
|
3163
3163
|
.slider-color[data-orientation="vertical"] .slider-thumb { inline-size:var(--space-4); block-size:var(--space-4); }
|
|
3164
|
-
/* COLORAREA (0.32.0, ADR-0069) — a área de cor. A pintura (o gradiente
|
|
3165
|
-
variável que o componente põe (`--color-area-fill`)
|
|
3164
|
+
/* COLORAREA (0.32.0, ADR-0069) — a área de cor. A pintura (o gradiente) chega pela
|
|
3165
|
+
variável que o componente põe (`--color-area-fill`).
|
|
3166
3166
|
Medidas da referência, lidas no CSS publicado dela (3.2.6): quadrada, até 224 de largura, canto 16; o pino de
|
|
3167
3167
|
16 que cresce para 20 ao arrastar, com o anel de 3. 224 não tem token: sai de dois `--space-24` e um `--space-8`.
|
|
3168
3168
|
O anel é BRANCO nos dois temas, e não um token de tema: ele fica sobre a cor escolhida, e não sobre a página.
|
|
@@ -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
|
|
@@ -3662,6 +3662,17 @@ img,svg { display:block; }
|
|
|
3662
3662
|
.tabs-secondary .tab { border-radius:0; }
|
|
3663
3663
|
.tabs-secondary .tab.active,.tabs-secondary .tab[data-active] { background:transparent; box-shadow:none; color:var(--foreground); }
|
|
3664
3664
|
.tabs-secondary .tab[data-active]::after { display:block; }
|
|
3665
|
+
/* O ESCOLHIDO DESLIZA (S-04, 05/11/2026): no `SegmentedControl` e no `Tabs` ele PULAVA, porque o fundo do escolhido é
|
|
3666
|
+
pintado no próprio item. A referência tem uma peça separada atrás dos itens, que anda. Aqui o desenho do escolhido NÃO
|
|
3667
|
+
muda (as sete cores do segmento, as treze marcas e os dois temas continuam nas regras de sempre): quando a escolha
|
|
3668
|
+
troca, o gancho `useDeslize` copia a pintura do NOVO escolhido para uma peça de passagem (`.selection-indicator`, atrás
|
|
3669
|
+
dos itens), esconde a do item e a leva da posição de antes até a nova — a cápsula, a sombra, o aro e o fio de baixo,
|
|
3670
|
+
que na aba secundária é o próprio indicador. No fim, a peça sai e o item volta a se pintar. Quem pede "reduzir
|
|
3671
|
+
movimento" vê a troca de uma vez, como antes. A letra troca de cor no mesmo passo, em vez de saltar. */
|
|
3672
|
+
.segmented :is(button,a),.tab { transition:color var(--duration-base) var(--ease-standard); }
|
|
3673
|
+
.selection-indicator { position:absolute; z-index:-1; pointer-events:none; }
|
|
3674
|
+
.selection-indicator > span { position:absolute; }
|
|
3675
|
+
:is(.segmented :is(button,a),.tab)[data-sliding]::after { visibility:hidden; }
|
|
3665
3676
|
/* `panel="plain"` (MNT-05 e C9, 06/10/2026): o painel sem caixa, como o painel de abas da
|
|
3666
3677
|
referência. Sem recheio dos lados — o conteúdo começa na linha do que está fora do `Tabs` —, e o
|
|
3667
3678
|
espaço de cima é o mesmo `space-3` do painel do nativo. Na vertical, quem separa é o `gap` da
|
|
@@ -3801,6 +3812,13 @@ img,svg { display:block; }
|
|
|
3801
3812
|
.table tbody tr:last-child > :last-child,.table-wrap tbody tr:last-child > :last-child { border-end-end-radius:var(--table-cell-r); }
|
|
3802
3813
|
.table tr:last-child td,.table-wrap tr:last-child td { border-bottom:0; }
|
|
3803
3814
|
@media (hover:hover) { .table tbody tr:hover > :is(td,th),.table-wrap tbody tr:hover > :is(td,th) { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); } }
|
|
3815
|
+
/* A LINHA ENTRE AS FILEIRAS (MNT-38, `dividers` na `Table` e na `DataGrid` — a forma "A", aprovada pela bancada em 05/11/2026,
|
|
3816
|
+
*"Pode, sem a Ember"*): a moldura de sempre e uma linha clara entre as fileiras do corpo, menos depois da última, como a
|
|
3817
|
+
referência (a linha de baixo da célula, a 50% do separador). A borda de baixo da célula já existe, transparente (ADR-0072);
|
|
3818
|
+
a variação só lhe dá cor — o texto a 10%, a mesma linha clara do cartão de contorno —, e nenhuma medida muda. É uma exceção
|
|
3819
|
+
NOMEADA ao sem linha: só com a escolha do app, e só esta regra (`tests/unit/sem-linha.test.tsx`). A Ember fica sem ela. Sem
|
|
3820
|
+
efeito no arranjo `rows`, onde cada fileira já é uma cápsula solta. */
|
|
3821
|
+
:is(.table.table-dividers:not(.table-rows),.datagrid-dividers .table-wrap table) tbody tr:not(:last-child) > :is(td,th):where(:not([data-brand="ember"] *)) { border-bottom-color:color-mix(in oklab,var(--foreground) 10%,transparent); }
|
|
3804
3822
|
/* AS LINHAS EM CÁPSULA (`Table variant="rows"`, o site B — a lista de membros da página inicial, aprovada pela bancada em
|
|
3805
3823
|
01/11/2026, o D-7.6): sem a caixa em volta; cada linha é uma cápsula de 54 (`--target-min` + 10), 4 entre elas; com o
|
|
3806
3824
|
mouse o `--fill-1`; a linha com `data-selected` (a que o app marcou), o amarelo a 14% (18% com o mouse). O cabeçalho em
|
|
@@ -3848,6 +3866,9 @@ img,svg { display:block; }
|
|
|
3848
3866
|
.table td[data-best],.table-wrap td[data-best] { font-weight:var(--weight-semibold); }
|
|
3849
3867
|
/* `fit`: sem o mínimo de 720 — a comparação de dois itens cabe num celular de 360. */
|
|
3850
3868
|
.table.table-fit { min-width:0; }
|
|
3869
|
+
/* E na `DataGrid` (S-02, *"Pode, com fit"*, 05/11/2026): o mesmo `fit` — as tabelas do site, numa coluna de texto de ~680,
|
|
3870
|
+
passavam do mínimo de 720 e saíam cortadas, rolando de lado. */
|
|
3871
|
+
.datagrid-fit .table-wrap table { min-width:0; }
|
|
3851
3872
|
/* `differencesOnly`: o "Só diferenças" esconde as linhas que o site marcou como iguais. */
|
|
3852
3873
|
.table-differences-only tr[data-same] { display:none; }
|
|
3853
3874
|
/* `stickyHeader`: o mesmo mecanismo do `DataGrid` (F6, mais abaixo). A caixa é o contêiner de
|
|
@@ -4085,7 +4106,7 @@ button.tag-main { cursor:pointer; }
|
|
|
4085
4106
|
valia nada — mídia não soma especificidade, então a base vencia por vir por último. Foi
|
|
4086
4107
|
exatamente o que aconteceu na primeira tentativa, e é a armadilha que o comentário do
|
|
4087
4108
|
`.banner` lá em cima já registrava. */
|
|
4088
|
-
@media (max-width:
|
|
4109
|
+
@media (max-width:40em) { .data-list { grid-template-columns:minmax(0,1fr); } }
|
|
4089
4110
|
/* Timeline: o trilho existia e o PONTO não — `.timeline-dot` media 0×0 (achado A13), então a
|
|
4090
4111
|
linha do tempo saía com a régua e sem as marcas, e o <ol> ainda mostrava a numeração do
|
|
4091
4112
|
navegador. Agora os dois derivam do MESMO token: o trilho fica a meio diâmetro do ponto, e
|
|
@@ -4255,8 +4276,7 @@ button.tag-main { cursor:pointer; }
|
|
|
4255
4276
|
/* A CAIXA EMPILHADA (`CodeBlock previewLayout="stacked"`, o site B, 02/11/2026 — o Victor: "preciso que seja fiel a
|
|
4256
4277
|
referencia", e "Com degradê"; ADR-0089): a peça em cima e o código embaixo, sem a chave Prévia | Código, nas medidas da
|
|
4257
4278
|
referência — a peça em 350 (3 x 96 + 48 + 12 + 2) com recheio de 40, no fundo da página; o código no cartão, 16 em cima,
|
|
4258
|
-
12 dos lados e 14 embaixo. Mais de 5 linhas: recolhido em 150 (96 + 48 + 4 + 2), sumindo num
|
|
4259
|
-
regra sem gradiente, só nesta regra — o check 4 cobra), com o "Expand code" (32, letra 12) a 8 do fundo; aberto, o código
|
|
4279
|
+
12 dos lados e 14 embaixo. Mais de 5 linhas: recolhido em 150 (96 + 48 + 4 + 2), sumindo num DEGRADÊ, com o "Expand code" (32, letra 12) a 8 do fundo; aberto, o código
|
|
4260
4280
|
inteiro e o "Collapse code" embaixo dele. Sem linha: a peça e o código se separam pelo fundo. */
|
|
4261
4281
|
.demo.demo-stacked { display:flex; flex-direction:column; min-block-size:0; padding:0; overflow:hidden; }
|
|
4262
4282
|
.demo.demo-stacked > .demo-panel { flex:none; }
|
|
@@ -4279,6 +4299,14 @@ button.tag-main { cursor:pointer; }
|
|
|
4279
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
|
|
4280
4300
|
com copiar: o sozinho, o do texto do site (`.prose pre`) e o do exemplo (`.demo-code`) — por isso vem depois deles. */
|
|
4281
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)); }
|
|
4282
4310
|
.copy-code .c-done { display:none; }
|
|
4283
4311
|
.copy-code.is-done .c-copy { display:none; } .copy-code.is-done .c-done { display:block; color:var(--primary); }
|
|
4284
4312
|
/* A CABEÇA DO ARQUIVO (`CodeBlock filename`, o site B — aprovada pela bancada em 01/11/2026, o item 6, "Ícone + nome"): o
|
|
@@ -4696,6 +4724,14 @@ button.tag-main { cursor:pointer; }
|
|
|
4696
4724
|
.sortable-item[data-grabbed] { border-color:transparent; box-shadow:var(--shadow-lg); }
|
|
4697
4725
|
.sortable-handle { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); cursor:grab; touch-action:none; }
|
|
4698
4726
|
.sortable-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
|
|
4727
|
+
/* O ARRASTO QUE ANDA (S-05, 05/11/2026): era "meio estático" — a linha pulava de casa em casa e os vizinhos pulavam junto.
|
|
4728
|
+
Agora a linha pega SEGUE o ponteiro (o `useReorder` a desloca com `translate`, sem transição: é a mão que move) e os
|
|
4729
|
+
vizinhos deslizam para abrir o lugar (o mesmo gancho, pela animação do navegador). A linha pega fica POR CIMA das outras
|
|
4730
|
+
(`z-index`) — e o fundo dela é o do cartão, opaco, então o texto de baixo não aparece através. A sombra de erguer entra
|
|
4731
|
+
e sai em vez de aparecer de uma vez. Quem pede "reduzir movimento": a linha continua seguindo o ponteiro (é
|
|
4732
|
+
manipulação direta, não animação), e os vizinhos trocam de lugar sem deslizar. */
|
|
4733
|
+
:is(.sortable-item,.block-item) { transition:box-shadow var(--duration-base) var(--ease-standard); }
|
|
4734
|
+
:is(.sortable-item,.block-item)[data-dragging] { position:relative; z-index:1; cursor:grabbing; }
|
|
4699
4735
|
.sortable-label { min-width:0; }
|
|
4700
4736
|
|
|
4701
4737
|
/* EDITOR POR BLOCOS (PLANO-1.0, item N1). A Aurea é dona da MOLDURA; o texto rico de dentro é do
|
|
@@ -4775,12 +4811,12 @@ button.tag-main { cursor:pointer; }
|
|
|
4775
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); }
|
|
4776
4812
|
.dialog[data-starting-style] { opacity:0; scale:1.05; }
|
|
4777
4813
|
.dialog[data-ending-style] { opacity:0; scale:.95; transition-duration:var(--duration-fast); }
|
|
4778
|
-
@media (min-width:
|
|
4814
|
+
@media (min-width:40em) { .dialog { --dialog-margin:var(--space-10); } }
|
|
4779
4815
|
/* `placement` (o dela): `auto` senta a janela EMBAIXO no celular, onde o polegar alcança, e no meio de
|
|
4780
4816
|
640 para cima. Sem o atributo (a marcação pura), a janela fica no meio, como sempre ficou. */
|
|
4781
4817
|
.dialog[data-placement="top"] { top:var(--dialog-margin); translate:none; }
|
|
4782
4818
|
.dialog[data-placement="bottom"] { top:auto; bottom:var(--dialog-margin); translate:none; }
|
|
4783
|
-
@media (max-width:
|
|
4819
|
+
@media (max-width:39.99875em) { .dialog[data-placement="auto"] { top:auto; bottom:var(--dialog-margin); translate:none; } }
|
|
4784
4820
|
/* size (B-03), decisão do Victor em 24/09/2026: as quatro larguras da referência — as do
|
|
4785
4821
|
pacote de estilos dela, 20/24/28/32rem = 320/384/448/512 — mais 1024
|
|
4786
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
|
|
@@ -4828,7 +4864,7 @@ button.tag-main { cursor:pointer; }
|
|
|
4828
4864
|
.drawer[data-swiping] { transition-duration:0ms; }
|
|
4829
4865
|
.drawer[data-ending-style] { transition-duration:calc(var(--drawer-swipe-strength,1) * var(--duration-slow)); }
|
|
4830
4866
|
.drawer-left,.drawer-right { top:0; bottom:0; inline-size:min(20rem,85vw); transform:translateX(var(--drawer-swipe-movement-x,0px)); }
|
|
4831
|
-
@media (min-width:
|
|
4867
|
+
@media (min-width:40em) { .drawer-left,.drawer-right { inline-size:min(24rem,85vw); } }
|
|
4832
4868
|
.drawer-right { right:0; border-left-width:var(--border-width); border-radius:var(--radius-card) 0 0 var(--radius-card); }
|
|
4833
4869
|
.drawer-left { left:0; border-right-width:var(--border-width); border-radius:0 var(--radius-card) var(--radius-card) 0; }
|
|
4834
4870
|
.drawer-top,.drawer-bottom { left:0; right:0; max-block-size:85dvh; transform:translateY(var(--drawer-swipe-movement-y,0px)); }
|
|
@@ -4872,7 +4908,7 @@ button.tag-main { cursor:pointer; }
|
|
|
4872
4908
|
.toast-description { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
|
|
4873
4909
|
.toast-action { flex:none; align-self:center; }
|
|
4874
4910
|
/* No celular a ação desce para baixo do texto, alinhada com ele — como a dela. */
|
|
4875
|
-
@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)); } }
|
|
4876
4912
|
/* As faces do tipo (desde 16/08/2026 elas pintam; o check 18 não enxerga classe por template). Em
|
|
4877
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
|
|
4878
4914
|
ADR-0061, como o aviso da referência. */
|
|
@@ -4916,6 +4952,14 @@ button.tag-main { cursor:pointer; }
|
|
|
4916
4952
|
fica preso, então não declaramos modalidade que não entregamos. */
|
|
4917
4953
|
.command-overlay { position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:start center; padding:var(--space-16) var(--space-5) var(--space-5); background:var(--overlay); backdrop-filter:blur(5px); }
|
|
4918
4954
|
.command-palette { display:grid; gap:var(--space-2); width:min(680px,100%); max-height:100%; overflow:auto; padding:var(--space-4); border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
|
|
4955
|
+
/* A PALETA ENTRA E SAI (S-04, 05/11/2026), como o `Dialog`: o fundo esmaece e a caixa cresce um pouco, pelos estados
|
|
4956
|
+
de abrir e fechar que o motor marca na moldura (`Viewport`) e na caixa (`Popup`). Fechar é mais rápido que abrir. */
|
|
4957
|
+
.command-overlay { transition:opacity var(--duration-slow) var(--ease-standard); }
|
|
4958
|
+
.command-overlay[data-starting-style],.command-overlay[data-ending-style] { opacity:0; }
|
|
4959
|
+
.command-overlay[data-ending-style] { transition-duration:var(--duration-fast); }
|
|
4960
|
+
.command-palette { transition:scale var(--duration-slow) var(--ease-emphasized); }
|
|
4961
|
+
.command-palette[data-starting-style],.command-palette[data-ending-style] { scale:.95; }
|
|
4962
|
+
.command-palette[data-ending-style] { transition-duration:var(--duration-fast); }
|
|
4919
4963
|
/* Camadas flutuantes (Base UI): tooltip, popover, menu. z-modal para funcionarem sobre diálogos; empilhamento mútuo pela ordem do portal no DOM. */
|
|
4920
4964
|
/* 0.32.0, a dica da referência: recheio de 8, letra de 12/16, até 320 de largura, o fundo das janelas
|
|
4921
4965
|
(era o fundo afundado), e a palavra longa quebra onde precisar. O canto continua o 10 da Aurea (o
|
|
@@ -4949,6 +4993,15 @@ button.tag-main { cursor:pointer; }
|
|
|
4949
4993
|
e `--space-1` de respiro. Vale para toda lista que usa `.menu`: Combobox, MultiCombobox,
|
|
4950
4994
|
DropdownMenu, ContextMenu, Menubar e a lista da CommandPalette. */
|
|
4951
4995
|
.menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
|
|
4996
|
+
/* O MENU ENTRA E SAI (S-04, 05/11/2026): aparecia de uma vez. Como o `Popover` e a dica daqui, e como a lista da
|
|
4997
|
+
referência: esmaece e cresce um pouco a partir do lado do gatilho (`--transform-origin`, que o motor publica), pelos
|
|
4998
|
+
estados de abrir e fechar que o motor marca (`data-starting-style`/`data-ending-style`). Vale para toda lista `.menu`
|
|
4999
|
+
que o motor abre: `DropdownMenu`, `ContextMenu`, `Menubar`, o submenu, o `Select`, o `Combobox`. A lista de DENTRO da
|
|
5000
|
+
`CommandPalette` (`.command-list`) não abre sozinha — quem entra é a janela, abaixo. Quem pede "reduzir movimento" não
|
|
5001
|
+
vê movimento: a regra global do fim da folha zera a duração. */
|
|
5002
|
+
.menu { transform-origin:var(--transform-origin,center); transition:opacity var(--duration-base) var(--ease-standard),scale var(--duration-base) var(--ease-standard); }
|
|
5003
|
+
.menu[data-starting-style],.menu[data-ending-style] { opacity:0; scale:.95; }
|
|
5004
|
+
.menu[data-ending-style] { transition-duration:var(--duration-fast); }
|
|
4952
5005
|
.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; text-decoration:none; cursor:pointer; }
|
|
4953
5006
|
/* O ITEM COM EXPLICAÇÃO e o ÍCONE NA PONTA (0.55.0, o Victor, 04/11/2026: "pegue o código" da referência): a anatomia do
|
|
4954
5007
|
item dela — o nome e, embaixo, a explicação na letra pequena e na cor de apoio; o recheio de 6 em cima e embaixo; o ícone
|
|
@@ -5032,7 +5085,7 @@ button.tag-main { cursor:pointer; }
|
|
|
5032
5085
|
border-radius:var(--radius-card); background:var(--fill-1); }
|
|
5033
5086
|
.command-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); }
|
|
5034
5087
|
.command-foot > .command-shortcuts { padding:0; }
|
|
5035
|
-
@media (max-width:
|
|
5088
|
+
@media (max-width:80em) { .command-body { grid-template-columns:minmax(0,1fr); } .command-preview { display:none; } }
|
|
5036
5089
|
|
|
5037
5090
|
.menu-sep { height:1px; margin:6px 4px; background:var(--border); border:0; }
|
|
5038
5091
|
/* G-API-02 — a anatomia que o menu ganhou quando o dado deixou de ter uma forma só.
|
|
@@ -5339,6 +5392,10 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
|
|
|
5339
5392
|
provadas. */
|
|
5340
5393
|
.datagrid-sticky thead th { position:sticky; inset-block-start:0; z-index:1; }
|
|
5341
5394
|
.datagrid-sticky .datagrid-filters th { inset-block-start:var(--table-head-h); }
|
|
5395
|
+
/* S-10 (o MNT-40), `stickyHeader="page"`: o cabeçalho preso ao topo da PÁGINA, sem caixa de rolagem própria — a caixa
|
|
5396
|
+
continua sem teto (uma rolagem só, a da página) e o `DataGrid` move as células do cabeçalho com `translate` enquanto a
|
|
5397
|
+
página rola. Aqui só a camada: as fileiras passam POR BAIXO do cabeçalho, que já tem o fundo da moldura. */
|
|
5398
|
+
.datagrid-sticky-page thead th { z-index:1; }
|
|
5342
5399
|
|
|
5343
5400
|
/* F7: a alça de redimensionar. Fina, colada no fim da célula e da altura toda —
|
|
5344
5401
|
alvo estreito de propósito, porque largo demais rouba o clique do cabeçalho
|
|
@@ -5365,7 +5422,7 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
|
|
|
5365
5422
|
honesta: grade estreita dentro de janela larga divide mesmo assim — o escape é
|
|
5366
5423
|
`--datagrid-detail-w`. */
|
|
5367
5424
|
.datagrid-split { display:grid; gap:var(--space-3); align-items:start; }
|
|
5368
|
-
@media (min-width:
|
|
5425
|
+
@media (min-width:48em) {
|
|
5369
5426
|
.datagrid-split { grid-template-columns:1fr var(--datagrid-detail-w,20rem); }
|
|
5370
5427
|
}
|
|
5371
5428
|
.datagrid-detail { border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); padding:var(--space-4); }
|
|
@@ -5757,11 +5814,11 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5757
5814
|
Agora vale SÓ para o shell que não tem gaveta — o `apps/docs/index.html`, que traz a
|
|
5758
5815
|
própria `.doc-sidebar` e o próprio JS de abrir. O shell do sistema segue em grid de uma
|
|
5759
5816
|
coluna com a gaveta acima. Sai junto com aquela página (achado M13). */
|
|
5760
|
-
@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; } }
|
|
5761
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; } }
|
|
5762
5819
|
|
|
5763
5820
|
/* Padrões compostos Aurea 1.7: blocos de operação, não widgets de domínio. */
|
|
5764
|
-
.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}}
|
|
5765
5822
|
.universal-grid .demo { min-height:0; }
|
|
5766
5823
|
.pattern-toolbar .input-group { flex:1 1 180px; }
|
|
5767
5824
|
.media-library-row.active { border-color:transparent; background:color-mix(in oklab,var(--primary) 10%,transparent); }
|
|
@@ -5797,6 +5854,15 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5797
5854
|
cor do texto), e o glifo pinta na cor do texto. */
|
|
5798
5855
|
.accordion-plus .accordion-chevron, .accordion-plus .accordion-item[open] > summary .accordion-chevron { background:transparent; }
|
|
5799
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; }
|
|
5800
5866
|
}
|
|
5801
5867
|
|
|
5802
5868
|
|
|
@@ -5808,10 +5874,10 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5808
5874
|
.table-region{outline:none}
|
|
5809
5875
|
.table-region:focus-visible{outline:var(--focus-width) solid var(--focus-strong);outline-offset:calc(-1 * var(--focus-width));box-shadow:none}
|
|
5810
5876
|
/* CONTAINER QUERY, e não breakpoint de viewport — Parte D, item D3 (08/08/2026).
|
|
5811
|
-
Era `@media (max-width:
|
|
5812
|
-
da escala (
|
|
5813
|
-
controles é a do PLAYER, não a da janela. Um player numa lateral de
|
|
5814
|
-
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.
|
|
5815
5881
|
`.media-player` já era `position:relative` + `overflow:hidden`, então a contenção não muda o
|
|
5816
5882
|
posicionamento do que está dentro — medido antes de escrever. */
|
|
5817
5883
|
.media-player { container-type:inline-size; }
|
|
@@ -5905,7 +5971,7 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5905
5971
|
emitida e o valor computado são os mesmos (a geometria e as baselines de pixel cobram isso).
|
|
5906
5972
|
|
|
5907
5973
|
O NOME DIZ O MENSURÁVEL: `vp-md:` é viewport, `ct-md:` é container. Uma escala só, um nome um
|
|
5908
|
-
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
|
|
5909
5975
|
nomes não ficarem ambíguos.
|
|
5910
5976
|
|
|
5911
5977
|
`@media`/`@container` não leem `var()`, então os valores aqui são literais da escala — o
|
|
@@ -6097,8 +6163,7 @@ button.graph-node-body { cursor:pointer; }
|
|
|
6097
6163
|
variações saíam todas iguais: "Sim, como as outras"). O padrão dela, sem estilo escolhido, continua congelado — as
|
|
6098
6164
|
regras do passo A continuam sem alcançá-la. Por isso o botão ligado dela, com um estilo escolhido, ganha aqui a
|
|
6099
6165
|
pintura que o passo A dá às outras marcas (logo abaixo do 2.8).
|
|
6100
|
-
|
|
6101
|
-
depois da escolha de cor da ADR-0069) e os AROS dos estilos de aro (o desenho que dá nome ao estilo — exceção nomeada à
|
|
6166
|
+
A exceção desta seção, registrada na ADR-0084: os AROS dos estilos de aro (o desenho que dá nome ao estilo — exceção nomeada à
|
|
6102
6167
|
ADR-0072, só quando o app escolhe o estilo). */
|
|
6103
6168
|
|
|
6104
6169
|
/* 2.8 · O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): o C, amarelo, é o padrão desde a 0.45.0 (a regra do passo A
|
|
@@ -6255,6 +6320,30 @@ button.graph-node-body { cursor:pointer; }
|
|
|
6255
6320
|
(o `AppShell`) refaz a conta para o que tem dentro. Na raiz (`<html>`) não: lá o `font-size` mudaria o `rem`. */
|
|
6256
6321
|
[data-text="lg"]:not(:root) { font-size:var(--text-sm); }
|
|
6257
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
|
+
|
|
6258
6347
|
/* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
|
|
6259
6348
|
/* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
|
|
6260
6349
|
de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */
|
|
@@ -6283,13 +6372,13 @@ button.graph-node-body { cursor:pointer; }
|
|
|
6283
6372
|
.container-scope { container:aurea / inline-size; }
|
|
6284
6373
|
|
|
6285
6374
|
/* por VIEWPORT — a decisão depende do tamanho da APLICAÇÃO */
|
|
6286
|
-
@media (min-width:
|
|
6287
|
-
@media (min-width:
|
|
6288
|
-
@media (min-width:
|
|
6289
|
-
@media (min-width:
|
|
6290
|
-
@media (min-width:
|
|
6291
|
-
@media (min-width:
|
|
6292
|
-
@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; } }
|
|
6293
6382
|
|
|
6294
6383
|
/* por CONTAINER — o componente responde ao ESPAÇO EM QUE FOI COLOCADO */
|
|
6295
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]");
|