@ctrliq/quantic-components 1.84.1 → 1.85.1

package/dist/meta/sibling-groups.test.d.ts

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

package/dist/meta/sibling-groups.test.js

@@ -0,0 +1,42 @@
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+const SRC_DIR = join(dirname(fileURLToPath(import.meta.url)), '..');
+// quantic-action-group, quantic-tag-group and quantic-badge-group are the same component
+// with different children. They exist to carry one accessible name and one gap over a run
+// of siblings, and they deliberately take no layout props: Cluster was deprecated rather
+// than have three copies of its axis and align. That makes ::part(group) the only way out
+// for a caller who needs a column, so it has to be on all three or the escape hatch is a
+// coin flip.
+const GROUPS = [
+    'action-group/action-group.component.ts',
+    'tag/tag-group.component.ts',
+    'badge/badge-group.component.ts',
+];
+const LAYOUT_PROPS = /attribute:\s*'(axis|direction|align|orientation|gap|wrap)'/;
+function source(file) {
+    return readFileSync(join(SRC_DIR, file), 'utf-8');
+}
+describe('sibling groups', () => {
+    it.each(GROUPS)('%s exposes the role container as ::part(group)', (file) => {
+        const roleContainer = /<div[^>]*role="group"[^>]*>/.exec(source(file));
+        expect(roleContainer, 'expected a div carrying role="group"').not.toBeNull();
+        expect(roleContainer?.[0]).toContain('part="group"');
+    });
+    it.each(GROUPS)('%s takes no layout prop', (file) => {
+        expect(LAYOUT_PROPS.exec(source(file))?.[1]).toBeUndefined();
+    });
+    it('gives all three the same public surface', () => {
+        const surfaces = GROUPS.map((file) => {
+            const text = source(file);
+            return {
+                props: [...text.matchAll(/attribute:\s*'([a-z-]+)'/g)].map(([, name]) => name).sort(),
+                parts: [...text.matchAll(/part="([a-z-]+)"/g)].map(([, name]) => name).sort(),
+            };
+        });
+        expect(surfaces[0]).toEqual({ props: ['aria-label'], parts: ['group'] });
+        for (const surface of surfaces.slice(1))
+            expect(surface).toEqual(surfaces[0]);
+    });
+});

package/dist/meta.json

@@ -1,10 +1,10 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-08-27T21:15:44.818Z",
+  "generated": "2026-08-28T16:42:21.311Z",
   "components": [
     {
       "tag": "quantic-action-group",
-      "description": "A row of related actions sharing one accessible name and a consistent gap. Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. Use quantic-button-bar when the buttons should read as one joined control.",
+      "description": "A row of related actions sharing one accessible name and a consistent gap. Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. Layout: ::part(group), for a column or a different alignment. Use quantic-button-bar when the buttons should read as one joined control.",
       "category": "action",
       "props": [
         {
@@ -183,7 +183,7 @@
     },
     {
       "tag": "quantic-badge-group",
-      "description": "A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. Use quantic-tag-group for tags.",
+      "description": "A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. Layout: ::part(group), for a column or a different alignment. Use quantic-tag-group for tags.",
       "category": "display",
       "props": [
         {
@@ -4774,7 +4774,7 @@
     },
     {
       "tag": "quantic-tag-group",
-      "description": "A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. Use quantic-badge-group for badges.",
+      "description": "A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. Layout: ::part(group), for a column or a different alignment. Use quantic-badge-group for badges.",
       "category": "display",
       "props": [
         {

package/dist/quantic-components.js

@@ -322,13 +322,20 @@
      *
      * 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';
     const AutoHideEmptySlotsMixin = (superClass, slots = []) => {
         var _AutoHideEmptySlotsClass_instances, _AutoHideEmptySlotsClass_slotListenerAttached, _AutoHideEmptySlotsClass_isMeaningful, _AutoHideEmptySlotsClass_onSlotChange, _AutoHideEmptySlotsClass_attachSlotListener, _AutoHideEmptySlotsClass_detachSlotListener;
         if (slots.length === 0)
@@ -346,6 +353,7 @@
                 `${sel} { display: none; }`,
                 whenSlotPresent(name, r$6(`${sel} { display: revert-layer; }`))
                     .cssText,
+                `${sel}[${FILLED_ATTRIBUTE}] { display: revert-layer; }`,
             ].join(' ');
         })
             .join(' ');
@@ -367,7 +375,7 @@
                     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) {
@@ -2956,9 +2964,10 @@
 
     .icon {
       display: inline-flex;
+      align-items: center;
       flex-shrink: 0;
+      height: var(--quantic-line-height-body-sm);
       color: var(--quantic-component-alert-icon-color);
-      line-height: 0;
     }
 
     .content {
@@ -5761,7 +5770,7 @@
         }
         render() {
             return b `
-      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
+      <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
         <slot></slot>
       </div>
     `;
@@ -5771,6 +5780,7 @@
         tag: 'quantic-badge-group',
         description: 'A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. ' +
             'Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. ' +
+            'Layout: ::part(group), for a column or a different alignment. ' +
             'Use quantic-tag-group for tags.',
         category: 'display',
         slots: {
@@ -6003,7 +6013,7 @@
         }
         render() {
             return b `
-      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
+      <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
         <slot></slot>
       </div>
     `;
@@ -6014,6 +6024,7 @@
         description: 'A row of related actions sharing one accessible name and a consistent gap. ' +
             'Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. ' +
             'Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. ' +
+            'Layout: ::part(group), for a column or a different alignment. ' +
             'Use quantic-button-bar when the buttons should read as one joined control.',
         category: 'action',
         slots: {
@@ -70057,7 +70068,7 @@
         }
         render() {
             return b `
-      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
+      <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
         <slot></slot>
       </div>
     `;
@@ -70067,6 +70078,7 @@
         tag: 'quantic-tag-group',
         description: 'A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. ' +
             'Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. ' +
+            'Layout: ::part(group), for a column or a different alignment. ' +
             'Use quantic-badge-group for badges.',
         category: 'display',
         slots: {