@ctrliq/quantic-components 1.67.5 → 1.68.0

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

@@ -1,10 +1,10 @@
 import { LitConstructor } from './shared.types';
 import { QuanticElement } from './quantic-element';
 /**
- * Mixin that automatically hides empty named slots using CSS only.
+ * Mixin that automatically hides empty named slots.
  *
  * 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:
+ * DOM child with a matching `slot` attribute. Two CSS rules cover all browsers:
  *
  * - `:host(:has([slot="name"]))` — Safari and Firefox
  * - `@scope { :scope:has([slot="name"]) }` — Chrome (@scope changes the
@@ -18,7 +18,12 @@ import { QuanticElement } from './quantic-element';
  * 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.
+ * Shadow DOM output — no JS, no layout shift for SSR.
+ *
+ * Chrome doesn't re-evaluate :has() in shadow DOM when light-DOM children
+ * arrive asynchronously (e.g. React CSR). A capture listener on the shadow
+ * root intercepts all slotchange events internally and sets inline styles to
+ * override the CSS — no wiring required in component templates.
  *
  * @example
  * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}

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

@@ -1,10 +1,15 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 import { unsafeCSS, } from 'lit';
 import { escapeCssString, whenSlotPresent } from './slot-utils';
 /**
- * Mixin that automatically hides empty named slots using CSS only.
+ * Mixin that automatically hides empty named slots.
  *
  * 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:
+ * DOM child with a matching `slot` attribute. Two CSS rules cover all browsers:
  *
  * - `:host(:has([slot="name"]))` — Safari and Firefox
  * - `@scope { :scope:has([slot="name"]) }` — Chrome (@scope changes the
@@ -18,12 +23,18 @@ import { escapeCssString, whenSlotPresent } from './slot-utils';
  * 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.
+ * Shadow DOM output — no JS, no layout shift for SSR.
+ *
+ * Chrome doesn't re-evaluate :has() in shadow DOM when light-DOM children
+ * arrive asynchronously (e.g. React CSR). A capture listener on the shadow
+ * root intercepts all slotchange events internally and sets inline styles to
+ * override the CSS — no wiring required in component templates.
  *
  * @example
  * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}
  */
 export const AutoHideEmptySlotsMixin = (superClass, namedSlots = []) => {
+    var _AutoHideEmptySlotsClass_onSlotChange;
     if (namedSlots.length === 0)
         return superClass;
     // A component may declare a native CSSStyleSheet, which Lit passes through
@@ -41,6 +52,18 @@ export const AutoHideEmptySlotsMixin = (superClass, namedSlots = []) => {
     })
         .join(' ');
     class AutoHideEmptySlotsClass extends superClass {
+        constructor() {
+            super(...arguments);
+            // slotchange doesn't bubble, but capture intercepts it on the way down
+            // to the slot element — one listener covers all named slots.
+            _AutoHideEmptySlotsClass_onSlotChange.set(this, (e) => {
+                const slot = e.target;
+                if (!namedSlots.includes(slot.name))
+                    return;
+                const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+                slot.style.display = hasContent ? 'block' : '';
+            });
+        }
         static finalizeStyles(styles) {
             const base = superClass.finalizeStyles?.call(this, styles) ?? [];
             const baseCSS = base.map(toCssText).join('\n');
@@ -50,6 +73,29 @@ export const AutoHideEmptySlotsMixin = (superClass, namedSlots = []) => {
                     ` @layer quantic-slot-visibility { ${slotRulesCSS} }`),
             ];
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.renderRoot.addEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
+                capture: true,
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.renderRoot.removeEventListener('slotchange', __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f"), {
+                capture: true,
+            });
+        }
+        // Sync initial state for slots that already have content on first render
+        // (e.g. synchronous React CSR or SSR hydration with light DOM present).
+        firstUpdated(changed) {
+            super.firstUpdated?.(changed);
+            for (const name of namedSlots) {
+                const slot = this.renderRoot.querySelector(`slot[name="${CSS.escape(name)}"]`);
+                if (slot)
+                    __classPrivateFieldGet(this, _AutoHideEmptySlotsClass_onSlotChange, "f").call(this, { target: slot });
+            }
+        }
     }
+    _AutoHideEmptySlotsClass_onSlotChange = new WeakMap();
     return AutoHideEmptySlotsClass;
 };

package/dist/toast/toast.js

@@ -23,7 +23,10 @@ LucideIconCircleX.ensureDefined();
 LucideIconInfo.ensureDefined();
 LucideIconTriangleAlert.ensureDefined();
 LucideIconX.ensureDefined();
-let Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', 'action']) {
+let Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, [
+    'title',
+    'action',
+]) {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -86,18 +89,18 @@ let Toast = class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title'
         </div>
         ${this.showCloseButton
             ? html `<quantic-button
-              class="close-button"
-              variant="ghost"
-              size="sm"
-              icon
-              aria-label="Close"
-              @click=${this.handleCloseClick}
-            >
-              <quantic-icon-lucide-x
+                class="close-button"
+                variant="ghost"
                 size="sm"
-                class="close-icon"
-              ></quantic-icon-lucide-x>
-            </quantic-button>`
+                icon
+                aria-label="Close"
+                @click=${this.handleCloseClick}
+              >
+                <quantic-icon-lucide-x
+                  size="sm"
+                  class="close-icon"
+                ></quantic-icon-lucide-x>
+              </quantic-button>`
             : nothing}
       </div>
     `;

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

@@ -17,3 +17,12 @@ export declare const WithCloseButton: import("../shared/story").StoryObject<Args
 export declare const WithoutTitle: import("../shared/story").StoryObject<Args>;
 export declare const WithAction: import("../shared/story").StoryObject<object>;
 export declare const CustomIcon: import("../shared/story").StoryObject<object>;
+/** Repro: slot content inserted asynchronously (simulates React CSR).
+ *  Title and action should appear after 800 ms. */
+export declare const AsyncSlotRepro: {
+    name: string;
+    render: () => string;
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};

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

@@ -1,10 +1,10 @@
 import { LitConstructor } from './shared.types';
 import { QuanticElement } from './quantic-element';
 /**
- * Mixin that automatically hides empty named slots using CSS only.
+ * Mixin that automatically hides empty named slots.
  *
  * 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:
+ * DOM child with a matching `slot` attribute. Two CSS rules cover all browsers:
  *
  * - `:host(:has([slot="name"]))` — Safari and Firefox
  * - `@scope { :scope:has([slot="name"]) }` — Chrome (@scope changes the
@@ -18,7 +18,12 @@ import { QuanticElement } from './quantic-element';
  * 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.
+ * Shadow DOM output — no JS, no layout shift for SSR.
+ *
+ * Chrome doesn't re-evaluate :has() in shadow DOM when light-DOM children
+ * arrive asynchronously (e.g. React CSR). A capture listener on the shadow
+ * root intercepts all slotchange events internally and sets inline styles to
+ * override the CSS — no wiring required in component templates.
  *
  * @example
  * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.67.5",
+  "version": "1.68.0",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {