@ctrliq/quantic-components 1.67.4 → 1.67.6

package/dist/layout/sidebar.component.js

@@ -20,7 +20,10 @@ import { prop } from '../shared/component-meta.decorators';
 SidebarMenuItem.ensureDefined();
 LucideIconPanelLeftClose.ensureDefined();
 LucideIconPanelLeft.ensureDefined();
-let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
+let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, [
+    'header',
+    'footer',
+]) {
     constructor() {
         super(...arguments);
         this.ariaLabel = 'Sidebar navigation';
@@ -56,25 +59,23 @@ let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, ['he
 
           ${this.isDesktopViewport && this.collapsible
             ? html `<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=${SidebarMenuItemVariant.Secondary}
-                >
-                  ${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
                 ? html `<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>`
                 : html `<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>
@@ -86,11 +87,20 @@ Sidebar.meta = {
     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'],
+    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.' },
+        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'],
 };
@@ -114,7 +124,7 @@ Sidebar.styles = css `
       flex-shrink: 0;
     }
 
-    :host(:not(:has([slot="header"]))) .header {
+    :host(:not(:has([slot='header']))) .header {
       display: none;
     }
 
@@ -181,10 +191,19 @@ __decorate([
     consume({ context: asideExpandedContext, subscribe: true })
 ], Sidebar.prototype, "isAsideExpanded", void 0);
 __decorate([
-    prop({ type: 'string', default: 'Sidebar navigation', description: 'Accessible label for the nav landmark.' })
+    prop({
+        type: 'string',
+        default: 'Sidebar navigation',
+        description: 'Accessible label for the nav landmark.',
+    })
 ], Sidebar.prototype, "ariaLabel", void 0);
 __decorate([
-    prop({ type: 'boolean', default: 'false', attribute: 'collapsible', description: 'When true, shows a toggle button at the bottom of the sidebar on desktop viewports.' })
+    prop({
+        type: 'boolean',
+        default: 'false',
+        attribute: 'collapsible',
+        description: 'When true, shows a toggle button at the bottom of the sidebar on desktop viewports.',
+    })
 ], Sidebar.prototype, "collapsible", void 0);
 __decorate([
     respond(Breakpoint.above(1024))