@ctrliq/quantic-components 1.85.0 → 1.85.1

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

@@ -1,38 +1,3 @@
 import { LitConstructor } from './shared.types';
 import { QuanticElement } from './quantic-element';
-/**
- * Mixin that automatically hides empty slots.
- *
- * Each listed slot is hidden by default and revealed when the host has matching
- * light DOM content. Pass `''` for the default (unnamed) slot.
- *
- * Two CSS rules cover all browsers for named slots:
- *
- * - `: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 default slot uses `:has(> :not([slot]))` (element children without a
- * `slot` attribute). Text-only default content is covered by the slotchange
- * JS path below.
- *
- * 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 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']) {}
- * class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', '', 'action']) {}
- */
 export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T, slots?: string[]) => T;

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

@@ -39,13 +39,20 @@ import { escapeCssString, whenSlotPresent } from './slot-utils';
  *
  * 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.
+ * root intercepts all slotchange events internally and marks filled slots with
+ * `data-slot-filled`, no wiring required in component templates.
+ *
+ * That reveal has to be a rule inside `quantic-slot-visibility`, not an inline
+ * style. Inline declarations sit in the implicit unlayered layer, which the
+ * cascade orders after every explicit layer, so an inline
+ * `display: revert-layer` reverts to the `display: none` above rather than
+ * past it.
  *
  * @example
  * class MyElement extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {}
  * class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', '', 'action']) {}
  */
+const FILLED_ATTRIBUTE = 'data-slot-filled';
 export const AutoHideEmptySlotsMixin = (superClass, slots = []) => {
     var _AutoHideEmptySlotsClass_instances, _AutoHideEmptySlotsClass_slotListenerAttached, _AutoHideEmptySlotsClass_isMeaningful, _AutoHideEmptySlotsClass_onSlotChange, _AutoHideEmptySlotsClass_attachSlotListener, _AutoHideEmptySlotsClass_detachSlotListener;
     if (slots.length === 0)
@@ -63,6 +70,7 @@ export const AutoHideEmptySlotsMixin = (superClass, slots = []) => {
             `${sel} { display: none; }`,
             whenSlotPresent(name, unsafeCSS(`${sel} { display: revert-layer; }`))
                 .cssText,
+            `${sel}[${FILLED_ATTRIBUTE}] { display: revert-layer; }`,
         ].join(' ');
     })
         .join(' ');
@@ -84,7 +92,7 @@ export const AutoHideEmptySlotsMixin = (superClass, slots = []) => {
                 const hasContent = slot
                     .assignedNodes({ flatten: true })
                     .some(__classPrivateFieldGet(this, _AutoHideEmptySlotsClass_isMeaningful, "f"));
-                slot.style.display = hasContent ? 'revert-layer' : '';
+                slot.toggleAttribute(FILLED_ATTRIBUTE, hasContent);
             });
         }
         static finalizeStyles(styles) {

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,57 @@
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { css } from 'lit';
+import postcss from 'postcss';
+import { describe, expect, it } from 'vitest';
+import { AutoHideEmptySlotsMixin } from './auto-hide-empty-slots.mixin';
+import { QuanticElement } from './quantic-element';
+const HERE = dirname(fileURLToPath(import.meta.url));
+const VISIBILITY_LAYER = 'quantic-slot-visibility';
+class Probe extends AutoHideEmptySlotsMixin(QuanticElement, ['title', '']) {
+}
+Probe.styles = css `
+    slot[name='title'] {
+      display: flex;
+    }
+
+    slot:not([name]) {
+      display: grid;
+    }
+  `;
+function visibilityLayer() {
+    const [sheet] = Probe.finalizeStyles(Probe.styles);
+    let found;
+    postcss.parse(sheet.cssText).walkAtRules('layer', (rule) => {
+        if (rule.params === VISIBILITY_LAYER && rule.nodes)
+            found = rule.nodes;
+    });
+    if (!found)
+        throw new Error(`no @layer ${VISIBILITY_LAYER} in the stylesheet`);
+    return found;
+}
+function displayFor(layer, selector) {
+    const rule = layer.find((node) => node.type === 'rule' && node.selector === selector);
+    return rule?.nodes
+        .find((node) => node.type === 'decl' && node.prop === 'display')
+        ?.toString();
+}
+describe('AutoHideEmptySlotsMixin', () => {
+    const layer = visibilityLayer();
+    it.each([
+        ['named', 'slot[name="title"]'],
+        ['default', 'slot:not([name])'],
+    ])('hides the %s slot by default', (_label, selector) => {
+        expect(displayFor(layer, selector)).toBe('display: none');
+    });
+    it.each([
+        ['named', 'slot[name="title"][data-slot-filled]'],
+        ['default', 'slot:not([name])[data-slot-filled]'],
+    ])('reveals the %s slot from inside the visibility layer once JS marks it filled', (_label, selector) => {
+        expect(displayFor(layer, selector)).toBe('display: revert-layer');
+    });
+    it('never reveals a slot through an inline style', () => {
+        const source = readFileSync(join(HERE, 'auto-hide-empty-slots.mixin.ts'), 'utf8');
+        expect(source).not.toMatch(/\.style\.display\s*=/);
+    });
+});

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

@@ -22,6 +22,13 @@ export declare const CustomIcon: import("../shared/story").StoryObject<object>;
 export declare const AsyncSlotRepro: {
     name: string;
     render: () => string;
+    parameters: {
+        docs: {
+            story: {
+                autoplay: boolean;
+            };
+        };
+    };
     play: ({ canvasElement }: {
         canvasElement: HTMLElement;
     }) => Promise<void>;

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

@@ -1,38 +1,3 @@
 import { LitConstructor } from './shared.types';
 import { QuanticElement } from './quantic-element';
-/**
- * Mixin that automatically hides empty slots.
- *
- * Each listed slot is hidden by default and revealed when the host has matching
- * light DOM content. Pass `''` for the default (unnamed) slot.
- *
- * Two CSS rules cover all browsers for named slots:
- *
- * - `: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 default slot uses `:has(> :not([slot]))` (element children without a
- * `slot` attribute). Text-only default content is covered by the slotchange
- * JS path below.
- *
- * 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 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']) {}
- * class Toast extends AutoHideEmptySlotsMixin(QuanticElement, ['title', '', 'action']) {}
- */
 export declare const AutoHideEmptySlotsMixin: <T extends LitConstructor<QuanticElement>>(superClass: T, slots?: string[]) => T;

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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.85.0",
+  "version": "1.85.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",