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

package/esm/button/button.js

@@ -9,12 +9,12 @@ import { IconComponent } from '../icon';
 import { FocusIndicatorComponent } from '../focus-indicator';
 import { StateLayerComponent } from '../state-layer';
 import { BaseButton } from './base/base-button';
-import { BASE_BUTTON_CONSTANTS } from './base/base-button-constants';
 import { ButtonAdapter } from './button-adapter';
 import { BUTTON_CONSTANTS } from './button-constants';
 import { ButtonFoundation } from './button-foundation';
+import { BASE_BUTTON_CONSTANTS } from './base/base-button-constants';
 const template = '<template><div class=\"forge-button\" 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-display:var(--forge-button-display, inline-flex);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, 8px);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, var(--forge-shape-medium, 4px));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-outlined-background:var(--forge-button-outlined-background, var(--_button-background));--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-flat-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, var(--forge-shape-full, 9999px));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-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-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_button-justify);justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);-webkit-box-shadow:var(--_button-shadow);box-shadow:var(--_button-shadow);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-background);color:var(--_button-color);cursor:var(--_button-cursor);-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_button-transition-duration);transition-duration:var(--_button-transition-duration);-webkit-transition-timing-function:var(--_button-transition-timing);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}a{position:absolute;inset:0;text-decoration:none}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host(:is(:not([variant],[variant=text]))) .forge-button{--_button-focus-indicator-offset:var(--_button-text-focus-indicator-offset)}:host(:is([variant=filled],[variant=raised])) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host(:is([variant=filled],[variant=raised])) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);-webkit-text-decoration:var(--_button-link-text-decoration);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);-webkit-transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{-webkit-text-decoration:var(--_button-link-hover-text-decoration);text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{-webkit-transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing);transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
+const styles = ':host{--_button-display:var(--forge-button-display, inline-flex);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, 8px);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, var(--forge-shape-medium, 4px));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-outlined-background:var(--forge-button-outlined-background, var(--_button-background));--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, var(--forge-shape-full, 9999px));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-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-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_button-justify);justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);-webkit-box-shadow:var(--_button-shadow);box-shadow:var(--_button-shadow);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-background);color:var(--_button-color);cursor:var(--_button-cursor);-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_button-transition-duration);transition-duration:var(--_button-transition-duration);-webkit-transition-timing-function:var(--_button-transition-timing);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}a{position:absolute;inset:0;text-decoration:none}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([variant=filled],[variant=raised])) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host(:is(:not([variant],[variant=text]))) .forge-button{--_button-focus-indicator-offset:var(--_button-text-focus-indicator-offset)}:host(:is([variant=filled],[variant=raised])) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host(:is([variant=filled],[variant=raised])) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);-webkit-text-decoration:var(--_button-link-text-decoration);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);-webkit-transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{-webkit-text-decoration:var(--_button-link-hover-text-decoration);text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{-webkit-transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing);transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
 /**
  * @tag forge-button
  *

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

@@ -3,28 +3,20 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { ForgeRipple } from '../../ripple';
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IButtonToggleComponent } from './button-toggle';
 export interface IButtonToggleAdapter extends IBaseAdapter {
+    initialize(): void;
     setSelected(value: boolean): void;
-    addEventListener(type: string, listener: (evt: Event) => void): void;
-    removeEventListener(type: string, listener: (evt: Event) => void): void;
-    initializeRipple(): ForgeRipple;
     setDisabled(value: boolean): void;
-    setDense(value: boolean): void;
-    requestFocus(): void;
-    detectStretchState(): void;
+    forceFocusVisible(): void;
 }
 export declare class ButtonToggleAdapter extends BaseAdapter<IButtonToggleComponent> implements IButtonToggleAdapter {
-    private _buttonElement;
+    private _focusIndicatorElement;
+    private _stateLayerElement;
     constructor(component: IButtonToggleComponent);
+    initialize(): void;
     setSelected(value: boolean): void;
-    addEventListener(type: string, listener: (evt: Event) => void): void;
-    removeEventListener(type: string, listener: (evt: Event) => void): void;
-    initializeRipple(): ForgeRipple;
     setDisabled(value: boolean): void;
-    setDense(value: boolean): void;
-    requestFocus(): void;
-    detectStretchState(): void;
+    forceFocusVisible(): void;
 }

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

@@ -4,59 +4,33 @@
  * License: Apache-2.0
  */
 import { getShadowElement } from '@tylertech/forge-core';
-import { ForgeRipple } from '../../ripple';
 import { BaseAdapter } from '../../core/base/base-adapter';
-import { BUTTON_TOGGLE_CONSTANTS } from './button-toggle-constants';
+import { isFocusable, setDefaultAria } from '../../constants';
+import { STATE_LAYER_CONSTANTS } from '../../state-layer/state-layer-constants';
+import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator/focus-indicator-constants';
 export class ButtonToggleAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._buttonElement = getShadowElement(component, BUTTON_TOGGLE_CONSTANTS.selectors.BUTTON);
+        this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayerElement = getShadowElement(component, STATE_LAYER_CONSTANTS.elementName);
     }
-    setSelected(value) {
-        if (value) {
-            this._buttonElement.classList.add(BUTTON_TOGGLE_CONSTANTS.classes.SELECTED);
-        }
-        else {
-            this._buttonElement.classList.remove(BUTTON_TOGGLE_CONSTANTS.classes.SELECTED);
-        }
-        this._buttonElement.setAttribute('aria-pressed', value.toString());
-    }
-    addEventListener(type, listener) {
-        this._buttonElement.addEventListener(type, listener);
-    }
-    removeEventListener(type, listener) {
-        this._buttonElement.removeEventListener(type, listener);
+    initialize() {
+        this._component[setDefaultAria]({ role: 'button' }, { setAttribute: !this._component.hasAttribute('role') });
+        this._component[setDefaultAria]({
+            ariaPressed: `${!!this._component.selected}`,
+            ariaDisabled: `${!!this._component.disabled}`
+        });
+        this._component[isFocusable] = !this._component.disabled;
     }
-    initializeRipple() {
-        return new ForgeRipple(this._buttonElement);
+    setSelected(value) {
+        this._component[setDefaultAria]({ ariaPressed: `${!!value}` });
     }
     setDisabled(value) {
-        this._buttonElement.disabled = value;
-        if (value) {
-            this._buttonElement.setAttribute('aria-disabled', value.toString());
-        }
-        else {
-            this._buttonElement.removeAttribute('aria-disabled');
-        }
-    }
-    setDense(value) {
-        if (value) {
-            this._buttonElement.classList.add(BUTTON_TOGGLE_CONSTANTS.classes.DENSE);
-        }
-        else {
-            this._buttonElement.classList.remove(BUTTON_TOGGLE_CONSTANTS.classes.DENSE);
-        }
-    }
-    requestFocus() {
-        this._buttonElement.focus();
+        this._component[setDefaultAria]({ ariaDisabled: `${!!value}` });
+        this._component[isFocusable] = !value;
+        this._stateLayerElement.disabled = value;
     }
-    detectStretchState() {
-        if (this._component.hasAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.STRETCH)) {
-            return;
-        }
-        const buttonToggleGroup = this._component.parentElement;
-        if (buttonToggleGroup && buttonToggleGroup.hasAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.STRETCH) && buttonToggleGroup.stretch) {
-            this._component.setAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.STRETCH, '');
-        }
+    forceFocusVisible() {
+        this._focusIndicatorElement.active = true;
     }
 }

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

@@ -5,29 +5,25 @@
  */
 export declare const BUTTON_TOGGLE_CONSTANTS: {
     elementName: "forge-button-toggle";
-    attributes: {
-        VALUE: string;
+    observedAttributes: {
         SELECTED: string;
+        VALUE: string;
         DISABLED: string;
-        DENSE: string;
-        BUTTON_ARIA_LABEL: string;
-        SELECTED_ADJACENT: string;
-        SELECTED_ADJACENT_VERTICAL: string;
-        STRETCH: string;
-    };
-    classes: {
-        SELECTED: string;
-        DENSE: string;
+        READONLY: string;
+        TABINDEX: string;
     };
-    selectors: {
-        BUTTON: string;
+    attributes: {
         SELECTED: string;
+        VALUE: string;
+        DISABLED: string;
+        READONLY: string;
+        TABINDEX: string;
     };
     events: {
         SELECT: string;
     };
 };
-export interface IButtonToggleSelectEventData {
-    value: string;
+export interface IButtonToggleSelectEventData<T = unknown> {
+    value: T;
     selected: boolean;
 }

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

@@ -5,31 +5,20 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}button-toggle`;
-const attributes = {
-    VALUE: 'value',
+const observedAttributes = {
     SELECTED: 'selected',
+    VALUE: 'value',
     DISABLED: 'disabled',
-    DENSE: 'dense',
-    BUTTON_ARIA_LABEL: 'button-aria-label',
-    SELECTED_ADJACENT: 'selected-adjacent',
-    SELECTED_ADJACENT_VERTICAL: 'selected-adjacent-vertical',
-    STRETCH: 'stretch'
-};
-const classes = {
-    SELECTED: 'forge-button-toggle__selected',
-    DENSE: 'forge-button-toggle--dense'
-};
-const selectors = {
-    BUTTON: '.forge-button-toggle',
-    SELECTED: `.${classes.SELECTED}`
+    READONLY: 'readonly',
+    TABINDEX: 'tabindex' // Need this to support the focusable mixin
 };
+const attributes = Object.assign({}, observedAttributes);
 const events = {
     SELECT: `${elementName}-select`
 };
 export const BUTTON_TOGGLE_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
-    classes,
-    selectors,
     events
 };

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

@@ -4,34 +4,40 @@
  * License: Apache-2.0
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ExperimentalFocusOptions } from '../../constants';
 import { IButtonToggleAdapter } from './button-toggle-adapter';
 export interface IButtonToggleFoundation extends ICustomElementFoundation {
-    value: any;
+    value: unknown;
     selected: boolean;
     disabled: boolean;
-    dense: boolean;
-    setFocus(): void;
+    readonly: boolean;
+    destroy(): void;
+    focus(options?: ExperimentalFocusOptions): void;
+    click(): void;
 }
 export declare class ButtonToggleFoundation implements IButtonToggleFoundation {
     private _adapter;
     private _value;
     private _selected;
     private _disabled;
-    private _dense;
+    private _readonly;
     private _clickListener;
-    private _rippleInstance;
+    private _keydownListener;
     constructor(_adapter: IButtonToggleAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
+    focus(options?: ExperimentalFocusOptions): void;
+    click(): void;
+    private _applyListeners;
+    private _removeListeners;
     private _onClick;
-    private _updateSelectedState;
-    get value(): any;
-    set value(value: any);
+    private _onKeyDown;
+    get value(): unknown;
+    set value(value: unknown);
     get selected(): boolean;
     set selected(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get dense(): boolean;
-    set dense(value: boolean);
-    setFocus(): void;
+    get readonly(): boolean;
+    set readonly(value: boolean);
 }

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