@ctrliq/quantic-components 1.67.1 → 1.67.3

package/dist/quantic-components.js

@@ -195,125 +195,52 @@
     }
 
     /**
-     * Base mixin that provides utilities for checking slot content.
-     * This is the foundation for other slot-related patterns like:
-     * - Slot-wins-over-attribute pattern
-     * - Auto-hiding empty slots
-     * - Conditional rendering based on slot content
+     * Mixin that automatically hides empty named slots using CSS only.
      *
-     * @example
-     * ```typescript
-     * class MyComponent extends SlotContentMixin(LitElement) {
-     *   @property() label = '';
+     * 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:
      *
-     *   render() {
-     *     return html`
-     *       ${this.hasSlotContent('label') || this.label
-     *         ? html`<label><slot name="label">${this.label}</slot></label>`
-     *         : ''}
-     *     `;
-     *   }
-     * }
-     * ```
-     */
-    const SlotContentMixin = (superClass) => {
-        class SlotContentClass extends superClass {
-            /**
-             * Checks if a slot is empty by examining its assigned nodes.
-             * A slot is considered empty if it has no element nodes and no text nodes with non-whitespace content.
-             * @param slot The slot element to check (or slot name as string)
-             * @returns true if the slot is empty, false otherwise
-             */
-            isSlotEmpty(slot) {
-                const slotElement = typeof slot === 'string' ? this.getSlotByName(slot) : slot;
-                return !(slotElement
-                    ?.assignedNodes({ flatten: true })
-                    .some((n) => n.nodeType !== Node.TEXT_NODE || n.textContent?.trim()) ?? false);
-            }
-            /**
-             * Gets a slot element by name from the shadow root.
-             * @param name The name of the slot
-             * @returns The slot element or null if not found
-             */
-            getSlotByName(name) {
-                return this.renderRoot.querySelector(`slot[name="${name}"]`);
-            }
-            /**
-             * Checks if a named slot has content by examining the light DOM.
-             * @param name The name of the slot to check
-             * @returns true if the slot has content, false otherwise
-             */
-            hasSlotContent(name) {
-                return (
-                // First check light DOM for elements with matching slot attribute
-                !!this.querySelector(`[slot="${name}"]`) ||
-                    // Fallback: check if shadow root slot has assigned content
-                    !this.isSlotEmpty(this.getSlotByName(name)));
-            }
-            /**
-             * Gets the text content of a named slot from the light DOM.
-             * @param name The name of the slot
-             * @returns The text content of the slot or an empty string
-             */
-            getSlotTextContent(name) {
-                const selector = name ? `[slot="${name}"]` : ':not([slot])';
-                const slotElements = this.querySelectorAll(selector);
-                return Array.from(slotElements)
-                    .map((el) => el.textContent?.trim() ?? '')
-                    .filter(Boolean)
-                    .join(' ');
-            }
-        }
-        return SlotContentClass;
-    };
-
-    /**
-     * Mixin that automatically hides empty slots using the `hidden` attribute.
-     * Extends SlotContentMixin to inherit slot checking functionality.
+     * - `:host(:has([slot="name"]))` — Safari and Firefox
+     * - `@scope { :scope:has([slot="name"]) }` — Chrome (@scope changes the
+     *   evaluation context so :has() can see light DOM children)
+     *
+     * The reveal value is `display: revert-layer` rather than `display: block` so
+     * that the component's own display value is restored instead of overridden.
+     * Component styles are placed in `@layer quantic-component` and the
+     * hide/reveal rules in `@layer quantic-slot-visibility` (declared after, so
+     * higher priority). `revert-layer` then falls back to whatever the component
+     * set in `quantic-component`.
      *
-     * This is useful for components with optional sections that should not
-     * take up space or affect layout when empty.
+     * CSS is injected via `finalizeStyles` so it lands in Lit SSR's Declarative
+     * Shadow DOM output — no JS, no layout shift.
      *
      * @example
-     * ```typescript
-     * class MyComponent extends AutoHideEmptySlotsMixin(QuanticElement) {
-     *   render() {
-     *     return html`
-     *       <slot name="header" @slotchange=${this.handleAutoHide}></slot>
-     *       <slot></slot>
-     *       <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
-     *     `;
-     *   }
-     * }
-     * ```
+     * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}
      */
-    const AutoHideEmptySlotsMixin = (superClass) => {
-        // First apply SlotContentMixin to get slot checking functionality
-        const SlotContentBase = SlotContentMixin(superClass);
-        class AutoHideEmptySlotsClass extends SlotContentBase {
-            /**
-             * Updates the visibility of a slot based on whether it has content.
-             * @param slot The slot element to update
-             */
-            updateSlotVisibility(slot) {
-                slot.toggleAttribute('hidden', this.isSlotEmpty(slot));
-            }
-            /**
-             * Event handler for slotchange events.
-             * Call this from your template to auto-hide slots on change.
-             * @example `<slot name="header" @slotchange=${this.handleAutoHide}></slot>`
-             */
-            handleAutoHide(e) {
-                this.updateSlotVisibility(e.target);
-            }
-            /**
-             * Initialize slot visibility on first render.
-             */
-            firstUpdated(changedProperties) {
-                super.firstUpdated(changedProperties);
-                this.renderRoot
-                    .querySelectorAll('slot')
-                    .forEach((e) => this.updateSlotVisibility(e));
+    const AutoHideEmptySlotsMixin = (superClass, namedSlots = []) => {
+        if (namedSlots.length === 0)
+            return superClass;
+        // A component may declare a native CSSStyleSheet, which Lit passes through
+        // untouched wherever adoptedStyleSheets is supported.
+        const toCssText = (style) => 'cssText' in style
+            ? style.cssText
+            : Array.from(style.cssRules, (rule) => rule.cssText).join('\n');
+        const slotRulesCSS = namedSlots
+            .map((name) => [
+            `slot[name="${name}"] { display: none; }`,
+            `:host(:has([slot="${name}"])) slot[name="${name}"] { display: revert-layer; }`,
+            `@scope { :scope:has([slot="${name}"]) slot[name="${name}"] { display: revert-layer; } }`,
+        ].join(' '))
+            .join(' ');
+        class AutoHideEmptySlotsClass extends superClass {
+            static finalizeStyles(styles) {
+                const base = superClass.finalizeStyles?.call(this, styles) ?? [];
+                const baseCSS = base.map(toCssText).join('\n');
+                return [
+                    r$6(`@layer quantic-component, quantic-slot-visibility;` +
+                        ` @layer quantic-component { ${baseCSS} }` +
+                        ` @layer quantic-slot-visibility { ${slotRulesCSS} }`),
+                ];
             }
         }
         return AutoHideEmptySlotsClass;
@@ -2601,7 +2528,7 @@
     exports.LucideIconInfo.ensureDefined();
     exports.LucideIconTriangleAlert.ensureDefined();
     exports.LucideIconX.ensureDefined();
-    exports.Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement, ['title', 'action']) {
         constructor() {
             super(...arguments);
             this.type = AlertType.Info;
@@ -2646,17 +2573,9 @@
           <slot name="icon">${this.renderDefaultIcon()}</slot>
         </span>
         <div class="content">
-          <slot
-            name="title"
-            class="title"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
-          <slot class="body" @slotchange=${this.handleAutoHide}></slot>
-          <slot
-            name="action"
-            class="action"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot name="title" class="title"></slot>
+          <slot class="body"></slot>
+          <slot name="action" class="action"></slot>
         </div>
         ${this.showCloseButton
             ? b `<quantic-button
@@ -6109,6 +6028,45 @@
         quanticElement('quantic-button-group-item')
     ], exports.ButtonGroupItem);
 
+    /**
+     * Returns true if a slot has at least one non-whitespace node assigned.
+     */
+    function slotHasContent(slot) {
+        return slot
+            .assignedNodes({ flatten: true })
+            .some((n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim() ?? '') !== '');
+    }
+    /**
+     * Returns the concatenated trimmed text content of all assigned nodes.
+     */
+    function slotTextContent(slot) {
+        return slot
+            .assignedNodes({ flatten: true })
+            .map((n) => n.textContent?.trim() ?? '')
+            .filter(Boolean)
+            .join(' ');
+    }
+    /**
+     * Returns a slotchange event handler that calls `setter` with whether the slot
+     * has non-empty content.
+     *
+     * @example
+     * html`<slot @slotchange=${onSlotChange((has) => (this._hasLabel = has))}></slot>`
+     */
+    function onSlotChange(setter) {
+        return (e) => setter(slotHasContent(e.target));
+    }
+    /**
+     * Returns a slotchange event handler that calls `setter` with the slot's text
+     * content, falling back to `''` when empty.
+     *
+     * @example
+     * html`<slot @slotchange=${onSlotTextChange((t) => (this._labelText = t))}></slot>`
+     */
+    function onSlotTextChange(setter) {
+        return (e) => setter(slotTextContent(e.target));
+    }
+
     exports.GridDensity = void 0;
     (function (GridDensity) {
         GridDensity["Dense"] = "dense";
@@ -6135,7 +6093,7 @@
      */
     const CardGroupDensity = exports.GridDensity;
 
-    exports.Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer', 'action-icon']) {
         constructor() {
             super(...arguments);
             this.as = 'div';
@@ -6143,6 +6101,7 @@
             this.size = exports.CardSize.Medium;
             this.type = 'button';
             this.disabled = false;
+            this.hasActionIconSlot = false;
         }
         render() {
             const classes = e$3({
@@ -6151,35 +6110,28 @@
                 [`size--${this.size}`]: true,
                 ['is-interactive']: this.as === 'button' || this.as === 'a',
                 ['is-disabled']: this.disabled,
-                [`has-action-icon`]: this.hasSlotContent('action-icon'),
+                [`has-action-icon`]: this.hasActionIconSlot,
             });
-            const handleSlotChange = (e) => {
-                this.handleAutoHide(e);
-                this.requestUpdate();
-            };
             const slots = u$2 `
       <slot
         name="header"
         class="header"
         data-description="Header area — place quantic-card-title and quantic-card-meta here."
-        @slotchange=${handleSlotChange}
       ></slot>
       <slot
         class="body"
         data-description="Main body content."
-        @slotchange=${handleSlotChange}
       ></slot>
       <slot
         name="footer"
         class="footer"
         data-description="Footer content, pinned to the bottom of the card."
-        @slotchange=${handleSlotChange}
       ></slot>
       <slot
         name="action-icon"
         class="action-icon"
         data-description="Icon in the top-right corner; only visible on interactive cards."
-        @slotchange=${handleSlotChange}
+        @slotchange=${onSlotChange((has) => (this.hasActionIconSlot = has))}
       ></slot>
     `;
             if (this.as === 'button') {
@@ -6446,6 +6398,9 @@
     __decorate([
         prop({ type: 'string', description: 'Download filename (as="a" only).' })
     ], exports.Card.prototype, "download", void 0);
+    __decorate([
+        r$2()
+    ], exports.Card.prototype, "hasActionIconSlot", void 0);
     exports.Card = __decorate([
         quanticElement('quantic-card')
     ], exports.Card);
@@ -7252,21 +7207,13 @@
         quanticElement('quantic-card-meta')
     ], exports.CardMeta);
 
-    exports.CardTitle = class CardTitle extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.CardTitle = class CardTitle extends AutoHideEmptySlotsMixin(QuanticElement, ['pretitle', 'subtitle']) {
         render() {
             return u$2 `
       <hgroup>
-        <slot
-          name="pretitle"
-          class="pretitle"
-          @slotchange=${this.handleAutoHide}
-        ></slot>
-        <slot class="title" @slotchange=${this.handleAutoHide}></slot>
-        <slot
-          name="subtitle"
-          class="subtitle"
-          @slotchange=${this.handleAutoHide}
-        ></slot>
+        <slot name="pretitle" class="pretitle"></slot>
+        <slot class="title"></slot>
+        <slot name="subtitle" class="subtitle"></slot>
       </hgroup>
     `;
         }
@@ -8150,7 +8097,7 @@
         quanticElement('quantic-dialog-backdrop')
     ], exports.DialogBackdropElement);
 
-    exports.DialogTitle = class DialogTitle extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.DialogTitle = class DialogTitle extends AutoHideEmptySlotsMixin(QuanticElement, ['pretitle', 'subtitle']) {
         constructor() {
             super(...arguments);
             this.level = '2';
@@ -8159,19 +8106,11 @@
             return b `
       <div class="main">
         <hgroup>
-          <slot
-            name="pretitle"
-            class="pretitle"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot name="pretitle" class="pretitle"></slot>
           <div class="title" role="heading" aria-level=${this.level}>
             <slot></slot>
           </div>
-          <slot
-            name="subtitle"
-            class="subtitle"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot name="subtitle" class="subtitle"></slot>
         </hgroup>
       </div>
     `;
@@ -10077,7 +10016,7 @@
     exports.DialogBackdropElement.ensureDefined();
     exports.Button.ensureDefined();
     exports.LucideIconX.ensureDefined();
-    exports.Dialog = class Dialog extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Dialog = class Dialog extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
         constructor() {
             super(...arguments);
             this.open = false;
@@ -10336,20 +10275,11 @@
               </quantic-button>`
             : ''}
 
-          <slot
-            class="header"
-            name="header"
-            id=${this.headerId}
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot class="header" name="header" id=${this.headerId}></slot>
 
-          <slot class="body" @slotchange=${this.handleAutoHide}></slot>
+          <slot class="body"></slot>
 
-          <slot
-            class="footer"
-            name="footer"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot class="footer" name="footer"></slot>
         </div>
       </div>
     `;
@@ -10818,7 +10748,7 @@
         Manual: 'manual',
     };
 
-    exports.PopoverPopup = class PopoverPopup extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.PopoverPopup = class PopoverPopup extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
         constructor() {
             super(...arguments);
             this.visible = false;
@@ -10826,9 +10756,9 @@
         render() {
             return b `
       <div class="main">
-        <slot name="header" @slotchange=${this.handleAutoHide}></slot>
+        <slot name="header"></slot>
         <slot></slot>
-        <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
+        <slot name="footer"></slot>
       </div>
     `;
         }
@@ -11829,16 +11759,17 @@
         quanticElement('quantic-dropdown-menu-item')
     ], exports.DropdownMenuItem);
 
-    exports.DropdownMenuGroup = class DropdownMenuGroup extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.DropdownMenuGroup = class DropdownMenuGroup extends AutoHideEmptySlotsMixin(QuanticElement, ['label']) {
         constructor() {
             super(...arguments);
             this.label = '';
+            this.hasLabelSlot = false;
         }
         render() {
-            const hasLabel = this.label || this.hasSlotContent('label');
+            const hasLabel = this.label || this.hasLabelSlot;
             return b `
       <div class="label" id="group-label" ?hidden=${!hasLabel}>
-        <slot name="label">${this.label}</slot>
+        <slot name="label" @slotchange=${onSlotChange((has) => (this.hasLabelSlot = has))}>${this.label}</slot>
       </div>
       <div
         class="items"
@@ -11907,6 +11838,9 @@
             description: 'Section heading displayed above the group items.',
         })
     ], exports.DropdownMenuGroup.prototype, "label", void 0);
+    __decorate([
+        r$2()
+    ], exports.DropdownMenuGroup.prototype, "hasLabelSlot", void 0);
     exports.DropdownMenuGroup = __decorate([
         quanticElement('quantic-dropdown-menu-group')
     ], exports.DropdownMenuGroup);
@@ -11937,7 +11871,7 @@
         Large: 'lg',
     };
 
-    exports.Field = class Field extends SlotContentMixin(QuanticElement) {
+    exports.Field = class Field extends QuanticElement {
         constructor() {
             super(...arguments);
             this.fieldId = '';
@@ -11947,48 +11881,57 @@
             this.required = false;
             this.size = FieldSize.Medium;
             this.hintPosition = FieldHintPosition.Below;
+            this.hasLabelSlot = false;
+            this.hasHintSlot = false;
+            this.hasMessageSlot = false;
         }
         render() {
-            const hasLabel = !!this.getSlotTextContent('label') || this.label;
-            const hasHint = !!this.getSlotTextContent('hint') || this.hint;
-            const hasMessage = !!this.getSlotTextContent('message') || this.message;
-            const hintTemplate = hasHint
-                ? b `
-          <div id="hint-${this.fieldId}" class="hint">
-            <slot name="hint">${this.hint}</slot>
-          </div>
-        `
-                : '';
+            const hasLabel = this.hasLabelSlot || !!this.label;
+            const hasHint = this.hasHintSlot || !!this.hint;
+            const hasMessage = this.hasMessageSlot || !!this.message;
+            const hintTemplate = b `
+      <div
+        id="hint-${this.fieldId}"
+        class=${e$3({ hint: true, 'is-empty': !hasHint })}
+      >
+        <slot
+          name="hint"
+          @slotchange=${onSlotChange((v) => (this.hasHintSlot = v))}
+        >${this.hint}</slot>
+      </div>
+    `;
             return b `
       <div class=${e$3({ main: true, [`size--${this.size}`]: true })}>
-        ${hasLabel
-            ? b `
-              <label id=${this.fieldId} class="label">
-                <slot name="label">${this.label}</slot>
-                ${this.required
-                ? b `<span class="required-indicator">*</span>`
-                : ''}
-              </label>
-            `
+        <label
+          id=${this.fieldId}
+          class=${e$3({ label: true, 'is-empty': !hasLabel })}
+        >
+          <slot
+            name="label"
+            @slotchange=${onSlotChange((v) => (this.hasLabelSlot = v))}
+          >${this.label}</slot>
+          ${this.required
+            ? b `<span class="required-indicator">*</span>`
             : ''}
+        </label>
         ${this.hintPosition === 'above' ? hintTemplate : ''}
         <div class="control">
           <slot></slot>
           ${this.hintPosition === 'below' ? hintTemplate : ''}
-          ${hasMessage
-            ? b `
-                <div
-                  id="message-${this.fieldId}"
-                  class=${e$3({
-                message: true,
-                [`message--state-${this.status}`]: !!this.status,
-            })}
-                  role="alert"
-                >
-                  <slot name="message">${this.message}</slot>
-                </div>
-              `
-            : ''}
+          <div
+            id="message-${this.fieldId}"
+            class=${e$3({
+            message: true,
+            'is-empty': !hasMessage,
+            [`message--state-${this.status}`]: !!this.status,
+        })}
+            role="alert"
+          >
+            <slot
+              name="message"
+              @slotchange=${onSlotChange((v) => (this.hasMessageSlot = v))}
+            >${this.message}</slot>
+          </div>
         </div>
       </div>
     `;
@@ -12054,6 +11997,11 @@
         color: var(--quantic-text-secondary);
       }
 
+      /* Sections render unconditionally so their slots exist to fire slotchange. */
+      .is-empty {
+        display: none;
+      }
+
       .size--xs {
         --quantic-component-field-label-font-size: var(
           --quantic-font-size-body-xs
@@ -12162,6 +12110,15 @@
     __decorate([
         prop({ type: 'FieldHintPosition', options: Object.values(FieldHintPosition), default: FieldHintPosition.Below, attribute: 'hint-position', description: 'Position of the hint relative to the control.' })
     ], exports.Field.prototype, "hintPosition", void 0);
+    __decorate([
+        r$2()
+    ], exports.Field.prototype, "hasLabelSlot", void 0);
+    __decorate([
+        r$2()
+    ], exports.Field.prototype, "hasHintSlot", void 0);
+    __decorate([
+        r$2()
+    ], exports.Field.prototype, "hasMessageSlot", void 0);
     exports.Field = __decorate([
         quanticElement(`quantic-field`)
     ], exports.Field);
@@ -12274,7 +12231,7 @@
     // to focus on its own rendering logic.
     // @see: https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/
     function renderAsField(name, InputComponent, renderInput) {
-        let FieldWrapper = class FieldWrapper extends SlotContentMixin(InputComponent) {
+        let FieldWrapper = class FieldWrapper extends InputComponent {
             constructor() {
                 super(...arguments);
                 this.label = '';
@@ -12282,15 +12239,18 @@
                 this.message = '';
                 this.required = false;
                 this.fieldId = generateId('field');
+                this.labelSlotText = '';
+                this.hintSlotText = '';
+                this.messageSlotText = '';
             }
             get computedLabel() {
-                return this.getSlotTextContent('label') || this.label;
+                return this.labelSlotText || this.label;
             }
             get computedHint() {
-                return this.getSlotTextContent('hint') || this.hint;
+                return this.hintSlotText || this.hint;
             }
             get computedMessage() {
-                return this.getSlotTextContent('message') || this.message;
+                return this.messageSlotText || this.message;
             }
             getFieldA11yContext() {
                 const description = compact([
@@ -12314,10 +12274,10 @@
           .status=${this.status}
           .size=${this.size ?? E}
         >
-          <slot name="label" slot="label">${this.label}</slot>
-          <slot name="hint" slot="hint">${this.hint}</slot>
+          <slot name="label" slot="label" @slotchange=${onSlotTextChange((v) => (this.labelSlotText = v))}>${this.label}</slot>
+          <slot name="hint" slot="hint" @slotchange=${onSlotTextChange((v) => (this.hintSlotText = v))}>${this.hint}</slot>
           ${renderInput.call(this, a11yContext)}
-          <slot name="message" slot="message">${this.message}</slot>
+          <slot name="message" slot="message" @slotchange=${onSlotTextChange((v) => (this.messageSlotText = v))}>${this.message}</slot>
         </quantic-field>
       `;
             }
@@ -12357,6 +12317,15 @@
                 description: 'Validation state controlling message color.',
             })
         ], FieldWrapper.prototype, "status", void 0);
+        __decorate([
+            r$2()
+        ], FieldWrapper.prototype, "labelSlotText", void 0);
+        __decorate([
+            r$2()
+        ], FieldWrapper.prototype, "hintSlotText", void 0);
+        __decorate([
+            r$2()
+        ], FieldWrapper.prototype, "messageSlotText", void 0);
         FieldWrapper = __decorate([
             quanticElement(`quantic-${name}-field`)
         ], FieldWrapper);
@@ -13751,7 +13720,7 @@
         Large: 'lg',
     };
 
-    exports.Toggle = class Toggle extends A11yAttributesMixin(SlotContentMixin(QuanticElement)) {
+    exports.Toggle = class Toggle extends A11yAttributesMixin(QuanticElement) {
         constructor() {
             super();
             this.checked = false;
@@ -62164,12 +62133,13 @@
     ], exports.IconLabel);
 
     exports.LucideIconPencil.ensureDefined();
-    exports.InlineEdit = class InlineEdit extends SlotContentMixin(QuanticElement) {
+    exports.InlineEdit = class InlineEdit extends QuanticElement {
         constructor() {
             super(...arguments);
             this.label = '';
             this.active = false;
             this.invalid = false;
+            this.hasLabelSlot = false;
             this.handleActivateClick = () => {
                 if (!this.active)
                     this.activate();
@@ -62227,7 +62197,7 @@
             }
         }
         render() {
-            const hasLabel = this.hasSlotContent('label') || !!this.label;
+            const hasLabel = this.hasLabelSlot || !!this.label;
             return b `
       <div
         class="${e$3({
@@ -62239,11 +62209,9 @@
         @click=${this.handleActivateClick}
         @keydown=${this.handleTriggerKey}
       >
-        ${hasLabel
-            ? b `<span class="label"
-              ><slot name="label">${this.label}</slot></span
-            >`
-            : ''}
+        <span class=${e$3({ label: true, 'is-empty': !hasLabel })}
+          ><slot name="label" @slotchange=${onSlotChange((has) => (this.hasLabelSlot = has))}>${this.label}</slot></span
+        >
         <span class="value">
           <span class="display">
             <slot name="display"><span>—</span></slot>
@@ -62316,6 +62284,11 @@
       );
     }
 
+    /* The label renders unconditionally so its slot exists to fire slotchange. */
+    .label.is-empty {
+      display: none;
+    }
+
     .value {
       min-width: 0;
       display: flex;
@@ -62391,6 +62364,9 @@
     __decorate([
         prop({ type: 'boolean', default: 'false', description: 'When true, focusout does not close the editor. The editor stays open until the value is valid or the user cancels.' })
     ], exports.InlineEdit.prototype, "invalid", void 0);
+    __decorate([
+        r$2()
+    ], exports.InlineEdit.prototype, "hasLabelSlot", void 0);
     exports.InlineEdit = __decorate([
         event('cancel', { description: 'Fired on Escape. Consumer should revert optimistic state.' }),
         quanticElement('quantic-inline-edit')
@@ -63510,10 +63486,12 @@
 
     exports.Button.ensureDefined();
     exports.LucideIconMenu.ensureDefined();
-    exports.Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo', 'titlebar', 'toolbar', 'navbar', 'sidebar']) {
         constructor() {
             super(...arguments);
             this.variant = LayoutVariant.Default;
+            this.hasSidebarSlot = false;
+            this.hasTitlebarSlot = false;
             this._isAsideExpanded = true;
             this.handleAsideExpand = (event) => {
                 this.isAsideExpanded = event.detail.expanded;
@@ -63523,10 +63501,6 @@
                     this.isAsideExpanded = false;
                 }
             };
-            this.handleSlotChange = (event) => {
-                this.handleAutoHide(event);
-                this.requestUpdate();
-            };
         }
         get isAsideExpanded() {
             return this._isAsideExpanded;
@@ -63605,18 +63579,32 @@
             }
             this.previousIsSmallViewport = this.isSmallViewport;
         }
+        static finalizeStyles(styles) {
+            const base = super.finalizeStyles(styles) ?? [];
+            return [
+                ...base,
+                r$6(`@layer quantic-header-visibility {
+        .header { display: none; }
+        .header.collapsible,
+        :host(:has([slot="navbar"])) .header,
+        :host(:has([slot="titlebar"])) .header,
+        :host(:has([slot="logo"])) .header { display: revert-layer; }
+        @scope {
+          :scope:has([slot="navbar"]) .header,
+          :scope:has([slot="titlebar"]) .header,
+          :scope:has([slot="logo"]) .header { display: revert-layer; }
+        }
+      }`),
+            ];
+        }
         get isAsideCollapsible() {
             return this.isSmallViewport && this.hasSidebar;
         }
         get hasSidebar() {
-            return !this.isSlotEmpty('sidebar');
+            return this.hasSidebarSlot;
         }
         get hasTitlebar() {
-            return !this.isSlotEmpty('titlebar');
-        }
-        get hasHeader() {
-            return (this.isAsideCollapsible ||
-                ['titlebar', 'navbar', 'logo'].some((slot) => !this.isSlotEmpty(slot)));
+            return this.hasTitlebarSlot;
         }
         render() {
             const toggleButton = u$2 `<quantic-button
@@ -63633,12 +63621,11 @@
             const logo = u$2 `<slot
       name="logo"
       class="logo"
-      @slotchange=${this.handleSlotChange}
     ></slot>`;
             const titlebar = u$2 `<slot
       class="titlebar"
       name="titlebar"
-      @slotchange=${this.handleSlotChange}
+      @slotchange=${onSlotChange((has) => (this.hasTitlebarSlot = has))}
     ></slot> `;
             return u$2 `
       <div
@@ -63650,14 +63637,13 @@
         })}
         @expanded-changed=${this.handleAsideExpand}
       >
-        <header class="header" ?hidden=${!this.hasHeader}>
+        <header class=${e$3({ header: true, collapsible: this.isAsideCollapsible })}>
           ${!this.hasSidebar ? logo : null}
           ${this.isAsideCollapsible ? toggleButton : null}
           ${this.isSmallViewport ? null : titlebar}
           <slot
             class="navbar"
             name="navbar"
-            @slotchange=${this.handleSlotChange}
           ></slot>
         </header>
 
@@ -63666,12 +63652,10 @@
         <slot
           name="toolbar"
           class="toolbar"
-          @slotchange=${this.handleSlotChange}
         ></slot>
 
         <div
           class="aside-backdrop"
-          ?hidden=${!this.hasSidebar}
           aria-hidden="true"
           @click=${this.toggleAsideExpanded}
         ></div>
@@ -63686,7 +63670,7 @@
           <slot
             class="sidebar"
             name="sidebar"
-            @slotchange=${this.handleSlotChange}
+            @slotchange=${onSlotChange((has) => (this.hasSidebarSlot = has))}
           ></slot>
         </aside>
 
@@ -63862,7 +63846,7 @@
       opacity: 0;
     }
 
-    .is-aside-expanded .aside-backdrop {
+    .has-sidebar.is-aside-expanded .aside-backdrop {
       display: block;
       pointer-events: auto;
       opacity: var(--quantic-component-layout-aside-backdrop-opacity);
@@ -63887,8 +63871,6 @@
 
       .header {
         grid-area: header;
-        display: flex;
-        align-items: center;
       }
 
       .logo {
@@ -63915,7 +63897,7 @@
         pointer-events: auto;
       }
 
-      .is-aside-expanded .aside-backdrop {
+      .has-sidebar.is-aside-expanded .aside-backdrop {
         display: none;
       }
 
@@ -63972,6 +63954,12 @@
     __decorate([
         respond(Breakpoint.below(1024))
     ], exports.Layout.prototype, "isSmallViewport", void 0);
+    __decorate([
+        r$2()
+    ], exports.Layout.prototype, "hasSidebarSlot", void 0);
+    __decorate([
+        r$2()
+    ], exports.Layout.prototype, "hasTitlebarSlot", void 0);
     __decorate([
         e$5('.aside')
     ], exports.Layout.prototype, "asideElement", void 0);
@@ -64683,7 +64671,7 @@
     exports.SidebarMenuItem.ensureDefined();
     exports.LucideIconPanelLeftClose.ensureDefined();
     exports.LucideIconPanelLeft.ensureDefined();
-    exports.Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
         constructor() {
             super(...arguments);
             this.ariaLabel = 'Sidebar navigation';
@@ -64705,16 +64693,16 @@
         aria-expanded=${this.isAsideExpanded !== false ? 'true' : 'false'}
       >
         <div class="header">
-          <slot name="header" @slotchange=${this.handleAutoHide}></slot>
+          <slot name="header"></slot>
         </div>
 
         <div class="scroll-area">
           <div class="body">
-            <slot @slotchange=${this.handleAutoHide}></slot>
+            <slot></slot>
           </div>
 
           <div class="footer">
-            <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
+            <slot name="footer"></slot>
           </div>
 
           ${this.isDesktopViewport && this.collapsible
@@ -64777,7 +64765,7 @@
       flex-shrink: 0;
     }
 
-    .header:has(slot[hidden]) {
+    :host(:not(:has([slot="header"]))) .header {
       display: none;
     }
 
@@ -64934,7 +64922,7 @@
 
     const optionCardGroupContext = n$1('option-card-group.context');
 
-    exports.OptionCard = class OptionCard extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.OptionCard = class OptionCard extends AutoHideEmptySlotsMixin(QuanticElement, ['icon', 'description']) {
         constructor() {
             super();
             this.checked = false;
@@ -65060,13 +65048,9 @@
       />
       <label for=${inputId} class=${labelClasses}>
         <div class="content">
-          <slot
-            name="icon"
-            class="icon"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot name="icon" class="icon"></slot>
           <!-- main slot -->
-          <slot class="body" @slotchange=${this.handleAutoHide}></slot>
+          <slot class="body"></slot>
           <div class="indicator" aria-hidden="true">
             ${isRadio
             ? b `<div class="visual-radio"></div>`
@@ -65088,11 +65072,7 @@
                 </div>`}
           </div>
         </div>
-        <slot
-          name="description"
-          class="description"
-          @slotchange=${this.handleAutoHide}
-        ></slot>
+        <slot name="description" class="description"></slot>
       </label>
     `;
         }
@@ -65839,7 +65819,7 @@
         PanelHeaderSize["Large"] = "lg";
     })(exports.PanelHeaderSize || (exports.PanelHeaderSize = {}));
 
-    exports.Panel = class Panel extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Panel = class Panel extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
         constructor() {
             super(...arguments);
             this.variant = exports.PanelVariant.Outline;
@@ -65853,17 +65833,9 @@
             });
             return u$2 `
       <div class=${classes}>
-        <slot
-          name="header"
-          class="header"
-          @slotchange=${this.handleAutoHide}
-        ></slot>
-        <slot class="body" @slotchange=${this.handleAutoHide}></slot>
-        <slot
-          name="footer"
-          class="footer"
-          @slotchange=${this.handleAutoHide}
-        ></slot>
+        <slot name="header" class="header"></slot>
+        <slot class="body"></slot>
+        <slot name="footer" class="footer"></slot>
       </div>
     `;
         }
@@ -65952,7 +65924,7 @@
         quanticElement('quantic-panel')
     ], exports.Panel);
 
-    exports.PanelHeader = class PanelHeader extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.PanelHeader = class PanelHeader extends AutoHideEmptySlotsMixin(QuanticElement, ['pretitle', 'subtitle', 'meta']) {
         constructor() {
             super(...arguments);
             this.size = exports.PanelHeaderSize.Medium;
@@ -65965,23 +65937,11 @@
             return u$2 `
       <div class=${classes}>
         <hgroup>
-          <slot
-            name="pretitle"
-            class="pretitle"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot name="pretitle" class="pretitle"></slot>
           <slot class="title"></slot>
-          <slot
-            name="subtitle"
-            class="subtitle"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot name="subtitle" class="subtitle"></slot>
         </hgroup>
-        <slot
-          name="meta"
-          class="meta"
-          @slotchange=${this.handleAutoHide}
-        ></slot>
+        <slot name="meta" class="meta"></slot>
       </div>
     `;
         }
@@ -67209,7 +67169,7 @@
 
     const tableVariantContext = n$1('table.variant');
 
-    exports.Table = class Table extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Table = class Table extends AutoHideEmptySlotsMixin(QuanticElement, ['toolbar', 'header', 'footer', 'controls']) {
         constructor() {
             super(...arguments);
             this.size = exports.TableSize.Medium;
@@ -67219,11 +67179,7 @@
         }
         render() {
             return b `
-      <slot
-        name="toolbar"
-        class="toolbar"
-        @slotchange=${this.handleAutoHide}
-      ></slot>
+      <slot name="toolbar" class="toolbar"></slot>
       <div
         role="table"
         class="table"
@@ -67234,11 +67190,7 @@
         <slot></slot>
         <slot name="footer"></slot>
       </div>
-      <slot
-        name="controls"
-        class="controls"
-        @slotchange=${this.handleAutoHide}
-      ></slot>
+      <slot name="controls" class="controls"></slot>
     `;
         }
     };
@@ -69135,7 +69087,7 @@
     exports.LucideIconInfo.ensureDefined();
     exports.LucideIconTriangleAlert.ensureDefined();
     exports.LucideIconX.ensureDefined();
-    exports.Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement) {
+    exports.Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', 'action']) {
         constructor() {
             super(...arguments);
             this.open = false;
@@ -69192,17 +69144,9 @@
           <slot name="icon">${this.renderDefaultIcon()}</slot>
         </span>
         <div class="content">
-          <slot
-            name="title"
-            class="title"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
-          <slot class="body" @slotchange=${this.handleAutoHide}></slot>
-          <slot
-            name="action"
-            class="action"
-            @slotchange=${this.handleAutoHide}
-          ></slot>
+          <slot name="title" class="title"></slot>
+          <slot class="body"></slot>
+          <slot name="action" class="action"></slot>
         </div>
         ${this.showCloseButton
             ? b `<quantic-button