@tylertech/forge 3.0.0-next.15 → 3.0.0-next.16

package/esm/button-toggle/button-toggle/button-toggle-foundation.js

@@ -3,72 +3,116 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { task } from '../../core/utils/event-utils';
 import { BUTTON_TOGGLE_CONSTANTS } from './button-toggle-constants';
 export class ButtonToggleFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._selected = false;
         this._disabled = false;
-        this._dense = false;
-        this._clickListener = evt => this._onClick(evt);
+        this._readonly = false;
+        this._clickListener = (evt) => this._onClick(evt);
+        this._keydownListener = (evt) => this._onKeyDown(evt);
     }
     initialize() {
-        this._rippleInstance = this._adapter.initializeRipple();
-        this._adapter.addEventListener('click', this._clickListener);
-        this._adapter.setSelected(this._selected);
-        this._adapter.setDisabled(this._disabled);
-        this._adapter.setDense(this._dense);
-        this._adapter.detectStretchState();
-    }
-    disconnect() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
+        this._adapter.initialize();
+        if (!this._disabled && !this._readonly) {
+            this._applyListeners();
         }
-        this._adapter.removeEventListener('click', this._clickListener);
     }
-    _onClick(evt) {
+    destroy() {
+        this._removeListeners();
+    }
+    focus(options = { focusVisible: true }) {
+        this._adapter.focusHost(options);
+        if (options.focusVisible) {
+            this._adapter.forceFocusVisible();
+        }
+    }
+    click() {
+        this._adapter.clickHost();
+    }
+    _applyListeners() {
+        this._adapter.addHostListener('click', this._clickListener);
+        this._adapter.addHostListener('keydown', this._keydownListener);
+    }
+    _removeListeners() {
+        this._adapter.removeHostListener('click', this._clickListener);
+        this._adapter.removeHostListener('keydown', this._keydownListener);
+    }
+    async _onClick(_evt) {
+        const originalSelected = this._selected;
         this._selected = !this._selected;
-        this._updateSelectedState();
-        this._adapter.emitHostEvent(BUTTON_TOGGLE_CONSTANTS.events.SELECT, { value: this._value, selected: this._selected });
+        const detail = {
+            value: this._value,
+            selected: this._selected
+        };
+        const evt = new CustomEvent(BUTTON_TOGGLE_CONSTANTS.events.SELECT, { detail, bubbles: true, cancelable: true });
+        this._adapter.dispatchHostEvent(evt);
+        await task();
+        this._selected = originalSelected;
+        if (evt.defaultPrevented) {
+            return;
+        }
+        this.selected = !originalSelected;
     }
-    _updateSelectedState() {
-        this._adapter.setSelected(this._selected);
-        this._adapter.setHostAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED, this._selected.toString());
+    _onKeyDown(evt) {
+        if (evt.key === ' ') {
+            evt.preventDefault();
+            this.click();
+        }
     }
     get value() {
         return this._value;
     }
     set value(value) {
-        this._value = value;
+        if (this._value !== value) {
+            this._value = value;
+            this._adapter.setHostAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.VALUE, `${this._value}`);
+        }
     }
     get selected() {
         return this._selected;
     }
     set selected(value) {
+        value = !!value;
         if (this._selected !== value) {
             this._selected = value;
-            this._updateSelectedState();
+            this._adapter.setSelected(this._selected);
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED, this._selected);
         }
     }
     get disabled() {
         return this._disabled;
     }
     set disabled(value) {
+        value = !!value;
         if (this._disabled !== value) {
             this._disabled = value;
+            if (this._disabled) {
+                this._removeListeners();
+            }
+            else {
+                this._applyListeners();
+            }
             this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
-    get dense() {
-        return this._dense;
+    get readonly() {
+        return this._readonly;
     }
-    set dense(value) {
-        if (this._dense !== value) {
-            this._dense = value;
-            this._adapter.setDense(this._dense);
+    set readonly(value) {
+        value = !!value;
+        if (this._readonly !== value) {
+            this._readonly = value;
+            if (this._readonly) {
+                this._removeListeners();
+            }
+            else {
+                this._applyListeners();
+            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.READONLY, this._readonly);
         }
     }
-    setFocus() {
-        this._adapter.requestFocus();
-    }
 }

package/esm/button-toggle/button-toggle/button-toggle.d.ts

@@ -3,15 +3,17 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { ExperimentalFocusOptions } from '../../constants';
+import { IWithFocusable } from '../../core/mixins/focus/with-focusable';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { BaseComponent } from '../../core/base/base-component';
 import { IButtonToggleSelectEventData } from './button-toggle-constants';
-export interface IButtonToggleComponent extends IBaseComponent {
-    value: any;
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface IButtonToggleComponent<T = unknown> extends IWithElementInternals, IWithDefaultAria, IWithFocusable {
+    value: T;
     selected: boolean;
     disabled: boolean;
-    dense: boolean;
-}
-export interface IButtonToggleComponentEventMap extends HTMLElementEventMap {
+    readonly: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -21,22 +23,73 @@ declare global {
         'forge-button-toggle-select': CustomEvent<IButtonToggleSelectEventData>;
     }
 }
+declare const BaseButtonToggleClass: import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/focus/with-focusable").WithFocusableContract> & typeof BaseComponent;
 /**
- * The web component class behind the `<forge-button-toggle>` custom element.
- *
  * @tag forge-button-toggle
+ *
+ * @property {unknown} value - The value of the button toggle.
+ * @property {boolean} selected - Whether or not the button is selected.
+ * @property {boolean} disabled - Whether or not the button is disabled.
+ * @property {boolean} readonly - Whether or not the button is readonly.
+ *
+ * @attribute {unknown} value - The value of the button toggle.
+ * @attribute {boolean} selected - Whether or not the button is selected.
+ * @attribute {boolean} disabled - Whether or not the button is disabled.
+ * @attribute {boolean} readonly - Whether or not the button is readonly.
+ *
+ * @event {CustomEvent<IButtonToggleSelectEventData>} forge-button-toggle-select - Dispatches when the user toggles the button.
+ *
+ * @cssproperty --forge-button-toggle-display - The `display` style for the button toggle container element.
+ * @cssproperty --forge-button-toggle-min-width - The minimum width.
+ * @cssproperty --forge-button-toggle-spacing - The spacing between the button toggle and its content.
+ * @cssproperty --forge-button-toggle-padding-block - The padding on the block axis.
+ * @cssproperty --forge-button-toggle-padding-inline - The padding on the inline axis.
+ * @cssproperty --forge-button-toggle-icon-size - The font-size of start/end slotted content.
+ * @cssproperty --forge-button-toggle-color - The color of the button toggle content.
+ * @cssproperty --forge-button-toggle-background - The background of the button toggle.
+ * @cssproperty --forge-button-toggle-hover-background - The background of the button toggle when hovered.
+ * @cssproperty --forge-button-toggle-active-background - The background of the button toggle when active.
+ * @cssproperty --forge-button-toggle-cursor - The cursor of the button toggle.
+ * @cssproperty --forge-button-toggle-border-width - The border-width of the button toggle.
+ * @cssproperty --forge-button-toggle-border-style - The border-style of the button toggle.
+ * @cssproperty --forge-button-toggle-border-color - The border-color of the button toggle.
+ * @cssproperty --forge-button-toggle-shape - The shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-start-start - The start-start shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-start-end - The start-end shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-end-start - The end-start shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-end-end - The end-end shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-selected-background - The background of the button toggle when selected.
+ * @cssproperty --forge-button-toggle-selected-color - The color of the button toggle content when selected.
+ * @cssproperty --forge-button-toggle-selected-disabled-background - The background of the button toggle when selected and disabled.
+ * @cssproperty --forge-button-toggle-dense-height - The height of the button toggle when dense.
+ * @cssproperty --forge-button-toggle-disabled-opacity - The opacity of the button toggle when disabled.
+ * @cssproperty --forge-button-toggle-disabled-cursor - The cursor of the button toggle when disabled.
+ * @cssproperty --forge-button-toggle-disabled-color - The color of the button toggle content when disabled.
+ * @cssproperty --forge-button-toggle-disabled-background - The background of the button toggle when disabled.
+ * @cssproperty --forge-button-toggle-transition-duration - The transition-duration of various properties.
+ * @cssproperty --forge-button-toggle-transition-timing - The transition-timing of various properties.
+ * @cssproperty --forge-button-toggle-focus-indicator-color - The color of the focus indicator.
+ *
+ * @csspart root - The root container element.
+ * @csspart focus-indicator - The focus indicator element.
+ * @csspart state-layer - The state layer surface element.
+ *
+ * @slot - The default/unnamed slot for the button toggle's content.
+ * @slot start - Typically reserved for content/icons that render logically before the default slot content.
+ * @slot end - Typically reserved content/icons that render logically after the default slot content.
  */
-export declare class ButtonToggleComponent extends BaseComponent implements IButtonToggleComponent {
+export declare class ButtonToggleComponent<T = unknown> extends BaseButtonToggleClass implements IButtonToggleComponent {
     static get observedAttributes(): string[];
     private _foundation;
-    private _buttonElement;
     constructor();
-    initializedCallback(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    value: any;
+    value: T;
     selected: boolean;
     disabled: boolean;
-    dense: boolean;
-    focus(): void;
+    readonly: boolean;
+    focus(options?: ExperimentalFocusOptions): void;
+    click(): void;
 }
+export {};

package/esm/button-toggle/button-toggle/button-toggle.js

@@ -4,61 +4,110 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty, getShadowElement } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { WithFocusable } from '../../core/mixins/focus/with-focusable';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { FocusIndicatorComponent } from '../../focus-indicator';
+import { StateLayerComponent } from '../../state-layer';
 import { BaseComponent } from '../../core/base/base-component';
 import { ButtonToggleAdapter } from './button-toggle-adapter';
 import { BUTTON_TOGGLE_CONSTANTS } from './button-toggle-constants';
 import { ButtonToggleFoundation } from './button-toggle-foundation';
-const template = '<template><button type=\"button\" class=\"forge-button-toggle\" aria-pressed=\"false\" part=\"button\"><slot name=\"leading\"></slot><slot></slot><slot name=\"trailing\"></slot></button></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-button-toggle{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:0 0;border-radius:4px;border-radius:var(--mdc-shape-small,4px);height:36px;border-style:solid;-webkit-transition:border 280ms cubic-bezier(.4, 0, .2, 1);transition:border 280ms cubic-bezier(.4, 0, .2, 1);font-family:Roboto,sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, .875rem));letter-spacing:.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, .0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight,var(--mdc-typography-button-font-weight,500));text-transform:uppercase;text-transform:var(--mdc-outlined-button-label-text-transform,var(--mdc-typography-button-text-transform,uppercase));height:36px;height:var(--mdc-outlined-button-container-height,36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px);padding:0 15px 0 15px;border-width:1px;text-transform:none;overflow:hidden;width:100%;box-sizing:border-box;-webkit-transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);border-radius:0;border-bottom-width:var(--forge-button-toggle-border-bottom-width,1px);border-right-width:var(--forge-button-toggle-border-right-width,1px);border-top-left-radius:var(--forge-button-toggle-border-top-left-radius,4px);border-bottom-left-radius:var(--forge-button-toggle-border-bottom-left-radius,4px);border-top-right-radius:var(--forge-button-toggle-border-top-right-radius,4px);border-bottom-right-radius:var(--forge-button-toggle-border-bottom-right-radius,4px)}.forge-button-toggle::after,.forge-button-toggle::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-button-toggle::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-button-toggle::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-button-toggle.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-button-toggle.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-button-toggle.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-button-toggle.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-button-toggle.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-button-toggle::after,.forge-button-toggle::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-button-toggle.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-button-toggle::after,.forge-button-toggle::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-toggle.mdc-ripple-surface--hover::before,.forge-button-toggle:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button-toggle.mdc-ripple-upgraded--background-focused::before,.forge-button-toggle:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button-toggle:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button-toggle.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button-toggle .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-button-toggle::-moz-focus-inner{padding:0;border:0}.forge-button-toggle:active{outline:0}.forge-button-toggle:hover{cursor:pointer}.forge-button-toggle:disabled{cursor:default;pointer-events:none}.forge-button-toggle .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button-toggle:not(:disabled){background-color:transparent}.forge-button-toggle:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-button-toggle .mdc-button__ripple{border-style:solid;border-color:transparent}.forge-button-toggle:not(:disabled){color:#6200ee;color:var(--mdc-outlined-button-label-text-color,var(--mdc-theme-primary,#6200ee))}.forge-button-toggle:disabled{color:rgba(0,0,0,.38);color:var(--mdc-outlined-button-disabled-label-text-color,rgba(0,0,0,.38))}.forge-button-toggle .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size,1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size,1.125rem)}.forge-button-toggle .mdc-button__ripple::after,.forge-button-toggle .mdc-button__ripple::before{background-color:#6200ee;background-color:var(--mdc-outlined-button-hover-state-layer-color,var(--mdc-theme-primary,#6200ee))}.forge-button-toggle.mdc-ripple-surface--hover .mdc-button__ripple::before,.forge-button-toggle:hover .mdc-button__ripple::before{opacity:.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, .04)}.forge-button-toggle.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.forge-button-toggle:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, .12)}.forge-button-toggle:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, .12)}.forge-button-toggle.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.forge-button-toggle .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px))}.forge-button-toggle:not(:disabled){border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-outline-color,rgba(0,0,0,.12))}.forge-button-toggle:disabled{border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-disabled-outline-color,rgba(0,0,0,.12))}.forge-button-toggle.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-button-toggle.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-button-toggle .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px)}.forge-button-toggle .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width,1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width,1px))}.forge-button-toggle.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-button-toggle.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-button-toggle .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px}.forge-button-toggle .mdc-button__touch{left:calc(-1 * 1px);width:calc(100% + 2 * 1px)}.forge-button-toggle:not(:disabled){border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-button-toggle:disabled{border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button-toggle__selected:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff)}.forge-button-toggle__selected:not(:disabled)::after,.forge-button-toggle__selected:not(:disabled)::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button-toggle__selected:not(:disabled).mdc-ripple-surface--hover::before,.forge-button-toggle__selected:not(:disabled):hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button-toggle__selected:not(:disabled).mdc-ripple-upgraded--background-focused::before,.forge-button-toggle__selected:not(:disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button-toggle__selected:not(:disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle__selected:not(:disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button-toggle__selected:not(:disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button-toggle__selected:disabled{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff);opacity:.37}.forge-button-toggle__selected:disabled::after,.forge-button-toggle__selected:disabled::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button-toggle__selected:disabled.mdc-ripple-surface--hover::before,.forge-button-toggle__selected:disabled:hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button-toggle__selected:disabled.mdc-ripple-upgraded--background-focused::before,.forge-button-toggle__selected:disabled:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button-toggle__selected:disabled:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle__selected:disabled:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button-toggle__selected:disabled.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button-toggle ::slotted([slot=leading]){display:inline-block;width:1.125rem;height:1.125rem;font-size:1.125rem!important;vertical-align:top;margin-right:4px}.forge-button-toggle ::slotted([slot=trailing]){display:inline-block;width:1.125rem;height:1.125rem;font-size:1.125rem!important;vertical-align:top;margin-left:4px}.forge-button-toggle--dense{height:24px;margin-top:0;margin-bottom:0;height:1.5rem;font-size:.75rem}.forge-button-toggle--dense .mdc-button__touch{height:100%}.forge-button-toggle--dense ::slotted([slot=leading]){width:.875rem;height:.875rem;font-size:.875rem!important}.forge-button-toggle--dense ::slotted([slot=trailing]){width:.875rem;height:.875rem;font-size:.875rem!important}:host{display:inline-block}:host([hidden]){display:none}:host([stretch]){width:100%;-webkit-box-flex:1;flex:1}:host([selected-adjacent]) .forge-button-toggle{border-left-color:var(--mdc-theme-text-primary-on-dark)}:host([selected-adjacent-vertical]) .forge-button-toggle{border-top-color:var(--mdc-theme-text-primary-on-dark)}';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+const template = '<template><div class=\"forge-button-toggle\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
+const styles = ':host{--_button-toggle-display:var(--forge-button-toggle-display, inline-flex)}:host{display:var(--_button-toggle-display);position:relative;outline:0;height:100%;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button-toggle{--_button-toggle-min-width:var(--forge-button-toggle-min-width, auto);--_button-toggle-spacing:var(--forge-button-toggle-spacing, var(--forge-spacing-xsmall, 8px));--_button-toggle-padding-block:var(--forge-button-toggle-padding-block, 2px);--_button-toggle-padding-inline:var(--forge-button-toggle-padding-inline, 8px);--_button-toggle-icon-size:var(--forge-button-toggle-icon-size, var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125)));--_button-toggle-color:var(--forge-button-toggle-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_button-toggle-background:var(--forge-button-toggle-background, transparent);--_button-toggle-hover-background:var(--forge-button-toggle-hover-background, var(--_button-toggle-background));--_button-toggle-active-background:var(--forge-button-toggle-active-background, var(--_button-toggle-background));--_button-toggle-cursor:var(--forge-button-toggle-cursor, pointer);--_button-toggle-border-width:var(--forge-button-toggle-border-width, medium);--_button-toggle-border-style:var(--forge-button-toggle-border-style, none);--_button-toggle-border-color:var(--forge-button-toggle-border-color, var(--forge-theme-outline-medium, #757575));--_button-toggle-shape:var(--forge-button-toggle-shape, var(--forge-shape-small, 2px));--_button-toggle-shape-start-start:var(--forge-button-toggle-shape-start-start, var(--_button-toggle-shape));--_button-toggle-shape-start-end:var(--forge-button-toggle-shape-start-end, var(--_button-toggle-shape));--_button-toggle-shape-end-start:var(--forge-button-toggle-shape-end-start, var(--_button-toggle-shape));--_button-toggle-shape-end-end:var(--forge-button-toggle-shape-end-end, var(--_button-toggle-shape));--_button-toggle-selected-background:var(--forge-button-toggle-selected-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-toggle-selected-color:var(--forge-button-toggle-selected-color, var(--forge-theme-on-tertiary-container, #213189));--_button-toggle-selected-disabled-background:var(--forge-button-toggle-selected-disabled-background, var(--forge-theme-surface-container, #e0e0e0));--_button-toggle-dense-height:var(--forge-button-toggle-dense-height, 24px);--_button-toggle-disabled-opacity:var(--forge-button-toggle-disabled-opacity, 0.38);--_button-toggle-disabled-cursor:var(--forge-button-toggle-disabled-cursor, not-allowed);--_button-toggle-disabled-color:var(--forge-button-toggle-disabled-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-toggle-disabled-background:var(--forge-button-toggle-disabled-background, transparent);--_button-toggle-transition-duration:var(--forge-button-toggle-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-toggle-transition-timing:var(--forge-button-toggle-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-toggle-focus-indicator-color:var(--forge-button-toggle-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-toggle-focus-indicator-offset:var(--forge-button-toggle-focus-indicator-offset, 0px)}.forge-button-toggle{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-toggle-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_button-toggle-spacing);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;min-inline-size:var(--_button-toggle-min-width);inline-size:100%;border-width:var(--_button-toggle-border-width);border-style:var(--_button-toggle-border-style);border-color:var(--_button-toggle-border-color);border-start-start-radius:var(--_button-toggle-shape-start-start);border-start-end-radius:var(--_button-toggle-shape-start-end);border-end-start-radius:var(--_button-toggle-shape-end-start);border-end-end-radius:var(--_button-toggle-shape-end-end);padding-block:var(--_button-toggle-padding-block);padding-inline:var(--_button-toggle-padding-inline);outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-toggle-background);color:var(--_button-toggle-color);cursor:var(--_button-toggle-cursor);-webkit-transition-property:color,background-color,border-color;transition-property:color,background-color,border-color;-webkit-transition-duration:var(--_button-toggle-transition-duration);transition-duration:var(--_button-toggle-transition-duration);-webkit-transition-timing-function:var(--_button-toggle-transition-timing);transition-timing-function:var(--_button-toggle-transition-timing)}.forge-button-toggle forge-state-layer{--forge-state-layer-color:var(--_button-toggle-color)}.forge-button-toggle forge-focus-indicator{--forge-focus-indicator-outward-offset:var(--_button-toggle-focus-indicator-offset);--forge-focus-indicator-color:var(--_button-toggle-focus-indicator-color);--forge-focus-indicator-shape:var(--_button-toggle-shape);--forge-focus-indicator-shape-start-start:var(--_button-toggle-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_button-toggle-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_button-toggle-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_button-toggle-shape-end-end)}::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-toggle-icon-size)}:host([selected]) .forge-button-toggle{--_button-toggle-background:var(--_button-toggle-selected-background);--_button-toggle-color:var(--_button-toggle-selected-color);--_button-toggle-border-color:var(--_button-toggle-background)}:host([disabled]){--_button-toggle-cursor:var(--_button-toggle-disabled-cursor);cursor:not-allowed}:host([disabled]) .forge-button-toggle{--_button-toggle-background:var(--_button-toggle-disabled-background);--_button-toggle-color:var(--_button-toggle-disabled-color);opacity:var(--_button-toggle-disabled-opacity);pointer-events:none}:host([disabled][selected]) .forge-button-toggle{--_button-toggle-background:var(--_button-toggle-selected-disabled-background)}';
+const BaseButtonToggleClass = WithDefaultAria(WithElementInternals(WithFocusable(BaseComponent)));
 /**
- * The web component class behind the `<forge-button-toggle>` custom element.
- *
  * @tag forge-button-toggle
+ *
+ * @property {unknown} value - The value of the button toggle.
+ * @property {boolean} selected - Whether or not the button is selected.
+ * @property {boolean} disabled - Whether or not the button is disabled.
+ * @property {boolean} readonly - Whether or not the button is readonly.
+ *
+ * @attribute {unknown} value - The value of the button toggle.
+ * @attribute {boolean} selected - Whether or not the button is selected.
+ * @attribute {boolean} disabled - Whether or not the button is disabled.
+ * @attribute {boolean} readonly - Whether or not the button is readonly.
+ *
+ * @event {CustomEvent<IButtonToggleSelectEventData>} forge-button-toggle-select - Dispatches when the user toggles the button.
+ *
+ * @cssproperty --forge-button-toggle-display - The `display` style for the button toggle container element.
+ * @cssproperty --forge-button-toggle-min-width - The minimum width.
+ * @cssproperty --forge-button-toggle-spacing - The spacing between the button toggle and its content.
+ * @cssproperty --forge-button-toggle-padding-block - The padding on the block axis.
+ * @cssproperty --forge-button-toggle-padding-inline - The padding on the inline axis.
+ * @cssproperty --forge-button-toggle-icon-size - The font-size of start/end slotted content.
+ * @cssproperty --forge-button-toggle-color - The color of the button toggle content.
+ * @cssproperty --forge-button-toggle-background - The background of the button toggle.
+ * @cssproperty --forge-button-toggle-hover-background - The background of the button toggle when hovered.
+ * @cssproperty --forge-button-toggle-active-background - The background of the button toggle when active.
+ * @cssproperty --forge-button-toggle-cursor - The cursor of the button toggle.
+ * @cssproperty --forge-button-toggle-border-width - The border-width of the button toggle.
+ * @cssproperty --forge-button-toggle-border-style - The border-style of the button toggle.
+ * @cssproperty --forge-button-toggle-border-color - The border-color of the button toggle.
+ * @cssproperty --forge-button-toggle-shape - The shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-start-start - The start-start shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-start-end - The start-end shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-end-start - The end-start shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-shape-end-end - The end-end shape radius of the button toggle.
+ * @cssproperty --forge-button-toggle-selected-background - The background of the button toggle when selected.
+ * @cssproperty --forge-button-toggle-selected-color - The color of the button toggle content when selected.
+ * @cssproperty --forge-button-toggle-selected-disabled-background - The background of the button toggle when selected and disabled.
+ * @cssproperty --forge-button-toggle-dense-height - The height of the button toggle when dense.
+ * @cssproperty --forge-button-toggle-disabled-opacity - The opacity of the button toggle when disabled.
+ * @cssproperty --forge-button-toggle-disabled-cursor - The cursor of the button toggle when disabled.
+ * @cssproperty --forge-button-toggle-disabled-color - The color of the button toggle content when disabled.
+ * @cssproperty --forge-button-toggle-disabled-background - The background of the button toggle when disabled.
+ * @cssproperty --forge-button-toggle-transition-duration - The transition-duration of various properties.
+ * @cssproperty --forge-button-toggle-transition-timing - The transition-timing of various properties.
+ * @cssproperty --forge-button-toggle-focus-indicator-color - The color of the focus indicator.
+ *
+ * @csspart root - The root container element.
+ * @csspart focus-indicator - The focus indicator element.
+ * @csspart state-layer - The state layer surface element.
+ *
+ * @slot - The default/unnamed slot for the button toggle's content.
+ * @slot start - Typically reserved for content/icons that render logically before the default slot content.
+ * @slot end - Typically reserved content/icons that render logically after the default slot content.
  */
-let ButtonToggleComponent = class ButtonToggleComponent extends BaseComponent {
+let ButtonToggleComponent = class ButtonToggleComponent extends BaseButtonToggleClass {
     static get observedAttributes() {
-        return [
-            BUTTON_TOGGLE_CONSTANTS.attributes.VALUE,
-            BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED,
-            BUTTON_TOGGLE_CONSTANTS.attributes.DISABLED,
-            BUTTON_TOGGLE_CONSTANTS.attributes.DENSE,
-            BUTTON_TOGGLE_CONSTANTS.attributes.BUTTON_ARIA_LABEL
-        ];
+        return Object.values(BUTTON_TOGGLE_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
         this._foundation = new ButtonToggleFoundation(new ButtonToggleAdapter(this));
-        this._buttonElement = getShadowElement(this, BUTTON_TOGGLE_CONSTANTS.selectors.BUTTON);
     }
-    initializedCallback() {
+    connectedCallback() {
         this._foundation.initialize();
     }
     disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case BUTTON_TOGGLE_CONSTANTS.attributes.VALUE:
                 this.value = newValue;
-                break;
+                return;
             case BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED:
                 this.selected = coerceBoolean(newValue);
-                break;
+                return;
             case BUTTON_TOGGLE_CONSTANTS.attributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
-                break;
-            case BUTTON_TOGGLE_CONSTANTS.attributes.DENSE:
-                this.dense = coerceBoolean(newValue);
-                break;
-            case BUTTON_TOGGLE_CONSTANTS.attributes.BUTTON_ARIA_LABEL:
-                this._buttonElement.setAttribute('aria-label', newValue);
-                break;
+                return;
+            case BUTTON_TOGGLE_CONSTANTS.attributes.READONLY:
+                this.readonly = coerceBoolean(newValue);
+                return;
         }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    focus(options) {
+        this._foundation.focus(options);
     }
-    focus() {
-        this._foundation.setFocus();
+    click() {
+        this._foundation.click();
     }
 };
 __decorate([
@@ -72,10 +121,14 @@ __decorate([
 ], ButtonToggleComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
-], ButtonToggleComponent.prototype, "dense", void 0);
+], ButtonToggleComponent.prototype, "readonly", void 0);
 ButtonToggleComponent = __decorate([
     CustomElement({
-        name: BUTTON_TOGGLE_CONSTANTS.elementName
+        name: BUTTON_TOGGLE_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
     })
 ], ButtonToggleComponent);
 export { ButtonToggleComponent };

package/esm/button-toggle/button-toggle-group/button-toggle-group-adapter.d.ts

@@ -6,39 +6,33 @@
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IButtonToggleComponent } from '../button-toggle/button-toggle';
 import { IButtonToggleGroupComponent } from './button-toggle-group';
-import { IButtonToggleOption } from './button-toggle-group-constants';
 export interface IButtonToggleGroupAdapter extends IBaseAdapter {
     addListener(type: string, listener: (evt: Event) => void): void;
     removeListener(type: string, listener: (evt: Event) => void): void;
     addSlotChangeListener(listener: (evt: Event) => void): void;
     removeSlotChangeListener(listener: (evt: Event) => void): void;
     deselect(selectedToggle: IButtonToggleComponent): void;
-    applyAdjacentSelections(isVertical: boolean): void;
-    setVertical(isVertical: boolean): void;
-    setStretch(value: boolean): void;
-    setDense(value: boolean): void;
     setDisabled(value: boolean): void;
+    setReadonly(value: boolean): void;
     getSelectedValues(): any[];
     applyValues(values: any[]): void;
-    createOptions(options: IButtonToggleOption[]): void;
+    setFormValue(): void;
+    setFormValidity(): void;
 }
 export declare class ButtonToggleGroupAdapter extends BaseAdapter<IButtonToggleGroupComponent> implements IButtonToggleGroupAdapter {
     private _rootElement;
-    private _slotElement;
+    private _defaultSlotElement;
     constructor(component: IButtonToggleGroupComponent);
     addListener(type: string, listener: (evt: Event) => void): void;
     removeListener(type: string, listener: (evt: Event) => void): void;
     addSlotChangeListener(listener: EventListener): void;
     removeSlotChangeListener(listener: EventListener): void;
     deselect(selectedToggle: IButtonToggleComponent): void;
-    applyAdjacentSelections(isVertical: boolean): void;
-    setVertical(isVertical: boolean): void;
-    setStretch(value: boolean): void;
-    setDense(value: boolean): void;
     setDisabled(value: boolean): void;
+    setReadonly(value: boolean): void;
     getSelectedValues(): any[];
     applyValues(values: any[]): void;
-    createOptions(options: IButtonToggleOption[]): void;
-    private _createButtonToggle;
+    setFormValue(): void;
+    setFormValidity(): void;
     private _getButtonToggleElements;
 }