@tylertech/forge 2.16.6 → 3.0.0-next.10

package/esm/stepper/stepper/stepper-constants.d.ts

@@ -73,5 +73,5 @@ export interface IStepperConfiguration {
     layoutAlign: StepperLayoutAlign;
     vertical?: boolean;
 }
-export declare type StepperLayoutMode = 'fixed' | 'clustered';
-export declare type StepperLayoutAlign = 'left' | 'center' | 'right';
+export type StepperLayoutMode = 'fixed' | 'clustered';
+export type StepperLayoutAlign = 'left' | 'center' | 'right';

package/esm/stepper/stepper/stepper-foundation.js

@@ -187,7 +187,6 @@ export class StepperFoundation {
     _renderConfiguration() {
         const steps = StepperUtils.createSteps({
             steps: this._steps,
-            vertical: this._vertical,
             selectedIndex: this._selectedIndex,
             alternative: this._alternative,
             layoutAlign: this._layoutAlign,

package/esm/stepper/stepper/stepper.js

@@ -18,11 +18,6 @@ const styles = '.forge-stepper{display:-webkit-box;display:flex;-webkit-box-alig
  * @tag forge-stepper
  */
 let StepperComponent = class StepperComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new StepperFoundation(new StepperAdapter(this));
-    }
     static get observedAttributes() {
         return [
             STEPPER_CONSTANTS.attributes.SELECTED_INDEX,
@@ -34,6 +29,11 @@ let StepperComponent = class StepperComponent extends BaseComponent {
             STEPPER_CONSTANTS.attributes.VERTICAL
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new StepperFoundation(new StepperAdapter(this));
+    }
     async connectedCallback() {
         await ensureChildren(this);
         this._foundation.initialize();

package/esm/switch/switch-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ISwitchComponent } from './switch';
-export declare type SwitchComponentDelegateProps = Partial<ISwitchComponent>;
+export type SwitchComponentDelegateProps = Partial<ISwitchComponent>;
 export interface ISwitchComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
     label?: string;

package/esm/switch/switch-constants.d.ts

@@ -23,4 +23,4 @@ export declare const SWITCH_CONSTANTS: {
         SELECT: string;
     };
 };
-export declare type SwitchLabelPosition = 'start' | 'end';
+export type SwitchLabelPosition = 'start' | 'end';

package/esm/switch/switch.js

@@ -10,8 +10,8 @@ import { MDCRipple } from '@material/ripple';
 import { SWITCH_CONSTANTS } from './switch-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-switch__container\" part=\"root\"><button id=\"switch-btn\" class=\"mdc-switch\" type=\"button\" role=\"switch\" aria-checked=\"false\" aria-labelledby=\"switch-label\" part=\"button\"><div class=\"mdc-switch__track\" part=\"track\"></div><div class=\"mdc-switch__handle-track\" part=\"handle-track\"><div class=\"mdc-switch__handle\" part=\"handle\"><div class=\"mdc-switch__shadow\" part=\"shadow\"><div class=\"mdc-elevation-overlay\" part=\"overlay\"></div></div><div class=\"mdc-switch__ripple\" part=\"ripple\"></div><div class=\"mdc-switch__icons\" part=\"icons\"><svg class=\"mdc-switch__icon mdc-switch__icon--on\" viewBox=\"0 0 24 24\" part=\"icon-on\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" part=\"icon-on-path\"/></svg> <svg class=\"mdc-switch__icon mdc-switch__icon--off\" viewBox=\"0 0 24 24\" part=\"icon-off\"><path d=\"M20 13H4v-2h16v2z\" part=\"icon-off-path\"/></svg></div></div></div></button> <label id=\"switch-label\" class=\"forge-switch__label\" for=\"switch-btn\" part=\"label\"><slot></slot></label></div></template>';
-const styles = '.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);-webkit-transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff)}.mdc-switch{-webkit-box-align:center;align-items:center;background:0 0;border:none;display:-webkit-inline-box;display:inline-flex;flex-shrink:0;margin:0;outline:0;overflow:visible;padding:0;position:relative}.mdc-switch__track{overflow:hidden;position:relative;width:100%}.mdc-switch__track::after,.mdc-switch__track::before{border:1px solid transparent;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;width:100%}.mdc-switch__track::before{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__track::after{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch__track[dir=rtl]::after,[dir=rtl] .mdc-switch__track::after{-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__track::before{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__track[dir=rtl]::before,[dir=rtl] .mdc-switch--selected .mdc-switch__track::before{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch--selected .mdc-switch__track::after{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__handle-track{height:100%;pointer-events:none;position:absolute;top:0;-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);left:0;right:auto;-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__handle-track[dir=rtl],[dir=rtl] .mdc-switch__handle-track{left:auto;right:0}.mdc-switch--selected .mdc-switch__handle-track{-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__handle-track[dir=rtl],[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch__handle{display:-webkit-box;display:flex;pointer-events:auto;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;right:auto}.mdc-switch__handle[dir=rtl],[dir=rtl] .mdc-switch__handle{left:auto;right:0}.mdc-switch__handle::after,.mdc-switch__handle::before{border:1px solid transparent;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;content:\"\";width:100%;height:100%;left:0;position:absolute;top:0;-webkit-transition:background-color 75ms 0s cubic-bezier(.4, 0, .2, 1),border-color 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:background-color 75ms 0s cubic-bezier(.4, 0, .2, 1),border-color 75ms 0s cubic-bezier(.4, 0, .2, 1);z-index:-1}.mdc-switch__shadow{border-radius:inherit;bottom:0;left:0;position:absolute;right:0;top:0}.mdc-elevation-overlay{bottom:0;left:0;right:0;top:0}.mdc-switch__ripple{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:-1}.mdc-switch:disabled .mdc-switch__ripple{display:none}.mdc-switch__icons{height:100%;position:relative;width:100%;z-index:1}.mdc-switch__icon{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;opacity:0;-webkit-transition:opacity 30ms 0s cubic-bezier(.4, 0, 1, 1);transition:opacity 30ms 0s cubic-bezier(.4, 0, 1, 1)}.mdc-switch--selected .mdc-switch__icon--on,.mdc-switch--unselected .mdc-switch__icon--off{opacity:1;-webkit-transition:opacity 45ms 30ms cubic-bezier(0, 0, .2, 1);transition:opacity 45ms 30ms cubic-bezier(0, 0, .2, 1)}.mdc-switch{--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}@-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-switch .mdc-switch__ripple::after,.mdc-switch .mdc-switch__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-switch .mdc-switch__ripple::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-switch .mdc-switch__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::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-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::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-switch .mdc-switch__ripple::after,.mdc-switch .mdc-switch__ripple::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after,.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::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-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-switch{width:36px;width:var(--mdc-switch-track-width,36px)}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after{background:#3d5afe;background:var(--mdc-switch-selected-handle-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-hover-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-focus-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-pressed-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after{background:#3d5afe;background:var(--mdc-switch-disabled-selected-handle-color,#3d5afe)}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after{background:#9e9e9e;background:var(--mdc-switch-unselected-handle-color,#9e9e9e)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-hover-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-focus-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-pressed-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after{background:#424242;background:var(--mdc-switch-disabled-unselected-handle-color,#424242)}.mdc-switch .mdc-switch__handle::before{background:#fff;background:var(--mdc-switch-handle-surface-color,var(--mdc-theme-surface,#fff))}.mdc-switch:enabled .mdc-switch__shadow{--mdc-elevation-box-shadow-for-gss:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--mdc-switch-handle-elevation,var(--mdc-elevation-box-shadow-for-gss));box-shadow:var(--mdc-switch-handle-elevation,var(--mdc-elevation-box-shadow-for-gss))}.mdc-switch:disabled .mdc-switch__shadow{--mdc-elevation-box-shadow-for-gss:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12);-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--mdc-switch-disabled-handle-elevation,var(--mdc-elevation-box-shadow-for-gss));box-shadow:var(--mdc-switch-disabled-handle-elevation,var(--mdc-elevation-box-shadow-for-gss))}.mdc-switch .mdc-switch__handle{height:20px;height:var(--mdc-switch-handle-height,20px)}.mdc-switch:disabled .mdc-switch__handle::after{opacity:.24;opacity:var(--mdc-switch-disabled-handle-opacity, .24)}.mdc-switch .mdc-switch__handle{border-radius:10px;border-radius:var(--mdc-switch-handle-shape,10px)}.mdc-switch .mdc-switch__handle{width:20px;width:var(--mdc-switch-handle-width,20px)}.mdc-switch .mdc-switch__handle-track{width:calc(100% - 20px);width:calc(100% - var(--mdc-switch-handle-width,20px))}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-selected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-disabled-selected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-unselected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:#ffffff;fill:var(--mdc-switch-disabled-unselected-icon-color,var(--mdc-theme-on-primary,#ffffff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:.54;opacity:var(--mdc-switch-disabled-selected-icon-opacity, .54)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:.54;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, .54)}.mdc-switch.mdc-switch--selected .mdc-switch__icon{width:18px;width:var(--mdc-switch-selected-icon-size,18px);height:18px;height:var(--mdc-switch-selected-icon-size,18px)}.mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:18px;width:var(--mdc-switch-unselected-icon-size,18px);height:18px;height:var(--mdc-switch-unselected-icon-size,18px)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-hover-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-focus-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-pressed-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-hover-state-layer-color,#424242)}.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-focus-state-layer-color,#424242)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-pressed-state-layer-color,#424242)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before{opacity:.04;opacity:var(--mdc-switch-selected-hover-state-layer-opacity, .04)}.mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-switch-selected-focus-state-layer-opacity, .12)}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.1;opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, .1)}.mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before{opacity:.04;opacity:var(--mdc-switch-unselected-hover-state-layer-opacity, .04)}.mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-switch-unselected-focus-state-layer-opacity, .12)}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.1;opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, .1)}.mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1)}.mdc-switch .mdc-switch__ripple{height:48px;height:var(--mdc-switch-state-layer-size,48px);width:48px;width:var(--mdc-switch-state-layer-size,48px)}.mdc-switch .mdc-switch__track{height:14px;height:var(--mdc-switch-track-height,14px)}.mdc-switch:disabled .mdc-switch__track{opacity:.12;opacity:var(--mdc-switch-disabled-track-opacity, .12)}.mdc-switch:enabled .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-track-color,#cfd6ff)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-hover-track-color,#cfd6ff)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-focus-track-color,#cfd6ff)}.mdc-switch:enabled:active .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-pressed-track-color,#cfd6ff)}.mdc-switch:disabled .mdc-switch__track::after{background:#3d5afe;background:var(--mdc-switch-disabled-selected-track-color,#3d5afe)}.mdc-switch:enabled .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-track-color,#e0e0e0)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-hover-track-color,#e0e0e0)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-focus-track-color,#e0e0e0)}.mdc-switch:enabled:active .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-pressed-track-color,#e0e0e0)}.mdc-switch:disabled .mdc-switch__track::before{background:#424242;background:var(--mdc-switch-disabled-unselected-track-color,#424242)}.mdc-switch .mdc-switch__track{border-radius:7px;border-radius:var(--mdc-switch-track-shape,7px)}@media screen and (forced-colors:active),(-ms-high-contrast:active){.mdc-switch:disabled .mdc-switch__handle::after{opacity:1;opacity:var(--mdc-switch-disabled-handle-opacity, 1)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-selected-icon-color,GrayText)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-unselected-icon-color,GrayText)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-selected-icon-opacity, 1)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, 1)}.mdc-switch:disabled .mdc-switch__track{opacity:1;opacity:var(--mdc-switch-disabled-track-opacity, 1)}}.forge-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;vertical-align:middle}.forge-form-field>label{-webkit-box-ordinal-group:1;order:0;margin-right:auto;padding-left:4px}.forge-form-field forge-switch~label{padding-left:8px}.forge-form-field--align-end>label{-webkit-box-ordinal-group:0;order:-1;margin-left:auto;padding-right:4px}.forge-switch__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-switch__container.forge-switch--label-position-start{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-flow:row-reverse}.forge-switch__container.forge-switch--label-position-start .forge-switch__label{margin-left:auto;padding-right:8px}:host{display:inline-block}:host *{cursor:pointer}:host .forge-switch__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);padding-left:8px}:host([hidden]){display:none}:host([dense]) .mdc-switch__ripple{height:28px;width:28px}:host([disabled]) *{cursor:not-allowed}:host([disabled]) .forge-switch__label{color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}';
-import { userInteractionListener } from '../core/utils';
+const styles = '.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);-webkit-transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);transition:opacity 280ms cubic-bezier(.4, 0, .2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff)}.mdc-switch{-webkit-box-align:center;align-items:center;background:0 0;border:none;display:-webkit-inline-box;display:inline-flex;flex-shrink:0;margin:0;outline:0;overflow:visible;padding:0;position:relative}.mdc-switch__track{overflow:hidden;position:relative;width:100%}.mdc-switch__track::after,.mdc-switch__track::before{border:1px solid transparent;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;width:100%}.mdc-switch__track::before{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__track::after{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch__track[dir=rtl]::after,[dir=rtl] .mdc-switch__track::after{-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__track::before{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .6, 1);-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__track[dir=rtl]::before,[dir=rtl] .mdc-switch--selected .mdc-switch__track::before{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch--selected .mdc-switch__track::after{-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__handle-track{height:100%;pointer-events:none;position:absolute;top:0;-webkit-transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:transform 75ms 0s cubic-bezier(.4, 0, .2, 1),-webkit-transform 75ms 0s cubic-bezier(.4, 0, .2, 1);left:0;right:auto;-webkit-transform:translateX(0);transform:translateX(0)}.mdc-switch__handle-track[dir=rtl],[dir=rtl] .mdc-switch__handle-track{left:auto;right:0}.mdc-switch--selected .mdc-switch__handle-track{-webkit-transform:translateX(100%);transform:translateX(100%)}.mdc-switch--selected .mdc-switch__handle-track[dir=rtl],[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mdc-switch__handle{display:-webkit-box;display:flex;pointer-events:auto;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;right:auto}.mdc-switch__handle[dir=rtl],[dir=rtl] .mdc-switch__handle{left:auto;right:0}.mdc-switch__handle::after,.mdc-switch__handle::before{border:1px solid transparent;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;content:\"\";width:100%;height:100%;left:0;position:absolute;top:0;-webkit-transition:background-color 75ms 0s cubic-bezier(.4, 0, .2, 1),border-color 75ms 0s cubic-bezier(.4, 0, .2, 1);transition:background-color 75ms 0s cubic-bezier(.4, 0, .2, 1),border-color 75ms 0s cubic-bezier(.4, 0, .2, 1);z-index:-1}.mdc-switch__shadow{border-radius:inherit;bottom:0;left:0;position:absolute;right:0;top:0}.mdc-elevation-overlay{bottom:0;left:0;right:0;top:0}.mdc-switch__ripple{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:-1}.mdc-switch:disabled .mdc-switch__ripple{display:none}.mdc-switch__icons{height:100%;position:relative;width:100%;z-index:1}.mdc-switch__icon{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;opacity:0;-webkit-transition:opacity 30ms 0s cubic-bezier(.4, 0, 1, 1);transition:opacity 30ms 0s cubic-bezier(.4, 0, 1, 1)}.mdc-switch--selected .mdc-switch__icon--on,.mdc-switch--unselected .mdc-switch__icon--off{opacity:1;-webkit-transition:opacity 45ms 30ms cubic-bezier(0, 0, .2, 1);transition:opacity 45ms 30ms cubic-bezier(0, 0, .2, 1)}.mdc-switch{--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}@-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-switch .mdc-switch__ripple::after,.mdc-switch .mdc-switch__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-switch .mdc-switch__ripple::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-switch .mdc-switch__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::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-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::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-switch .mdc-switch__ripple::after,.mdc-switch .mdc-switch__ripple::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after,.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::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-switch.mdc-ripple-upgraded .mdc-switch__ripple::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-switch{width:36px;width:var(--mdc-switch-track-width,36px)}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after{background:#3d5afe;background:var(--mdc-switch-selected-handle-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-hover-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-focus-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after{background:#3d477f;background:var(--mdc-switch-selected-pressed-handle-color,#3d477f)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after{background:#3d5afe;background:var(--mdc-switch-disabled-selected-handle-color,#3d5afe)}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after{background:#9e9e9e;background:var(--mdc-switch-unselected-handle-color,#9e9e9e)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-hover-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-focus-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after{background:#212121;background:var(--mdc-switch-unselected-pressed-handle-color,#212121)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after{background:#424242;background:var(--mdc-switch-disabled-unselected-handle-color,#424242)}.mdc-switch .mdc-switch__handle::before{background:#fff;background:var(--mdc-switch-handle-surface-color,var(--mdc-theme-surface,#fff))}.mdc-switch:enabled .mdc-switch__shadow{--mdc-elevation-box-shadow-for-gss:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--mdc-switch-handle-elevation,var(--mdc-elevation-box-shadow-for-gss));box-shadow:var(--mdc-switch-handle-elevation,var(--mdc-elevation-box-shadow-for-gss))}.mdc-switch:disabled .mdc-switch__shadow{--mdc-elevation-box-shadow-for-gss:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12);-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--mdc-switch-disabled-handle-elevation,var(--mdc-elevation-box-shadow-for-gss));box-shadow:var(--mdc-switch-disabled-handle-elevation,var(--mdc-elevation-box-shadow-for-gss))}.mdc-switch .mdc-switch__handle{height:20px;height:var(--mdc-switch-handle-height,20px)}.mdc-switch:disabled .mdc-switch__handle::after{opacity:.24;opacity:var(--mdc-switch-disabled-handle-opacity, .24)}.mdc-switch .mdc-switch__handle{border-radius:10px;border-radius:var(--mdc-switch-handle-shape,10px)}.mdc-switch .mdc-switch__handle{width:20px;width:var(--mdc-switch-handle-width,20px)}.mdc-switch .mdc-switch__handle-track{width:calc(100% - 20px);width:calc(100% - var(--mdc-switch-handle-width,20px))}.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-selected-icon-color,var(--mdc-theme-on-primary,#fff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-disabled-selected-icon-color,var(--mdc-theme-on-primary,#fff))}.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-unselected-icon-color,var(--mdc-theme-on-primary,#fff))}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:#fff;fill:var(--mdc-switch-disabled-unselected-icon-color,var(--mdc-theme-on-primary,#fff))}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:.54;opacity:var(--mdc-switch-disabled-selected-icon-opacity, .54)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:.54;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, .54)}.mdc-switch.mdc-switch--selected .mdc-switch__icon{width:18px;width:var(--mdc-switch-selected-icon-size,18px);height:18px;height:var(--mdc-switch-selected-icon-size,18px)}.mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:18px;width:var(--mdc-switch-unselected-icon-size,18px);height:18px;height:var(--mdc-switch-unselected-icon-size,18px)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-hover-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-focus-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after,.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before{background-color:#3d5afe;background-color:var(--mdc-switch-selected-pressed-state-layer-color,#3d5afe)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-hover-state-layer-color,#424242)}.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-focus-state-layer-color,#424242)}.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after,.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before{background-color:#424242;background-color:var(--mdc-switch-unselected-pressed-state-layer-color,#424242)}.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before{opacity:.04;opacity:var(--mdc-switch-selected-hover-state-layer-opacity, .04)}.mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-switch-selected-focus-state-layer-opacity, .12)}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.1;opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, .1)}.mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1)}.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before{opacity:.04;opacity:var(--mdc-switch-unselected-hover-state-layer-opacity, .04)}.mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before,.mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-switch-unselected-focus-state-layer-opacity, .12)}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.1;opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, .1)}.mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1)}.mdc-switch .mdc-switch__ripple{height:48px;height:var(--mdc-switch-state-layer-size,48px);width:48px;width:var(--mdc-switch-state-layer-size,48px)}.mdc-switch .mdc-switch__track{height:14px;height:var(--mdc-switch-track-height,14px)}.mdc-switch:disabled .mdc-switch__track{opacity:.12;opacity:var(--mdc-switch-disabled-track-opacity, .12)}.mdc-switch:enabled .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-track-color,#cfd6ff)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-hover-track-color,#cfd6ff)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-focus-track-color,#cfd6ff)}.mdc-switch:enabled:active .mdc-switch__track::after{background:#cfd6ff;background:var(--mdc-switch-selected-pressed-track-color,#cfd6ff)}.mdc-switch:disabled .mdc-switch__track::after{background:#3d5afe;background:var(--mdc-switch-disabled-selected-track-color,#3d5afe)}.mdc-switch:enabled .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-track-color,#e0e0e0)}.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-hover-track-color,#e0e0e0)}.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-focus-track-color,#e0e0e0)}.mdc-switch:enabled:active .mdc-switch__track::before{background:#e0e0e0;background:var(--mdc-switch-unselected-pressed-track-color,#e0e0e0)}.mdc-switch:disabled .mdc-switch__track::before{background:#424242;background:var(--mdc-switch-disabled-unselected-track-color,#424242)}.mdc-switch .mdc-switch__track{border-radius:7px;border-radius:var(--mdc-switch-track-shape,7px)}@media screen and (forced-colors:active),(-ms-high-contrast:active){.mdc-switch:disabled .mdc-switch__handle::after{opacity:1;opacity:var(--mdc-switch-disabled-handle-opacity, 1)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-selected-icon-color,GrayText)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon{fill:GrayText;fill:var(--mdc-switch-disabled-unselected-icon-color,GrayText)}.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-selected-icon-opacity, 1)}.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons{opacity:1;opacity:var(--mdc-switch-disabled-unselected-icon-opacity, 1)}.mdc-switch:disabled .mdc-switch__track{opacity:1;opacity:var(--mdc-switch-disabled-track-opacity, 1)}}.forge-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;vertical-align:middle}.forge-form-field>label{-webkit-box-ordinal-group:1;order:0;margin-right:auto;padding-left:4px}.forge-form-field forge-switch~label{padding-left:8px}.forge-form-field--align-end>label{-webkit-box-ordinal-group:0;order:-1;margin-left:auto;padding-right:4px}.forge-switch__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-switch__container.forge-switch--label-position-start{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-flow:row-reverse}.forge-switch__container.forge-switch--label-position-start .forge-switch__label{margin-left:auto;padding-right:8px}:host{display:inline-block}:host *{cursor:pointer}:host .forge-switch__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);padding-left:8px}:host([hidden]){display:none}:host([dense]) .mdc-switch__ripple{height:28px;width:28px}:host([disabled]) *{cursor:not-allowed}:host([disabled]) .forge-switch__label{color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}';
+import { createUserInteractionListener } from '../core/utils';
 class ForgeMDCSwitch extends MDCSwitch {
     initialize() {
         // Do not call super.initialize()
@@ -25,9 +25,16 @@ class ForgeMDCSwitch extends MDCSwitch {
         this.foundation.destroy();
         (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.destroy();
         this.root.removeEventListener('click', this.foundation.handleClick);
+        if (typeof this._destroyUserInteractionListener === 'function') {
+            this._destroyUserInteractionListener();
+            this._destroyUserInteractionListener = undefined;
+        }
     }
     async _deferRippleInitialization() {
-        const type = await userInteractionListener(this.root);
+        const { userInteraction, destroy } = createUserInteractionListener(this.root);
+        this._destroyUserInteractionListener = destroy;
+        const { type } = await userInteraction;
+        this._destroyUserInteractionListener = undefined;
         this.ripple = new MDCRipple(this.root, this.createRippleFoundation());
         if (type === 'focusin') {
             // eslint-disable-next-line @typescript-eslint/dot-notation
@@ -41,15 +48,6 @@ class ForgeMDCSwitch extends MDCSwitch {
  * @tag forge-switch
  */
 let SwitchComponent = class SwitchComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._dense = false;
-        this._disabled = false;
-        this._selected = false;
-        this._labelPosition = 'end';
-        attachShadowTemplate(this, template, styles);
-        this._initialize();
-    }
     static get observedAttributes() {
         return [
             SWITCH_CONSTANTS.attributes.DENSE,
@@ -59,6 +57,15 @@ let SwitchComponent = class SwitchComponent extends BaseComponent {
             SWITCH_CONSTANTS.attributes.BUTTON_ARIA_LABEL
         ];
     }
+    constructor() {
+        super();
+        this._dense = false;
+        this._disabled = false;
+        this._selected = false;
+        this._labelPosition = 'end';
+        attachShadowTemplate(this, template, styles);
+        this._initialize();
+    }
     _initialize() {
         this._buttonElement = getShadowElement(this, SWITCH_CONSTANTS.selectors.BUTTON);
         this._containerElement = getShadowElement(this, SWITCH_CONSTANTS.selectors.CONTAINER);

package/esm/table/table.js

@@ -20,11 +20,6 @@ import { CellAlign } from './types';
  * @tag forge-table
  */
 let TableComponent = class TableComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define(tylIconArrowDownward);
-        this._foundation = new TableFoundation(new TableAdapter(this));
-    }
     static get observedAttributes() {
         return [
             TABLE_CONSTANTS.attributes.SELECT,
@@ -45,6 +40,11 @@ let TableComponent = class TableComponent extends BaseComponent {
             TABLE_CONSTANTS.attributes.TOOLTIP_SELECT_ALL
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define(tylIconArrowDownward);
+        this._foundation = new TableFoundation(new TableAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

package/esm/table/types.d.ts

@@ -90,7 +90,7 @@ export interface ITableSortEventData {
     direction: SortDirection;
     columnIndex: number;
 }
-export declare type ITableSortMultipleEventData = ITableSortedMultipleEventDataItem[];
+export type ITableSortMultipleEventData = ITableSortedMultipleEventDataItem[];
 export interface ITableSortedMultipleEventDataItem extends ISortedItem {
 }
 export interface ITableColumnResizeEventData {
@@ -139,9 +139,9 @@ export declare enum TableFilterType {
     Date = "date",
     DateRange = "date-range"
 }
-export declare type TableFilterListener<T = any> = (value: T, columnIndex: number) => void;
-export declare type TableFilterDelegateFactory<T extends HTMLElement = any> = () => IFormFieldComponentDelegate<T> | IBaseComponentDelegate<HTMLElement>;
-export declare type TableLayoutType = 'auto' | 'fixed';
+export type TableFilterListener<T = any> = (value: T, columnIndex: number) => void;
+export type TableFilterDelegateFactory<T extends HTMLElement = any> = () => IFormFieldComponentDelegate<T> | IBaseComponentDelegate<HTMLElement>;
+export type TableLayoutType = 'auto' | 'fixed';
 export interface ITableFilterEventData<T = any> {
     value: T;
     columnIndex: number;

package/esm/tabs/tab/tab-adapter.d.ts

@@ -3,52 +3,26 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IBaseAdapter, BaseAdapter } from '../../core/base/base-adapter';
-import { ITabComponent } from './tab';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import type { ITabComponent } from './tab';
 export interface ITabAdapter extends IBaseAdapter {
     initialize(): void;
-    initializeIndicator(): void;
-    destroyIndicator(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    activateIndicator(previousIndicatorClientRect?: DOMRect): void;
-    deactivateIndicator(): void;
-    initializeRipple(): void;
-    destroyRipple(): void;
-    addButtonListener(type: string, listener: (evt: Event) => void): void;
-    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    addInteractionListener(type: string, listener: EventListener): void;
     setDisabled(value: boolean): void;
-    setActive(value: boolean): void;
-    getOffsetLeft(): number;
-    getOffsetWidth(): number;
-    getContentOffsetLeft(): number;
-    getContentOffsetWidth(): number;
-    focus(): void;
-    setTabIndex(value: number): void;
+    setSelected(value: boolean): void;
+    animateSelected(): void;
+    animateStateLayer(): void;
 }
 export declare class TabAdapter extends BaseAdapter<ITabComponent> implements ITabAdapter {
-    private _buttonElement;
-    private _content;
-    private _rippleElement;
-    private _rippleInstance;
-    private _tabIndicatorElement;
-    private _tabIndicator;
+    private readonly _tabIndicatorElement;
+    private readonly _stateLayerElement;
     constructor(component: ITabComponent);
     initialize(): void;
-    initializeRipple(): void;
-    destroyRipple(): void;
-    initializeIndicator(): void;
-    destroyIndicator(): void;
-    activateIndicator(previousIndicatorClientRect?: DOMRect): void;
-    deactivateIndicator(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    addButtonListener(type: string, listener: (evt: Event) => void): void;
-    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    addInteractionListener(type: string, listener: EventListener): void;
     setDisabled(value: boolean): void;
-    setActive(value: boolean): void;
-    getOffsetLeft(): number;
-    getOffsetWidth(): number;
-    getContentOffsetLeft(): number;
-    getContentOffsetWidth(): number;
-    focus(): void;
-    setTabIndex(value: number): void;
+    setSelected(value: boolean): void;
+    animateSelected(): void;
+    animateStateLayer(): void;
+    private _getKeyframes;
+    private _getSelectedTabIndicator;
 }

package/esm/tabs/tab/tab-adapter.js

@@ -3,101 +3,79 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleClass } from '@tylertech/forge-core';
-import { MDCTabIndicator } from '@material/tab-indicator';
+import { getShadowElement, requireParent, toggleAttribute } from '@tylertech/forge-core';
+import { STATE_LAYER_CONSTANTS } from '../../state-layer';
 import { BaseAdapter } from '../../core/base/base-adapter';
+import { TAB_BAR_CONSTANTS } from '../tab-bar/tab-bar-constants';
 import { TAB_CONSTANTS } from './tab-constants';
-import { ForgeRipple, ForgeRippleFoundation } from '../../ripple';
-class TabRippleSurface {
-    constructor(_root) {
-        this._root = _root;
-    }
-    get root() {
-        return this._root;
-    }
-    get unbounded() {
-        return false;
-    }
-    get disabled() {
-        return this._root.disabled;
-    }
-}
 export class TabAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._buttonElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.BUTTON);
-        this._content = getShadowElement(this._component, TAB_CONSTANTS.selectors.CONTENT);
-        this._rippleElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.RIPPLE);
         this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
+        this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
     }
     initialize() {
+        this._component.tabIndex = this._component.selected ? 0 : -1;
         this._component.setAttribute('role', 'tab');
+        this._component.setAttribute('aria-selected', this._component.selected ? 'true' : 'false');
     }
-    initializeRipple() {
-        const rippleCapableSurface = new TabRippleSurface(this._buttonElement);
-        const rippleAdapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(rippleCapableSurface)), { addClass: (className) => this._rippleElement.classList.add(className), removeClass: (className) => this._rippleElement.classList.remove(className), updateCssVariable: (varName, value) => this._rippleElement.style.setProperty(varName, value) });
-        const rippleFoundation = new ForgeRippleFoundation(rippleAdapter);
-        this._rippleInstance = new ForgeRipple(this._buttonElement, rippleFoundation);
+    addInteractionListener(type, listener) {
+        this._component.addEventListener(type, listener);
     }
-    destroyRipple() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
+    setDisabled(value) {
+        this._stateLayerElement.disabled = value;
+        this._component.tabIndex = value ? -1 : this._component.selected ? 0 : -1;
+        this._component.setAttribute('aria-disabled', String(value));
+        toggleAttribute(this._component, value, TAB_CONSTANTS.attributes.DISABLED, String(value));
+    }
+    setSelected(value) {
+        this._component.tabIndex = value ? 0 : -1;
+        this._component.setAttribute('aria-selected', String(value));
+    }
+    animateSelected() {
+        this._tabIndicatorElement.getAnimations().forEach(a => a.cancel());
+        const frames = this._getKeyframes();
+        if (frames) {
+            this._tabIndicatorElement.animate(frames, { duration: TAB_CONSTANTS.numbers.ANIMATION_DURATION, easing: TAB_CONSTANTS.strings.EASING });
         }
     }
-    initializeIndicator() {
-        this._tabIndicator = new MDCTabIndicator(this._tabIndicatorElement);
+    animateStateLayer() {
+        this._stateLayerElement.playAnimation();
     }
-    destroyIndicator() {
-        if (this._tabIndicator) {
-            this._tabIndicator.destroy();
-            this._tabIndicator = undefined;
+    _getKeyframes() {
+        var _a;
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!this._component.selected) {
+            return reduceMotion ? [{ opacity: 1 }, { transform: 'none' }] : null;
         }
-    }
-    activateIndicator(previousIndicatorClientRect) {
-        if (this._tabIndicator) {
-            this._tabIndicator.activate(previousIndicatorClientRect);
+        const from = {};
+        const isVertical = this._component.vertical;
+        const selectedTabIndicator = this._getSelectedTabIndicator();
+        const fromRect = (_a = selectedTabIndicator === null || selectedTabIndicator === void 0 ? void 0 : selectedTabIndicator.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+        const fromPos = isVertical ? fromRect.top : fromRect.left;
+        const fromExtent = isVertical ? fromRect.height : fromRect.width;
+        const toRect = this._tabIndicatorElement.getBoundingClientRect();
+        const toPos = isVertical ? toRect.top : toRect.left;
+        const toExtent = isVertical ? toRect.height : toRect.width;
+        const axis = isVertical ? 'Y' : 'X';
+        const scale = fromExtent / toExtent;
+        if (!reduceMotion && fromPos !== undefined && toPos !== undefined && !isNaN(scale)) {
+            from.transform = `translate${axis}(${(fromPos - toPos).toFixed(4)}px) scale${axis}(${scale.toFixed(4)})`;
         }
-    }
-    deactivateIndicator() {
-        if (this._tabIndicator) {
-            this._tabIndicator.deactivate();
+        else {
+            from.opacity = 0;
         }
-    }
-    computeIndicatorBounds() {
-        return this._tabIndicator ? this._tabIndicator.computeContentClientRect() : undefined;
-    }
-    addButtonListener(type, listener) {
-        this._buttonElement.addEventListener(type, listener);
-    }
-    removeButtonListener(type, listener) {
-        this._buttonElement.removeEventListener(type, listener);
-    }
-    setDisabled(value) {
-        this._buttonElement.disabled = value;
-        this.setTabIndex(!value ? 0 : -1);
-        this._component.setAttribute('aria-disabled', value.toString());
-    }
-    setActive(value) {
-        toggleClass(this._buttonElement, value, TAB_CONSTANTS.classes.ACTIVE);
-        this.setTabIndex(value ? 0 : -1);
-        this._component.setAttribute('aria-selected', value.toString());
-    }
-    getOffsetLeft() {
-        return this._buttonElement.offsetLeft;
-    }
-    getOffsetWidth() {
-        return this._buttonElement.offsetWidth;
-    }
-    getContentOffsetLeft() {
-        return this._content.offsetLeft;
-    }
-    getContentOffsetWidth() {
-        return this._content.offsetWidth;
-    }
-    focus() {
-        this._buttonElement.focus();
-    }
-    setTabIndex(value) {
-        this._buttonElement.tabIndex = value;
+        return [from, { transform: 'none' }];
+    }
+    _getSelectedTabIndicator() {
+        const tabsEl = requireParent(this._component, TAB_BAR_CONSTANTS.elementName);
+        if (tabsEl) {
+            const tabChildren = Array.from(tabsEl.querySelectorAll(TAB_CONSTANTS.elementName));
+            const selectedTab = tabChildren.find(tab => tab.hasAttribute(TAB_CONSTANTS.attributes.SELECTED));
+            if (selectedTab) {
+                return getShadowElement(selectedTab, TAB_CONSTANTS.selectors.INDICATOR);
+            }
+        }
+        return null;
     }
 }

package/esm/tabs/tab/tab-constants.d.ts

@@ -7,26 +7,25 @@ export declare const TAB_CONSTANTS: {
     elementName: "forge-tab";
     attributes: {
         DISABLED: string;
-        ACTIVE: string;
-        STRETCH: string;
+        SELECTED: string;
+        VERTICAL: string;
+        STACKED: string;
+        SECONDARY: string;
+        INVERTED: string;
     };
     selectors: {
-        BUTTON: string;
-        RIPPLE: string;
         INDICATOR: string;
-        CONTENT: string;
-        DEFAULT_SLOT: string;
     };
     classes: {
-        ACTIVE: string;
+        SELECTED: string;
     };
     events: {
-        INTERACTED: string;
+        SELECT: string;
+    };
+    strings: {
+        EASING: string;
+    };
+    numbers: {
+        ANIMATION_DURATION: number;
     };
 };
-export interface ITabDimensions {
-    rootLeft: number;
-    rootRight: number;
-    contentLeft: number;
-    contentRight: number;
-}

package/esm/tabs/tab/tab-constants.js

@@ -7,26 +7,33 @@ import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}tab`;
 const attributes = {
     DISABLED: 'disabled',
-    ACTIVE: 'active',
-    STRETCH: 'stretch'
+    SELECTED: 'selected',
+    VERTICAL: 'vertical',
+    STACKED: 'stacked',
+    SECONDARY: 'secondary',
+    INVERTED: 'inverted'
 };
 const selectors = {
-    BUTTON: 'button.forge-tab',
-    RIPPLE: '.forge-tab__ripple',
-    INDICATOR: '.mdc-tab-indicator',
-    CONTENT: '.forge-tab__content',
-    DEFAULT_SLOT: 'slot:not([name])'
+    INDICATOR: '.indicator'
 };
 const classes = {
-    ACTIVE: 'forge-tab--active'
+    SELECTED: 'selected'
 };
 const events = {
-    INTERACTED: `${elementName}-interacted`
+    SELECT: `${elementName}-select`
+};
+const strings = {
+    EASING: 'cubic-bezier(0.4, 0, 0.2, 1)'
+};
+const numbers = {
+    ANIMATION_DURATION: 250
 };
 export const TAB_CONSTANTS = {
     elementName,
     attributes,
     selectors,
     classes,
-    events
+    events,
+    strings,
+    numbers
 };

package/esm/tabs/tab/tab-foundation.d.ts

@@ -5,39 +5,39 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { ITabAdapter } from './tab-adapter';
-import { ITabDimensions } from './tab-constants';
 export interface ITabFoundation extends ICustomElementFoundation {
     disabled: boolean;
-    active: boolean;
-    stretch: boolean;
-    activate(previousIndicatorClientRect?: DOMRect): void;
-    deactivate(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    computeDimensions(): ITabDimensions;
-    focus(): void;
-    setTabIndex(value: number): void;
+    selected: boolean;
+    vertical: boolean;
+    stacked: boolean;
+    secondary: boolean;
+    inverted: boolean;
 }
 export declare class TabFoundation implements ITabFoundation {
     private _adapter;
+    private _selected;
     private _disabled;
-    private _active;
-    private _stretch;
+    private _vertical;
+    private _stacked;
+    private _secondary;
+    private _inverted;
     private _clickListener;
+    private _keydownListener;
     constructor(_adapter: ITabAdapter);
     initialize(): void;
-    disconnect(): void;
     private _onClick;
-    private _setActive;
-    activate(previousIndicatorClientRect?: DOMRect): void;
-    deactivate(): void;
-    computeIndicatorBounds(): DOMRect | undefined;
-    computeDimensions(): ITabDimensions;
-    focus(): void;
-    setTabIndex(value: number): void;
+    private _onKeydown;
+    private _dispatchSelectEvent;
     get disabled(): boolean;
     set disabled(value: boolean);
-    get active(): boolean;
-    set active(value: boolean);
-    get stretch(): boolean;
-    set stretch(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    get stacked(): boolean;
+    set stacked(value: boolean);
+    get secondary(): boolean;
+    set secondary(value: boolean);
+    get inverted(): boolean;
+    set inverted(value: boolean);
 }