@ctrliq/quantic-components 1.62.2 → 1.63.0

package/dist/quantic-components.js

@@ -64462,36 +64462,42 @@
         aria-label=${this.ariaLabel}
         aria-expanded=${this.isAsideExpanded !== false ? 'true' : 'false'}
       >
-        <div class="body">
-          <slot @slotchange=${this.handleAutoHide}></slot>
+        <div class="header">
+          <slot name="header" @slotchange=${this.handleAutoHide}></slot>
         </div>
 
-        <div class="footer">
-          <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
-        </div>
+        <div class="scroll-area">
+          <div class="body">
+            <slot @slotchange=${this.handleAutoHide}></slot>
+          </div>
 
-        ${this.isDesktopViewport && this.collapsible
+          <div class="footer">
+            <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
+          </div>
+
+          ${this.isDesktopViewport && this.collapsible
             ? u$2 `<div class="toggle-container">
-              <quantic-sidebar-menu-item
-                @click=${this.handleToggle}
-                title=${this.isAsideExpanded
+                <quantic-sidebar-menu-item
+                  @click=${this.handleToggle}
+                  title=${this.isAsideExpanded
                 ? 'Collapse sidebar'
                 : 'Expand sidebar'}
-                label=${this.isAsideExpanded ? 'Collapse' : 'Expand sidebar'}
-                variant=${SidebarMenuItemVariant.Secondary}
-              >
-                ${this.isAsideExpanded
+                  label=${this.isAsideExpanded ? 'Collapse' : 'Expand sidebar'}
+                  variant=${SidebarMenuItemVariant.Secondary}
+                >
+                  ${this.isAsideExpanded
                 ? u$2 `<quantic-icon-lucide-panel-left-close
-                      slot="icon"
-                      size="sm"
-                    ></quantic-icon-lucide-panel-left-close>`
+                        slot="icon"
+                        size="sm"
+                      ></quantic-icon-lucide-panel-left-close>`
                 : u$2 `<quantic-icon-lucide-panel-left
-                      slot="icon"
-                      size="sm"
-                    ></quantic-icon-lucide-panel-left>`}
-              </quantic-sidebar-menu-item>
-            </div>`
+                        slot="icon"
+                        size="sm"
+                      ></quantic-icon-lucide-panel-left>`}
+                </quantic-sidebar-menu-item>
+              </div>`
             : null}
+        </div>
       </nav>
     `;
         }
@@ -64503,6 +64509,7 @@
         category: 'navigation',
         subComponents: ['quantic-sidebar-menu-item', 'quantic-sidebar-menu-item-group'],
         slots: {
+            header: { description: 'Optional sticky header rendered above the scrollable content.' },
             '': { description: 'Primary nav items (quantic-sidebar-menu-item or quantic-sidebar-menu-item-group).' },
             footer: { description: 'Footer nav items pinned to the bottom of the sidebar.' },
         },
@@ -64518,6 +64525,24 @@
       flex-direction: column;
       height: 100%;
       flex: 1;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    .header {
+      padding: var(--quantic-spacing-2);
+      padding-bottom: 0;
+      flex-shrink: 0;
+    }
+
+    .header:has(slot[hidden]) {
+      display: none;
+    }
+
+    .scroll-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       padding: var(--quantic-spacing-2);
       box-sizing: border-box;
       overflow-x: hidden;
@@ -64526,20 +64551,20 @@
       scrollbar-color: var(--quantic-border-secondary) transparent;
     }
 
-    .main::-webkit-scrollbar {
+    .scroll-area::-webkit-scrollbar {
       width: 4px;
     }
 
-    .main::-webkit-scrollbar-track {
+    .scroll-area::-webkit-scrollbar-track {
       background: transparent;
     }
 
-    .main::-webkit-scrollbar-thumb {
+    .scroll-area::-webkit-scrollbar-thumb {
       background: var(--quantic-border-secondary);
       border-radius: var(--quantic-radius-full);
     }
 
-    .main:not(.is-aside-expanded) .main {
+    .main:not(.is-aside-expanded) .scroll-area {
       padding: var(--quantic-spacing-1);
     }