@ctrliq/quantic-components 1.84.1 → 1.85.0

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:29:07.660Z",
   "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

@@ -5761,7 +5761,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 +5771,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 +6004,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 +6015,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 +70059,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 +70069,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: {