@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/esm/switch/switch.js

@@ -4,190 +4,303 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, coerceBoolean, getShadowElement, emitEvent, toggleAttribute, toggleClass } from '@tylertech/forge-core';
-import { MDCSwitch } from '@material/switch';
-import { MDCRipple } from '@material/ripple';
+import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, isDefined, isString, toggleAttribute } from '@tylertech/forge-core';
+import { BaseNullableFormComponent } from '../core/base/base-nullable-form-component';
+import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
+import { StateLayerComponent } from '../state-layer/state-layer';
+import { SwitchAdapter } from './switch-adapter';
 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:#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()
-        // We defer instantiation of the ripple until first user interaction
-        this._deferRippleInitialization();
-    }
-    destroy() {
-        var _a;
-        // We are not calling super.destroy() because it expects `ripple` to be set when it might not be yet
-        // We instead just replicate all existing functionality, but allow for `ripple` to be undefined
-        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 { 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
-            this.ripple['foundation'].handleFocus();
-        }
-    }
-}
+import { SwitchFoundation } from './switch-foundation';
+import { internals } from '../constants';
+const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\"></slot><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"container\" exportparts=\"indicator:focus-indicator\"></forge-focus-indicator></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
+const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 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));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-handle-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, space-between);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-state-layer-state-layer-off-color, var(--_state-layer-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_switch-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_switch-justify);justify-content:var(--_switch-justify);gap:var(--_switch-gap);display:-webkit-box;display:flex;--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);-webkit-transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);-webkit-box-shadow:var(--_switch-handle-off-elevation);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);-webkit-box-shadow:var(--_switch-handle-on-elevation);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);-webkit-box-shadow:var(--_switch-handle-active-off-elevation);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);-webkit-box-shadow:var(--_switch-handle-active-on-elevation);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch{opacity:var(--_switch-disabled-opacity)}:host([disabled]) .forge-switch .container{cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{-webkit-box-shadow:none;box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
 /**
- * The custom element class behind the `<forge-switch>` element.
- *
  * @tag forge-switch
+ *
+ * @summary Switches toggle the state of a single setting on or off.
+ *
+ * @description
+ * Use switches to:
+ * - Toggle a single item on or off, on mobile and tablet
+ * - Immediately activate or deactivate something
+ *
+ * @property {boolean} on - Whether the switch is on the on or off state.
+ * @property {boolean} selected - Deprecated. Alias for `on`.
+ * @property {boolean} defaultOn - Whether the switch is on or off by default.
+ * @property {string} value - The value of the switch.
+ * @property {boolean} dense - The density state.
+ * @property {boolean} disabled - Controls if the switch is disabled.
+ * @property {boolean} required = Controls if the switch is required.
+ * @property {boolean} readonly - Controls if the switch is readonly.
+ * @property {SwitchIconVisibility} icon - Controls the presence of the off and on icons.
+ * @property {SwitchLabelPosition} labelPosition - Whether the label appears before or after the switch.
+ *
+ * @attribute {string} on - Controls whether the switch is in the on or off state.
+ * @attribute {string} selected - Deprecated. Alias for `on`.
+ * @attribute {string} default-on - Controls whether the switch is in the on or off state by default.
+ * @attribute {string} value - The value of the switch.
+ * @attribute {string} dense - Sets the density state.
+ * @attribute {string} disabled - Controls if the switch is disabled.
+ * @attribute {string} required - Controls if the switch is required.
+ * @attribute {string} readonly - Controls if the switch is readonly.
+ * @attribute {string} icon - Controls the presence of the off and on icons.
+ * @attribute {string} label-position - Sets whether the label appears before or after the switch.
+ *
+ * @method {(force?: boolean) => void} toggle - Toggles whether the switch is selected or forces a selected state.
+ *
+ * @event {CustomEvent} forge-switch-change - Dispatches when the switch's value changes.
+ *
+ * @cssproperty --forge-theme-primary - The primary color of the switch.
+ * @cssproperty --forge-theme-on-primary - The color of elements placed on top of the primary color (the handle icons for example).
+ * @cssproperty --forge-switch-handle-on-color - The color of the handle in the switch's on state.
+ * @cssproperty --forge-switch-handle-off-color - The color of the handle in the switch's off state.
+ * @cssproperty --forge-switch-handle-active-on-color - The color of the handle when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-handle-active-off-color - The color of the handle when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-handle-size - The inline and block size of the handle.
+ * @cssproperty --forge-switch-handle-width - The inline size of the handle.
+ * @cssproperty --forge-switch-handle-height - The block size of the handle.
+ * @cssproperty --forge-switch-handle-scale - The scale transformation applied to the handle.
+ * @cssproperty --forge-switch-handle-on-scale - The scale transformation applied to the handle in the switch's on state.
+ * @cssproperty --forge-switch-handle-off-scale - The scale transformation applied to the handle in the switch's off state.
+ * @cssproperty --forge-switch-handle-active-scale - The scale transformation applied to the handle when the switch is active (pressed).
+ * @cssproperty --forge-switch-handle-active-on-scale - The scale transformation applied to the handle when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-handle-active-off-scale - The scale transformation applied to the handle when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-handle-shape - The shape of the handle.
+ * @cssproperty --forge-switch-handle-elevation - The handle's shadow.
+ * @cssproperty --forge-switch-handle-on-elevation - The handle's shadow in the switch's on state.
+ * @cssproperty --forge-switch-handle-off-elevation - The handle's shadow in the switch's off state.
+ * @cssproperty --forge-switch-handle-active-elevation - The handle's shadow when the switch is active (pressed).
+ * @cssproperty --forge-switch-handle-active-on-elevation - The handle's shadow when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-handle-active-off-elevation - The handle's shadow when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-track-on-color - The color of the track in the switch's on state.
+ * @cssproperty --forge-switch-track-off-color - The color fo the track in the switch's off state.
+ * @cssproperty --forge-switch-track-active-on-color - The color of the track when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-track-active-off-color - The color fo the track when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-track-width - The inline size of the track.
+ * @cssproperty --forge-switch-track-height - The block size of the track.
+ * @cssproperty --forge-switch-track-shape - The shape of the track.
+ * @cssproperty --forge-switch-track-border-width - The width of the track border.
+ * @cssproperty --forge-switch-track-on-border-width - The width of the track border in the switch's on state.
+ * @cssproperty --forge-switch-track-off-border-width - The width of the track border in the switch's off state.
+ * @cssproperty --forge-switch-track-active-on-border-width - The width of the track border when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-track-active-off-border-width - The width of the track border when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-track-border-color - The color of the track border.
+ * @cssproperty --forge-switch-track-on-border-color - The color of the track border in the switch's on state.
+ * @cssproperty --forge-switch-track-off-border-color - The color of the track border in the switch's off state.
+ * @cssproperty --forge-switch-track-active-on-border-color - The color of the track border when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-track-active-off-border-color - The color of the track border when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-icon-color - The color of the handle icons.
+ * @cssproperty --forge-switch-icon-on-color - The color of the handle icon in the switch's on state.
+ * @cssproperty --forge-switch-icon-off-color - The color of the handle icon in the switch's off state.
+ * @cssproperty --forge-switch-icon-active-on-color - The color of the handle icon when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-icon-active-off-color - The color of the handle icon when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-icon-size - The size of the handle icon.
+ * @cssproperty --forge-switch-icon-on-size - The size of the handle icon in the switch's on state.
+ * @cssproperty --forge-switch-icon-off-size - The size of the handle icon in the switch's off state.
+ * @cssproperty --forge-switch-icon-scale - The scale transformation applied to the handle icons.
+ * @cssproperty --forge-switch-icon-on-scale - The scale transformation applied to the handle icons in the switch's on state.
+ * @cssproperty --forge-switch-icon-off-scale - The scale transformation applied to the handle icons in the switch's off state.
+ * @cssproperty --forge-switch-icon-active-on-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-icon-active-off-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-gap - The space between the switch and label.
+ * @cssproperty --forge-switch-justify - How the switch and label are distributed along their main axis.
+ * @cssproperty --forge-switch-direction - Whether the switch and label are arranged along the inline or block axis.
+ * @cssproperty --forge-switch-state-layer-size - The inline and block size of the handle's state layer.
+ * @cssproperty --forge-switch-state-layer-width - The inline size of the handle's state layer.
+ * @cssproperty --forge-switch-state-layer-height - The block size of the handle's state layer.
+ * @cssproperty --forge-switch-state-layer-on-color - The color of the handle's state layer when the switch is in its on state.
+ * @cssproperty --forge-switch-state-layer-off-color - The color of the handle's state layer when the switch is in its off state.
+ * @cssproperty --forge-switch-state-layer-dense-size - The inline and block size of the handle's state layer when the dense switch is used.
+ * @cssproperty --forge-switch-state-layer-dense-width - The inline size of the handle's state layer when the dense switch is used.
+ * @cssproperty --forge-switch-state-layer-dense-height - The block size of the handle's state layer when the dense switch is used.
+ * @cssproperty --forge-switch-disabled-opacity - The opacity of the switch when disabled.
+ * @cssproperty --forge-switch-animation-duration - The duration of animations.
+ * @cssproperty --forge-switch-animation-timing - The timing function used in most animations.
+ * @cssproperty --forge-switch-active-animation-timing - The timing function used in active state animations.
+ *
+ * @csspart switch - Styles the switch container element.
+ * @csspart track - Styles the track element.
+ * @csspart handle - Styles the handle element.
+ * @csspart icon-on - Styles the on icon element.
+ * @csspart icon-off - Styles the off icon element.
+ * @csspart label - Styles the label element.
+ * @csspart state-layer - Styles the state layer root element.
+ * @csspart focus-indicator - Styles the focus indicator root element.
  */
-let SwitchComponent = class SwitchComponent extends BaseComponent {
+let SwitchComponent = class SwitchComponent extends BaseNullableFormComponent {
     static get observedAttributes() {
         return [
+            SWITCH_CONSTANTS.attributes.ON,
+            SWITCH_CONSTANTS.attributes.SELECTED,
+            SWITCH_CONSTANTS.attributes.DEFAULT_ON,
+            SWITCH_CONSTANTS.attributes.VALUE,
             SWITCH_CONSTANTS.attributes.DENSE,
             SWITCH_CONSTANTS.attributes.DISABLED,
-            SWITCH_CONSTANTS.attributes.SELECTED,
-            SWITCH_CONSTANTS.attributes.LABEL_POSITION,
-            SWITCH_CONSTANTS.attributes.BUTTON_ARIA_LABEL
+            SWITCH_CONSTANTS.attributes.REQUIRED,
+            SWITCH_CONSTANTS.attributes.READONLY,
+            SWITCH_CONSTANTS.attributes.ICON,
+            SWITCH_CONSTANTS.attributes.LABEL_POSITION
         ];
     }
+    get form() {
+        return this[internals].form;
+    }
+    get labels() {
+        return this[internals].labels;
+    }
+    get name() {
+        var _a;
+        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+    }
+    set name(value) {
+        toggleAttribute(this, !!value, 'name', value !== null && value !== void 0 ? value : '');
+    }
+    get validity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].validity;
+    }
+    get validationMessage() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].validationMessage;
+    }
+    get willValidate() {
+        return this[internals].willValidate;
+    }
     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);
-        this._clickListener = evt => this._onClick(evt);
+        attachShadowTemplate(this, template, styles, true);
+        this[internals] = this.attachInternals();
+        this._foundation = new SwitchFoundation(new SwitchAdapter(this));
     }
     connectedCallback() {
-        // Add our click listener before initializing MDCSwitch to ensure we receive the event **first**
-        this._buttonElement.addEventListener('click', this._clickListener);
-        this._mdcSwitch = new ForgeMDCSwitch(this._buttonElement);
-        this._applyInitialState();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this._mdcSwitch) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
+            case SWITCH_CONSTANTS.attributes.ON:
+            case SWITCH_CONSTANTS.attributes.SELECTED:
+                this.on = coerceBoolean(newValue);
+                break;
+            case SWITCH_CONSTANTS.attributes.DEFAULT_ON:
+                this.defaultOn = coerceBoolean(newValue);
+                break;
+            case SWITCH_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
             case SWITCH_CONSTANTS.attributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
             case SWITCH_CONSTANTS.attributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.SELECTED:
-                this.selected = coerceBoolean(newValue);
+            case SWITCH_CONSTANTS.attributes.REQUIRED:
+                this.required = coerceBoolean(newValue);
+                break;
+            case SWITCH_CONSTANTS.attributes.READONLY:
+                this.readonly = coerceBoolean(newValue);
+                break;
+            case SWITCH_CONSTANTS.attributes.ICON:
+                this.icon = newValue;
                 break;
             case SWITCH_CONSTANTS.attributes.LABEL_POSITION:
                 this.labelPosition = newValue;
                 break;
-            case SWITCH_CONSTANTS.attributes.BUTTON_ARIA_LABEL:
-                this._applyButtonLabel(newValue);
-                break;
         }
     }
-    _applyInitialState() {
-        var _a;
-        if (this._mdcSwitch) {
-            this._mdcSwitch.disabled = this._disabled;
-            this._mdcSwitch.selected = this._selected;
-        }
-        this._applyDense();
-        this._applyLabelPosition();
-        this._applyButtonLabel((_a = this.getAttribute(SWITCH_CONSTANTS.attributes.BUTTON_ARIA_LABEL)) !== null && _a !== void 0 ? _a : '');
-    }
-    _onClick(evt) {
-        var _a;
-        if ((_a = this._mdcSwitch) === null || _a === void 0 ? void 0 : _a.disabled) {
+    setFormValue(value, state) {
+        this[internals].setFormValue(value, state);
+        if (state) {
+            const stateValue = isString(state) ? state : state[this.name];
+            this.on = stateValue === SWITCH_CONSTANTS.state.ON;
             return;
         }
-        // Prevents MDCSwitch from receiving the click event in the targeting phase.
-        // We will handle updating the selected state of MDCSwitch based on the result of our own event.
-        evt.stopImmediatePropagation();
-        const newValue = !this._selected;
-        const isCancelled = !emitEvent(this, SWITCH_CONSTANTS.events.SELECT, newValue, true, true);
-        if (!isCancelled) {
-            this._applySelected(newValue);
+        if (isString(value)) {
+            this.on = !!value;
         }
-    }
-    _applySelected(value) {
-        this._selected = value;
-        if (this._mdcSwitch) {
-            this._mdcSwitch.selected = this._selected;
+        else if (value === null || value === void 0 ? void 0 : value[this.name]) {
+            this.on = !!value[this.name];
+        }
+        else {
+            this.on = false;
         }
     }
-    _applyDense() {
-        var _a, _b;
-        toggleAttribute(this, this._dense, SWITCH_CONSTANTS.attributes.DENSE);
-        (_b = (_a = this._mdcSwitch) === null || _a === void 0 ? void 0 : _a.ripple) === null || _b === void 0 ? void 0 : _b.layout();
+    checkValidity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].checkValidity();
     }
-    _applyLabelPosition() {
-        toggleClass(this._containerElement, this._labelPosition === 'start', SWITCH_CONSTANTS.classes.LABEL_START);
+    reportValidity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].reportValidity();
     }
-    _applyButtonLabel(value) {
-        if (!this._buttonElement) {
-            return;
-        }
-        toggleAttribute(this._buttonElement, !!value, 'aria-label', value);
+    setCustomValidity(error) {
+        this._hasCustomValidityError = !!error;
+        this._foundation.setValidity({ customError: !!error }, error);
     }
-    get dense() {
-        return this._dense;
+    formResetCallback() {
+        this.on = this.defaultOn;
     }
-    set dense(value) {
-        if (this._dense !== value) {
-            this._dense = value;
-            this._applyDense();
-        }
+    formStateRestoreCallback(state) {
+        this.on = state === SWITCH_CONSTANTS.state.ON;
     }
-    get disabled() {
-        return this._disabled;
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
     }
-    set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            if (this._mdcSwitch) {
-                this._mdcSwitch.disabled = this._disabled;
-            }
-            toggleAttribute(this, this._disabled, SWITCH_CONSTANTS.attributes.DISABLED);
-        }
+    labelClickedCallback() {
+        this._foundation.proxyClick();
     }
-    get selected() {
-        return this._selected;
+    labelChangedCallback(value) {
+        this._foundation.proxyLabel(value);
     }
-    set selected(value) {
-        if (this._selected !== value) {
-            this._applySelected(value);
-            toggleAttribute(this, this._selected, SWITCH_CONSTANTS.attributes.SELECTED);
+    /**
+     * Toggles the switch on or off.
+     * @param force Whether to set the switch on or off.
+     */
+    toggle(force) {
+        if (isDefined(force)) {
+            this._foundation.on = force;
         }
-    }
-    get labelPosition() {
-        return this._labelPosition;
-    }
-    set labelPosition(value) {
-        if (this._labelPosition !== value) {
-            this._labelPosition = value;
-            this._applyLabelPosition();
-            this.setAttribute(SWITCH_CONSTANTS.attributes.LABEL_POSITION, this._labelPosition);
+        else {
+            this._foundation.on = !this._foundation.on;
         }
     }
 };
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "on", void 0);
+__decorate([
+    FoundationProperty({ name: 'on' })
+], SwitchComponent.prototype, "selected", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "defaultOn", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "required", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "readonly", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "icon", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "labelPosition", void 0);
 SwitchComponent = __decorate([
     CustomElement({
-        name: SWITCH_CONSTANTS.elementName
+        name: SWITCH_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
     })
 ], SwitchComponent);
 export { SwitchComponent };

package/esm/table/table-foundation.d.ts

@@ -76,6 +76,7 @@ export declare class TableFoundation implements ITableFoundation {
     private _rowDoubleClickListener;
     private _selectRowListener;
     private _selectAllListener;
+    private _sortableHeadCellKeydownListener;
     private _headRowMouseDownListener;
     private _headRowContextMenuListener;
     private _documentMouseMoveListener;
@@ -259,6 +260,7 @@ export declare class TableFoundation implements ITableFoundation {
     private _onHeadRowMouseDown;
     private _onMouseMove;
     private _onMouseUp;
+    private _onSortableHeadCellKeydown;
     /**
      * Called when a click event is triggered on the table header row.
      * We use this to capture all click events on the row, and determine which

package/esm/table/table-foundation.js

@@ -42,6 +42,7 @@ export class TableFoundation {
         this._rowDoubleClickListener = evt => this._onRowDoubleClick(evt);
         this._selectRowListener = evt => this._onRowSelected(evt);
         this._selectAllListener = evt => this._onSelectAll(evt);
+        this._sortableHeadCellKeydownListener = (evt) => this._onSortableHeadCellKeydown(evt);
         this._headRowMouseDownListener = evt => this._onHeadRowMouseDown(evt);
         this._headRowContextMenuListener = evt => this._onHeadRowContextMenu(evt);
         this._documentMouseMoveListener = evt => this._onMouseMove(evt);
@@ -86,13 +87,11 @@ export class TableFoundation {
         this._renderBody();
     }
     get data() {
-        return JSON.parse(JSON.stringify(this._data));
+        return this._data.map(o => (Object.assign({}, o))); // Shallow clone
     }
     /** The column configuration options. */
     set columnConfigurations(value) {
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         this._columnConfigurations = value.map(cc => (Object.assign({}, cc)));
         // Update hidden column manager
         this._hiddenColumnManager.clear();
@@ -106,8 +105,6 @@ export class TableFoundation {
     }
     get columnConfigurations() {
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         return this._columnConfigurations.map(cc => (Object.assign({}, cc)));
     }
     /** Gets the visible column configurations. */
@@ -124,6 +121,7 @@ export class TableFoundation {
             doubleClickListener: this._allowRowClick ? this._rowDoubleClickListener : null,
             selectListener: this._select ? this._selectRowListener : null,
             selectAllListener: this._multiselect ? this._selectAllListener : null,
+            sortableHeadCellKeydownListener: this._sortableHeadCellKeydownListener,
             headRowMouseDownListener: this._headRowMouseDownListener,
             headRowContextMenuListener: this._headRowContextMenuListener,
             filterListener: this._filter ? this._filterListener : null,
@@ -699,7 +697,11 @@ export class TableFoundation {
         this._adapter.emitHostEvent(TABLE_CONSTANTS.events.SELECT_ALL, data, true, false);
     }
     _onHeadRowContextMenu(evt) {
-        evt.preventDefault();
+        // We only handle this event on MacOS due to the `ctrl+click` combination triggering the contextmenu event...
+        // So we only detect that scenario here to still allow for the default context menu on Mac when right-clicking
+        if (evt.ctrlKey) {
+            evt.preventDefault();
+        }
     }
     _onHeadRowMouseDown(evt) {
         if (evt.button !== 0) {
@@ -764,6 +766,15 @@ export class TableFoundation {
         }
         this._headCellMouseDownIndex = undefined;
     }
+    _onSortableHeadCellKeydown(evt) {
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            const composedPath = getEventPath(evt);
+            const rowElement = composedPath.find(el => el.tagName === 'TR');
+            const thElement = composedPath.find(el => el.tagName === 'TH');
+            const cellIndex = Array.from(rowElement.cells).findIndex(c => c === thElement);
+            this._onSort(cellIndex);
+        }
+    }
     /**
      * Called when a click event is triggered on the table header row.
      * We use this to capture all click events on the row, and determine which