@ctrliq/quantic-components 1.82.0 → 1.84.0

package/dist/quantic-components.js

@@ -575,7 +575,7 @@
             'Supports icon-only mode and polymorphic rendering as an <a> or <span>. ' +
             'Prefer over quantic-icon-label when the element needs to be interactive.',
         category: 'action',
-        relatedTo: ['quantic-button-group', 'quantic-icon-label'],
+        relatedTo: ['quantic-button-bar', 'quantic-icon-label'],
     };
     exports.Button.formAssociated = true;
     exports.Button.styles = i$7 `
@@ -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
@@ -5988,54 +6095,135 @@
      * SPDX-License-Identifier: BSD-3-Clause
      */function c({context:c,subscribe:e}){return (o,n)=>{"object"==typeof n?n.addInitializer((function(){new s$1(this,{context:c,callback:t=>{o.set.call(this,t);},subscribe:e});})):o.constructor.addInitializer((o=>{new s$1(o,{context:c,callback:t=>{o[n]=t;},subscribe:e});}));}}
 
-    const ButtonGroupSize = {
+    const ButtonBarSize = {
         Small: 'sm',
         Medium: 'md',
         Large: 'lg',
     };
 
-    const sizeContext$2 = n$1('button-group.size');
-
-    exports.ButtonGroup = class ButtonGroup extends QuanticElement {
+    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 = ButtonGroupSize.Medium;
+            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 || 'Button group'}
+        aria-label=${this.ariaLabel ?? this.defaultLabel}
+        @keydown=${this.handleKeydown}
+        @focusin=${this.handleFocusIn}
       >
-        <slot></slot>
+        <slot @slotchange=${() => this.syncFocusStop()}></slot>
       </div>
     `;
         }
     };
-    exports.ButtonGroup.meta = {
-        tag: 'quantic-button-group',
-        description: 'Toolbar container that groups multiple action buttons with joined borders and shared sizing. ' +
-            'Use when two or more related actions should appear as a single cohesive control.',
+    exports.ButtonBar.meta = {
+        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. ' +
+            '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-group-item elements.' } },
-        subComponents: ['quantic-button-group-item'],
+        slots: { '': { description: 'One or more quantic-button-bar-item elements.' } },
+        subComponents: ['quantic-button-bar-item'],
         relatedTo: ['quantic-button'],
     };
-    exports.ButtonGroup.styles = i$7 `
+    exports.ButtonBar.styles = i$7 `
     :host {
-      --quantic-component-button-group-padding-block: var(--quantic-spacing-2);
-      --quantic-component-button-group-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-button-group-font-size: var(
-        --quantic-font-size-body-sm
-      );
-      --quantic-component-button-group-line-height: var(
-        --quantic-line-height-body-sm
-      );
-      --quantic-component-button-group-item-max-width: var(--quantic-width-xxs);
-      --quantic-component-button-group-border-radius: var(--quantic-radius-md);
-      --quantic-component-button-group-border-color: var(
+      --quantic-internal-button-bar-item-padding-block: var(--quantic-spacing-2);
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-button-bar-item-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-button-bar-item-line-height: var(--quantic-line-height-body-sm);
+      --quantic-component-button-bar-item-max-width: var(--quantic-width-xxs);
+      --quantic-component-button-bar-border-radius: var(--quantic-radius-md);
+      --quantic-component-button-bar-border-color: var(
         --quantic-border-primary
       );
 
@@ -6046,27 +6234,58 @@
 
     .container {
       display: inline-flex;
-      border: 1px solid var(--quantic-component-button-group-border-color);
-      border-radius: var(--quantic-component-button-group-border-radius);
+      border: 1px solid var(--quantic-component-button-bar-border-color);
+      border-radius: var(--quantic-component-button-bar-border-radius);
     }
   `;
     __decorate([
         e({ context: sizeContext$2 }),
-        prop({ type: 'ButtonGroupSize', options: Object.values(ButtonGroupSize), default: ButtonGroupSize.Medium, description: 'Size applied to all child items via context.' })
-    ], exports.ButtonGroup.prototype, "size", void 0);
+        prop({ type: 'ButtonBarSize', options: Object.values(ButtonBarSize), default: ButtonBarSize.Medium, description: 'Size applied to all child items via context.' })
+    ], exports.ButtonBar.prototype, "size", void 0);
     __decorate([
-        prop({ type: 'string', attribute: 'aria-label', description: 'Accessible label for the toolbar role.' })
-    ], exports.ButtonGroup.prototype, "ariaLabel", void 0);
+        prop({ type: 'string', attribute: 'aria-label', description: 'Accessible label for the group.' })
+    ], exports.ButtonBar.prototype, "ariaLabel", void 0);
+    exports.ButtonBar = __decorate([
+        quanticElement('quantic-button-bar')
+    ], exports.ButtonBar);
+
+    /**
+     * @deprecated Renamed to `ButtonBar` (`quantic-button-bar`). This element
+     * never grouped buttons: it joins borders and gives its items a pressed state, which is a
+     * button bar. Removed in the next major. For a spaced row of related actions use
+     * `ActionGroup`; the `ButtonGroup` name is retired rather than reused.
+     */
+    exports.ButtonGroup = class ButtonGroup extends exports.ButtonBar {
+        constructor() {
+            super(...arguments);
+            this.defaultLabel = 'Button group';
+        }
+    };
+    exports.ButtonGroup.meta = {
+        ...exports.ButtonBar.meta,
+        tag: 'quantic-button-group',
+        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.',
+        },
+        slots: { '': { description: 'One or more quantic-button-group-item elements.' } },
+        subComponents: ['quantic-button-group-item'],
+    };
     exports.ButtonGroup = __decorate([
         quanticElement('quantic-button-group')
     ], exports.ButtonGroup);
 
-    exports.ButtonGroupItem = class ButtonGroupItem extends QuanticElement {
+    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,
@@ -6075,8 +6294,9 @@
             });
             return b `
       <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'}
       >
@@ -6087,15 +6307,15 @@
     `;
         }
     };
-    exports.ButtonGroupItem.meta = {
-        tag: 'quantic-button-group-item',
-        description: 'Individual button within a quantic-button-group. ' +
-            'Renders as a native button with shared sizing from the parent group context and a toggle-style active state.',
+    exports.ButtonBarItem.meta = {
+        tag: 'quantic-button-bar-item',
+        description: 'Single segment within a quantic-button-bar. ' +
+            'Renders as a native button with shared sizing from the parent context and a pressed state via active.',
         category: 'action',
         slots: { '': { description: 'Button label or icon content.' } },
-        relatedTo: ['quantic-button-group', 'quantic-button'],
+        relatedTo: ['quantic-button-bar', 'quantic-button'],
     };
-    exports.ButtonGroupItem.styles = i$7 `
+    exports.ButtonBarItem.styles = i$7 `
     :host {
       display: inline-flex;
     }
@@ -6117,18 +6337,27 @@
       text-decoration: none;
       text-align: center;
       display: block;
-      align-items: center;
-      justify-content: center;
-      gap: var(--quantic-spacing-2);
       width: 100%;
       color: var(--quantic-text-primary);
       cursor: pointer;
       outline: none;
       box-sizing: border-box;
-      padding: var(--quantic-component-button-group-padding-block)
-        var(--quantic-component-button-group-padding-inline);
-      font-size: var(--quantic-component-button-group-font-size);
-      line-height: var(--quantic-component-button-group-line-height);
+      padding: var(
+          --quantic-component-button-bar-padding-block,
+          var(--quantic-internal-button-bar-item-padding-block)
+        )
+        var(
+          --quantic-component-button-bar-padding-inline,
+          var(--quantic-internal-button-bar-item-padding-inline)
+        );
+      font-size: var(
+        --quantic-component-button-bar-font-size,
+        var(--quantic-internal-button-bar-item-font-size)
+      );
+      line-height: var(
+        --quantic-component-button-bar-line-height,
+        var(--quantic-internal-button-bar-item-line-height)
+      );
       transition:
         background-color 0.2s ease-in-out,
         color 0.2s ease-in-out;
@@ -6162,7 +6391,7 @@
       display: block;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: var(--quantic-component-button-group-item-max-width);
+      max-width: var(--quantic-component-button-bar-item-max-width);
     }
 
     .is-active {
@@ -6170,34 +6399,34 @@
     }
 
     .size--sm {
-      --quantic-component-button-group-padding-block: var(--quantic-spacing-1);
-      --quantic-component-button-group-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-button-group-font-size: var(
+      --quantic-internal-button-bar-item-padding-block: var(--quantic-spacing-1);
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-button-bar-item-font-size: var(
         --quantic-font-size-body-xs
       );
-      --quantic-component-button-group-line-height: var(
+      --quantic-internal-button-bar-item-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--md {
-      --quantic-component-button-group-padding-block: var(--quantic-spacing-2);
-      --quantic-component-button-group-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-button-group-font-size: var(
+      --quantic-internal-button-bar-item-padding-block: var(--quantic-spacing-2);
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-button-bar-item-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-button-group-line-height: var(
+      --quantic-internal-button-bar-item-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--lg {
-      --quantic-component-button-group-padding-block: 10px;
-      --quantic-component-button-group-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-button-group-font-size: var(
+      --quantic-internal-button-bar-item-padding-block: 10px;
+      --quantic-internal-button-bar-item-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-button-bar-item-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-button-group-line-height: var(
+      --quantic-internal-button-bar-item-line-height: var(
         --quantic-line-height-body-md
       );
     }
@@ -6209,7 +6438,13 @@
   `;
     __decorate([
         c({ context: sizeContext$2, subscribe: true })
-    ], exports.ButtonGroupItem.prototype, "size", void 0);
+    ], 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',
@@ -6217,7 +6452,7 @@
             description: 'Prevents interaction and reduces opacity.',
             reflect: true,
         })
-    ], exports.ButtonGroupItem.prototype, "disabled", void 0);
+    ], exports.ButtonBarItem.prototype, "disabled", void 0);
     __decorate([
         prop({
             type: 'boolean',
@@ -6225,11 +6460,31 @@
             description: 'Marks this item as the currently selected/active option.',
             reflect: true,
         })
-    ], exports.ButtonGroupItem.prototype, "active", void 0);
+    ], exports.ButtonBarItem.prototype, "active", void 0);
+    exports.ButtonBarItem = __decorate([
+        quanticElement('quantic-button-bar-item')
+    ], exports.ButtonBarItem);
+
+    /**
+     * @deprecated Renamed to `ButtonBarItem` (`quantic-button-bar-item`).
+     * Removed in the next major.
+     */
+    exports.ButtonGroupItem = class ButtonGroupItem extends exports.ButtonBarItem {
+    };
+    exports.ButtonGroupItem.meta = {
+        ...exports.ButtonBarItem.meta,
+        tag: 'quantic-button-group-item',
+        description: 'Deprecated alias of quantic-button-bar-item. Use quantic-button-bar-item.',
+        deprecated: { use: 'quantic-button-bar-item' },
+        relatedTo: ['quantic-button-group'],
+    };
     exports.ButtonGroupItem = __decorate([
         quanticElement('quantic-button-group-item')
     ], exports.ButtonGroupItem);
 
+    /** @deprecated Renamed to `ButtonBarSize`. Removed in the next major. */
+    const ButtonGroupSize = ButtonBarSize;
+
     exports.GridDensity = void 0;
     (function (GridDensity) {
         GridDensity["Dense"] = "dense";
@@ -8665,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([
@@ -66488,8 +66743,8 @@
 
     exports.LucideIconArrowLeft.ensureDefined();
     exports.LucideIconArrowRight.ensureDefined();
-    exports.ButtonGroup.ensureDefined();
-    exports.ButtonGroupItem.ensureDefined();
+    exports.ButtonBar.ensureDefined();
+    exports.ButtonBarItem.ensureDefined();
     exports.Pagination = class Pagination extends QuanticElement {
         constructor() {
             super(...arguments);
@@ -66520,8 +66775,8 @@
             const pageNumbers = getPageNumbers(this.currentPage, this.totalPages, this.maxDisplayedPages);
             return b `
       <nav role="navigation" aria-label="Pagination">
-        <quantic-button-group size=${this.size}>
-          <quantic-button-group-item
+        <quantic-button-bar size=${this.size}>
+          <quantic-button-bar-item
             ?disabled=${isPrevDisabled}
             @click=${this._handlePrevious}
             aria-label="Go to previous page"
@@ -66530,26 +66785,26 @@
               size="xs"
               class="icon"
             ></quantic-icon-lucide-arrow-left>
-          </quantic-button-group-item>
+          </quantic-button-bar-item>
 
           ${pageNumbers.map((page) => page === 'ellipsis'
             ? b `
-                  <quantic-button-group-item disabled>
+                  <quantic-button-bar-item disabled>
                     ...
-                  </quantic-button-group-item>
+                  </quantic-button-bar-item>
                 `
             : b `
-                  <quantic-button-group-item
+                  <quantic-button-bar-item
                     ?active=${page === this.currentPage}
                     @click=${() => this._handlePageChange(page)}
                     aria-label="Go to page ${page}"
                     aria-current=${page === this.currentPage ? 'page' : 'false'}
                   >
                     ${page}
-                  </quantic-button-group-item>
+                  </quantic-button-bar-item>
                 `)}
 
-          <quantic-button-group-item
+          <quantic-button-bar-item
             ?disabled=${isNextDisabled}
             @click=${this._handleNext}
             aria-label="Go to next page"
@@ -66558,8 +66813,8 @@
               size="xs"
               class="icon"
             ></quantic-icon-lucide-arrow-right>
-          </quantic-button-group-item>
-        </quantic-button-group>
+          </quantic-button-bar-item>
+        </quantic-button-bar>
       </nav>
     `;
         }
@@ -66569,7 +66824,7 @@
         description: 'Page navigation control with previous/next and numbered page buttons. ' +
             'Emits page-change events; the host is responsible for updating currentPage.',
         category: 'navigation',
-        relatedTo: ['quantic-button-group'],
+        relatedTo: ['quantic-button-bar'],
     };
     exports.Pagination.styles = i$7 `
     .icon {
@@ -69791,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',
@@ -70568,6 +70876,7 @@
     exports.AlertType = AlertType;
     exports.BadgeColor = BadgeColor;
     exports.BadgeSize = BadgeSize;
+    exports.ButtonBarSize = ButtonBarSize;
     exports.ButtonGroupSize = ButtonGroupSize;
     exports.ButtonGrow = ButtonGrow;
     exports.ButtonSize = ButtonSize;