@ctrliq/quantic-components 1.67.0 → 1.67.2

package/dist/shared/auto-hide-empty-slots.mixin.d.ts

@@ -1,27 +1,26 @@
-import { SlotContentInterface } from './slot-content.mixin';
 import { LitConstructor } from './shared.types';
 import { QuanticElement } from './quantic-element';
-export interface AutoHideEmptySlotsInterface extends SlotContentInterface {
-    handleAutoHide(e: Event): void;
-}
 /**
- * Mixin that automatically hides empty slots using the `hidden` attribute.
- * Extends SlotContentMixin to inherit slot checking functionality.
+ * Mixin that automatically hides empty named slots using CSS only.
  *
- * This is useful for components with optional sections that should not
- * take up space or affect layout when empty.
+ * 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:
+ *
+ * - `: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`.
+ *
+ * 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']) {}
  */
-export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T) => T & LitConstructor<AutoHideEmptySlotsInterface>;
+export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T, namedSlots?: string[]) => T;

package/dist/shared/auto-hide-empty-slots.mixin.js

@@ -1,51 +1,51 @@
-import { SlotContentMixin } from './slot-content.mixin';
+import { unsafeCSS, } from 'lit';
 /**
- * Mixin that automatically hides empty slots using the `hidden` attribute.
- * Extends SlotContentMixin to inherit slot checking functionality.
+ * Mixin that automatically hides empty named slots using CSS only.
  *
- * This is useful for components with optional sections that should not
- * take up space or affect layout when empty.
+ * 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:
+ *
+ * - `: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`.
+ *
+ * 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']) {}
  */
-export 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));
+export 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 [
+                unsafeCSS(`@layer quantic-component, quantic-slot-visibility;` +
+                    ` @layer quantic-component { ${baseCSS} }` +
+                    ` @layer quantic-slot-visibility { ${slotRulesCSS} }`),
+            ];
         }
     }
     return AutoHideEmptySlotsClass;

package/dist/shared/quantic-element.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import type { LitConstructor } from './shared.types';
 import type { ComponentMeta } from './meta.types';
 /**
  * Base class for Quantic components.
@@ -8,10 +9,19 @@ export declare class QuanticElement extends LitElement {
     static meta?: ComponentMeta;
     static ensureDefined(): void;
 }
+/**
+ * Any QuanticElement subclass, including the anonymous ones mixins and HOCs
+ * return — those are plain constructors, so their statics are declared here
+ * rather than inferred from `typeof QuanticElement`.
+ */
+export type QuanticElementConstructor = LitConstructor<QuanticElement> & {
+    tagName?: string;
+    meta?: ComponentMeta;
+};
 /**
  * Decorator that registers a QuanticElement subclass as a custom element and sets its tagName.
  * The class must extend QuanticElement to inherit the ensureDefined() static method.
  *
  * @param tagName - The custom element tag name (e.g., 'quantic-badge')
  */
-export declare function quanticElement(tagName: string): <T extends typeof QuanticElement>(target: T) => T;
+export declare function quanticElement(tagName: string): <T extends QuanticElementConstructor>(target: T) => T;

package/dist/shared/slot-utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns true if a slot has at least one non-whitespace node assigned.
+ */
+export declare function slotHasContent(slot: HTMLSlotElement): boolean;
+/**
+ * Returns the concatenated trimmed text content of all assigned nodes.
+ */
+export declare function slotTextContent(slot: HTMLSlotElement): string;
+/**
+ * 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>`
+ */
+export declare function onSlotChange(setter: (has: boolean) => void): (e: Event) => void;
+/**
+ * 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>`
+ */
+export declare function onSlotTextChange(setter: (text: string) => void): (e: Event) => void;

package/dist/shared/slot-utils.js

@@ -0,0 +1,38 @@
+/**
+ * Returns true if a slot has at least one non-whitespace node assigned.
+ */
+export 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.
+ */
+export 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>`
+ */
+export 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>`
+ */
+export function onSlotTextChange(setter) {
+    return (e) => setter(slotTextContent(e.target));
+}

package/dist/table/index.stories.d.ts

@@ -20,4 +20,5 @@ export declare const WithToolbar: import("../shared/story").StoryObject<Args>;
 export declare const WithControls: import("../shared/story").StoryObject<Args>;
 export declare const WithToolbarAndControls: import("../shared/story").StoryObject<Args>;
 export declare const SortChange: import("../shared/story").StoryObject<Args>;
+export declare const EmptyOptionalSlots: any;
 export declare const CustomColumnWidths: import("../shared/story").StoryObject<Args>;

package/dist/table/index.stories.js

@@ -178,6 +178,25 @@ export const SortChange = story({
       </quantic-panel>
     </div>
   `);
+// TODO: remove once autohide CSS fix is verified — toolbar, footer, and controls slot wrappers should be invisible, not red
+export const EmptyOptionalSlots = Object.assign(story({
+    description: 'Table without toolbar, footer, or controls — their slot wrappers should be invisible. A red bar means the autohide fix is missing.',
+}).render(() => `
+    <quantic-table>
+      <quantic-table-header slot="header">
+        <quantic-table-row>
+          <quantic-table-head>Name</quantic-table-head>
+          <quantic-table-head>Type</quantic-table-head>
+        </quantic-table-row>
+      </quantic-table-header>
+      <quantic-table-body>
+        <quantic-table-row>
+          <quantic-table-cell>Example row</quantic-table-cell>
+          <quantic-table-cell>Data</quantic-table-cell>
+        </quantic-table-row>
+      </quantic-table-body>
+    </quantic-table>
+  `));
 export const CustomColumnWidths = story({
     args: { size: TableSize.Medium, variant: TableVariant.Outline, dense: false },
 }).render(({ size, variant, dense }) => `

package/dist/table/table.component.d.ts

@@ -1,7 +1,7 @@
 import { QuanticElement } from '../shared/quantic-element';
 import { TableSize, TableVariant } from './index.constants';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const Table_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Table_base: typeof QuanticElement;
 export declare class Table extends Table_base {
     static meta: ComponentMeta;
     size: TableSize;

package/dist/table/table.component.js

@@ -12,7 +12,7 @@ import { tableVariantContext } from './index.context';
 import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prop } from '../shared/component-meta.decorators';
-let Table = class Table extends AutoHideEmptySlotsMixin(QuanticElement) {
+let Table = class Table extends AutoHideEmptySlotsMixin(QuanticElement, ['toolbar', 'header', 'footer', 'controls']) {
     constructor() {
         super(...arguments);
         this.size = TableSize.Medium;
@@ -22,11 +22,7 @@ let Table = class Table extends AutoHideEmptySlotsMixin(QuanticElement) {
     }
     render() {
         return html `
-      <slot
-        name="toolbar"
-        class="toolbar"
-        @slotchange=${this.handleAutoHide}
-      ></slot>
+      <slot name="toolbar" class="toolbar"></slot>
       <div
         role="table"
         class="table"
@@ -37,11 +33,7 @@ let Table = class Table extends AutoHideEmptySlotsMixin(QuanticElement) {
         <slot></slot>
         <slot name="footer"></slot>
       </div>
-      <slot
-        name="controls"
-        class="controls"
-        @slotchange=${this.handleAutoHide}
-      ></slot>
+      <slot name="controls" class="controls"></slot>
     `;
     }
 };

package/dist/toast/toast.d.ts

@@ -3,7 +3,7 @@ import { QuanticElement } from '../shared/quantic-element';
 import { ToastType } from './index.constants';
 import type { ComponentMeta } from '../shared/meta.types';
 export { ToastType } from './index.constants';
-declare const Toast_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Toast_base: typeof QuanticElement;
 export declare class Toast extends Toast_base {
     static meta: ComponentMeta;
     open: boolean;

package/dist/toast/toast.js

@@ -23,7 +23,7 @@ LucideIconCircleX.ensureDefined();
 LucideIconInfo.ensureDefined();
 LucideIconTriangleAlert.ensureDefined();
 LucideIconX.ensureDefined();
-let Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement) {
+let Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', 'action']) {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -80,17 +80,9 @@ let Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement) {
           <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
             ? html `<quantic-button

package/dist/toggle/index.d.ts

@@ -14,7 +14,7 @@ declare const Toggle_base: {
             invalid?: boolean;
         } | undefined): import("../shared/a11y-attributes.mixin").A11yAttributeValues;
     };
-} & typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/slot-content.mixin").SlotContentInterface>;
+} & typeof QuanticElement;
 export declare class Toggle extends Toggle_base {
     static meta: ComponentMeta;
     static formAssociated: boolean;

package/dist/toggle/index.js

@@ -8,11 +8,10 @@ import { css, html } from 'lit';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
 import { classMap } from 'lit/directives/class-map.js';
 import { ToggleSize } from './index.constants';
-import { SlotContentMixin } from '../shared/slot-content.mixin';
 import { A11yAttributesMixin } from '../shared/a11y-attributes.mixin';
 import { event, prop } from '../shared/component-meta.decorators';
 export { ToggleSize } from './index.constants';
-let Toggle = class Toggle extends A11yAttributesMixin(SlotContentMixin(QuanticElement)) {
+let Toggle = class Toggle extends A11yAttributesMixin(QuanticElement) {
     constructor() {
         super();
         this.checked = false;

package/dist/types/alert/alert.d.ts

@@ -3,7 +3,7 @@ import { QuanticElement } from '../shared/quantic-element';
 import { AlertType } from './index.constants';
 import type { ComponentMeta } from '../shared/meta.types';
 export { AlertType } from './index.constants';
-declare const Alert_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Alert_base: typeof QuanticElement;
 export declare class Alert extends Alert_base {
     static meta: ComponentMeta;
     type: AlertType;

package/dist/types/card/card-title.component.d.ts

@@ -1,6 +1,6 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const CardTitle_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const CardTitle_base: typeof QuanticElement;
 export declare class CardTitle extends CardTitle_base {
     static meta: ComponentMeta;
     static styles: import("lit").CSSResult;

package/dist/types/card/card.component.d.ts

@@ -1,7 +1,7 @@
 import { CardVariant, CardSize } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const Card_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Card_base: typeof QuanticElement;
 export declare class Card extends Card_base {
     static meta: ComponentMeta;
     as: keyof Pick<HTMLElementTagNameMap, 'div' | 'button' | 'a'>;
@@ -13,6 +13,7 @@ export declare class Card extends Card_base {
     target: string | undefined;
     rel: string | undefined;
     download: string | undefined;
+    private hasActionIconSlot;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }

package/dist/types/dialog/dialog-title.d.ts

@@ -1,6 +1,6 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const DialogTitle_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const DialogTitle_base: typeof QuanticElement;
 export declare class DialogTitle extends DialogTitle_base {
     static meta: ComponentMeta;
     level: '1' | '2' | '3' | '4' | '5' | '6';

package/dist/types/dialog/dialog.d.ts

@@ -3,7 +3,7 @@ import { QuanticElement } from '../shared/quantic-element';
 import { DialogSize, DialogBackdrop, DialogRole } from './index.constants';
 import type { ComponentMeta } from '../shared/meta.types';
 export { DialogSize, DialogBackdrop, DialogRole } from './index.constants';
-declare const Dialog_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Dialog_base: typeof QuanticElement;
 export declare class Dialog extends Dialog_base {
     static meta: ComponentMeta;
     open: boolean;

package/dist/types/dropdown-menu/group.component.d.ts

@@ -1,9 +1,10 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const DropdownMenuGroup_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const DropdownMenuGroup_base: typeof QuanticElement;
 export declare class DropdownMenuGroup extends DropdownMenuGroup_base {
     static meta: ComponentMeta;
     label: string;
+    private hasLabelSlot;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/types/field/field.component.d.ts

@@ -1,8 +1,7 @@
 import { QuanticElement } from '../shared/quantic-element';
 import { FieldValidationStatus, FieldSize, FieldHintPosition } from './index.constants';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const Field_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/slot-content.mixin").SlotContentInterface>;
-export declare class Field extends Field_base {
+export declare class Field extends QuanticElement {
     static meta: ComponentMeta;
     fieldId: string;
     label: string;
@@ -12,7 +11,9 @@ export declare class Field extends Field_base {
     status: FieldValidationStatus | undefined;
     size: FieldSize;
     hintPosition: FieldHintPosition;
+    private hasLabelSlot;
+    private hasHintSlot;
+    private hasMessageSlot;
     static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }
-export {};

package/dist/types/field/render-as-field.hoc.d.ts

@@ -16,4 +16,4 @@ export type FieldProps = {
     required: boolean;
     status: FieldValidationStatus | undefined;
 };
-export declare function renderAsField<T extends typeof QuanticElement>(name: string, InputComponent: T, renderInput: (this: InstanceType<T>, a11yContext: FieldA11yContext | null) => TemplateResult): T & LitConstructor<FieldProps>;
+export declare function renderAsField<T extends LitConstructor<QuanticElement>>(name: string, InputComponent: T, renderInput: (this: InstanceType<T>, a11yContext: FieldA11yContext | null) => TemplateResult): T & LitConstructor<FieldProps>;

package/dist/types/inline-edit/index.d.ts

@@ -1,11 +1,11 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const InlineEdit_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/slot-content.mixin").SlotContentInterface>;
-export declare class InlineEdit extends InlineEdit_base {
+export declare class InlineEdit extends QuanticElement {
     static meta: ComponentMeta;
     label: string;
     active: boolean;
     invalid: boolean;
+    private hasLabelSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     static styles: import("lit").CSSResult;
@@ -17,4 +17,3 @@ export declare class InlineEdit extends InlineEdit_base {
     private handleFocusOut;
     render(): import("lit").TemplateResult<1>;
 }
-export {};

package/dist/types/layout/layout.component.d.ts

@@ -2,12 +2,16 @@ import { type PropertyValues } from 'lit';
 import { LayoutVariant } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const Layout_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Layout_base: typeof QuanticElement;
 export declare class Layout extends Layout_base {
     static meta: ComponentMeta;
     variant: LayoutVariant;
     private isSmallViewport;
     private previousIsSmallViewport?;
+    private hasSidebarSlot;
+    private hasTitlebarSlot;
+    private hasNavbarSlot;
+    private hasLogoSlot;
     private asideElement?;
     private toggleButtonElement?;
     private focusTrap?;
@@ -23,7 +27,6 @@ export declare class Layout extends Layout_base {
     disconnectedCallback(): void;
     protected willUpdate(_props: PropertyValues): void;
     protected updated(props: PropertyValues): void;
-    private handleSlotChange;
     static styles: import("lit").CSSResult;
     private get isAsideCollapsible();
     private get hasSidebar();

package/dist/types/layout/sidebar.component.d.ts

@@ -1,6 +1,6 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const Sidebar_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Sidebar_base: typeof QuanticElement;
 export declare class Sidebar extends Sidebar_base {
     static meta: ComponentMeta;
     isAsideExpanded?: boolean;

package/dist/types/option-card/option-card.component.d.ts

@@ -3,7 +3,7 @@ import { QuanticElement } from '../shared/quantic-element';
 import { OptionCardVariant, OptionCardSize } from './index.constants';
 import { type OptionCardGroupContext } from './index.context';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const OptionCard_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const OptionCard_base: typeof QuanticElement;
 export declare class OptionCard extends OptionCard_base {
     static meta: ComponentMeta;
     static formAssociated: boolean;

package/dist/types/panel/panel-header.component.d.ts

@@ -1,7 +1,7 @@
 import { PanelHeaderSize } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const PanelHeader_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const PanelHeader_base: typeof QuanticElement;
 export declare class PanelHeader extends PanelHeader_base {
     static meta: ComponentMeta;
     size: PanelHeaderSize;

package/dist/types/panel/panel.component.d.ts

@@ -1,7 +1,7 @@
 import { PanelVariant } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const Panel_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Panel_base: typeof QuanticElement;
 export declare class Panel extends Panel_base {
     static meta: ComponentMeta;
     variant: PanelVariant;

package/dist/types/popover/popover-popup.d.ts

@@ -1,6 +1,6 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const PopoverPopup_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const PopoverPopup_base: typeof QuanticElement;
 export declare class PopoverPopup extends PopoverPopup_base {
     static meta: ComponentMeta;
     visible: boolean;

package/dist/types/popover/popover.d.ts

@@ -43,7 +43,7 @@ export declare class Popover extends QuanticElement {
     isRightAligned(): boolean;
     isTopAligned(): boolean;
     isBottomAligned(): boolean;
-    get originY(): 1 | -1 | 0;
-    get originX(): 1 | -1 | 0;
+    get originY(): 0 | 1 | -1;
+    get originX(): 0 | 1 | -1;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/types/shared/auto-hide-empty-slots.mixin.d.ts

@@ -1,27 +1,26 @@
-import { SlotContentInterface } from './slot-content.mixin';
 import { LitConstructor } from './shared.types';
 import { QuanticElement } from './quantic-element';
-export interface AutoHideEmptySlotsInterface extends SlotContentInterface {
-    handleAutoHide(e: Event): void;
-}
 /**
- * Mixin that automatically hides empty slots using the `hidden` attribute.
- * Extends SlotContentMixin to inherit slot checking functionality.
+ * Mixin that automatically hides empty named slots using CSS only.
  *
- * This is useful for components with optional sections that should not
- * take up space or affect layout when empty.
+ * 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:
+ *
+ * - `: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`.
+ *
+ * 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']) {}
  */
-export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T) => T & LitConstructor<AutoHideEmptySlotsInterface>;
+export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T, namedSlots?: string[]) => T;