igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/button-group/button-group.d.ts

@@ -1,17 +1,17 @@
-import { LitElement } from 'lit';
-import type { Constructor } from '../common/mixins/constructor.js';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { Constructor } from '#internals/mixins/constructor.js';
 import type { ButtonGroupSelection, ContentOrientation } from '../types.js';
 export interface IgcButtonGroupComponentEventMap {
     igcSelect: CustomEvent<string | undefined>;
     igcDeselect: CustomEvent<string | undefined>;
 }
-declare const IgcButtonGroupComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcButtonGroupComponentEventMap>> & Constructor<LitElement>;
+declare const IgcButtonGroupComponent_base: Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcButtonGroupComponentEventMap>> & Constructor<LitElement>;
 /**
- * The `igc-button-group` groups a series of `igc-toggle-button`s together, exposing features such as layout and selection.
+ * Groups a series of toggle buttons together, exposing features such as layout and selection.
  *
  * @element igc-button-group
  *
- * @slot - Renders `igc-toggle-button` component.
+ * @slot - Renders the toggle buttons of the group.
  *
  * @fires igcSelect - Emitted when a button is selected through user interaction.
  * @fires igcDeselect - Emitted when a button is deselected through user interaction.
@@ -22,24 +22,36 @@ export default class IgcButtonGroupComponent extends IgcButtonGroupComponent_bas
     static readonly tagName = "igc-button-group";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private get isMultiple();
+    /** The values set through the `selectedItems` API, applied once the buttons are rendered. */
     private _selectedItems;
-    private _observerCallback;
+    private readonly _context;
+    private readonly _slots;
+    /**
+     * The toggle buttons of the group, in DOM order. There are none to report
+     * before the first render, when the slot they are assigned to does not exist yet.
+     */
+    private get _buttons();
+    private get _isMultiple();
     private get _selectedButtons();
-    private toggleButtons;
     /**
      * Disables all buttons inside the group.
-     * @attr
+     *
+     * @attr disabled
+     * @default false
      */
     disabled: boolean;
     /**
-     * Sets the orientation of the buttons in the group.
-     * @attr
+     * The orientation of the buttons in the group.
+     *
+     * @attr alignment
+     * @default 'horizontal'
      */
     alignment: ContentOrientation;
     /**
      * Controls the mode of selection for the button group.
-     * @attr
+     *
+     * @attr selection
+     * @default 'single'
      */
     selection: ButtonGroupSelection;
     /**
@@ -48,17 +60,26 @@ export default class IgcButtonGroupComponent extends IgcButtonGroupComponent_bas
      */
     get selectedItems(): string[];
     set selectedItems(values: string[]);
-    protected updateDisabledState(): void;
-    protected updateSelectionState(): void;
     constructor();
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(): void;
-    private handleClick;
-    private handleSingleSelection;
-    private handleMultipleSelection;
-    private emitSelectEvent;
-    private emitDeselectEvent;
-    private setSelection;
-    protected render(): import("lit-html").TemplateResult<1>;
+    /** Applies `next` as the selection, clearing the state of every other button. */
+    private _applySelection;
+    /** Selects the buttons matching `values`, honoring the selection mode. */
+    private _selectFromValues;
+    /**
+     * Reduces a selection made outside of the group - through the children or by
+     * adding buttons that bring their own state - to a single button. The last one wins.
+     */
+    private _enforceSingleSelection;
+    /** Reconciles the group with a button of its own that has turned selected. */
+    private _syncSelection;
+    private _handleClick;
+    private _handleSingleSelection;
+    private _handleMultipleSelection;
+    private _emitSelectEvent;
+    private _emitDeselectEvent;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/button-group/button-group.js

@@ -4,14 +4,17 @@ 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 { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { createMutationController, } from '../common/controllers/mutation-observer.js';
-import { watch } from '../common/decorators/watch.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { getElementFromPath, last } from '../common/util.js';
+import { ContextProvider } from '@lit/context';
+import { html, LitElement, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { buttonGroupContext } from '#internals/context.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { asArray, isEmpty, lastOf } from '#internals/utils/arrays.js';
+import { getElementFromPath } from '#internals/utils/events.js';
+import { isDefined } from '#internals/utils/types.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from './themes/group.base.css.js';
 import { all } from './themes/group.js';
 import { styles as shared } from './themes/shared/group/group.common.css.js';
@@ -22,143 +25,141 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin(LitElemen
     static register() {
         registerComponent(IgcButtonGroupComponent, IgcToggleButtonComponent);
     }
-    get isMultiple() {
-        return this.selection === 'multiple';
-    }
-    _observerCallback({ changes: { added, attributes }, }) {
-        if (this.isMultiple || this._selectedButtons.length <= 1) {
-            return;
-        }
-        const buttons = this.toggleButtons;
-        const idx = buttons.indexOf(added.length ? last(added).node : last(attributes).node);
-        for (const [i, button] of buttons.entries()) {
-            if (button.selected && i !== idx) {
-                button.selected = false;
-            }
+    get _buttons() {
+        if (!this.hasUpdated) {
+            return [];
         }
+        return this._slots.getAssignedElements('[default]', {
+            selector: IgcToggleButtonComponent.tagName,
+        });
+    }
+    get _isMultiple() {
+        return this.selection === 'multiple';
     }
     get _selectedButtons() {
-        return this.toggleButtons.filter((b) => b.selected);
+        return this._buttons.filter((button) => button.selected);
     }
     get selectedItems() {
-        return this._selectedButtons.map((b) => b.value).filter((v) => v);
+        return this._selectedButtons
+            .map((button) => button.value)
+            .filter(isDefined);
     }
     set selectedItems(values) {
-        this._selectedItems = new Set(Array.isArray(values) ? values : []);
-        this.setSelection(this._selectedItems);
-    }
-    updateDisabledState() {
-        this.toggleButtons.forEach((b) => {
-            b.disabled = this.disabled;
-        });
-    }
-    updateSelectionState() {
-        if (this._selectedButtons.length) {
-            this.toggleButtons.forEach((b) => {
-                b.selected = false;
-            });
-        }
+        this._selectedItems = new Set(asArray(values));
+        this._selectFromValues(this._selectedItems);
     }
     constructor() {
         super();
         this._selectedItems = new Set();
+        this._context = new ContextProvider(this, {
+            context: buttonGroupContext,
+            initialValue: {
+                instance: this,
+                syncSelection: (button) => this._syncSelection(button),
+            },
+        });
+        this._slots = addSlotController(this, {
+            slots: setSlots(),
+            onChange: this._enforceSingleSelection,
+        });
         this.disabled = false;
         this.alignment = 'horizontal';
         this.selection = 'single';
         addThemingController(this, all);
-        createMutationController(this, {
-            callback: this._observerCallback,
-            filter: [IgcToggleButtonComponent.tagName],
-            config: {
-                attributeFilter: ['selected'],
-                childList: true,
-                subtree: true,
-            },
-        });
     }
-    firstUpdated() {
-        if (this.disabled) {
-            this.updateDisabledState();
+    willUpdate(changedProperties) {
+        if (!this.hasUpdated) {
+            return;
         }
-        const buttons = this._selectedButtons;
-        if (buttons.length) {
-            if (!this.isMultiple) {
-                const index = buttons.indexOf(buttons.at(-1));
-                for (let i = 0; i < index; i++) {
-                    buttons[i].selected = false;
-                }
-            }
+        const selectionChanged = changedProperties.has('selection');
+        if (selectionChanged || changedProperties.has('disabled')) {
+            this._context.updateObservers();
+        }
+        if (selectionChanged) {
+            this._selectedItems.clear();
+            this._applySelection([]);
+        }
+    }
+    firstUpdated() {
+        if (isEmpty(this._selectedButtons)) {
+            this._selectFromValues(this._selectedItems);
         }
         else {
-            this.setSelection(this._selectedItems);
+            this._enforceSingleSelection();
         }
     }
-    handleClick(event) {
-        const button = getElementFromPath(IgcToggleButtonComponent.tagName, event);
-        if (button) {
-            this.isMultiple
-                ? this.handleMultipleSelection(button)
-                : this.handleSingleSelection(button);
+    _applySelection(next) {
+        const selection = new Set(next);
+        for (const button of this._buttons) {
+            button.selected = selection.has(button);
+        }
+    }
+    _selectFromValues(values) {
+        const matches = this._buttons.filter((button) => values.has(button.value));
+        this._applySelection(this._isMultiple ? matches : matches.slice(0, 1));
+    }
+    _enforceSingleSelection() {
+        const selected = this._selectedButtons;
+        if (!this._isMultiple && selected.length > 1) {
+            this._applySelection([lastOf(selected)]);
+        }
+    }
+    _syncSelection(button) {
+        if (!this._isMultiple && this._buttons.includes(button)) {
+            this._applySelection([button]);
         }
     }
-    handleSingleSelection(button) {
-        const singleRequired = this.selection === 'single-required';
-        const selectedButton = this._selectedButtons.at(0);
-        const isSame = selectedButton && selectedButton.value === button.value;
-        if (selectedButton) {
-            if (singleRequired && isSame)
-                return;
-            this.emitDeselectEvent(selectedButton);
+    _handleClick(event) {
+        if (this.disabled) {
+            return;
         }
-        if (isSame)
+        const button = getElementFromPath(IgcToggleButtonComponent.tagName, event);
+        if (!button || !this._buttons.includes(button)) {
             return;
-        this.emitSelectEvent(button);
+        }
+        this._isMultiple
+            ? this._handleMultipleSelection(button)
+            : this._handleSingleSelection(button);
+    }
+    _handleSingleSelection(button) {
+        const selected = this._selectedButtons.at(0);
+        if (selected === button) {
+            if (this.selection !== 'single-required') {
+                this._emitDeselectEvent(button);
+            }
+            return;
+        }
+        if (selected) {
+            this._emitDeselectEvent(selected);
+        }
+        this._emitSelectEvent(button);
     }
-    handleMultipleSelection(button) {
+    _handleMultipleSelection(button) {
         button.selected
-            ? this.emitDeselectEvent(button)
-            : this.emitSelectEvent(button);
+            ? this._emitDeselectEvent(button)
+            : this._emitSelectEvent(button);
     }
-    emitSelectEvent(button) {
+    _emitSelectEvent(button) {
         button.selected = true;
         this.emitEvent('igcSelect', { detail: button.value });
     }
-    emitDeselectEvent(button) {
+    _emitDeselectEvent(button) {
         button.selected = false;
         this.emitEvent('igcDeselect', { detail: button.value });
     }
-    setSelection(values) {
-        if (!values.size) {
-            this.toggleButtons.forEach((b) => {
-                b.selected = false;
-            });
-            return;
-        }
-        for (const button of this.toggleButtons) {
-            if (values.has(button.value)) {
-                button.selected = true;
-                if (!this.isMultiple) {
-                    break;
-                }
-            }
-        }
-    }
     render() {
         return html `
       <div
         part="group"
-        role="group"
+        role=${this._isMultiple ? 'group' : 'radiogroup'}
         aria-disabled=${this.disabled}
-        @click=${this.handleClick}
+        @click=${this._handleClick}
       >
         <slot></slot>
       </div>
     `;
     }
 }
-__decorate([
-    queryAssignedElements({ selector: IgcToggleButtonComponent.tagName })
-], IgcButtonGroupComponent.prototype, "toggleButtons", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcButtonGroupComponent.prototype, "disabled", void 0);
@@ -171,10 +172,4 @@ __decorate([
 __decorate([
     property({ attribute: 'selected-items', type: Array, reflect: false })
 ], IgcButtonGroupComponent.prototype, "selectedItems", null);
-__decorate([
-    watch('disabled', { waitUntilFirstUpdate: true })
-], IgcButtonGroupComponent.prototype, "updateDisabledState", null);
-__decorate([
-    watch('selection', { waitUntilFirstUpdate: true })
-], IgcButtonGroupComponent.prototype, "updateSelectionState", null);
 //# sourceMappingURL=button-group.js.map

package/components/button-group/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../src/components/button-group/button-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport {\n  createMutationController,\n  type MutationControllerParams,\n} from '../common/controllers/mutation-observer.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { getElementFromPath, last } from '../common/util.js';\nimport type { ButtonGroupSelection, ContentOrientation } from '../types.js';\nimport { styles } from './themes/group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/group.common.css.js';\nimport IgcToggleButtonComponent from './toggle-button.js';\n\nexport interface IgcButtonGroupComponentEventMap {\n  igcSelect: CustomEvent<string | undefined>;\n  igcDeselect: CustomEvent<string | undefined>;\n}\n\n/* blazorAdditionalDependency: IgcToggleButtonComponent */\n/**\n * The `igc-button-group` groups a series of `igc-toggle-button`s together, exposing features such as layout and selection.\n *\n * @element igc-button-group\n *\n * @slot - Renders `igc-toggle-button` component.\n *\n * @fires igcSelect - Emitted when a button is selected through user interaction.\n * @fires igcDeselect - Emitted when a button is deselected through user interaction.\n *\n * @csspart group - The button group container.\n */\nexport default class IgcButtonGroupComponent extends EventEmitterMixin<\n  IgcButtonGroupComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-button-group';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcButtonGroupComponent, IgcToggleButtonComponent);\n  }\n\n  private get isMultiple() {\n    return this.selection === 'multiple';\n  }\n\n  private _selectedItems: Set<string> = new Set();\n\n  private _observerCallback({\n    changes: { added, attributes },\n  }: MutationControllerParams<IgcToggleButtonComponent>) {\n    if (this.isMultiple || this._selectedButtons.length <= 1) {\n      return;\n    }\n\n    const buttons = this.toggleButtons;\n    const idx = buttons.indexOf(\n      added.length ? last(added).node : last(attributes).node\n    );\n\n    for (const [i, button] of buttons.entries()) {\n      if (button.selected && i !== idx) {\n        button.selected = false;\n      }\n    }\n  }\n\n  private get _selectedButtons(): Array<IgcToggleButtonComponent> {\n    return this.toggleButtons.filter((b) => b.selected);\n  }\n\n  @queryAssignedElements({ selector: IgcToggleButtonComponent.tagName })\n  private toggleButtons!: Array<IgcToggleButtonComponent>;\n\n  /**\n   * Disables all buttons inside the group.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Sets the orientation of the buttons in the group.\n   * @attr\n   */\n  @property({ reflect: true })\n  public alignment: ContentOrientation = 'horizontal';\n\n  /**\n   * Controls the mode of selection for the button group.\n   * @attr\n   */\n  @property({ reflect: false })\n  public selection: ButtonGroupSelection = 'single';\n\n  /**\n   * Gets/Sets the currently selected buttons (their values).\n   * @attr\n   */\n  @property({ attribute: 'selected-items', type: Array, reflect: false })\n  public get selectedItems(): string[] {\n    return this._selectedButtons.map((b) => b.value).filter((v) => v);\n  }\n\n  public set selectedItems(values: string[]) {\n    this._selectedItems = new Set(Array.isArray(values) ? values : []);\n    this.setSelection(this._selectedItems);\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  protected updateDisabledState() {\n    this.toggleButtons.forEach((b) => {\n      b.disabled = this.disabled;\n    });\n  }\n\n  @watch('selection', { waitUntilFirstUpdate: true })\n  protected updateSelectionState() {\n    if (this._selectedButtons.length) {\n      this.toggleButtons.forEach((b) => {\n        b.selected = false;\n      });\n    }\n  }\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    createMutationController(this, {\n      callback: this._observerCallback,\n      filter: [IgcToggleButtonComponent.tagName],\n      config: {\n        attributeFilter: ['selected'],\n        childList: true,\n        subtree: true,\n      },\n    });\n  }\n\n  protected override firstUpdated() {\n    if (this.disabled) {\n      this.updateDisabledState();\n    }\n\n    const buttons = this._selectedButtons;\n\n    if (buttons.length) {\n      if (!this.isMultiple) {\n        const index = buttons.indexOf(buttons.at(-1)!);\n\n        for (let i = 0; i < index; i++) {\n          buttons[i].selected = false;\n        }\n      }\n    } else {\n      this.setSelection(this._selectedItems);\n    }\n  }\n\n  private handleClick(event: MouseEvent) {\n    const button = getElementFromPath(IgcToggleButtonComponent.tagName, event);\n\n    if (button) {\n      this.isMultiple\n        ? this.handleMultipleSelection(button)\n        : this.handleSingleSelection(button);\n    }\n  }\n\n  private handleSingleSelection(button: IgcToggleButtonComponent) {\n    const singleRequired = this.selection === 'single-required';\n    const selectedButton = this._selectedButtons.at(0);\n    const isSame = selectedButton && selectedButton.value === button.value;\n\n    if (selectedButton) {\n      if (singleRequired && isSame) return;\n      this.emitDeselectEvent(selectedButton);\n    }\n    if (isSame) return;\n    this.emitSelectEvent(button);\n  }\n\n  private handleMultipleSelection(button: IgcToggleButtonComponent) {\n    button.selected\n      ? this.emitDeselectEvent(button)\n      : this.emitSelectEvent(button);\n  }\n\n  private emitSelectEvent(button: IgcToggleButtonComponent) {\n    button.selected = true;\n    this.emitEvent('igcSelect', { detail: button.value });\n  }\n\n  private emitDeselectEvent(button: IgcToggleButtonComponent) {\n    button.selected = false;\n    this.emitEvent('igcDeselect', { detail: button.value });\n  }\n\n  private setSelection(values: Set<string>) {\n    if (!values.size) {\n      this.toggleButtons.forEach((b) => {\n        b.selected = false;\n      });\n      return;\n    }\n\n    for (const button of this.toggleButtons) {\n      if (values.has(button.value)) {\n        button.selected = true;\n        if (!this.isMultiple) {\n          break;\n        }\n      }\n    }\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"group\"\n        role=\"group\"\n        aria-disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button-group': IgcButtonGroupComponent;\n  }\n}\n"]}
+{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../src/components/button-group/button-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport {\n  html,\n  LitElement,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { buttonGroupContext } from '#internals/context.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { asArray, isEmpty, lastOf } from '#internals/utils/arrays.js';\nimport { getElementFromPath } from '#internals/utils/events.js';\nimport { isDefined } from '#internals/utils/types.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { ButtonGroupSelection, ContentOrientation } from '../types.js';\nimport { styles } from './themes/group.base.css.js';\nimport { all } from './themes/group.js';\nimport { styles as shared } from './themes/shared/group/group.common.css.js';\nimport IgcToggleButtonComponent from './toggle-button.js';\n\nexport interface IgcButtonGroupComponentEventMap {\n  igcSelect: CustomEvent<string | undefined>;\n  igcDeselect: CustomEvent<string | undefined>;\n}\n\n/* blazorAdditionalDependency: IgcToggleButtonComponent */\n/**\n * Groups a series of toggle buttons together, exposing features such as layout and selection.\n *\n * @element igc-button-group\n *\n * @slot - Renders the toggle buttons of the group.\n *\n * @fires igcSelect - Emitted when a button is selected through user interaction.\n * @fires igcDeselect - Emitted when a button is deselected through user interaction.\n *\n * @csspart group - The button group container.\n */\nexport default class IgcButtonGroupComponent extends EventEmitterMixin<\n  IgcButtonGroupComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-button-group';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcButtonGroupComponent, IgcToggleButtonComponent);\n  }\n\n  //#region Internal state & properties\n\n  /** The values set through the `selectedItems` API, applied once the buttons are rendered. */\n  private _selectedItems = new Set<string>();\n\n  private readonly _context = new ContextProvider(this, {\n    context: buttonGroupContext,\n    initialValue: {\n      instance: this,\n      syncSelection: (button) => this._syncSelection(button),\n    },\n  });\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._enforceSingleSelection,\n  });\n\n  /**\n   * The toggle buttons of the group, in DOM order. There are none to report\n   * before the first render, when the slot they are assigned to does not exist yet.\n   */\n  private get _buttons(): IgcToggleButtonComponent[] {\n    if (!this.hasUpdated) {\n      return [];\n    }\n\n    return this._slots.getAssignedElements('[default]', {\n      selector: IgcToggleButtonComponent.tagName,\n    });\n  }\n\n  private get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  private get _selectedButtons(): IgcToggleButtonComponent[] {\n    return this._buttons.filter((button) => button.selected);\n  }\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * Disables all buttons inside the group.\n   *\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * The orientation of the buttons in the group.\n   *\n   * @attr alignment\n   * @default 'horizontal'\n   */\n  @property({ reflect: true })\n  public alignment: ContentOrientation = 'horizontal';\n\n  /**\n   * Controls the mode of selection for the button group.\n   *\n   * @attr selection\n   * @default 'single'\n   */\n  @property({ reflect: false })\n  public selection: ButtonGroupSelection = 'single';\n\n  /**\n   * Gets/Sets the currently selected buttons (their values).\n   * @attr\n   */\n  @property({ attribute: 'selected-items', type: Array, reflect: false })\n  public get selectedItems(): string[] {\n    // Buttons are not required to have a value, in which case they report none.\n    return this._selectedButtons\n      .map((button) => button.value)\n      .filter(isDefined);\n  }\n\n  public set selectedItems(values: string[]) {\n    this._selectedItems = new Set(asArray(values));\n    this._selectFromValues(this._selectedItems);\n  }\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (!this.hasUpdated) {\n      return;\n    }\n\n    const selectionChanged = changedProperties.has('selection');\n\n    if (selectionChanged || changedProperties.has('disabled')) {\n      this._context.updateObservers();\n    }\n\n    if (selectionChanged) {\n      // The selection modes are not interchangeable - the group starts over.\n      this._selectedItems.clear();\n      this._applySelection([]);\n    }\n  }\n\n  protected override firstUpdated(): void {\n    if (isEmpty(this._selectedButtons)) {\n      // Nothing is selected through the children, fall back to the values passed in.\n      this._selectFromValues(this._selectedItems);\n    } else {\n      // A selection through the children takes priority over the passed in values.\n      this._enforceSingleSelection();\n    }\n  }\n\n  //#endregion\n\n  //#region Private API\n\n  /** Applies `next` as the selection, clearing the state of every other button. */\n  private _applySelection(next: IgcToggleButtonComponent[]): void {\n    const selection = new Set(next);\n\n    for (const button of this._buttons) {\n      button.selected = selection.has(button);\n    }\n  }\n\n  /** Selects the buttons matching `values`, honoring the selection mode. */\n  private _selectFromValues(values: Set<string>): void {\n    const matches = this._buttons.filter((button) => values.has(button.value));\n    this._applySelection(this._isMultiple ? matches : matches.slice(0, 1));\n  }\n\n  /**\n   * Reduces a selection made outside of the group - through the children or by\n   * adding buttons that bring their own state - to a single button. The last one wins.\n   */\n  private _enforceSingleSelection(): void {\n    const selected = this._selectedButtons;\n\n    if (!this._isMultiple && selected.length > 1) {\n      this._applySelection([lastOf(selected)]);\n    }\n  }\n\n  /** Reconciles the group with a button of its own that has turned selected. */\n  private _syncSelection(button: IgcToggleButtonComponent): void {\n    if (!this._isMultiple && this._buttons.includes(button)) {\n      this._applySelection([button]);\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleClick(event: PointerEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const button = getElementFromPath(IgcToggleButtonComponent.tagName, event);\n\n    if (!button || !this._buttons.includes(button)) {\n      return;\n    }\n\n    this._isMultiple\n      ? this._handleMultipleSelection(button)\n      : this._handleSingleSelection(button);\n  }\n\n  private _handleSingleSelection(button: IgcToggleButtonComponent): void {\n    const selected = this._selectedButtons.at(0);\n\n    if (selected === button) {\n      // A required selection cannot be toggled off.\n      if (this.selection !== 'single-required') {\n        this._emitDeselectEvent(button);\n      }\n      return;\n    }\n\n    if (selected) {\n      this._emitDeselectEvent(selected);\n    }\n\n    this._emitSelectEvent(button);\n  }\n\n  private _handleMultipleSelection(button: IgcToggleButtonComponent): void {\n    button.selected\n      ? this._emitDeselectEvent(button)\n      : this._emitSelectEvent(button);\n  }\n\n  private _emitSelectEvent(button: IgcToggleButtonComponent): void {\n    button.selected = true;\n    this.emitEvent('igcSelect', { detail: button.value });\n  }\n\n  private _emitDeselectEvent(button: IgcToggleButtonComponent): void {\n    button.selected = false;\n    this.emitEvent('igcDeselect', { detail: button.value });\n  }\n\n  //#endregion\n\n  //#region Render\n\n  protected override render(): TemplateResult {\n    return html`\n      <div\n        part=\"group\"\n        role=${this._isMultiple ? 'group' : 'radiogroup'}\n        aria-disabled=${this.disabled}\n        @click=${this._handleClick}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button-group': IgcButtonGroupComponent;\n  }\n}\n"]}

package/components/button-group/themes/button.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/button-group/themes/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button-group/themes/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/button/button.bootstrap.css.js';\nimport { styles as fluent } from './shared/button/button.fluent.css.js';\nimport { styles as indigo } from './shared/button/button.indigo.css.js';\nimport { styles as material } from './shared/button/button.material.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button-group/themes/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,QAAQ;GACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/button/button.bootstrap.css.js';\nimport { styles as fluent } from './shared/button/button.fluent.css.js';\nimport { styles as indigo } from './shared/button/button.indigo.css.js';\nimport { styles as material } from './shared/button/button.material.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n  material: css`\n    ${material}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/button-group/themes/group.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/button-group/themes/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../src/components/button-group/themes/group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAE3E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAEtE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/button-group.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/button-group.fluent.css.js';\nimport { styles as indigoDark } from './dark/button-group.indigo.css.js';\nimport { styles as materialDark } from './dark/button-group.material.css.js';\nimport { styles as sharedDark } from './dark/button-group.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/button-group.bootstrap.css.js';\nimport { styles as fluentLight } from './light/button-group.fluent.css.js';\nimport { styles as indigoLight } from './light/button-group.indigo.css.js';\nimport { styles as materialLight } from './light/button-group.material.css.js';\nimport { styles as sharedLight } from './light/button-group.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/group/group.bootstrap.css.js';\nimport { styles as fluent } from './shared/group/group.fluent.css.js';\nimport { styles as indigo } from './shared/group/group.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../../src/components/button-group/themes/group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAE3E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAEtE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/button-group.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/button-group.fluent.css.js';\nimport { styles as indigoDark } from './dark/button-group.indigo.css.js';\nimport { styles as materialDark } from './dark/button-group.material.css.js';\nimport { styles as sharedDark } from './dark/button-group.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/button-group.bootstrap.css.js';\nimport { styles as fluentLight } from './light/button-group.fluent.css.js';\nimport { styles as indigoLight } from './light/button-group.indigo.css.js';\nimport { styles as materialLight } from './light/button-group.material.css.js';\nimport { styles as sharedLight } from './light/button-group.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/group/group.bootstrap.css.js';\nimport { styles as fluent } from './shared/group/group.fluent.css.js';\nimport { styles as indigo } from './shared/group/group.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluent} ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluent} ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/button-group/toggle-button.d.ts

@@ -1,43 +1,50 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 /**
- * The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties.
- * It is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors.
+ * The toggle button wraps a native button element and exposes additional `value` and `selected` properties.
+ * It is used in the context of a button group to facilitate the creation of group/toolbar like UX behaviors.
  *
  * @element igc-toggle-button
  *
  * @slot Renders the label/content of the button.
  *
  * @csspart toggle - The native button element.
+ * @csspart focused - The native button element when focused through a keyboard interaction.
  */
 export default class IgcToggleButtonComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     static readonly tagName = "igc-toggle-button";
     static register(): void;
     private readonly _focusRingManager;
-    private readonly _nativeButton;
+    private readonly _context;
+    private readonly _nativeButton?;
     /**
-     * The value attribute of the control.
+     * The value of the control.
      * @attr
      */
     value: string;
     /**
-     * Determines whether the button is selected.
-     * @attr
+     * Whether the button is selected.
+     *
+     * @attr selected
+     * @default false
      */
     selected: boolean;
     /**
-     * Determines whether the button is disabled.
-     * @attr
+     * Whether the button is disabled.
+     *
+     * @attr disabled
+     * @default false
      */
     disabled: boolean;
     constructor();
+    protected updated(changedProperties: PropertyValues<this>): void;
     /** Sets focus on the button. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the button. */
     blur(): void;
     /** Simulates a mouse click on the element. */
     click(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/button-group/toggle-button.js

@@ -5,13 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcToggleButtonComponent_1;
-import { html, LitElement } from 'lit';
+import { html, LitElement, } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
-import { shadowOptions } from '../common/decorators/shadow-options.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { partMap } from '../common/part-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { buttonGroupContext } from '#internals/context.js';
+import { createAsyncContext } from '#internals/controllers/async-consumer.js';
+import { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';
+import { shadowOptions } from '#internals/decorators/shadow-options.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { partMap } from '#internals/part-map.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from './themes/button.base.css.js';
 import { all } from './themes/button.js';
 import { styles as shared } from './themes/shared/button/button.common.css.js';
@@ -25,20 +28,30 @@ let IgcToggleButtonComponent = class IgcToggleButtonComponent extends LitElement
     constructor() {
         super();
         this._focusRingManager = addKeyboardFocusRing(this);
+        this._context = createAsyncContext(this, buttonGroupContext);
         this.selected = false;
         this.disabled = false;
         addThemingController(this, all);
     }
+    updated(changedProperties) {
+        if (changedProperties.has('selected') && this.selected) {
+            this._context.value?.syncSelection(this);
+        }
+    }
     focus(options) {
-        this._nativeButton.focus(options);
+        this._nativeButton?.focus(options);
     }
     blur() {
-        this._nativeButton.blur();
+        this._nativeButton?.blur();
     }
     click() {
-        this._nativeButton.click();
+        this._nativeButton?.click();
     }
     render() {
+        const group = this._context.value?.instance;
+        const isRadio = group != null && group.selection !== 'multiple';
+        const disabled = this.disabled || Boolean(group?.disabled);
+        const selectedState = this.selected ? 'true' : 'false';
         return html `
       <button
         part=${partMap({
@@ -46,10 +59,12 @@ let IgcToggleButtonComponent = class IgcToggleButtonComponent extends LitElement
             focused: this._focusRingManager.focused,
         })}
         type="button"
-        ?disabled=${this.disabled}
+        role=${ifDefined(isRadio ? 'radio' : undefined)}
+        ?disabled=${disabled}
         .ariaLabel=${this.ariaLabel}
-        aria-pressed=${this.selected}
-        aria-disabled=${this.disabled}
+        aria-checked=${ifDefined(isRadio ? selectedState : undefined)}
+        aria-pressed=${ifDefined(isRadio ? undefined : selectedState)}
+        aria-disabled=${disabled}
       >
         <slot></slot>
       </button>
@@ -57,7 +72,7 @@ let IgcToggleButtonComponent = class IgcToggleButtonComponent extends LitElement
     }
 };
 __decorate([
-    query('[part="toggle"]', true)
+    query('[part~="toggle"]', true)
 ], IgcToggleButtonComponent.prototype, "_nativeButton", void 0);
 __decorate([
     property()