@ctrliq/quantic-components 1.67.3 → 1.67.4

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

@@ -13,8 +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;
+    static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult;
 }
 export {};

package/dist/card/card.component.js

@@ -5,9 +5,8 @@ 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 { whenSlotPresent } 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';
@@ -22,7 +21,6 @@ let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, ['header',
         this.size = CardSize.Medium;
         this.type = 'button';
         this.disabled = false;
-        this.hasActionIconSlot = false;
     }
     render() {
         const classes = classMap({
@@ -31,7 +29,6 @@ let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, ['header',
             [`size--${this.size}`]: true,
             ['is-interactive']: this.as === 'button' || this.as === 'a',
             ['is-disabled']: this.disabled,
-            [`has-action-icon`]: this.hasActionIconSlot,
         });
         const slots = html `
       <slot
@@ -52,7 +49,6 @@ let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, ['header',
         name="action-icon"
         class="action-icon"
         data-description="Icon in the top-right corner; only visible on interactive cards."
-        @slotchange=${onSlotChange((has) => (this.hasActionIconSlot = has))}
       ></slot>
     `;
         if (this.as === 'button') {
@@ -94,7 +90,7 @@ Card.meta = {
     ],
     relatedTo: ['quantic-card-group', 'quantic-panel'],
 };
-Card.styles = css `
+Card.styles = [css `
     :host {
       display: flex;
       flex-direction: column;
@@ -217,10 +213,6 @@ Card.styles = css `
       margin-top: auto;
     }
 
-    .has-action-icon {
-      padding-right: calc(var(--quantic-component-card-padding) * 2);
-    }
-
     .action-icon {
       position: absolute;
       inset: calc(var(--quantic-component-card-padding) / 2);
@@ -268,7 +260,13 @@ Card.styles = css `
     [hidden] {
       display: none;
     }
-  `;
+  `,
+    whenSlotPresent('action-icon', css `
+    .main {
+      padding-right: calc(var(--quantic-component-card-padding) * 2);
+    }
+  `),
+];
 __decorate([
     prop({
         type: '"div" | "button" | "a"',
@@ -319,9 +317,6 @@ __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/dropdown-menu/group.component.d.ts

@@ -4,8 +4,7 @@ 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;
+    static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }
 export {};

package/dist/dropdown-menu/group.component.js

@@ -5,22 +5,20 @@ 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';
-import { onSlotChange } from '../shared/slot-utils';
+import { whenSlotPresent } 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.hasLabelSlot;
+        const hasLabel = !!this.label;
         return html `
       <div class="label" id="group-label" ?hidden=${!hasLabel}>
-        <slot name="label" @slotchange=${onSlotChange((has) => (this.hasLabelSlot = has))}>${this.label}</slot>
+        <slot name="label">${this.label}</slot>
       </div>
       <div
         class="items"
@@ -48,7 +46,7 @@ DropdownMenuGroup.meta = {
     },
     relatedTo: ['quantic-dropdown-menu', 'quantic-dropdown-menu-item'],
 };
-DropdownMenuGroup.styles = css `
+DropdownMenuGroup.styles = [css `
     :host {
       display: block;
       padding: var(--quantic-spacing-4) 0 var(--quantic-spacing-2);
@@ -81,7 +79,13 @@ DropdownMenuGroup.styles = css `
       flex-direction: column;
       gap: var(--quantic-spacing-0-5);
     }
-  `;
+  `,
+    whenSlotPresent('label', css `
+    .label {
+      display: block;
+    }
+  `),
+];
 __decorate([
     prop({
         type: 'string',
@@ -89,9 +93,6 @@ __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

@@ -11,9 +11,6 @@ export declare class Field extends QuanticElement {
     status: FieldValidationStatus | undefined;
     size: FieldSize;
     hintPosition: FieldHintPosition;
-    private hasLabelSlot;
-    private hasHintSlot;
-    private hasMessageSlot;
     static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }

package/dist/field/field.component.js

@@ -5,12 +5,11 @@ 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 { prop } from '../shared/component-meta.decorators';
-import { onSlotChange } from '../shared/slot-utils';
+import { whenSlotPresent } from '../shared/slot-utils';
 let Field = class Field extends QuanticElement {
     constructor() {
         super(...arguments);
@@ -21,14 +20,11 @@ let Field = class Field extends 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.hasLabelSlot || !!this.label;
-        const hasHint = this.hasHintSlot || !!this.hint;
-        const hasMessage = this.hasMessageSlot || !!this.message;
+        const hasLabel = !!this.label;
+        const hasHint = !!this.hint;
+        const hasMessage = !!this.message;
         const hintTemplate = html `
       <div
         id="hint-${this.fieldId}"
@@ -36,7 +32,6 @@ let Field = class Field extends QuanticElement {
       >
         <slot
           name="hint"
-          @slotchange=${onSlotChange((v) => (this.hasHintSlot = v))}
         >${this.hint}</slot>
       </div>
     `;
@@ -48,7 +43,6 @@ let Field = class Field extends QuanticElement {
         >
           <slot
             name="label"
-            @slotchange=${onSlotChange((v) => (this.hasLabelSlot = v))}
           >${this.label}</slot>
           ${this.required
             ? html `<span class="required-indicator">*</span>`
@@ -69,7 +63,6 @@ let Field = class Field extends QuanticElement {
           >
             <slot
               name="message"
-              @slotchange=${onSlotChange((v) => (this.hasMessageSlot = v))}
             >${this.message}</slot>
           </div>
         </div>
@@ -137,7 +130,7 @@ Field.styles = [
         color: var(--quantic-text-secondary);
       }
 
-      /* Sections render unconditionally so their slots exist to fire slotchange. */
+      /* Sections render unconditionally; is-empty hides them when no prop or slot content is present. */
       .is-empty {
         display: none;
       }
@@ -225,6 +218,21 @@ Field.styles = [
         color: var(--quantic-text-warning-primary);
       }
     `,
+    whenSlotPresent('label', css `
+      .label.is-empty {
+        display: revert;
+      }
+    `),
+    whenSlotPresent('hint', css `
+      .hint.is-empty {
+        display: revert;
+      }
+    `),
+    whenSlotPresent('message', css `
+      .message.is-empty {
+        display: revert;
+      }
+    `),
 ];
 __decorate([
     prop({ type: 'string', default: "''", description: 'ID linking the label and hint/message elements to the control for accessibility.' })
@@ -250,15 +258,6 @@ __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);