@ctrliq/quantic-components 1.62.1 → 1.63.0

package/dist/quantic-components.js

@@ -52539,15 +52539,18 @@
     }
     /**
      * Generates a unique ID with an optional prefix.
-     * Uses crypto.randomUUID() when available, falls back to Math.random().
      *
      * @param prefix Optional prefix for the generated ID
      * @returns A unique ID string
      */
+    function randomUUID() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        });
+    }
     function generateId(prefix) {
-        const id = typeof crypto !== 'undefined'
-            ? crypto.randomUUID()
-            : Math.random().toString(36).substring(2);
+        const id = randomUUID();
         return prefix ? `${prefix}-${id}` : id;
     }
     /**
@@ -63973,9 +63976,7 @@
             this.disabled = false;
             this.offset = 8;
             this.open = false;
-            this.tooltipId = `tooltip-${typeof crypto !== 'undefined'
-            ? crypto.randomUUID()
-            : Math.random().toString(36)}`;
+            this.tooltipId = generateId('tooltip');
             this.contentElements = [];
             this.handleMouseEnter = () => {
                 if (this.disabled || this.open)
@@ -64461,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>
+
+          <div class="footer">
+            <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
+          </div>
 
-        ${this.isDesktopViewport && this.collapsible
+          ${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>
     `;
         }
@@ -64502,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.' },
         },
@@ -64517,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;
@@ -64525,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);
     }