@aurea-uds/core 0.40.1 → 0.42.0

package/dist/aurea.css

@@ -1177,6 +1177,32 @@ img,svg { display:block; }
 /* recolhida, o item tem só a largura do ícone: com os 15px de cada lado o fio sumiria. */
 .sidebar-collapsed .sidebar-item[aria-current]::after { inset-inline:var(--space-2); }
 .sidebar-collapsed .sidebar-sub { padding-inline-start:0; }
+/* O TOPO E O PÉ FIXOS (4-C, 23/10/2026) — o desenho das quinze laterais aprovadas pelo Victor em 21/10/2026 (item 107).
+   Com `header` ou `footer`, a caixa não rola mais: só o meio (`.sidebar-body`) rola, e o topo e o pé ficam presos. Sem
+   linha entre as partes (ADR-0072): o vão separa. Sem eles, nada muda — o HTML é o de sempre. */
+.sidebar-with-parts { overflow:hidden; }
+/* Na de canto, o topo e o pé ganham 12 da borda da janela, como nas quinze (a flutuante já tem a margem dela). */
+.sidebar-flush.sidebar-with-parts { padding-block:var(--space-3); }
+.sidebar-header, .sidebar-footer { flex:none; display:grid; gap:var(--space-2); }
+.sidebar-header { padding-block-end:var(--space-2); }
+.sidebar-body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-1); }
+.sidebar-footer { gap:var(--space-3); padding-block-start:var(--space-3); }
+/* A marca do app: o quadrinho na cor primária, com a letra na fonte de título, o nome e o subtítulo. */
+.sidebar-brand { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-2) var(--space-3); }
+.sidebar-brand-logo { display:grid; place-items:center; flex:none; inline-size:var(--control-h-md); block-size:var(--control-h-md); overflow:hidden; border-radius:var(--radius-lg); background:var(--primary); color:var(--primary-foreground); font-family:var(--font-heading); font-weight:var(--weight-bold); }
+/* `plain` (da 8 à 10 das quinze): o desenho solto, sem o quadrinho, e o nome na fonte e no tamanho de título. */
+.sidebar-brand-plain { gap:var(--space-2); }
+.sidebar-brand-plain .sidebar-brand-logo { inline-size:auto; block-size:auto; overflow:visible; border-radius:0; background:transparent; color:inherit; }
+.sidebar-brand-plain .sidebar-brand-name { font-family:var(--font-heading); font-size:var(--text-lg); font-weight:var(--weight-bold); }
+.sidebar-brand-text, .sidebar-user-text { display:grid; flex:1; min-width:0; line-height:var(--leading-tight); }
+.sidebar-brand-name, .sidebar-user-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sidebar-foreground); font-size:var(--text-sm); }
+.sidebar-brand-description, .sidebar-user-description { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-foreground); font-size:var(--text-xs); }
+/* A pessoa: numa caixinha do texto a 6% (`--fill-1`), com o canto do item da lateral. */
+.sidebar-user { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-3) var(--space-1); border-radius:calc(var(--radius-card) - var(--space-1)); background:var(--fill-1); }
+/* Recolhida: a marca vira só o quadrinho, e a pessoa, a foto e a ação empilhadas, sem a caixinha. Os nomes vão para o
+   leitor de tela (o React troca a classe por `.sr-only`, como o rótulo do item). */
+.sidebar-collapsed .sidebar-brand { justify-content:center; padding-inline:0; }
+.sidebar-collapsed .sidebar-user { flex-direction:column; padding-inline:0; background:transparent; }
 /* Estas regras tocam `.app-shell` porque a coluna do grid é do shell: a
    lateral não consegue encolher a própria trilha. `--sidebar-rail` continua sendo a largura
    do PAINEL; a flutuante soma as margens na trilha, a rente usa o token cru.
@@ -1214,6 +1240,33 @@ img,svg { display:block; }
 @media (max-width:1023px) {
   .sidebar-toggle-slot { display:none; }
   .app-shell-collapsible > .sidebar, .app-shell-collapsible > .content { grid-column:auto; grid-row:auto; } }
+/* A LATERAL ATÉ O TOPO (MNT-34, `AppShell layout="sidebar"`, 23/10/2026) — o pedido do app de rede (*"sidebar de canto e
+   que vá até o topo"*) e o PV-04 de um segundo app, na bancada aprovada pelo Victor (*"mantenha o atual e faça também os
+   outros 4"*). A marca mora no topo da lateral (o `header` da `Sidebar`, 4-C); a barra de cima só existe se o app passar
+   `topbar`, e fica só em cima do conteúdo (a coluna 2), como no sistema que serviu de modelo. Uma linha só na grade. */
+.app-shell-lateral { grid-template-rows:none; }
+.app-shell-lateral > .app-shell-column { grid-column:2; grid-row:1; min-width:0; display:flex; flex-direction:column; }
+.app-shell-lateral > .app-shell-column > .content { flex:1; }
+.app-shell-lateral.app-shell-collapsible > .sidebar { grid-row:1; }
+/* A lateral começa no topo da janela: a flutuante com a margem dela, a de canto encostada. Só na tela larga — abaixo de
+   1024 ela é gaveta, com a altura e a margem da gaveta. */
+@media (min-width:1024px) {
+  .app-shell-lateral > .sidebar { top:var(--space-4); height:calc(100vh - var(--space-4) * 2); max-height:none; }
+  .app-shell-lateral > .sidebar-flush { top:0; height:100vh; }
+}
+/* O respiro: a de canto não tem margem, e o conteúdo encostava nela (o MNT-34 mediu no app). */
+.app-shell-lateral:has(> .sidebar-flush) > .app-shell-column > .content { margin-inline-start:var(--space-4); }
+/* O botão de recolher é o das quinze laterais aprovadas (`AppShell.SidebarToggle`): o botão de ícone sem fundo, a 12 do
+   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
+   1024 ele some: a lateral é gaveta, e quem abre é o botão da gaveta. */
+.app-shell-lateral > .app-shell-column > .topbar { gap:var(--space-3); justify-content:flex-start; }
+@media (max-width:1023px) { .btn.sidebar-collapse-trigger { display:none; } }
+/* Sem barra, abaixo de 1024, uma faixa com o botão da gaveta e a marca (a altura da barra pequena, 56). */
+.app-shell-narrow-bar { display:none; }
+@media (max-width:1023px) {
+  .app-shell-lateral > .app-shell-column { grid-column:1; }
+  .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); }
+}
 
 /* ── Navegação inferior — o vocabulário de APLICATIVO ───────────────────────────────
    Lacuna estrutural medida no `CONSUMIDOR-1.md` §4.1: `.topbar` e `.sidebar` são
@@ -4629,17 +4682,18 @@ button.graph-node-body { cursor:pointer; }
    A cor sai da escala da LATERAL, não da página: é o texto dela, esmaecido.
    O desenho de antes — a barra sempre à vista, na cor de borda forte — não saiu: é a variante
    `scrollbar="visible"` (`.sidebar-scrollbar-visible`), para quem precisa da barra o tempo todo. */
-.sidebar { scrollbar-color:transparent transparent; }
-.sidebar::-webkit-scrollbar-thumb { background:transparent; }
-.sidebar:is(:hover,:focus-within) { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
-.sidebar:is(:hover,:focus-within)::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
+.sidebar, .sidebar-body { scrollbar-color:transparent transparent; }
+.sidebar::-webkit-scrollbar-thumb, .sidebar-body::-webkit-scrollbar-thumb { background:transparent; }
+/* 4-C: com o topo e o pé fixos, quem rola é o meio (`.sidebar-body`) — a mesma barra, acesa pela lateral inteira. */
+.sidebar:is(:hover,:focus-within), .sidebar:is(:hover,:focus-within) > .sidebar-body { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
+.sidebar:is(:hover,:focus-within)::-webkit-scrollbar-thumb, .sidebar:is(:hover,:focus-within) > .sidebar-body::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
 @media (hover: none) {
-  .sidebar { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
-  .sidebar::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
+  .sidebar, .sidebar-body { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
+  .sidebar::-webkit-scrollbar-thumb, .sidebar-body::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
 }
 /* Duas classes, depois das de cima: ganha do "em cima" e do "sem ponteiro" com a mesma força, pela ordem. */
-.sidebar.sidebar-scrollbar-visible { scrollbar-color:var(--border-strong) transparent; }
-.sidebar.sidebar-scrollbar-visible::-webkit-scrollbar-thumb { background:var(--border-strong); }
+.sidebar.sidebar-scrollbar-visible, .sidebar.sidebar-scrollbar-visible > .sidebar-body { scrollbar-color:var(--border-strong) transparent; }
+.sidebar.sidebar-scrollbar-visible::-webkit-scrollbar-thumb, .sidebar.sidebar-scrollbar-visible > .sidebar-body::-webkit-scrollbar-thumb { background:var(--border-strong); }
 
 /* ========================================================================== */
 /* 99. EIXO RESPONSIVO — a infraestrutura do G-AXIS-04                        */

package/package.json

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