@ctrliq/quantic-components 1.62.2 → 1.63.0

package/dist/quantic-components.min.js

@@ -37611,32 +37611,38 @@ const Jn="important",Qn=" !"+Jn,Yn=Fe(class extends Re{constructor(e){if(super(e
         aria-label=${this.ariaLabel}
         aria-expanded=${!1!==this.isAsideExpanded?"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?je`<div class="toggle-container">
-              <quantic-sidebar-menu-item
-                @click=${this.handleToggle}
-                title=${this.isAsideExpanded?"Collapse sidebar":"Expand sidebar"}
-                label=${this.isAsideExpanded?"Collapse":"Expand sidebar"}
-                variant=${Co.Secondary}
-              >
-                ${this.isAsideExpanded?je`<quantic-icon-lucide-panel-left-close
-                      slot="icon"
-                      size="sm"
-                    ></quantic-icon-lucide-panel-left-close>`:je`<quantic-icon-lucide-panel-left
-                      slot="icon"
-                      size="sm"
-                    ></quantic-icon-lucide-panel-left>`}
-              </quantic-sidebar-menu-item>
-            </div>`:null}
+          <div class="footer">
+            <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
+          </div>
+
+          ${this.isDesktopViewport&&this.collapsible?je`<div class="toggle-container">
+                <quantic-sidebar-menu-item
+                  @click=${this.handleToggle}
+                  title=${this.isAsideExpanded?"Collapse sidebar":"Expand sidebar"}
+                  label=${this.isAsideExpanded?"Collapse":"Expand sidebar"}
+                  variant=${Co.Secondary}
+                >
+                  ${this.isAsideExpanded?je`<quantic-icon-lucide-panel-left-close
+                        slot="icon"
+                        size="sm"
+                      ></quantic-icon-lucide-panel-left-close>`:je`<quantic-icon-lucide-panel-left
+                        slot="icon"
+                        size="sm"
+                      ></quantic-icon-lucide-panel-left>`}
+                </quantic-sidebar-menu-item>
+              </div>`:null}
+        </div>
       </nav>
-    `}},e.Sidebar.meta={tag:"quantic-sidebar",description:"Collapsible side navigation panel placed in the sidebar slot of quantic-layout. On desktop it can collapse to an icon rail; on mobile it is controlled by the layout as a drawer.",category:"navigation",subComponents:["quantic-sidebar-menu-item","quantic-sidebar-menu-item-group"],slots:{"":{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."}},relatedTo:["quantic-layout","quantic-sidebar-menu-item"]},e.Sidebar.styles=l`
+    `}},e.Sidebar.meta={tag:"quantic-sidebar",description:"Collapsible side navigation panel placed in the sidebar slot of quantic-layout. On desktop it can collapse to an icon rail; on mobile it is controlled by the layout as a drawer.",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."}},relatedTo:["quantic-layout","quantic-sidebar-menu-item"]},e.Sidebar.styles=l`
     :host {
       height: 100%;
     }
@@ -37646,6 +37652,24 @@ const Jn="important",Qn=" !"+Jn,Yn=Fe(class extends Re{constructor(e){if(super(e
       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;
@@ -37654,20 +37678,20 @@ const Jn="important",Qn=" !"+Jn,Yn=Fe(class extends Re{constructor(e){if(super(e
       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);
     }