@ctrliq/quantic-components 1.67.3 → 1.67.5

package/dist/quantic-components.js

@@ -194,6 +194,70 @@
         };
     }
 
+    /**
+     * 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));
+    }
+    /**
+     * Generates a CSSResult that applies `rules` when the host has a light DOM
+     * child with the given slot name. Two forms are emitted for cross-browser
+     * Declarative Shadow DOM compatibility:
+     *
+     * - `:host(:has([slot="name"])) { rules }` — standard shadow DOM (Safari, Firefox)
+     * - `@scope { :scope:has([slot="name"]) { rules } }` — Chrome DSD
+     *
+     * @example
+     * whenSlotPresent('action-icon', css`
+     *   .main { padding-right: calc(var(--quantic-component-card-padding) * 2); }
+     * `)
+     */
+    function whenSlotPresent(slotName, rules) {
+        const r = rules.cssText;
+        const name = escapeCssString(slotName);
+        return r$6(`:host(:has([slot="${name}"])) { ${r} } ` +
+            `@scope { :scope:has([slot="${name}"]) { ${r} } }`);
+    }
+    /**
+     * Escapes a value for safe interpolation inside a double-quoted CSS string.
+     */
+    function escapeCssString(value) {
+        return value.replace(/["\\]/g, '\\$&');
+    }
+
     /**
      * Mixin that automatically hides empty named slots using CSS only.
      *
@@ -226,11 +290,13 @@
             ? 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(' '))
+            .map((name) => {
+            const escaped = escapeCssString(name);
+            return [
+                `slot[name="${escaped}"] { display: none; }`,
+                whenSlotPresent(name, r$6(`slot[name="${escaped}"] { display: revert-layer; }`)).cssText,
+            ].join(' ');
+        })
             .join(' ');
         class AutoHideEmptySlotsClass extends superClass {
             static finalizeStyles(styles) {
@@ -6028,45 +6094,6 @@
         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";
@@ -6101,7 +6128,6 @@
             this.size = exports.CardSize.Medium;
             this.type = 'button';
             this.disabled = false;
-            this.hasActionIconSlot = false;
         }
         render() {
             const classes = e$3({
@@ -6110,7 +6136,6 @@
                 [`size--${this.size}`]: true,
                 ['is-interactive']: this.as === 'button' || this.as === 'a',
                 ['is-disabled']: this.disabled,
-                [`has-action-icon`]: this.hasActionIconSlot,
             });
             const slots = u$2 `
       <slot
@@ -6131,7 +6156,6 @@
         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') {
@@ -6173,7 +6197,7 @@
         ],
         relatedTo: ['quantic-card-group', 'quantic-panel'],
     };
-    exports.Card.styles = i$7 `
+    exports.Card.styles = [i$7 `
     :host {
       display: flex;
       flex-direction: column;
@@ -6296,10 +6320,6 @@
       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);
@@ -6347,7 +6367,13 @@
     [hidden] {
       display: none;
     }
-  `;
+  `,
+        whenSlotPresent('action-icon', i$7 `
+    .main {
+      padding-right: calc(var(--quantic-component-card-padding) * 2);
+    }
+  `),
+    ];
     __decorate([
         prop({
             type: '"div" | "button" | "a"',
@@ -6398,9 +6424,6 @@
     __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);
@@ -11763,13 +11786,12 @@
         constructor() {
             super(...arguments);
             this.label = '';
-            this.hasLabelSlot = false;
         }
         render() {
-            const hasLabel = this.label || this.hasLabelSlot;
+            const hasLabel = !!this.label;
             return b `
       <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"
@@ -11797,7 +11819,7 @@
         },
         relatedTo: ['quantic-dropdown-menu', 'quantic-dropdown-menu-item'],
     };
-    exports.DropdownMenuGroup.styles = i$7 `
+    exports.DropdownMenuGroup.styles = [i$7 `
     :host {
       display: block;
       padding: var(--quantic-spacing-4) 0 var(--quantic-spacing-2);
@@ -11830,7 +11852,13 @@
       flex-direction: column;
       gap: var(--quantic-spacing-0-5);
     }
-  `;
+  `,
+        whenSlotPresent('label', i$7 `
+    .label {
+      display: block;
+    }
+  `),
+    ];
     __decorate([
         prop({
             type: 'string',
@@ -11838,9 +11866,6 @@
             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);
@@ -11881,14 +11906,11 @@
             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 = b `
       <div
         id="hint-${this.fieldId}"
@@ -11896,7 +11918,6 @@
       >
         <slot
           name="hint"
-          @slotchange=${onSlotChange((v) => (this.hasHintSlot = v))}
         >${this.hint}</slot>
       </div>
     `;
@@ -11908,7 +11929,6 @@
         >
           <slot
             name="label"
-            @slotchange=${onSlotChange((v) => (this.hasLabelSlot = v))}
           >${this.label}</slot>
           ${this.required
             ? b `<span class="required-indicator">*</span>`
@@ -11929,7 +11949,6 @@
           >
             <slot
               name="message"
-              @slotchange=${onSlotChange((v) => (this.hasMessageSlot = v))}
             >${this.message}</slot>
           </div>
         </div>
@@ -11997,7 +12016,7 @@
         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;
       }
@@ -12085,6 +12104,21 @@
         color: var(--quantic-text-warning-primary);
       }
     `,
+        whenSlotPresent('label', i$7 `
+      .label.is-empty {
+        display: revert;
+      }
+    `),
+        whenSlotPresent('hint', i$7 `
+      .hint.is-empty {
+        display: revert;
+      }
+    `),
+        whenSlotPresent('message', i$7 `
+      .message.is-empty {
+        display: revert;
+      }
+    `),
     ];
     __decorate([
         prop({ type: 'string', default: "''", description: 'ID linking the label and hint/message elements to the control for accessibility.' })
@@ -12110,15 +12144,6 @@
     __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);
@@ -62139,7 +62164,6 @@
             this.label = '';
             this.active = false;
             this.invalid = false;
-            this.hasLabelSlot = false;
             this.handleActivateClick = () => {
                 if (!this.active)
                     this.activate();
@@ -62197,7 +62221,7 @@
             }
         }
         render() {
-            const hasLabel = this.hasLabelSlot || !!this.label;
+            const hasLabel = !!this.label;
             return b `
       <div
         class="${e$3({
@@ -62210,7 +62234,7 @@
         @keydown=${this.handleTriggerKey}
       >
         <span class=${e$3({ label: true, 'is-empty': !hasLabel })}
-          ><slot name="label" @slotchange=${onSlotChange((has) => (this.hasLabelSlot = has))}>${this.label}</slot></span
+          ><slot name="label">${this.label}</slot></span
         >
         <span class="value">
           <span class="display">
@@ -62240,7 +62264,7 @@
             editor: { description: 'Input element shown when the field is active.' },
         },
     };
-    exports.InlineEdit.styles = i$7 `
+    exports.InlineEdit.styles = [i$7 `
     :host {
       display: block;
       padding: var(
@@ -62284,7 +62308,6 @@
       );
     }
 
-    /* The label renders unconditionally so its slot exists to fire slotchange. */
     .label.is-empty {
       display: none;
     }
@@ -62354,7 +62377,13 @@
     .is-active .editor {
       display: block;
     }
-  `;
+  `,
+        whenSlotPresent('label', i$7 `
+    .label.is-empty {
+      display: revert;
+    }
+  `),
+    ];
     __decorate([
         prop({ type: 'string', default: '', description: 'Fallback label text when no label slot content is provided.' })
     ], exports.InlineEdit.prototype, "label", void 0);
@@ -62364,9 +62393,6 @@
     __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')
@@ -63559,6 +63585,10 @@
         }
         connectedCallback() {
             super.connectedCallback();
+            if (this.hasAttribute('ssr-has-sidebar')) {
+                this.hasSidebarSlot = true;
+                this.removeAttribute('ssr-has-sidebar');
+            }
             document.addEventListener('keydown', this.handleKeydown);
         }
         disconnectedCallback() {
@@ -63585,16 +63615,60 @@
                 ...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; }
+        .header.collapsible { display: revert-layer; }
+      }`),
+                whenSlotPresent('navbar', i$7 `
+        @layer quantic-header-visibility {
+          .header {
+            display: revert-layer;
+          }
+        }
+      `),
+                whenSlotPresent('titlebar', i$7 `
+        @layer quantic-header-visibility {
+          .header {
+            display: revert-layer;
+          }
         }
+      `),
+                r$6(`@layer quantic-header-visibility {
+        :host(:has([slot="logo"]):not(:has([slot="sidebar"]))) .header { display: revert-layer; }
+        @scope { :scope:has([slot="logo"]):not(:has([slot="sidebar"])) .header { display: revert-layer; } }
       }`),
+                whenSlotPresent('sidebar', i$7 `
+        .aside { display: flex; }
+        @media only screen and (min-width: 1024px) {
+          .wrapper {
+            display: grid;
+            grid-template-areas: 'aside header' 'aside toolbar' 'aside main';
+            grid-template-rows: auto auto 1fr;
+            grid-template-columns: var(--quantic-component-layout-aside-width-collapsed) 1fr;
+          }
+          .is-aside-expanded.wrapper {
+            grid-template-columns: var(--quantic-component-layout-aside-width) 1fr;
+          }
+          .aside {
+            grid-area: aside;
+            position: sticky;
+            top: 0;
+            align-self: start;
+            transform: translateX(0);
+            opacity: 1;
+            pointer-events: auto;
+          }
+          .is-aside-expanded.wrapper .aside,
+          .is-aside-expanded.wrapper .logo {
+            width: var(--quantic-component-layout-aside-width);
+          }
+          .wrapper:not(.is-aside-expanded) .aside,
+          .wrapper:not(.is-aside-expanded) .logo {
+            width: var(--quantic-component-layout-aside-width-collapsed);
+            padding-inline: 0;
+          }
+          .toolbar { grid-area: toolbar; min-width: 0; }
+          .body { grid-area: main; min-width: 0; }
+        }
+      `),
             ];
         }
         get isAsideCollapsible() {
@@ -63662,7 +63736,6 @@
 
         <aside
           class="aside"
-          ?hidden=${!this.hasSidebar}
           tabindex="-1"
           ?inert=${this.isSmallViewport && !this.isAsideExpanded}
         >
@@ -63803,7 +63876,7 @@
       padding-block: var(--quantic-component-layout-aside-padding-block);
       border-right: 1px solid var(--quantic-component-layout-aside-border);
       overflow: visible;
-      display: flex;
+      display: none;
       flex-direction: column;
       gap: var(--quantic-component-layout-aside-padding-block);
       transform: translateX(
@@ -67305,7 +67378,7 @@
         prop({ type: 'TableVariant', options: Object.values(exports.TableVariant), default: exports.TableVariant.Outline, reflect: true, description: 'Visual style. "outline" adds row borders; "striped" alternates row backgrounds; "minimal" removes borders.' })
     ], exports.Table.prototype, "variant", void 0);
     __decorate([
-        prop({ type: 'boolean', default: 'false', description: 'Reduces cell padding for compact display.' })
+        prop({ type: 'boolean', default: 'false', reflect: true, description: 'Reduces cell padding for compact display.' })
     ], exports.Table.prototype, "dense", void 0);
     __decorate([
         prop({ type: 'string', attribute: 'aria-label', description: 'Accessible label for the table.' })