@ctrliq/quantic-components 1.82.0 → 1.83.0

package/dist/button/index.js

@@ -115,7 +115,7 @@ Button.meta = {
         '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'],
 };
 Button.formAssociated = true;
 Button.styles = css `

package/dist/button-bar/button-bar-item.d.ts

@@ -0,0 +1,11 @@
+import { ButtonBarSize } from './index.constants';
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class ButtonBarItem extends QuanticElement {
+    static meta: ComponentMeta;
+    size?: ButtonBarSize;
+    disabled: boolean;
+    active: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/button-bar/button-bar-item.js

@@ -0,0 +1,191 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { consume } from '@lit/context';
+import { classMap } from 'lit/directives/class-map.js';
+import { sizeContext } from './index.context';
+import { quanticElement, QuanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+let ButtonBarItem = class ButtonBarItem extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.active = false;
+    }
+    render() {
+        const classes = classMap({
+            main: true,
+            [`size--${this.size}`]: !!this.size,
+            [`is-active`]: this.active,
+        });
+        return html `
+      <button
+        type="button"
+        class=${classes}
+        tabindex=${this.disabled ? -1 : 0}
+        ?disabled=${this.disabled}
+        aria-pressed=${this.active ? 'true' : 'false'}
+      >
+        <div class="content">
+          <slot></slot>
+        </div>
+      </button>
+    `;
+    }
+};
+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-bar', 'quantic-button'],
+};
+ButtonBarItem.styles = css `
+    :host {
+      display: inline-flex;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .main {
+      position: relative;
+      appearance: none;
+      background-color: transparent;
+      border: none;
+      border-right: 1px solid var(--quantic-border-primary);
+      font-family: var(--quantic-font-family-body);
+      font-weight: var(--quantic-font-weight-semibold);
+      white-space: nowrap;
+      text-decoration: none;
+      text-align: center;
+      display: block;
+      width: 100%;
+      color: var(--quantic-text-primary);
+      cursor: pointer;
+      outline: none;
+      box-sizing: border-box;
+      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;
+    }
+
+    :host(:last-of-type) .main {
+      border-right: none;
+    }
+
+    .main::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      border-radius: var(--quantic-radius-sm);
+      border: 2px solid var(--quantic-focus-ring);
+      transition: all 0.2s ease-in-out;
+      opacity: 0;
+    }
+
+    .main:focus-visible::before {
+      inset: -4px;
+      opacity: 1;
+    }
+
+    .main:hover {
+      background-color: var(--quantic-bg-secondary-hover);
+    }
+
+    .content {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: var(--quantic-component-button-bar-item-max-width);
+    }
+
+    .is-active {
+      background-color: var(--quantic-bg-active);
+    }
+
+    .size--sm {
+      --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-internal-button-bar-item-line-height: var(
+        --quantic-line-height-body-xs
+      );
+    }
+
+    .size--md {
+      --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
+      );
+    }
+
+    .size--lg {
+      --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-internal-button-bar-item-line-height: var(
+        --quantic-line-height-body-md
+      );
+    }
+
+    ::slotted(*) {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorate([
+    consume({ context: sizeContext, subscribe: true })
+], ButtonBarItem.prototype, "size", void 0);
+__decorate([
+    prop({
+        type: 'boolean',
+        default: 'false',
+        description: 'Prevents interaction and reduces opacity.',
+        reflect: true,
+    })
+], ButtonBarItem.prototype, "disabled", void 0);
+__decorate([
+    prop({
+        type: 'boolean',
+        default: 'false',
+        description: 'Marks this item as the currently selected/active option.',
+        reflect: true,
+    })
+], ButtonBarItem.prototype, "active", void 0);
+ButtonBarItem = __decorate([
+    quanticElement('quantic-button-bar-item')
+], ButtonBarItem);
+export { ButtonBarItem };

package/dist/button-bar/button-bar.d.ts

@@ -0,0 +1,11 @@
+import { ButtonBarSize } from './index.constants';
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class ButtonBar extends QuanticElement {
+    static meta: ComponentMeta;
+    size: ButtonBarSize;
+    ariaLabel: string | null;
+    static styles: import("lit").CSSResult;
+    protected defaultLabel: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/button-bar/button-bar.js

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { provide } from '@lit/context';
+import { ButtonBarSize } from './index.constants';
+import { sizeContext } from './index.context';
+import { quanticElement, QuanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+let ButtonBar = class ButtonBar extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.size = ButtonBarSize.Medium;
+        this.ariaLabel = null;
+        this.defaultLabel = 'Button bar';
+    }
+    render() {
+        return html `
+      <div
+        class="container"
+        role="toolbar"
+        aria-label=${this.ariaLabel || this.defaultLabel}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+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-bar-item elements.' } },
+    subComponents: ['quantic-button-bar-item'],
+    relatedTo: ['quantic-button'],
+};
+ButtonBar.styles = css `
+    :host {
+      --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
+      );
+
+      max-width: 100%;
+      display: inline-flex;
+      overflow: visible;
+    }
+
+    .container {
+      display: inline-flex;
+      border: 1px solid var(--quantic-component-button-bar-border-color);
+      border-radius: var(--quantic-component-button-bar-border-radius);
+    }
+  `;
+__decorate([
+    provide({ context: sizeContext }),
+    prop({ type: 'ButtonBarSize', options: Object.values(ButtonBarSize), default: ButtonBarSize.Medium, description: 'Size applied to all child items via context.' })
+], ButtonBar.prototype, "size", void 0);
+__decorate([
+    prop({ type: 'string', attribute: 'aria-label', description: 'Accessible label for the group.' })
+], ButtonBar.prototype, "ariaLabel", void 0);
+ButtonBar = __decorate([
+    quanticElement('quantic-button-bar')
+], ButtonBar);
+export { ButtonBar };

package/dist/button-bar/index.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ButtonBarSize: {
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+};
+export type ButtonBarSize = (typeof ButtonBarSize)[keyof typeof ButtonBarSize];

package/dist/button-bar/index.constants.js

@@ -0,0 +1,5 @@
+export const ButtonBarSize = {
+    Small: 'sm',
+    Medium: 'md',
+    Large: 'lg',
+};

package/dist/button-bar/index.context.d.ts

@@ -0,0 +1,4 @@
+import { ButtonBarSize } from './index.constants';
+export declare const sizeContext: {
+    __context__: ButtonBarSize;
+};

package/dist/button-bar/index.context.js

@@ -0,0 +1,2 @@
+import { createContext } from '@lit/context';
+export const sizeContext = createContext('button-bar.size');

package/dist/button-bar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './button-bar';
+export * from './button-bar-item';
+export * from './index.constants';

package/dist/button-bar/index.js

@@ -0,0 +1,3 @@
+export * from './button-bar';
+export * from './button-bar-item';
+export * from './index.constants';

package/dist/{types/button-group → button-bar}/index.stories.d.ts

@@ -1,6 +1,6 @@
-import { ButtonGroupSize } from './index.constants';
+import { ButtonBarSize } from './index.constants';
 interface Args {
-    size: ButtonGroupSize | undefined;
+    size: ButtonBarSize | undefined;
     items: string[];
     activeIndex: number | undefined;
 }

package/dist/button-bar/index.stories.js

@@ -0,0 +1,107 @@
+import { story } from '../shared/story';
+import { ButtonBarSize } from './index.constants';
+export default {
+    title: 'Components/Actions/Button Group',
+    component: 'quantic-button-bar',
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: Object.values(ButtonBarSize),
+            description: 'The size of the button group',
+        },
+        items: {
+            control: 'object',
+            description: 'Array of button labels',
+        },
+        activeIndex: {
+            control: 'number',
+            description: 'Index of the active button (optional)',
+        },
+    },
+};
+const base = story({
+    args: {
+        size: undefined,
+        items: ['Text', 'Text', 'Text'],
+        activeIndex: undefined,
+    },
+}).render(({ size, items, activeIndex }) => {
+    const sizeAttr = size ? `size="${size}"` : '';
+    const itemsHtml = items
+        .map((item, index) => `<quantic-button-bar-item ${activeIndex === index ? 'active' : ''}>${item}</quantic-button-bar-item>`)
+        .join('');
+    return `<quantic-button-bar ${sizeAttr}>${itemsHtml}</quantic-button-bar>`;
+});
+export const Default = base;
+export const Small = base.override({ size: ButtonBarSize.Small });
+export const Medium = base.override({ size: ButtonBarSize.Medium });
+export const Large = base.override({ size: ButtonBarSize.Large });
+export const WithActiveItem = base.override({ activeIndex: 1 });
+export const ManyItems = base.override({
+    items: ['Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text'],
+});
+export const WithIcons = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-align-left size="xs"></quantic-icon-lucide-align-left>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item active>
+        <quantic-icon-lucide-align-center size="xs"></quantic-icon-lucide-align-center>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-align-right size="xs"></quantic-icon-lucide-align-right>
+      </quantic-button-bar-item>
+    </quantic-button-bar>
+  `);
+export const WithIconsAndText = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-chevron-left size="xs"></quantic-icon-lucide-chevron-left>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item>
+        Text
+      </quantic-button-bar-item>
+      <quantic-button-bar-item active>
+        <quantic-icon-lucide-plus size="xs"></quantic-icon-lucide-plus>
+      </quantic-button-bar-item>
+      <quantic-button-bar-item>
+        <quantic-icon-lucide-chevron-right size="xs"></quantic-icon-lucide-chevron-right>
+      </quantic-button-bar-item>
+    </quantic-button-bar>
+  `);
+export const Disabled = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+      <quantic-button-bar-item disabled>Disabled item</quantic-button-bar-item>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+    </quantic-button-bar>
+  `);
+export const WithClickEvent = story({
+    args: { size: ButtonBarSize.Medium, items: [], activeIndex: undefined },
+}).render(({ size }) => `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <quantic-button-bar size="${size}">
+        <quantic-button-bar-item onclick="handleClick('Option 1')">Option 1</quantic-button-bar-item>
+        <quantic-button-bar-item onclick="handleClick('Option 2')">Option 2</quantic-button-bar-item>
+        <quantic-button-bar-item onclick="handleClick('Option 3')">Option 3</quantic-button-bar-item>
+      </quantic-button-bar>
+      <quantic-card variant="solid" size="sm" id="output">
+        Click a button to see the event
+      </quantic-card>
+    </div>
+    <script>
+      function handleClick(option) {
+        document.getElementById('output').textContent = option + ' clicked at ' + new Date().toLocaleTimeString();
+      }
+    </script>
+  `);
+export const WithLongText = story().render(() => `
+    <quantic-button-bar>
+      <quantic-button-bar-item>Short</quantic-button-bar-item>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+      <quantic-button-bar-item>This is a very long button text that should be clamped with ellipsis</quantic-button-bar-item>
+      <quantic-button-bar-item>Medium</quantic-button-bar-item>
+      <quantic-button-bar-item>Text</quantic-button-bar-item>
+    </quantic-button-bar>
+  `);

package/dist/button-group/button-group-item.d.ts

@@ -1,11 +1,9 @@
-import { ButtonGroupSize } from './index.constants';
-import { QuanticElement } from '../shared/quantic-element';
+import { ButtonBarItem } from '../button-bar/button-bar-item';
 import type { ComponentMeta } from '../shared/meta.types';
-export declare class ButtonGroupItem extends QuanticElement {
+/**
+ * @deprecated Renamed to `ButtonBarItem` (`quantic-button-bar-item`).
+ * Removed in the next major.
+ */
+export declare class ButtonGroupItem extends ButtonBarItem {
     static meta: ComponentMeta;
-    size?: ButtonGroupSize;
-    disabled: boolean;
-    active: boolean;
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
 }

package/dist/button-group/button-group-item.js

@@ -4,177 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from 'lit';
-import { consume } from '@lit/context';
-import { classMap } from 'lit/directives/class-map.js';
-import { sizeContext } from './index.context';
-import { quanticElement, QuanticElement } from '../shared/quantic-element';
-import { prop } from '../shared/component-meta.decorators';
-let ButtonGroupItem = class ButtonGroupItem extends QuanticElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.active = false;
-    }
-    render() {
-        const classes = classMap({
-            main: true,
-            [`size--${this.size}`]: !!this.size,
-            [`is-active`]: this.active,
-        });
-        return html `
-      <button
-        class=${classes}
-        tabindex=${this.disabled ? -1 : 0}
-        ?disabled=${this.disabled}
-        aria-pressed=${this.active ? 'true' : 'false'}
-      >
-        <div class="content">
-          <slot></slot>
-        </div>
-      </button>
-    `;
-    }
+import { quanticElement } from '../shared/quantic-element';
+import { ButtonBarItem } from '../button-bar/button-bar-item';
+/**
+ * @deprecated Renamed to `ButtonBarItem` (`quantic-button-bar-item`).
+ * Removed in the next major.
+ */
+let ButtonGroupItem = class ButtonGroupItem extends ButtonBarItem {
 };
 ButtonGroupItem.meta = {
+    ...ButtonBarItem.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.',
-    category: 'action',
-    slots: { '': { description: 'Button label or icon content.' } },
-    relatedTo: ['quantic-button-group', 'quantic-button'],
+    description: 'Deprecated alias of quantic-button-bar-item. Use quantic-button-bar-item.',
+    deprecated: { use: 'quantic-button-bar-item' },
+    relatedTo: ['quantic-button-group'],
 };
-ButtonGroupItem.styles = css `
-    :host {
-      display: inline-flex;
-    }
-
-    :host([disabled]) {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-
-    .main {
-      position: relative;
-      appearance: none;
-      background-color: transparent;
-      border: none;
-      border-right: 1px solid var(--quantic-border-primary);
-      font-family: var(--quantic-font-family-body);
-      font-weight: var(--quantic-font-weight-semibold);
-      white-space: nowrap;
-      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);
-      transition:
-        background-color 0.2s ease-in-out,
-        color 0.2s ease-in-out;
-    }
-
-    :host(:last-of-type) .main {
-      border-right: none;
-    }
-
-    .main::before {
-      content: '';
-      display: block;
-      position: absolute;
-      inset: 0;
-      border-radius: var(--quantic-radius-sm);
-      border: 2px solid var(--quantic-focus-ring);
-      transition: all 0.2s ease-in-out;
-      opacity: 0;
-    }
-
-    .main:focus-visible::before {
-      inset: -4px;
-      opacity: 1;
-    }
-
-    .main:hover {
-      background-color: var(--quantic-bg-secondary-hover);
-    }
-
-    .content {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: var(--quantic-component-button-group-item-max-width);
-    }
-
-    .is-active {
-      background-color: var(--quantic-bg-active);
-    }
-
-    .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-font-size-body-xs
-      );
-      --quantic-component-button-group-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-font-size-body-sm
-      );
-      --quantic-component-button-group-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-font-size-body-md
-      );
-      --quantic-component-button-group-line-height: var(
-        --quantic-line-height-body-md
-      );
-    }
-
-    ::slotted(*) {
-      display: flex;
-      align-items: center;
-    }
-  `;
-__decorate([
-    consume({ context: sizeContext, subscribe: true })
-], ButtonGroupItem.prototype, "size", void 0);
-__decorate([
-    prop({
-        type: 'boolean',
-        default: 'false',
-        description: 'Prevents interaction and reduces opacity.',
-        reflect: true,
-    })
-], ButtonGroupItem.prototype, "disabled", void 0);
-__decorate([
-    prop({
-        type: 'boolean',
-        default: 'false',
-        description: 'Marks this item as the currently selected/active option.',
-        reflect: true,
-    })
-], ButtonGroupItem.prototype, "active", void 0);
 ButtonGroupItem = __decorate([
     quanticElement('quantic-button-group-item')
 ], ButtonGroupItem);