@ctrliq/quantic-components 1.67.5 → 1.67.6

package/dist/quantic-components.js

@@ -28,6 +28,12 @@
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+
     typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
         var e = new Error(message);
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -259,10 +265,10 @@
     }
 
     /**
-     * Mixin that automatically hides empty named slots using CSS only.
+     * Mixin that automatically hides empty named slots.
      *
      * Each named slot is hidden by default and revealed when the host has a light
-     * DOM child with a matching `slot` attribute. Two rules cover all browsers:
+     * DOM child with a matching `slot` attribute. Two CSS rules cover all browsers:
      *
      * - `:host(:has([slot="name"]))` — Safari and Firefox
      * - `@scope { :scope:has([slot="name"]) }` — Chrome (@scope changes the
@@ -276,12 +282,18 @@
      * set in `quantic-component`.
      *
      * CSS is injected via `finalizeStyles` so it lands in Lit SSR's Declarative
-     * Shadow DOM output — no JS, no layout shift.
+     * Shadow DOM output — no JS, no layout shift for SSR.
+     *
+     * Chrome doesn't re-evaluate :has() in shadow DOM when light-DOM children
+     * arrive asynchronously (e.g. React CSR). A capture listener on the shadow
+     * root intercepts all slotchange events internally and sets inline styles to
+     * override the CSS — no wiring required in component templates.
      *
      * @example
      * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}
      */
     const AutoHideEmptySlotsMixin = (superClass, namedSlots = []) => {
+        var _AutoHideEmptySlotsClass_onSlotChange;
         if (namedSlots.length === 0)
             return superClass;
         // A component may declare a native CSSStyleSheet, which Lit passes through
@@ -299,6 +311,18 @@
         })
             .join(' ');
         class AutoHideEmptySlotsClass extends superClass {
+            constructor() {
+                super(...arguments);
+                // slotchange doesn't bubble, but capture intercepts it on the way down
+                // to the slot element — one listener covers all named slots.
+                _AutoHideEmptySlotsClass_onSlotChange.set(this, (e) => {
+                    const slot = e.target;
+                    if (!namedSlots.includes(slot.name))
+                        return;
+                    const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+                    slot.style.display = hasContent ? 'block' : '';
+                });
+            }
             static finalizeStyles(styles) {
                 const base = superClass.finalizeStyles?.call(this, styles) ?? [];
                 const baseCSS = base.map(toCssText).join('\n');
@@ -308,7 +332,30 @@
                         ` @layer quantic-slot-visibility { ${slotRulesCSS} }`),
                 ];
             }
+            connectedCallback() {
+                super.connectedCallback();
+                this.renderRoot.addEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
+                    capture: true,
+                });
+            }
+            disconnectedCallback() {
+                super.disconnectedCallback();
+                this.renderRoot.removeEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
+                    capture: true,
+                });
+            }
+            // Sync initial state for slots that already have content on first render
+            // (e.g. synchronous React CSR or SSR hydration with light DOM present).
+            firstUpdated(changed) {
+                super.firstUpdated?.(changed);
+                for (const name of namedSlots) {
+                    const slot = this.renderRoot.querySelector(`slot[name="${CSS.escape(name)}"]`);
+                    if (slot)
+                        __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f").call(this, { target: slot });
+                }
+            }
         }
+        _AutoHideEmptySlotsClass_onSlotChange = new WeakMap();
         return AutoHideEmptySlotsClass;
     };
 
@@ -2594,7 +2641,10 @@
     exports.LucideIconInfo.ensureDefined();
     exports.LucideIconTriangleAlert.ensureDefined();
     exports.LucideIconX.ensureDefined();
-    exports.Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement, ['title', 'action']) {
+    exports.Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'title',
+        'action',
+    ]) {
         constructor() {
             super(...arguments);
             this.type = AlertType.Info;
@@ -2645,18 +2695,18 @@
         </div>
         ${this.showCloseButton
             ? b `<quantic-button
-              class="close-button"
-              variant="ghost"
-              size="sm"
-              icon
-              aria-label="Close"
-              @click=${this.handleCloseClick}
-            >
-              <quantic-icon-lucide-x
+                class="close-button"
+                variant="ghost"
                 size="sm"
-                class="close-icon"
-              ></quantic-icon-lucide-x>
-            </quantic-button>`
+                icon
+                aria-label="Close"
+                @click=${this.handleCloseClick}
+              >
+                <quantic-icon-lucide-x
+                  size="sm"
+                  class="close-icon"
+                ></quantic-icon-lucide-x>
+              </quantic-button>`
             : A}
       </div>
     `;
@@ -6120,7 +6170,11 @@
      */
     const CardGroupDensity = exports.GridDensity;
 
-    exports.Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer', 'action-icon']) {
+    exports.Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'header',
+        'footer',
+        'action-icon',
+    ]) {
         constructor() {
             super(...arguments);
             this.as = 'div';
@@ -6143,10 +6197,7 @@
         class="header"
         data-description="Header area — place quantic-card-title and quantic-card-meta here."
       ></slot>
-      <slot
-        class="body"
-        data-description="Main body content."
-      ></slot>
+      <slot class="body" data-description="Main body content."></slot>
       <slot
         name="footer"
         class="footer"
@@ -6197,182 +6248,193 @@
         ],
         relatedTo: ['quantic-card-group', 'quantic-panel'],
     };
-    exports.Card.styles = [i$7 `
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      container-name: box-container;
-      container-type: inline-size;
-      font-family: var(--quantic-font-family-body);
-      color: var(--quantic-text-secondary);
-      position: relative;
-
-      --quantic-component-card-padding: var(--quantic-spacing-6);
-      --quantic-component-card-font-size: var(--quantic-font-size-body-md);
-      --quantic-component-card-line-height: var(--quantic-line-height-body-md);
-      --quantic-component-card-radius: var(--quantic-radius-md);
-      --quantic-component-card-spacing: var(--quantic-spacing-4);
-    }
-
-    button.main,
-    a.main {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
-
-    button.main:focus-visible,
-    a.main:focus-visible {
-      outline-color: var(--quantic-focus-ring);
-    }
-
-    :host([disabled]) {
-      pointer-events: none;
-    }
+    exports.Card.styles = [
+        i$7 `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        container-name: box-container;
+        container-type: inline-size;
+        font-family: var(--quantic-font-family-body);
+        color: var(--quantic-text-secondary);
+        position: relative;
 
-    .main {
-      display: flex;
-      flex-direction: column;
-      gap: var(--quantic-component-card-spacing);
-      padding: var(--quantic-component-card-padding);
-      border-radius: var(--quantic-component-card-radius);
-      border: 1px solid var(--quantic-border-primary);
-      overflow: hidden;
-      font-size: var(--quantic-component-card-font-size);
-      line-height: var(--quantic-component-card-line-height);
-      flex: 1 1 auto;
-      box-sizing: border-box;
-    }
+        --quantic-component-card-padding: var(--quantic-spacing-6);
+        --quantic-component-card-font-size: var(--quantic-font-size-body-md);
+        --quantic-component-card-line-height: var(
+          --quantic-line-height-body-md
+        );
+        --quantic-component-card-radius: var(--quantic-radius-md);
+        --quantic-component-card-spacing: var(--quantic-spacing-4);
+      }
 
-    button.main,
-    a.main {
-      position: relative;
-    }
+      button.main,
+      a.main {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
 
-    .variant--solid {
-      background-color: var(--quantic-bg-secondary);
-      border: 1px solid var(--quantic-border-primary);
-    }
+      button.main:focus-visible,
+      a.main:focus-visible {
+        outline-color: var(--quantic-focus-ring);
+      }
 
-    .variant--outline {
-      background-color: transparent;
-      border: 1px solid var(--quantic-border-primary);
-    }
+      :host([disabled]) {
+        pointer-events: none;
+      }
 
-    .size--xs {
-      --quantic-component-card-padding: var(--quantic-spacing-3);
-      --quantic-component-card-spacing: var(--quantic-spacing-1);
-      --quantic-component-card-radius: var(--quantic-radius-sm);
-      --quantic-component-card-font-size: var(--quantic-font-size-body-xs);
-      --quantic-component-card-line-height: var(--quantic-line-height-body-sm);
-    }
+      .main {
+        display: flex;
+        flex-direction: column;
+        gap: var(--quantic-component-card-spacing);
+        padding: var(--quantic-component-card-padding);
+        border-radius: var(--quantic-component-card-radius);
+        border: 1px solid var(--quantic-border-primary);
+        overflow: hidden;
+        font-size: var(--quantic-component-card-font-size);
+        line-height: var(--quantic-component-card-line-height);
+        flex: 1 1 auto;
+        box-sizing: border-box;
+      }
 
-    .size--sm {
-      --quantic-component-card-padding: var(--quantic-spacing-4);
-      --quantic-component-card-spacing: var(--quantic-spacing-1-5);
-      --quantic-component-card-radius: var(--quantic-radius-sm);
-      --quantic-component-card-font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-card-line-height: var(--quantic-line-height-body-sm);
-    }
+      button.main,
+      a.main {
+        position: relative;
+      }
 
-    .size--md {
-      --quantic-component-card-padding: var(--quantic-spacing-5);
-      --quantic-component-card-spacing: var(--quantic-spacing-2);
-      --quantic-component-card-radius: var(--quantic-radius-md);
-      --quantic-component-card-font-size: var(--quantic-font-size-body-md);
-      --quantic-component-card-line-height: var(--quantic-line-height-body-md);
-    }
+      .variant--solid {
+        background-color: var(--quantic-bg-secondary);
+        border: 1px solid var(--quantic-border-primary);
+      }
 
-    .size--lg {
-      --quantic-component-card-padding: var(--quantic-spacing-6);
-      --quantic-component-card-spacing: var(--quantic-spacing-3);
-      --quantic-component-card-radius: var(--quantic-radius-lg);
-      --quantic-component-card-font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-card-line-height: var(--quantic-line-height-body-lg);
-    }
+      .variant--outline {
+        background-color: transparent;
+        border: 1px solid var(--quantic-border-primary);
+      }
 
-    @container (min-width: 40rem) {
       .size--xs {
         --quantic-component-card-padding: var(--quantic-spacing-3);
+        --quantic-component-card-spacing: var(--quantic-spacing-1);
+        --quantic-component-card-radius: var(--quantic-radius-sm);
+        --quantic-component-card-font-size: var(--quantic-font-size-body-xs);
+        --quantic-component-card-line-height: var(
+          --quantic-line-height-body-sm
+        );
       }
 
       .size--sm {
         --quantic-component-card-padding: var(--quantic-spacing-4);
+        --quantic-component-card-spacing: var(--quantic-spacing-1-5);
+        --quantic-component-card-radius: var(--quantic-radius-sm);
+        --quantic-component-card-font-size: var(--quantic-font-size-body-sm);
+        --quantic-component-card-line-height: var(
+          --quantic-line-height-body-sm
+        );
       }
 
       .size--md {
-        --quantic-component-card-padding: var(--quantic-spacing-6);
+        --quantic-component-card-padding: var(--quantic-spacing-5);
+        --quantic-component-card-spacing: var(--quantic-spacing-2);
+        --quantic-component-card-radius: var(--quantic-radius-md);
+        --quantic-component-card-font-size: var(--quantic-font-size-body-md);
+        --quantic-component-card-line-height: var(
+          --quantic-line-height-body-md
+        );
       }
 
       .size--lg {
-        --quantic-component-card-padding: var(--quantic-spacing-8);
+        --quantic-component-card-padding: var(--quantic-spacing-6);
+        --quantic-component-card-spacing: var(--quantic-spacing-3);
+        --quantic-component-card-radius: var(--quantic-radius-lg);
+        --quantic-component-card-font-size: var(--quantic-font-size-body-lg);
+        --quantic-component-card-line-height: var(
+          --quantic-line-height-body-lg
+        );
       }
-    }
 
-    .header,
-    .body,
-    .footer {
-      display: block;
-    }
+      @container (min-width: 40rem) {
+        .size--xs {
+          --quantic-component-card-padding: var(--quantic-spacing-3);
+        }
 
-    .footer {
-      padding-top: var(--quantic-component-card-spacing);
-      margin-top: auto;
-    }
+        .size--sm {
+          --quantic-component-card-padding: var(--quantic-spacing-4);
+        }
 
-    .action-icon {
-      position: absolute;
-      inset: calc(var(--quantic-component-card-padding) / 2);
-      left: auto;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      pointer-events: none;
-      transition:
-        color 0.2s ease-in-out,
-        opacity 0.2s ease-in-out;
-      color: var(--quantic-text-tertiary);
-      opacity: 0.6;
-    }
+        .size--md {
+          --quantic-component-card-padding: var(--quantic-spacing-6);
+        }
 
-    .is-interactive {
-      appearance: none;
-      font-family: var(--quantic-font-family-body);
-      color: var(--quantic-text-secondary);
-      text-decoration: none;
-      text-align: left;
-      cursor: pointer;
-      outline: none;
-      width: 100%;
-      transition:
-        border-color 0.2s ease-in-out,
-        background-color 0.2s ease-in-out,
-        box-shadow 0.2s ease-in-out;
-    }
+        .size--lg {
+          --quantic-component-card-padding: var(--quantic-spacing-8);
+        }
+      }
 
-    .is-interactive:hover:not(.is-disabled) {
-      border-color: var(--quantic-focus-ring);
-    }
+      .header,
+      .body,
+      .footer {
+        display: block;
+      }
 
-    .is-interactive:hover:not(.is-disabled) .action-icon {
-      color: var(--quantic-focus-ring);
-      opacity: 1;
-    }
+      .footer {
+        padding-top: var(--quantic-component-card-spacing);
+        margin-top: auto;
+      }
 
-    .is-interactive.is-disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
+      .action-icon {
+        position: absolute;
+        inset: calc(var(--quantic-component-card-padding) / 2);
+        left: auto;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        pointer-events: none;
+        transition:
+          color 0.2s ease-in-out,
+          opacity 0.2s ease-in-out;
+        color: var(--quantic-text-tertiary);
+        opacity: 0.6;
+      }
 
-    [hidden] {
-      display: none;
-    }
-  `,
+      .is-interactive {
+        appearance: none;
+        font-family: var(--quantic-font-family-body);
+        color: var(--quantic-text-secondary);
+        text-decoration: none;
+        text-align: left;
+        cursor: pointer;
+        outline: none;
+        width: 100%;
+        transition:
+          border-color 0.2s ease-in-out,
+          background-color 0.2s ease-in-out,
+          box-shadow 0.2s ease-in-out;
+      }
+
+      .is-interactive:hover:not(.is-disabled) {
+        border-color: var(--quantic-focus-ring);
+      }
+
+      .is-interactive:hover:not(.is-disabled) .action-icon {
+        color: var(--quantic-focus-ring);
+        opacity: 1;
+      }
+
+      .is-interactive.is-disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+      [hidden] {
+        display: none;
+      }
+    `,
         whenSlotPresent('action-icon', i$7 `
-    .main {
-      padding-right: calc(var(--quantic-component-card-padding) * 2);
-    }
-  `),
+        .main {
+          padding-right: calc(var(--quantic-component-card-padding) * 2);
+        }
+      `),
     ];
     __decorate([
         prop({
@@ -7230,7 +7292,10 @@
         quanticElement('quantic-card-meta')
     ], exports.CardMeta);
 
-    exports.CardTitle = class CardTitle extends AutoHideEmptySlotsMixin(QuanticElement, ['pretitle', 'subtitle']) {
+    exports.CardTitle = class CardTitle extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'pretitle',
+        'subtitle',
+    ]) {
         render() {
             return u$2 `
       <hgroup>
@@ -10771,7 +10836,10 @@
         Manual: 'manual',
     };
 
-    exports.PopoverPopup = class PopoverPopup extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
+    exports.PopoverPopup = class PopoverPopup extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'header',
+        'footer',
+    ]) {
         constructor() {
             super(...arguments);
             this.visible = false;
@@ -10887,7 +10955,12 @@
     }
   `;
     __decorate([
-        prop({ type: 'boolean', default: 'false', reflect: true, description: 'Controls visibility and pointer-events. Managed by quantic-popover.' })
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Controls visibility and pointer-events. Managed by quantic-popover.',
+        })
     ], exports.PopoverPopup.prototype, "visible", void 0);
     exports.PopoverPopup = __decorate([
         quanticElement('quantic-popover-popup')
@@ -11782,7 +11855,9 @@
         quanticElement('quantic-dropdown-menu-item')
     ], exports.DropdownMenuItem);
 
-    exports.DropdownMenuGroup = class DropdownMenuGroup extends AutoHideEmptySlotsMixin(QuanticElement, ['label']) {
+    exports.DropdownMenuGroup = class DropdownMenuGroup extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'label',
+    ]) {
         constructor() {
             super(...arguments);
             this.label = '';
@@ -11819,45 +11894,46 @@
         },
         relatedTo: ['quantic-dropdown-menu', 'quantic-dropdown-menu-item'],
     };
-    exports.DropdownMenuGroup.styles = [i$7 `
-    :host {
-      display: block;
-      padding: var(--quantic-spacing-4) 0 var(--quantic-spacing-2);
-      border-top: 1px solid var(--quantic-border-tertiary);
-    }
+    exports.DropdownMenuGroup.styles = [
+        i$7 `
+      :host {
+        display: block;
+        padding: var(--quantic-spacing-4) 0 var(--quantic-spacing-2);
+        border-top: 1px solid var(--quantic-border-tertiary);
+      }
 
-    :host(:first-of-type) {
-      border-top: none;
-      padding-top: var(--quantic-spacing-2);
-    }
+      :host(:first-of-type) {
+        border-top: none;
+        padding-top: var(--quantic-spacing-2);
+      }
 
-    .label {
-      padding: var(--quantic-spacing-1-5) var(--quantic-spacing-3);
-      font-family: var(--quantic-font-family-body);
-      font-size: var(--quantic-font-size-body-xs);
-      font-weight: var(--quantic-font-weight-semibold);
-      line-height: var(--quantic-line-height-body-xs);
-      color: var(--quantic-text-tertiary);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      user-select: none;
-    }
+      .label {
+        padding: var(--quantic-spacing-1-5) var(--quantic-spacing-3);
+        font-family: var(--quantic-font-family-body);
+        font-size: var(--quantic-font-size-body-xs);
+        font-weight: var(--quantic-font-weight-semibold);
+        line-height: var(--quantic-line-height-body-xs);
+        color: var(--quantic-text-tertiary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        user-select: none;
+      }
 
-    .label[hidden] {
-      display: none;
-    }
+      .label[hidden] {
+        display: none;
+      }
 
-    .items {
-      display: flex;
-      flex-direction: column;
-      gap: var(--quantic-spacing-0-5);
-    }
-  `,
+      .items {
+        display: flex;
+        flex-direction: column;
+        gap: var(--quantic-spacing-0-5);
+      }
+    `,
         whenSlotPresent('label', i$7 `
-    .label {
-      display: block;
-    }
-  `),
+        .label {
+          display: block;
+        }
+      `),
     ];
     __decorate([
         prop({
@@ -64744,7 +64820,10 @@
     exports.SidebarMenuItem.ensureDefined();
     exports.LucideIconPanelLeftClose.ensureDefined();
     exports.LucideIconPanelLeft.ensureDefined();
-    exports.Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
+    exports.Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'header',
+        'footer',
+    ]) {
         constructor() {
             super(...arguments);
             this.ariaLabel = 'Sidebar navigation';
@@ -64780,25 +64859,23 @@
 
           ${this.isDesktopViewport && this.collapsible
             ? u$2 `<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
                 ? 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>
@@ -64810,11 +64887,20 @@
         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'],
     };
@@ -64838,7 +64924,7 @@
       flex-shrink: 0;
     }
 
-    :host(:not(:has([slot="header"]))) .header {
+    :host(:not(:has([slot='header']))) .header {
       display: none;
     }
 
@@ -64905,10 +64991,19 @@
         c({ context: asideExpandedContext, subscribe: true })
     ], exports.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.',
+        })
     ], exports.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.',
+        })
     ], exports.Sidebar.prototype, "collapsible", void 0);
     __decorate([
         respond(Breakpoint.above(1024))
@@ -64995,7 +65090,10 @@
 
     const optionCardGroupContext = n$1('option-card-group.context');
 
-    exports.OptionCard = class OptionCard extends AutoHideEmptySlotsMixin(QuanticElement, ['icon', 'description']) {
+    exports.OptionCard = class OptionCard extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'icon',
+        'description',
+    ]) {
         constructor() {
             super();
             this.checked = false;
@@ -65128,21 +65226,21 @@
             ${isRadio
             ? b `<div class="visual-radio"></div>`
             : b `<div class="visual-checkbox">
-                  <svg
-                    class="visual-checkmark"
-                    viewBox="0 0 12 12"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M10 3L4.5 8.5L2 6"
-                      stroke="currentColor"
-                      stroke-width="1.6666"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </div>`}
+                    <svg
+                      class="visual-checkmark"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M10 3L4.5 8.5L2 6"
+                        stroke="currentColor"
+                        stroke-width="1.6666"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>`}
           </div>
         </div>
         <slot name="description" class="description"></slot>
@@ -65159,7 +65257,9 @@
         slots: {
             '': { description: 'Main label content of the card.' },
             icon: { description: 'Optional leading icon.' },
-            description: { description: 'Optional secondary description below the label.' },
+            description: {
+                description: 'Optional secondary description below the label.',
+            },
         },
         relatedTo: ['quantic-option-card-group', 'quantic-field'],
     };
@@ -65436,28 +65536,65 @@
     }
   `;
     __decorate([
-        prop({ type: 'boolean', default: 'false', reflect: true, description: 'Whether the card is currently selected.' })
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Whether the card is currently selected.',
+        })
     ], exports.OptionCard.prototype, "checked", void 0);
     __decorate([
-        prop({ type: 'boolean', default: 'false', reflect: true, description: 'Marks the card as required for form validation.' })
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Marks the card as required for form validation.',
+        })
     ], exports.OptionCard.prototype, "required", void 0);
     __decorate([
-        prop({ type: 'boolean', default: 'false', reflect: true, description: 'Prevents interaction.' })
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Prevents interaction.',
+        })
     ], exports.OptionCard.prototype, "disabled", void 0);
     __decorate([
-        prop({ type: 'boolean', default: 'false', reflect: true, description: 'Applies error styling.' })
+        prop({
+            type: 'boolean',
+            default: 'false',
+            reflect: true,
+            description: 'Applies error styling.',
+        })
     ], exports.OptionCard.prototype, "invalid", void 0);
     __decorate([
-        prop({ type: 'string', reflect: true, description: 'Form value submitted when this card is selected.' })
+        prop({
+            type: 'string',
+            reflect: true,
+            description: 'Form value submitted when this card is selected.',
+        })
     ], exports.OptionCard.prototype, "value", void 0);
     __decorate([
-        prop({ type: 'string', description: 'Name attribute passed to the underlying input for form association.' })
+        prop({
+            type: 'string',
+            description: 'Name attribute passed to the underlying input for form association.',
+        })
     ], exports.OptionCard.prototype, "name", void 0);
     __decorate([
-        prop({ type: 'OptionCardVariant', options: Object.values(exports.OptionCardVariant), default: exports.OptionCardVariant.Ghost, description: 'Visual style of the card.' })
+        prop({
+            type: 'OptionCardVariant',
+            options: Object.values(exports.OptionCardVariant),
+            default: exports.OptionCardVariant.Ghost,
+            description: 'Visual style of the card.',
+        })
     ], exports.OptionCard.prototype, "variant", void 0);
     __decorate([
-        prop({ type: 'OptionCardSize', options: Object.values(exports.OptionCardSize), default: exports.OptionCardSize.Medium, description: 'Controls padding and font size.' })
+        prop({
+            type: 'OptionCardSize',
+            options: Object.values(exports.OptionCardSize),
+            default: exports.OptionCardSize.Medium,
+            description: 'Controls padding and font size.',
+        })
     ], exports.OptionCard.prototype, "size", void 0);
     __decorate([
         c({ context: optionCardGroupContext, subscribe: true })
@@ -65892,7 +66029,10 @@
         PanelHeaderSize["Large"] = "lg";
     })(exports.PanelHeaderSize || (exports.PanelHeaderSize = {}));
 
-    exports.Panel = class Panel extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
+    exports.Panel = class Panel extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'header',
+        'footer',
+    ]) {
         constructor() {
             super(...arguments);
             this.variant = exports.PanelVariant.Outline;
@@ -65919,7 +66059,9 @@
             'Use for grouping content sections. Prefer quantic-card when the surface needs to be clickable.',
         category: 'display',
         slots: {
-            header: { description: 'Panel header — place quantic-panel-header here.' },
+            header: {
+                description: 'Panel header — place quantic-panel-header here.',
+            },
             '': { description: 'Main body content.' },
             footer: { description: 'Footer content.' },
         },
@@ -65988,16 +66130,29 @@
     }
   `;
     __decorate([
-        prop({ type: 'PanelVariant', options: Object.values(exports.PanelVariant), default: exports.PanelVariant.Outline, description: 'Visual style of the panel.' })
+        prop({
+            type: 'PanelVariant',
+            options: Object.values(exports.PanelVariant),
+            default: exports.PanelVariant.Outline,
+            description: 'Visual style of the panel.',
+        })
     ], exports.Panel.prototype, "variant", void 0);
     __decorate([
-        prop({ type: 'boolean', default: 'false', description: 'Applies brand-color border and title highlight.' })
+        prop({
+            type: 'boolean',
+            default: 'false',
+            description: 'Applies brand-color border and title highlight.',
+        })
     ], exports.Panel.prototype, "highlighted", void 0);
     exports.Panel = __decorate([
         quanticElement('quantic-panel')
     ], exports.Panel);
 
-    exports.PanelHeader = class PanelHeader extends AutoHideEmptySlotsMixin(QuanticElement, ['pretitle', 'subtitle', 'meta']) {
+    exports.PanelHeader = class PanelHeader extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'pretitle',
+        'subtitle',
+        'meta',
+    ]) {
         constructor() {
             super(...arguments);
             this.size = exports.PanelHeaderSize.Medium;
@@ -66090,7 +66245,12 @@
     }
   `;
     __decorate([
-        prop({ type: 'PanelHeaderSize', options: Object.values(exports.PanelHeaderSize), default: exports.PanelHeaderSize.Medium, description: 'Controls the title font size.' })
+        prop({
+            type: 'PanelHeaderSize',
+            options: Object.values(exports.PanelHeaderSize),
+            default: exports.PanelHeaderSize.Medium,
+            description: 'Controls the title font size.',
+        })
     ], exports.PanelHeader.prototype, "size", void 0);
     exports.PanelHeader = __decorate([
         quanticElement('quantic-panel-header')
@@ -69160,7 +69320,10 @@
     exports.LucideIconInfo.ensureDefined();
     exports.LucideIconTriangleAlert.ensureDefined();
     exports.LucideIconX.ensureDefined();
-    exports.Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', 'action']) {
+    exports.Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, [
+        'title',
+        'action',
+    ]) {
         constructor() {
             super(...arguments);
             this.open = false;
@@ -69223,18 +69386,18 @@
         </div>
         ${this.showCloseButton
             ? b `<quantic-button
-              class="close-button"
-              variant="ghost"
-              size="sm"
-              icon
-              aria-label="Close"
-              @click=${this.handleCloseClick}
-            >
-              <quantic-icon-lucide-x
+                class="close-button"
+                variant="ghost"
                 size="sm"
-                class="close-icon"
-              ></quantic-icon-lucide-x>
-            </quantic-button>`
+                icon
+                aria-label="Close"
+                @click=${this.handleCloseClick}
+              >
+                <quantic-icon-lucide-x
+                  size="sm"
+                  class="close-icon"
+                ></quantic-icon-lucide-x>
+              </quantic-button>`
             : A}
       </div>
     `;