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

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;
 }

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

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, removeAllChildren } from '@tylertech/forge-core';
-import { ICON_CLASS_NAME } from '../../constants';
+import { getShadowElement } from '@tylertech/forge-core';
+import { getFormState, getFormValue, getValidationMessage, internals, isFocusable } from '../../constants';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { BUTTON_TOGGLE_CONSTANTS } from '../button-toggle/button-toggle-constants';
 import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
@@ -12,7 +12,7 @@ export class ButtonToggleGroupAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
         this._rootElement = getShadowElement(component, BUTTON_TOGGLE_GROUP_CONSTANTS.selectors.ROOT);
-        this._slotElement = this._rootElement.querySelector('slot');
+        this._defaultSlotElement = this._rootElement.querySelector('slot');
     }
     addListener(type, listener) {
         this._rootElement.addEventListener(type, listener);
@@ -21,59 +21,24 @@ export class ButtonToggleGroupAdapter extends BaseAdapter {
         this._rootElement.removeEventListener(type, listener);
     }
     addSlotChangeListener(listener) {
-        this._slotElement.addEventListener('slotchange', listener);
+        this._defaultSlotElement.addEventListener('slotchange', listener);
     }
     removeSlotChangeListener(listener) {
-        this._slotElement.addEventListener('slotchange', listener);
+        this._defaultSlotElement.addEventListener('slotchange', listener);
     }
     deselect(selectedToggle) {
         const toggles = this._getButtonToggleElements();
         toggles.filter(t => t !== selectedToggle).forEach(t => t.selected = false);
     }
-    applyAdjacentSelections(isVertical) {
-        const toggles = this._getButtonToggleElements();
-        for (let i = toggles.length - 1; i > 0; i--) {
-            toggles[i].removeAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT);
-            toggles[i].removeAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT_VERTICAL);
-            if (toggles[i].selected && toggles[i - 1].selected) {
-                const attr = isVertical ? BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT_VERTICAL : BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT;
-                toggles[i].setAttribute(attr, '');
-            }
-        }
-    }
-    setVertical(isVertical) {
-        if (isVertical) {
-            this._rootElement.classList.add(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.VERTICAL);
-        }
-        else {
-            this._rootElement.classList.remove(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.VERTICAL);
-        }
-    }
-    setStretch(value) {
-        if (value) {
-            this._rootElement.classList.add(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.STRETCH);
-        }
-        else {
-            this._rootElement.classList.remove(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.STRETCH);
-        }
-        const toggles = this._getButtonToggleElements();
-        toggles.forEach(toggle => {
-            if (value) {
-                toggle.setAttribute('stretch', '');
-            }
-            else {
-                toggle.removeAttribute('stretch');
-            }
-        });
-    }
-    setDense(value) {
-        const toggles = this._getButtonToggleElements();
-        toggles.forEach(t => t.dense = value);
-    }
     setDisabled(value) {
+        this._component[isFocusable] = !value;
         const toggles = this._getButtonToggleElements();
         toggles.forEach(t => t.disabled = value);
     }
+    setReadonly(value) {
+        const toggles = this._getButtonToggleElements();
+        toggles.forEach(t => t.readonly = value);
+    }
     getSelectedValues() {
         const toggles = this._getButtonToggleElements();
         return toggles.filter(t => t.selected).map(t => t.value);
@@ -82,56 +47,26 @@ export class ButtonToggleGroupAdapter extends BaseAdapter {
         const toggles = this._getButtonToggleElements();
         toggles.forEach(t => t.selected = values.indexOf(t.value) >= 0);
     }
-    createOptions(options) {
-        removeAllChildren(this._component);
-        options.forEach(o => {
-            this._component.appendChild(this._createButtonToggle(o));
-        });
-    }
-    _createButtonToggle(option) {
-        const buttonToggle = document.createElement(BUTTON_TOGGLE_CONSTANTS.elementName);
-        buttonToggle.value = option.value;
-        if (option.label) {
-            buttonToggle.textContent = option.label;
+    setFormValue() {
+        if (!this._component.form) {
+            return;
         }
-        else if (option.icon) {
-            const icon = document.createElement('i');
-            icon.textContent = option.icon;
-            icon.classList.add(ICON_CLASS_NAME);
-            icon.setAttribute('aria-hidden', 'true');
-            buttonToggle.appendChild(icon);
+        const data = this._component[getFormValue]();
+        const state = this._component[getFormState]();
+        this._component[internals].setFormValue(data, state);
+    }
+    setFormValidity() {
+        if (!this._component.form || !this._component.required) {
+            return;
         }
-        if (option.leadingIcon) {
-            let leadingIcon;
-            if (option.leadingIconType === 'component') {
-                leadingIcon = document.createElement('forge-icon');
-                leadingIcon.name = option.leadingIcon;
-            }
-            else {
-                leadingIcon = document.createElement('i');
-                leadingIcon.textContent = option.leadingIcon;
-                leadingIcon.classList.add(ICON_CLASS_NAME);
-                leadingIcon.setAttribute('aria-hidden', 'true');
-            }
-            leadingIcon.slot = 'leading';
-            buttonToggle.appendChild(leadingIcon);
+        const required = this._component.multiple ? !this._component.value.length : !this._component.value;
+        if (required) {
+            const validationMessage = this._component[getValidationMessage]({ required });
+            this._component[internals].setValidity({ valueMissing: required }, validationMessage, this._getButtonToggleElements()[0]);
         }
-        if (option.trailingIcon) {
-            let trailingIcon;
-            if (option.trailingIconType === 'component') {
-                trailingIcon = document.createElement('forge-icon');
-                trailingIcon.name = option.trailingIcon;
-            }
-            else {
-                trailingIcon = document.createElement('i');
-                trailingIcon.textContent = option.trailingIcon;
-                trailingIcon.classList.add(ICON_CLASS_NAME);
-                trailingIcon.setAttribute('aria-hidden', 'true');
-            }
-            trailingIcon.slot = 'trailing';
-            buttonToggle.appendChild(trailingIcon);
+        else {
+            this._component[internals].setValidity({});
         }
-        return buttonToggle;
     }
     _getButtonToggleElements() {
         return Array.from(this._component.querySelectorAll(BUTTON_TOGGLE_CONSTANTS.elementName));

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

@@ -3,8 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../../constants';
 export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
     elementName: "forge-button-toggle-group";
+    observedAttributes: {
+        VALUE: string;
+        MULTIPLE: string;
+        MANDATORY: string;
+        VERTICAL: string;
+        STRETCH: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        DENSE: string;
+        NO_OUTLINE: string;
+        THEME: string;
+    };
     attributes: {
         VALUE: string;
         MULTIPLE: string;
@@ -12,7 +26,11 @@ export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
         VERTICAL: string;
         STRETCH: string;
         DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
         DENSE: string;
+        NO_OUTLINE: string;
+        THEME: string;
     };
     classes: {
         VERTICAL: string;
@@ -25,14 +43,5 @@ export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
         CHANGE: string;
     };
 };
-export type IButtonToggleGroupChangeEventData<T = any> = T;
-export type ButtonToggleIconType = 'font' | 'component';
-export interface IButtonToggleOption {
-    label?: string;
-    icon?: string;
-    value: any;
-    leadingIcon?: string;
-    leadingIconType?: ButtonToggleIconType;
-    trailingIcon?: string;
-    trailingIconType?: ButtonToggleIconType;
-}
+export type IButtonToggleGroupChangeEventData<T = unknown> = T;
+export type ButtonToggleGroupTheme = Theme;

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

@@ -5,15 +5,20 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}button-toggle-group`;
-const attributes = {
+const observedAttributes = {
     VALUE: 'value',
     MULTIPLE: 'multiple',
     MANDATORY: 'mandatory',
     VERTICAL: 'vertical',
     STRETCH: 'stretch',
     DISABLED: 'disabled',
-    DENSE: 'dense'
+    REQUIRED: 'required',
+    READONLY: 'readonly',
+    DENSE: 'dense',
+    NO_OUTLINE: 'no-outline',
+    THEME: 'theme'
 };
+const attributes = Object.assign({}, observedAttributes);
 const classes = {
     VERTICAL: 'forge-button-toggle-group--vertical',
     STRETCH: 'forge-button-toggle-group--stretch'
@@ -26,6 +31,7 @@ const events = {
 };
 export const BUTTON_TOGGLE_GROUP_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
     classes,
     selectors,

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

@@ -5,39 +5,41 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IButtonToggleGroupAdapter } from './button-toggle-group-adapter';
-import { IButtonToggleOption } from './button-toggle-group-constants';
+import { ButtonToggleGroupTheme } from './button-toggle-group-constants';
 export interface IButtonToggleGroupFoundation extends ICustomElementFoundation {
-    value: any;
+    value: unknown;
     multiple: boolean;
     stretch: boolean;
     mandatory: boolean;
     vertical: boolean;
     dense: boolean;
     disabled: boolean;
-    options: IButtonToggleOption[];
+    readonly: boolean;
+    required: boolean;
+    outlined: boolean;
+    theme: ButtonToggleGroupTheme;
 }
 export declare class ButtonToggleGroupFoundation implements IButtonToggleGroupFoundation {
     private _adapter;
-    private _isInitialized;
+    private _values;
+    private _outlined;
     private _multiple;
     private _mandatory;
     private _vertical;
     private _stretch;
     private _dense;
     private _disabled;
-    private _options;
-    private _values;
-    private _originalValue;
+    private _readonly;
+    private _required;
+    private _theme;
     private _selectListener;
     private _slotListener;
     constructor(_adapter: IButtonToggleGroupAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     private _synchronize;
     private _onSelect;
-    private _getValue;
     private _applyValue;
-    private _applyOptions;
     get value(): any;
     set value(value: any);
     get multiple(): boolean;
@@ -52,6 +54,12 @@ export declare class ButtonToggleGroupFoundation implements IButtonToggleGroupFo
     set dense(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get options(): IButtonToggleOption[];
-    set options(value: IButtonToggleOption[]);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get outlined(): boolean;
+    set outlined(value: boolean);
+    get theme(): ButtonToggleGroupTheme;
+    set theme(value: ButtonToggleGroupTheme);
 }