@ctrliq/quantic-components 1.67.0 → 1.67.2

package/dist/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/alert/alert.js

@@ -22,7 +22,7 @@ LucideIconCircleX.ensureDefined();
 LucideIconInfo.ensureDefined();
 LucideIconTriangleAlert.ensureDefined();
 LucideIconX.ensureDefined();
-let Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement) {
+let Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement, ['title', 'action']) {
     constructor() {
         super(...arguments);
         this.type = AlertType.Info;
@@ -67,17 +67,9 @@ let Alert = class Alert 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/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/card/card-title.component.js

@@ -8,21 +8,13 @@ import { css } from 'lit';
 import { html } from 'lit/static-html.js';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
-let CardTitle = class CardTitle extends AutoHideEmptySlotsMixin(QuanticElement) {
+let CardTitle = class CardTitle extends AutoHideEmptySlotsMixin(QuanticElement, ['pretitle', 'subtitle']) {
     render() {
         return html `
       <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>
     `;
     }

package/dist/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/card/card.component.js

@@ -5,14 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css } from 'lit';
+import { state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { onSlotChange } from '../shared/slot-utils';
 import { CardVariant, CardSize } from './index.constants';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { prop } from '../shared/component-meta.decorators';
-let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement) {
+let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer', 'action-icon']) {
     constructor() {
         super(...arguments);
         this.as = 'div';
@@ -20,6 +22,7 @@ let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement) {
         this.size = CardSize.Medium;
         this.type = 'button';
         this.disabled = false;
+        this.hasActionIconSlot = false;
     }
     render() {
         const classes = classMap({
@@ -28,35 +31,28 @@ let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement) {
             [`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 = html `
       <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') {
@@ -323,6 +319,9 @@ __decorate([
 __decorate([
     prop({ type: 'string', description: 'Download filename (as="a" only).' })
 ], Card.prototype, "download", void 0);
+__decorate([
+    state()
+], Card.prototype, "hasActionIconSlot", void 0);
 Card = __decorate([
     quanticElement('quantic-card')
 ], Card);

package/dist/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/dialog/dialog-title.js

@@ -8,7 +8,7 @@ import { css, html } from 'lit';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
 import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
 import { prop } from '../shared/component-meta.decorators';
-let DialogTitle = class DialogTitle extends AutoHideEmptySlotsMixin(QuanticElement) {
+let DialogTitle = class DialogTitle extends AutoHideEmptySlotsMixin(QuanticElement, ['pretitle', 'subtitle']) {
     constructor() {
         super(...arguments);
         this.level = '2';
@@ -17,19 +17,11 @@ let DialogTitle = class DialogTitle extends AutoHideEmptySlotsMixin(QuanticEleme
         return html `
       <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>
     `;

package/dist/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/dialog/dialog.js

@@ -21,7 +21,7 @@ export { DialogSize, DialogBackdrop, DialogRole } from './index.constants';
 DialogBackdropElement.ensureDefined();
 Button.ensureDefined();
 LucideIconX.ensureDefined();
-let Dialog = class Dialog extends AutoHideEmptySlotsMixin(QuanticElement) {
+let Dialog = class Dialog extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -280,20 +280,11 @@ let Dialog = class Dialog extends AutoHideEmptySlotsMixin(QuanticElement) {
               </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>
     `;

package/dist/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/dropdown-menu/group.component.js

@@ -5,19 +5,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, nothing } from 'lit';
+import { state } from 'lit/decorators.js';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
 import { prop } from '../shared/component-meta.decorators';
 import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
-let DropdownMenuGroup = class DropdownMenuGroup extends AutoHideEmptySlotsMixin(QuanticElement) {
+import { onSlotChange } from '../shared/slot-utils';
+let 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 html `
       <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"
@@ -86,6 +89,9 @@ __decorate([
         description: 'Section heading displayed above the group items.',
     })
 ], DropdownMenuGroup.prototype, "label", void 0);
+__decorate([
+    state()
+], DropdownMenuGroup.prototype, "hasLabelSlot", void 0);
 DropdownMenuGroup = __decorate([
     quanticElement('quantic-dropdown-menu-group')
 ], DropdownMenuGroup);

package/dist/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/field/field.component.js

@@ -5,12 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css } from 'lit';
+import { state } from 'lit/decorators.js';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
 import { classMap } from 'lit/directives/class-map.js';
 import { FieldValidationStatus, FieldSize, FieldHintPosition, } from './index.constants';
-import { SlotContentMixin } from '../shared/slot-content.mixin';
 import { prop } from '../shared/component-meta.decorators';
-let Field = class Field extends SlotContentMixin(QuanticElement) {
+import { onSlotChange } from '../shared/slot-utils';
+let Field = class Field extends QuanticElement {
     constructor() {
         super(...arguments);
         this.fieldId = '';
@@ -20,48 +21,57 @@ let Field = class Field extends SlotContentMixin(QuanticElement) {
         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
-            ? html `
-          <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 = html `
+      <div
+        id="hint-${this.fieldId}"
+        class=${classMap({ hint: true, 'is-empty': !hasHint })}
+      >
+        <slot
+          name="hint"
+          @slotchange=${onSlotChange((v) => (this.hasHintSlot = v))}
+        >${this.hint}</slot>
+      </div>
+    `;
         return html `
       <div class=${classMap({ main: true, [`size--${this.size}`]: true })}>
-        ${hasLabel
-            ? html `
-              <label id=${this.fieldId} class="label">
-                <slot name="label">${this.label}</slot>
-                ${this.required
-                ? html `<span class="required-indicator">*</span>`
-                : ''}
-              </label>
-            `
+        <label
+          id=${this.fieldId}
+          class=${classMap({ label: true, 'is-empty': !hasLabel })}
+        >
+          <slot
+            name="label"
+            @slotchange=${onSlotChange((v) => (this.hasLabelSlot = v))}
+          >${this.label}</slot>
+          ${this.required
+            ? html `<span class="required-indicator">*</span>`
             : ''}
+        </label>
         ${this.hintPosition === 'above' ? hintTemplate : ''}
         <div class="control">
           <slot></slot>
           ${this.hintPosition === 'below' ? hintTemplate : ''}
-          ${hasMessage
-            ? html `
-                <div
-                  id="message-${this.fieldId}"
-                  class=${classMap({
-                message: true,
-                [`message--state-${this.status}`]: !!this.status,
-            })}
-                  role="alert"
-                >
-                  <slot name="message">${this.message}</slot>
-                </div>
-              `
-            : ''}
+          <div
+            id="message-${this.fieldId}"
+            class=${classMap({
+            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>
     `;
@@ -127,6 +137,11 @@ Field.styles = [
         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
@@ -235,6 +250,15 @@ __decorate([
 __decorate([
     prop({ type: 'FieldHintPosition', options: Object.values(FieldHintPosition), default: FieldHintPosition.Below, attribute: 'hint-position', description: 'Position of the hint relative to the control.' })
 ], Field.prototype, "hintPosition", void 0);
+__decorate([
+    state()
+], Field.prototype, "hasLabelSlot", void 0);
+__decorate([
+    state()
+], Field.prototype, "hasHintSlot", void 0);
+__decorate([
+    state()
+], Field.prototype, "hasMessageSlot", void 0);
 Field = __decorate([
     quanticElement(`quantic-field`)
 ], Field);

package/dist/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/field/render-as-field.hoc.js

@@ -5,9 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, noChange } from 'lit';
+import { state } from 'lit/decorators.js';
+import { onSlotTextChange } from '../shared/slot-utils';
 import { FieldValidationStatus } from './index.constants';
 import { prop } from '../shared/component-meta.decorators';
-import { SlotContentMixin } from '../shared/slot-content.mixin';
 import { generateId, compact } from '../shared/shared.utils';
 import { Field } from './field.component';
 import { quanticElement } from '../shared/quantic-element';
@@ -23,7 +24,7 @@ Field.ensureDefined();
 // to focus on its own rendering logic.
 // @see: https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/
 export function renderAsField(name, InputComponent, renderInput) {
-    let FieldWrapper = class FieldWrapper extends SlotContentMixin(InputComponent) {
+    let FieldWrapper = class FieldWrapper extends InputComponent {
         constructor() {
             super(...arguments);
             this.label = '';
@@ -31,15 +32,18 @@ export function renderAsField(name, InputComponent, renderInput) {
             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([
@@ -63,10 +67,10 @@ export function renderAsField(name, InputComponent, renderInput) {
           .status=${this.status}
           .size=${this.size ?? noChange}
         >
-          <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>
       `;
         }
@@ -106,6 +110,15 @@ export function renderAsField(name, InputComponent, renderInput) {
             description: 'Validation state controlling message color.',
         })
     ], FieldWrapper.prototype, "status", void 0);
+    __decorate([
+        state()
+    ], FieldWrapper.prototype, "labelSlotText", void 0);
+    __decorate([
+        state()
+    ], FieldWrapper.prototype, "hintSlotText", void 0);
+    __decorate([
+        state()
+    ], FieldWrapper.prototype, "messageSlotText", void 0);
     FieldWrapper = __decorate([
         quanticElement(`quantic-${name}-field`)
     ], FieldWrapper);