@ctrliq/quantic-components 1.82.0 → 1.83.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 `
@@ -5988,54 +5988,53 @@
      * 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');
+    const sizeContext$2 = n$1('button-bar.size');
 
-    exports.ButtonGroup = class ButtonGroup extends QuanticElement {
+    exports.ButtonBar = class ButtonBar extends QuanticElement {
         constructor() {
             super(...arguments);
-            this.size = ButtonGroupSize.Medium;
+            this.size = ButtonBarSize.Medium;
             this.ariaLabel = null;
+            this.defaultLabel = 'Button bar';
         }
         render() {
             return b `
       <div
         class="container"
         role="toolbar"
-        aria-label=${this.ariaLabel || 'Button group'}
+        aria-label=${this.ariaLabel || this.defaultLabel}
       >
         <slot></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. ' +
+            '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,22 +6045,50 @@
 
     .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. This element never grouped buttons: ' +
+            'it joins borders and gives its items a pressed state. 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.disabled = false;
@@ -6075,6 +6102,7 @@
             });
             return b `
       <button
+        type="button"
         class=${classes}
         tabindex=${this.disabled ? -1 : 0}
         ?disabled=${this.disabled}
@@ -6087,15 +6115,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 +6145,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 +6199,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 +6207,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 +6246,7 @@
   `;
     __decorate([
         c({ context: sizeContext$2, subscribe: true })
-    ], exports.ButtonGroupItem.prototype, "size", void 0);
+    ], exports.ButtonBarItem.prototype, "size", void 0);
     __decorate([
         prop({
             type: 'boolean',
@@ -6217,7 +6254,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 +6262,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";
@@ -66488,8 +66545,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 +66577,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 +66587,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 +66615,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 +66626,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 {
@@ -70568,6 +70625,7 @@
     exports.AlertType = AlertType;
     exports.BadgeColor = BadgeColor;
     exports.BadgeSize = BadgeSize;
+    exports.ButtonBarSize = ButtonBarSize;
     exports.ButtonGroupSize = ButtonGroupSize;
     exports.ButtonGrow = ButtonGrow;
     exports.ButtonSize = ButtonSize;