@aurea-uds/core 0.34.0 → 0.35.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 +109 -4
- package/package.json +1 -1
package/dist/aurea.css
CHANGED
|
@@ -72,6 +72,11 @@
|
|
|
72
72
|
--z-toast:100;
|
|
73
73
|
--sidebar-width:16.5rem;
|
|
74
74
|
--sidebar-rail:4.25rem;
|
|
75
|
+
--docs-width:87.5rem;
|
|
76
|
+
--docs-sidebar-width:13.75rem;
|
|
77
|
+
--docs-aside-width:16.75rem;
|
|
78
|
+
--docs-toc-width:15rem;
|
|
79
|
+
--docs-text-width:56.25rem;
|
|
75
80
|
--topbar-height:4rem;
|
|
76
81
|
--content-max:102.5rem;
|
|
77
82
|
--breakpoint-2xs:360px;
|
|
@@ -595,7 +600,13 @@ img,svg { display:block; }
|
|
|
595
600
|
.container-sm { max-inline-size:var(--breakpoint-sm); } .container-md { max-inline-size:var(--breakpoint-md); }
|
|
596
601
|
.container-lg { max-inline-size:var(--breakpoint-lg); } .container-2xl { max-inline-size:var(--breakpoint-2xl); }
|
|
597
602
|
.container-full { max-inline-size:none; }
|
|
603
|
+
/* `docs` (lote T, 17/10/2026): o bloco da documentação, `--docs-width` (1400) — o da referência; a escala de pontos não
|
|
604
|
+
tem esse número. */
|
|
605
|
+
.container-docs { max-inline-size:var(--docs-width); }
|
|
598
606
|
@media (min-width:768px) { .container { padding-inline:var(--space-8); } }
|
|
607
|
+
/* 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
|
|
608
|
+
768, com 32, a busca e as ações não cabiam na linha da marca e desciam (a bancada do lote T pegou). */
|
|
609
|
+
@media (min-width:768px) { .container-docs { padding-inline:var(--space-6); } }
|
|
599
610
|
/* GAR-04 e GAR-05 (06/10/2026): `Section` — a faixa de ponta a ponta de uma página de site, com
|
|
600
611
|
fundo próprio e respiro vertical de site. Nenhuma referência aberta tem a peça (as seções de uma
|
|
601
612
|
delas são pagas, não lidas), então o respiro é escolha da Aurea, com tokens que já existem: `--space-16`
|
|
@@ -709,6 +720,40 @@ img,svg { display:block; }
|
|
|
709
720
|
64, o nosso padrão), com 6 entre as ações (o gap-1.5 dela). O painel do celular segue a altura, pela mesma variável. */
|
|
710
721
|
.topbar-sm { --topbar-height:calc(var(--space-12) + var(--space-2)); }
|
|
711
722
|
.topbar-sm .topbar-actions { gap:calc(var(--space-1) + var(--space-05)); }
|
|
723
|
+
/* A SEGUNDA LINHA DO CABEÇALHO (`Header tabs`, lote T, 17/10/2026 — os pedidos SITE-04 e SITE-05 do Victor): as áreas do
|
|
724
|
+
site, cada uma com o ícone, como a linha das áreas da documentação da referência (medida no código dela): 40 de altura,
|
|
725
|
+
4 abaixo da linha de cima, as áreas a 12 uma da outra, letra 14 em peso médio, o ícone a 8 do nome, com a altura da
|
|
726
|
+
letra. A área atual tem a cor do texto e o traço de 2 embaixo, na cor de destaque, encostado na linha de baixo. A linha
|
|
727
|
+
fica por último na ordem do Tab: as áreas vêm depois das ações. */
|
|
728
|
+
.topbar-with-tabs, .topbar-with-tabs > .topbar-inner { flex-wrap:wrap; row-gap:var(--space-1); }
|
|
729
|
+
.topbar-with-tabs { padding-block:0; border-block-end-width:0; }
|
|
730
|
+
/* Com as áreas, a barra tem 100 cravados e a linha de baixo fica PENDURADA logo abaixo dela, sobre o começo da página,
|
|
731
|
+
como a da referência (a dela é um `::after` com `bottom:-1px`): a borda invisível de 1 do sem linha somava 1 à barra
|
|
732
|
+
e empurrava tudo o que vem embaixo (medido: a lateral a 117 e não 116). */
|
|
733
|
+
.topbar-with-tabs.topbar-divider::after { inset-block-end:calc(-1 * var(--border-width)); }
|
|
734
|
+
/* A linha de cima tem a altura da barra (56 na `sm`, como a da referência): é a marca que a segura — sem isso a linha
|
|
735
|
+
ficava da altura da busca (36) e a barra inteira com 89, e não 100. */
|
|
736
|
+
.topbar-with-tabs .brand { min-block-size:var(--topbar-height); }
|
|
737
|
+
/* As áreas ficam EMBAIXO da linha (como lá: a área tem 30 — a letra, 8 e o traço de 2 — numa linha de 40) e numa linha só,
|
|
738
|
+
que ROLA DE LADO quando não cabe (medido na página da referência a 375: ela não quebra nem some; a página não rola).
|
|
739
|
+
No celular, 4 entre as áreas; de 768 para cima, 12. Como a linha recorta o que passa dela, o anel do foco fica POR
|
|
740
|
+
DENTRO da área, como o do item de menu — por fora, ele seria cortado embaixo. */
|
|
741
|
+
.topbar-tabs { flex-basis:100%; display:flex; align-items:flex-end; gap:var(--space-1); min-block-size:var(--space-10);
|
|
742
|
+
overflow-x:auto; overflow-y:hidden; }
|
|
743
|
+
@media (min-width:768px) { .topbar-tabs { gap:var(--space-3); } }
|
|
744
|
+
.topbar-tab { position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:var(--space-2);
|
|
745
|
+
padding:0 var(--space-1) calc(var(--space-2) + var(--focus-width)); color:var(--muted-foreground); font-size:var(--text-sm);
|
|
746
|
+
font-weight:var(--weight-medium); white-space:nowrap; text-decoration:none; }
|
|
747
|
+
.topbar-tab:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
|
|
748
|
+
.topbar-tab:hover, .topbar-tab[aria-current] { color:var(--foreground); }
|
|
749
|
+
.topbar-tab[aria-current]::after { content:""; position:absolute; z-index:1; inset-inline:0; inset-block-end:0; block-size:var(--focus-width);
|
|
750
|
+
background:var(--primary); }
|
|
751
|
+
.topbar-tab-icon { display:inline-flex; font-size:var(--text-sm); }
|
|
752
|
+
.topbar-tab-icon > .icon { inline-size:1em; block-size:1em; }
|
|
753
|
+
/* A LINHA DE BAIXO (`divider`) volta como LINHA (lote T, SITE-05, o Victor: "a linha que vai de uma ponta a outra"): a
|
|
754
|
+
segunda exceção ao sem linha (ADR-0072), desenhada, de uma ponta à outra da barra, na cor da linha. */
|
|
755
|
+
.topbar-divider::after { content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:var(--border-width);
|
|
756
|
+
background:var(--border); pointer-events:none; }
|
|
712
757
|
/* blurred (15/10/2026), só na `flush`: o fundo transparente que embaça o que passa por baixo — o desfoque de 16 da
|
|
713
758
|
referência. Quem pede menos transparência ao sistema, e o navegador sem desfoque, ficam com o fundo cheio. */
|
|
714
759
|
.topbar-flush.topbar-blurred { background:transparent; -webkit-backdrop-filter:blur(var(--space-4)); backdrop-filter:blur(var(--space-4)); }
|
|
@@ -818,6 +863,60 @@ img,svg { display:block; }
|
|
|
818
863
|
encostado, não sobre a lateral — a rente já encosta sozinha. */
|
|
819
864
|
.app-shell-flush .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
|
|
820
865
|
.app-shell-flush .content { margin-block-start:var(--space-05); }
|
|
866
|
+
/* O ARRANJO DE DOCUMENTAÇÃO (`AppShell layout="docs"`, lote T, 17/10/2026 — os pedidos SITE-01 e SITE-02 do Victor): o
|
|
867
|
+
da documentação da referência, medido no código dela. Um bloco CENTRALIZADO de `--docs-width` (1400) em cinco trilhas —
|
|
868
|
+
a sobra dos dois lados, iguais, centralizam —: a lateral (`--docs-sidebar-width`, 220), o texto, o índice
|
|
869
|
+
(`--docs-aside-width`, 268, de 1280 para cima). Sem vão: o espaço vem do recheio de cada coluna. A lateral NÃO flutua
|
|
870
|
+
(sem caixa; 16 abaixo da linha, 32 acima da borda da tela, 12 no começo); o texto tem 48 dos lados de 1280 para cima e 24
|
|
871
|
+
abaixo, e cada bloco dele vai até `--docs-text-width` (900). Entre 1024 e 1279 o índice desce para depois do texto,
|
|
872
|
+
como no `AppShell` de sempre; abaixo de 1024 a lateral é a gaveta. A barra de cima tem 56 + 4 + 40 (a linha das
|
|
873
|
+
áreas): a lateral e o índice grudam logo abaixo dela. */
|
|
874
|
+
/* O bloco mora DEPOIS da regra do topo rente (`.app-shell-flush .sidebar:not(.sidebar-flush)`) e tem a MESMA força (o
|
|
875
|
+
`:not`): mais fraca, ou antes dela, a lateral grudava a 66 do topo, por baixo da barra (medido). A linha de baixo
|
|
876
|
+
fica pendurada fora da barra, como a da referência, e não entra na conta. */
|
|
877
|
+
.app-shell-docs { --docs-top:calc(var(--space-12) + var(--space-2) + var(--space-1) + var(--space-10)); }
|
|
878
|
+
.app-shell-docs > .content > * { max-inline-size:var(--docs-text-width); }
|
|
879
|
+
/* 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
|
|
880
|
+
`AppShell`, ele encostava a 16 — a bancada do lote T pegou). */
|
|
881
|
+
.app-shell-docs > .content.content { margin:0; padding:var(--space-4) var(--space-6); }
|
|
882
|
+
@media (min-width:1024px) {
|
|
883
|
+
.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); }
|
|
884
|
+
/* As duas colunas COMEÇAM 16 abaixo da linha e PARAM 32 acima da borda de baixo da tela, como as da referência
|
|
885
|
+
medidas na página dela (17/10/2026, o Victor: "a distância do sidebar em relação aos itens de cima está muito
|
|
886
|
+
próxima" e "a distância no final da página"): a caixa que rola — e a barra dela — não encosta mais na linha. Dentro,
|
|
887
|
+
8 em cima e 16 embaixo, e o primeiro grupo sem a margem de cima: o "Overview" fica a 24 da linha, como lá. A
|
|
888
|
+
referência ainda apaga a lista aos poucos nas duas pontas com um degradê; a Aurea não tem degradê, e a lista corta
|
|
889
|
+
reto. Dos lados, 16 nos dois (12 + 4 lá) e 8 dentro do item e do nome do grupo: a cápsula começa a 16 da borda
|
|
890
|
+
da coluna e o texto a 24, como lá (medido na página dela a 1280, 17/10/2026). */
|
|
891
|
+
.app-shell-docs > .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--docs-top) + var(--space-4)); grid-column:2; grid-row:2;
|
|
892
|
+
block-size:calc(100vh - var(--shell-top) - var(--space-8)); max-block-size:none; margin:var(--space-4) 0 0; border-width:0;
|
|
893
|
+
padding-block:var(--space-2) var(--space-4); padding-inline:var(--space-4); }
|
|
894
|
+
.app-shell-docs > .sidebar > .sidebar-nav > .sidebar-list > li:first-child > .sidebar-group-label { margin-block-start:0; }
|
|
895
|
+
.app-shell-docs > .sidebar .sidebar-item { padding-inline:var(--space-2); }
|
|
896
|
+
.app-shell-docs > .sidebar .sidebar-group-label { margin-inline:var(--space-2); }
|
|
897
|
+
.app-shell-docs > .content.content { grid-column:3; grid-row:2; }
|
|
898
|
+
.app-shell-docs > .sidebar.app-shell-aside { grid-column:3; grid-row:3; block-size:auto; }
|
|
899
|
+
}
|
|
900
|
+
/* O índice ("On this page") SEM a barra de rolagem, como o da referência (o Victor, 17/10/2026: "ocultar a barra de
|
|
901
|
+
rolagem"). Nem a da coluna nem a do PRÓPRIO índice: numa tela baixa ele encolhe para caber na coluna e rola sozinho
|
|
902
|
+
(a barra que o Victor ainda viu, 1280 × 663, era a dele). Ele continua rolando com a roda e o toque, e o Tab leva cada
|
|
903
|
+
link para a vista. É a ÚNICA exceção à regra da barra visível (`engine-batch.test.tsx`): o Victor escolheu "escondida
|
|
904
|
+
sempre" entre esta e a da lateral, que some parada e volta com o ponteiro (17/10/2026). */
|
|
905
|
+
.app-shell-docs > .sidebar.app-shell-aside, .app-shell-docs > .sidebar.app-shell-aside > .toc { scrollbar-width:none; }
|
|
906
|
+
.app-shell-docs > .sidebar.app-shell-aside::-webkit-scrollbar,
|
|
907
|
+
.app-shell-docs > .sidebar.app-shell-aside > .toc::-webkit-scrollbar { display:none; }
|
|
908
|
+
/* Quem gruda aqui é a COLUNA; o índice dentro dela fica no lugar. Grudado também, ele somava os 16 dele aos da coluna e
|
|
909
|
+
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. */
|
|
910
|
+
/* E ele ocupa a largura da coluna (o `align-self:start` de sempre o encolhia até o nome mais largo, 168). */
|
|
911
|
+
.app-shell-docs > .sidebar.app-shell-aside > .toc { position:static; align-self:stretch; }
|
|
912
|
+
@media (min-width:1280px) {
|
|
913
|
+
.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); }
|
|
914
|
+
.app-shell-docs > .content.content { padding:var(--space-8) var(--space-12) var(--space-4); }
|
|
915
|
+
/* 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
|
|
916
|
+
ponta direita dele fica alinhada com a da barra de cima (o Victor, 17/10/2026: "componentes não alinhados"). */
|
|
917
|
+
.app-shell-docs > .sidebar.app-shell-aside { grid-column:4; grid-row:2; justify-self:start; inline-size:var(--docs-toc-width);
|
|
918
|
+
block-size:calc(100vh - var(--shell-top) - var(--space-8)); padding-block-start:0; padding-inline:var(--space-4); }
|
|
919
|
+
}
|
|
821
920
|
/* A margem é LÓGICA desde 03/10/2026 (AN-01): era `margin:space-4 space-4 space-4 0`, física, e na
|
|
822
921
|
escrita da direita para a esquerda o conteúdo encostava na borda da página e deixava 32 de vão na
|
|
823
922
|
junção com a lateral. Medido no banco da moldura; na esquerda para a direita nada muda. */
|
|
@@ -4109,6 +4208,12 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4109
4208
|
/* A pastilha do meio (marca, número, grupo) e o nome da porta na ponta são HTML sobre o desenho. */
|
|
4110
4209
|
.graph-edge-chip { position:absolute; z-index:var(--graph-label-z); display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-05) var(--space-2); border-radius:var(--radius-control); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:all; }
|
|
4111
4210
|
.graph-edge-end { position:absolute; z-index:var(--graph-label-z); padding:0 var(--space-1); border-radius:var(--radius-xs); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:none; }
|
|
4211
|
+
/* As guias do arraste (MNT-28, 17/10/2026): onde o nó encaixa no vizinho, como no draw.io — desenho cheio, na espessura
|
|
4212
|
+
do foco e na cor dele (a que se vê nos dois temas), por cima das linhas e dos nós e sem receber o ponteiro. A posição e
|
|
4213
|
+
o comprimento vêm do mapa, como os da pastilha da linha. */
|
|
4214
|
+
.graph-guide { position:absolute; z-index:var(--graph-label-z); background:var(--focus-strong); pointer-events:none; }
|
|
4215
|
+
.graph-guide-x { inline-size:var(--focus-width); margin-inline-start:calc(var(--focus-width) / -2); }
|
|
4216
|
+
.graph-guide-y { block-size:var(--focus-width); margin-block-start:calc(var(--focus-width) / -2); }
|
|
4112
4217
|
/* `nodrag`/`nopan`: a pastilha é HTML sobre o mapa, e as duas classes dizem ao motor para não arrastar
|
|
4113
4218
|
nem rolar a tela por ela (o botão do grupo precisa do clique). Fora do botão, o cursor é o comum. */
|
|
4114
4219
|
.graph-edge-chip.nodrag.nopan { cursor:default; }
|
|
@@ -4289,12 +4394,12 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4289
4394
|
Ou seja: o par padrão cobre Firefox e Chrome e ainda não cobre o Safari da maioria; o caminho
|
|
4290
4395
|
webkit cobre Safari e Chrome. Juntos cobrem os três, e onde os dois valem o padrão ganha por
|
|
4291
4396
|
vir depois. Só cor e espessura — nada de desenhar seta ou canto. */
|
|
4292
|
-
.carousel-track,.code-block,.combobox-popup,.command-palette,.dialog,.dialog-body,.drawer,.log-stream,.notification-list,.sidebar,.table-region,.table-wrap,.toc {
|
|
4397
|
+
.carousel-track,.code-block,.combobox-popup,.command-palette,.dialog,.dialog-body,.drawer,.log-stream,.notification-list,.sidebar,.table-region,.table-wrap,.toc,.topbar-tabs {
|
|
4293
4398
|
scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
|
|
4294
4399
|
}
|
|
4295
|
-
.carousel-track::-webkit-scrollbar,.code-block::-webkit-scrollbar,.combobox-popup::-webkit-scrollbar,.command-palette::-webkit-scrollbar,.dialog::-webkit-scrollbar,.dialog-body::-webkit-scrollbar,.drawer::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.notification-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.table-region::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.toc::-webkit-scrollbar { inline-size:var(--space-2); block-size:var(--space-2); }
|
|
4296
|
-
.carousel-track::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.combobox-popup::-webkit-scrollbar-track,.command-palette::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track,.dialog-body::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.log-stream::-webkit-scrollbar-track,.notification-list::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.table-region::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track { background:transparent; }
|
|
4297
|
-
.carousel-track::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.combobox-popup::-webkit-scrollbar-thumb,.command-palette::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,.dialog-body::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.notification-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.table-region::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--radius-control); }
|
|
4400
|
+
.carousel-track::-webkit-scrollbar,.code-block::-webkit-scrollbar,.combobox-popup::-webkit-scrollbar,.command-palette::-webkit-scrollbar,.dialog::-webkit-scrollbar,.dialog-body::-webkit-scrollbar,.drawer::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.notification-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.table-region::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.toc::-webkit-scrollbar,.topbar-tabs::-webkit-scrollbar { inline-size:var(--space-2); block-size:var(--space-2); }
|
|
4401
|
+
.carousel-track::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.combobox-popup::-webkit-scrollbar-track,.command-palette::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track,.dialog-body::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.log-stream::-webkit-scrollbar-track,.notification-list::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.table-region::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track,.topbar-tabs::-webkit-scrollbar-track { background:transparent; }
|
|
4402
|
+
.carousel-track::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.combobox-popup::-webkit-scrollbar-thumb,.command-palette::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,.dialog-body::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.notification-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.table-region::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb,.topbar-tabs::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--radius-control); }
|
|
4298
4403
|
/* A LATERAL é a exceção (0.32.0; o Victor, 13/10/2026, olhando a da documentação da referência: a barra
|
|
4299
4404
|
"só aparece se o mouse fica em cima do sidebar e ela é clarinha" — e, sobre o padrão, "pode alterar o
|
|
4300
4405
|
atual para ser claro e sumir a rolagem"). A barra continua NATIVA e continua lá — a largura fina não
|