@ctrliq/quantic-components 1.83.0 → 1.84.0

package/dist/meta.json

@@ -1,7 +1,42 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-08-27T20:08:17.213Z",
+  "generated": "2026-08-27T20:51:41.571Z",
   "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.",
+      "category": "action",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one."
+        }
+      ],
+      "examples": [
+        "<quantic-action-group ><quantic-button variant=\"outline\">Cancel</quantic-button><quantic-button variant=\"primary\">Save</quantic-button></quantic-action-group>",
+        "<quantic-action-group aria-label=\"Asset actions\">\n      <quantic-button variant=\"ghost\" size=\"sm\">\n        <quantic-icon-lucide-copy size=\"xs\"></quantic-icon-lucide-copy>\n      </quantic-button>\n      <quantic-button variant=\"ghost\" size=\"sm\">\n        <quantic-icon-lucide-download size=\"xs\"></quantic-icon-lucide-download>\n      </quantic-button>\n    </quantic-action-group>",
+        "<quantic-dialog open>\n      <quantic-dialog-title slot=\"header\">Confirm action</quantic-dialog-title>\n      <p>Are you sure you want to perform this action? This cannot be undone.</p>\n      <quantic-dialog-actions slot=\"footer\">\n        <quantic-button variant=\"outline\">Cancel</quantic-button>\n        <quantic-button variant=\"primary\">Confirm</quantic-button>\n      </quantic-dialog-actions>\n    </quantic-dialog>",
+        "<quantic-action-group ><quantic-button variant=\"outline\">Delete</quantic-button><quantic-button variant=\"outline\">Duplicate</quantic-button><quantic-button variant=\"primary\">Publish</quantic-button></quantic-action-group>",
+        "<quantic-action-group aria-label=\"Record actions\"><quantic-button variant=\"outline\">Cancel</quantic-button><quantic-button variant=\"primary\">Save</quantic-button></quantic-action-group>"
+      ],
+      "relatedTo": [
+        "quantic-button",
+        "quantic-button-bar",
+        "quantic-dialog-actions"
+      ],
+      "subComponents": [
+        "quantic-button",
+        "quantic-dropdown-menu",
+        "quantic-popover"
+      ]
+    },
     {
       "tag": "quantic-alert",
       "description": "Inline alert banner with severity styles and optional dismiss action. Visibility is owned by the consumer.",
@@ -146,6 +181,38 @@
         "quantic-status-badge"
       ]
     },
+    {
+      "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.",
+      "category": "display",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-badge or quantic-status-badge elements."
+        }
+      ],
+      "examples": [
+        "<quantic-badge-group ><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge></quantic-badge-group>",
+        "<quantic-badge-group aria-label=\"Service status\">\n      <quantic-status-badge color=\"success\" size=\"sm\">Running</quantic-status-badge>\n      <quantic-status-badge color=\"warning\" size=\"sm\">Degraded</quantic-status-badge>\n      <quantic-status-badge color=\"error\" size=\"sm\">Offline</quantic-status-badge>\n    </quantic-badge-group>",
+        "<quantic-badge-group aria-label=\"Asset types\"><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge></quantic-badge-group>",
+        "<quantic-badge-group ><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Social graphics</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Slide templates</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Press kits</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Advisory cards</quantic-badge></quantic-badge-group>"
+      ],
+      "relatedTo": [
+        "quantic-badge",
+        "quantic-tag-group"
+      ],
+      "subComponents": [
+        "quantic-badge",
+        "quantic-status-badge"
+      ]
+    },
     {
       "tag": "quantic-button",
       "description": "Clickable action trigger for form submission, primary CTAs, and secondary actions. Supports icon-only mode and polymorphic rendering as an <a> or <span>. Prefer over quantic-icon-label when the element needs to be interactive.",
@@ -285,7 +352,7 @@
     },
     {
       "tag": "quantic-button-bar",
-      "description": "Toolbar of related buttons joined into one cohesive control, with shared sizing. Use for switching between views or modes, and for a compact run of icon actions. Items carry aria-pressed via active, so a set can behave as exclusive options or as independent toggles. Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.",
+      "description": "Toolbar of related buttons joined into one cohesive control, with shared sizing. Use for switching between views or modes, and for a compact run of icon actions. Items carry aria-pressed via active, so a set can behave as exclusive options or as independent toggles. Focus follows the toolbar pattern: one tab stop, arrow keys move between items, Home and End jump to the ends. Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.",
       "category": "action",
       "props": [
         {
@@ -362,7 +429,7 @@
     },
     {
       "tag": "quantic-button-group",
-      "description": "Deprecated alias of quantic-button-bar. This element never grouped buttons: it joins borders and gives its items a pressed state. Use quantic-button-bar.",
+      "description": "Deprecated alias of quantic-button-bar. Use quantic-button-bar.",
       "category": "action",
       "deprecated": {
         "use": "quantic-button-bar",
@@ -1655,7 +1722,7 @@
     },
     {
       "tag": "quantic-dialog-actions",
-      "description": "Footer actions bar sub-component for quantic-dialog. Lays out action buttons (confirm/cancel) flush to the right.",
+      "description": "Footer actions bar for quantic-dialog. Lays action buttons out as a quantic-action-group, flush to the right.",
       "category": "feedback",
       "slots": [
         {
@@ -1665,7 +1732,11 @@
       ],
       "relatedTo": [
         "quantic-dialog",
-        "quantic-button"
+        "quantic-button",
+        "quantic-action-group"
+      ],
+      "subComponents": [
+        "quantic-action-group"
       ]
     },
     {
@@ -4701,6 +4772,40 @@
         "quantic-badge"
       ]
     },
+    {
+      "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.",
+      "category": "display",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-tag, quantic-status-tag or quantic-count-tag elements."
+        }
+      ],
+      "examples": [
+        "<quantic-tag-group ><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag></quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Applied filters\">\n      <quantic-tag dismissible>Compute</quantic-tag>\n      <quantic-tag dismissible>Storage</quantic-tag>\n      <quantic-tag dismissible>Networking</quantic-tag>\n    </quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Cluster state\">\n      <quantic-tag>Compute</quantic-tag>\n      <quantic-status-tag color=\"success\">Healthy</quantic-status-tag>\n      <quantic-count-tag count=\"12\">Nodes</quantic-count-tag>\n    </quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Cluster capabilities\"><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag></quantic-tag-group>",
+        "<quantic-tag-group ><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag><quantic-tag size=\"md\">Scheduling</quantic-tag><quantic-tag size=\"md\">Monitoring</quantic-tag><quantic-tag size=\"md\">Provisioning</quantic-tag><quantic-tag size=\"md\">Authentication</quantic-tag><quantic-tag size=\"md\">Observability</quantic-tag></quantic-tag-group>"
+      ],
+      "relatedTo": [
+        "quantic-tag",
+        "quantic-badge-group"
+      ],
+      "subComponents": [
+        "quantic-tag",
+        "quantic-status-tag",
+        "quantic-count-tag"
+      ]
+    },
     {
       "tag": "quantic-text",
       "description": "Typography component for rendering text with consistent sizing, weight, and color tokens. Renders any HTML element via the `as` prop for semantic correctness.",

package/dist/quantic-components.js

@@ -5754,6 +5754,59 @@
         quanticElement('quantic-status-badge')
     ], exports.StatusBadge);
 
+    exports.BadgeGroup = class BadgeGroup extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.ariaLabel = null;
+        }
+        render() {
+            return b `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+    exports.BadgeGroup.meta = {
+        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.',
+        category: 'display',
+        slots: {
+            '': {
+                description: 'quantic-badge or quantic-status-badge elements.',
+            },
+        },
+        subComponents: ['quantic-badge', 'quantic-status-badge'],
+        relatedTo: ['quantic-badge', 'quantic-tag-group'],
+    };
+    exports.BadgeGroup.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-badge-group-gap,
+        var(--quantic-spacing-1)
+      );
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'string',
+            attribute: 'aria-label',
+            description: 'Accessible name for the group.',
+        })
+    ], exports.BadgeGroup.prototype, "ariaLabel", void 0);
+    exports.BadgeGroup = __decorate([
+        quanticElement('quantic-badge-group')
+    ], exports.BadgeGroup);
+
     const CapacityBarSize = {
         ExtraSmall: 'xs',
         Small: 'sm',
@@ -5943,6 +5996,60 @@
         quanticElement('quantic-capacity-bar')
     ], exports.CapacityBar);
 
+    exports.ActionGroup = class ActionGroup extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.ariaLabel = null;
+        }
+        render() {
+            return b `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+    exports.ActionGroup.meta = {
+        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.',
+        category: 'action',
+        slots: {
+            '': {
+                description: 'quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one.',
+            },
+        },
+        subComponents: ['quantic-button', 'quantic-dropdown-menu', 'quantic-popover'],
+        relatedTo: ['quantic-button', 'quantic-button-bar', 'quantic-dialog-actions'],
+    };
+    exports.ActionGroup.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-action-group-gap,
+        var(--quantic-spacing-3)
+      );
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'string',
+            attribute: 'aria-label',
+            description: 'Accessible name for the group.',
+        })
+    ], exports.ActionGroup.prototype, "ariaLabel", void 0);
+    exports.ActionGroup = __decorate([
+        quanticElement('quantic-action-group')
+    ], exports.ActionGroup);
+
     /**
      * @license
      * Copyright 2021 Google LLC
@@ -5996,21 +6103,102 @@
 
     const sizeContext$2 = n$1('button-bar.size');
 
+    const KEY_STEPS = {
+        ArrowRight: 1,
+        ArrowDown: 1,
+        ArrowLeft: -1,
+        ArrowUp: -1,
+        Home: 'first',
+        End: 'last',
+    };
+    function resolveFocusStop(items, hasSynced) {
+        if (!items.length)
+            return null;
+        if (hasSynced) {
+            const tabbable = items.findIndex((item) => item.tabbable);
+            if (tabbable !== -1)
+                return tabbable;
+        }
+        const active = items.findIndex((item) => item.active);
+        return active === -1 ? 0 : active;
+    }
+    function nextFocusIndex(key, current, count) {
+        const step = KEY_STEPS[key];
+        if (step === undefined)
+            return null;
+        if (count < 2 || current < 0 || current >= count)
+            return null;
+        if (step === 'first')
+            return 0;
+        if (step === 'last')
+            return count - 1;
+        return (current + step + count) % count;
+    }
+
+    const ITEM_TAGS = 'quantic-button-bar-item, quantic-button-group-item';
     exports.ButtonBar = class ButtonBar extends QuanticElement {
         constructor() {
             super(...arguments);
             this.size = ButtonBarSize.Medium;
             this.ariaLabel = null;
+            this.hasSynced = false;
             this.defaultLabel = 'Button bar';
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.disabledObserver = new MutationObserver(() => this.syncFocusStop());
+            this.disabledObserver.observe(this, {
+                attributeFilter: ['disabled'],
+                subtree: true,
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.disabledObserver?.disconnect();
+            this.disabledObserver = undefined;
+        }
+        get items() {
+            return [...this.querySelectorAll(ITEM_TAGS)].filter((item) => item.parentElement === this && !item.disabled);
+        }
+        setFocusStop(items, index) {
+            items.forEach((item, position) => {
+                item.tabbable = position === index;
+            });
+        }
+        syncFocusStop() {
+            const items = this.items;
+            const stop = resolveFocusStop(items, this.hasSynced);
+            if (stop === null)
+                return;
+            this.hasSynced = true;
+            this.setFocusStop(items, stop);
+        }
+        handleFocusIn(event) {
+            const items = this.items;
+            const focused = items.findIndex((item) => item.contains(event.target));
+            if (focused !== -1)
+                this.setFocusStop(items, focused);
+        }
+        handleKeydown(event) {
+            const items = this.items;
+            const current = items.findIndex((item) => item.contains(event.target));
+            const next = nextFocusIndex(event.key, current, items.length);
+            if (next === null)
+                return;
+            event.preventDefault();
+            this.setFocusStop(items, next);
+            items[next].focus();
+        }
         render() {
             return b `
       <div
         class="container"
         role="toolbar"
-        aria-label=${this.ariaLabel || this.defaultLabel}
+        aria-label=${this.ariaLabel ?? this.defaultLabel}
+        @keydown=${this.handleKeydown}
+        @focusin=${this.handleFocusIn}
       >
-        <slot></slot>
+        <slot @slotchange=${() => this.syncFocusStop()}></slot>
       </div>
     `;
         }
@@ -6020,6 +6208,7 @@
         description: 'Toolbar of related buttons joined into one cohesive control, with shared sizing. ' +
             'Use for switching between views or modes, and for a compact run of icon actions. ' +
             'Items carry aria-pressed via active, so a set can behave as exclusive options or as independent toggles. ' +
+            'Focus follows the toolbar pattern: one tab stop, arrow keys move between items, Home and End jump to the ends. ' +
             'Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.',
         category: 'action',
         slots: { '': { description: 'One or more quantic-button-bar-item elements.' } },
@@ -6075,8 +6264,7 @@
     exports.ButtonGroup.meta = {
         ...exports.ButtonBar.meta,
         tag: 'quantic-button-group',
-        description: 'Deprecated alias of quantic-button-bar. This element never grouped buttons: ' +
-            'it joins borders and gives its items a pressed state. Use quantic-button-bar.',
+        description: 'Deprecated alias of quantic-button-bar. Use quantic-button-bar.',
         deprecated: {
             use: 'quantic-button-bar',
             reason: 'The name describes a row of buttons, which this is not. Use quantic-action-group for that.',
@@ -6091,9 +6279,13 @@
     exports.ButtonBarItem = class ButtonBarItem extends QuanticElement {
         constructor() {
             super(...arguments);
+            this.tabbable = true;
             this.disabled = false;
             this.active = false;
         }
+        focus(options) {
+            this.innerButton?.focus(options);
+        }
         render() {
             const classes = e$3({
                 main: true,
@@ -6104,7 +6296,7 @@
       <button
         type="button"
         class=${classes}
-        tabindex=${this.disabled ? -1 : 0}
+        tabindex=${this.disabled || !this.tabbable ? -1 : 0}
         ?disabled=${this.disabled}
         aria-pressed=${this.active ? 'true' : 'false'}
       >
@@ -6247,6 +6439,12 @@
     __decorate([
         c({ context: sizeContext$2, subscribe: true })
     ], exports.ButtonBarItem.prototype, "size", void 0);
+    __decorate([
+        r$2()
+    ], exports.ButtonBarItem.prototype, "tabbable", void 0);
+    __decorate([
+        e$5('button')
+    ], exports.ButtonBarItem.prototype, "innerButton", void 0);
     __decorate([
         prop({
             type: 'boolean',
@@ -8722,33 +8920,33 @@
         quanticElement('quantic-dialog-title')
     ], exports.DialogTitle);
 
+    exports.ActionGroup.ensureDefined();
     exports.DialogActions = class DialogActions extends QuanticElement {
         render() {
             return u$2 `
-      <div class="main">
+      <quantic-action-group aria-label="">
         <slot></slot>
-      </div>
+      </quantic-action-group>
     `;
         }
     };
     exports.DialogActions.meta = {
         tag: 'quantic-dialog-actions',
-        description: 'Footer actions bar sub-component for quantic-dialog. ' +
-            'Lays out action buttons (confirm/cancel) flush to the right.',
+        description: 'Footer actions bar for quantic-dialog. ' +
+            'Lays action buttons out as a quantic-action-group, flush to the right.',
         category: 'feedback',
         slots: { '': { description: 'Action buttons, typically quantic-button elements.' } },
-        relatedTo: ['quantic-dialog', 'quantic-button'],
+        subComponents: ['quantic-action-group'],
+        relatedTo: ['quantic-dialog', 'quantic-button', 'quantic-action-group'],
     };
     exports.DialogActions.styles = i$7 `
     :host {
       display: block;
     }
 
-    .main {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: var(--quantic-spacing-3);
+    quantic-action-group {
+      width: fit-content;
+      margin-inline-start: auto;
     }
   `;
     exports.DialogActions = __decorate([
@@ -69848,6 +70046,59 @@
         quanticElement('quantic-count-tag')
     ], exports.CountTag);
 
+    exports.TagGroup = class TagGroup extends QuanticElement {
+        constructor() {
+            super(...arguments);
+            this.ariaLabel = null;
+        }
+        render() {
+            return b `
+      <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+    exports.TagGroup.meta = {
+        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.',
+        category: 'display',
+        slots: {
+            '': {
+                description: 'quantic-tag, quantic-status-tag or quantic-count-tag elements.',
+            },
+        },
+        subComponents: ['quantic-tag', 'quantic-status-tag', 'quantic-count-tag'],
+        relatedTo: ['quantic-tag', 'quantic-badge-group'],
+    };
+    exports.TagGroup.styles = i$7 `
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(
+        --quantic-component-tag-group-gap,
+        var(--quantic-spacing-1)
+      );
+    }
+  `;
+    __decorate([
+        prop({
+            type: 'string',
+            attribute: 'aria-label',
+            description: 'Accessible name for the group.',
+        })
+    ], exports.TagGroup.prototype, "ariaLabel", void 0);
+    exports.TagGroup = __decorate([
+        quanticElement('quantic-tag-group')
+    ], exports.TagGroup);
+
     const TextVariant = {
         Body: 'body',
         Display: 'display',