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

package/esm/switch/switch.js

@@ -4,190 +4,274 @@
  * 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 { BaseFormComponent } from '../core/base/base-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';
+const template = '<template><div class=\"forge-switch\" part=\"switch\"><div class=\"container\" part=\"input-container\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\" part=\"input\"><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\" part=\"icon-off-path\"/></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\" part=\"icon-on-path\"/></svg></slot></div><forge-state-layer target=\"input\" part=\"state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"input\" part=\"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;cursor:pointer}:host([hidden]){display:none}:host([disabled]){opacity:var(--_disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch{pointer-events:none}:host([disabled]) .handle::before{-webkit-box-shadow:none;box-shadow:none}.forge-switch{--_handle-size:var(--forge-switch-handle-size, 20px);--_handle-scale:var(--forge-switch-handle-scale, 1);--_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));--_track-border-width:var(--forge-switch-track-border-width, 0);--_track-border-color:var(--forge-switch-track-border-color, transparent);--_icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-scale:var(--forge-switch-icon-scale, 1);--_state-layer-size:var(--forge-switch-state-layer-size, 40px);--_state-layer-dense-size:var(--forge-switch-handle-dense-size, 28px);--_handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_handle-width:var(--forge-switch-handle-width, var(--_handle-size));--_handle-height:var(--forge-switch-handle-height, var(--_handle-size));--_handle-on-scale:var(--forge-switch-handle-on-scale, var(--_handle-scale));--_handle-off-scale:var(--forge-switch-handle-off-scale, var(--_handle-scale));--_handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_handle-elevation));--_handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_handle-elevation));--_track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_track-width:var(--forge-switch-track-width, 36px);--_track-height:var(--forge-switch-track-height, 14px);--_track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_track-on-border-width:var(--forge-switch-track-on-border-width, var(--_track-border-width));--_track-off-border-width:var(--forge-switch-track-off-border-width, var(--_track-border-width));--_track-on-border-color:var(--forge-switch-track-on-border-color, var(--_track-border-color));--_track-off-border-color:var(--forge-switch-track-off-border-color, var(--_track-border-color));--_icon-on-color:var(--forge-switch-icon-on-color, var(--_icon-color));--_icon-off-color:var(--forge-switch-icon-off-color, var(--_icon-color));--_icon-on-size:var(--forge-switch-icon-on-size, var(--_handle-size));--_icon-off-size:var(--forge-switch-icon-off-size, var(--_handle-size));--_icon-on-scale:var(--forge-switch-icon-on-scale, var(--_icon-scale));--_icon-off-scale:var(--forge-switch-icon-off-scale, var(--_icon-scale));--_gap:var(--forge-switch-gap, 0);--_justify:var(--forge-switch-justify, space-between);--_direction:var(--forge-switch-direction, initial);--_state-layer-width:var(--forge-switch-state-layer-width, var(--_state-layer-size));--_state-layer-height:var(--forge-switch-state-layer-height, var(--_state-layer-size));--_state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_handle-on-color));--_state-layer-off-color:var(--forge-state-layer-state-layer-off-color, var(--_color));--_state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_state-layer-dense-size));--_state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_state-layer-dense-size));--_disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_handle-on-color));--_handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_handle-off-color));--_handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_handle-active-scale));--_handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_handle-active-scale));--_handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_handle-elevation));--_handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_handle-active-elevation));--_handle-active-off-elevation:var(--forge-switch-handle-active-on-elevation, var(--_handle-active-elevation));--_track-active-on-color:var(--forge-switch-track-active-on-color, var(--_track-on-color));--_track-active-off-color:var(--forge-switch-track-active-off-color, var(--_track-off-color));--_track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_track-on-border-width));--_track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_track-off-border-width));--_track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_track-on-border-color));--_track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_track-off-border-color));--_icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_icon-on-color));--_icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_icon-off-color));--_icon-active-scale: ;--_icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_icon-on-scale));--_icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_icon-off-scale));--_animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)));position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_justify);justify-content:var(--_justify);gap:var(--_gap);display:-webkit-box;display:flex;cursor:unset;--_current-state-layer-width:var(--_state-layer-width);--_current-state-layer-height:var(--_state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_handle-height),var(--_track-height),var(--_current-state-layer-height))}.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 .input:checked~.track{border-width:var(--_track-on-border-width);border-color:var(--_track-on-border-color);background-color:var(--_track-on-color)}.forge-switch .input:checked~.handle{translate:calc(var(--_track-width) - calc(var(--_track-height)/ 2) * 2)}.forge-switch .input:checked~.handle::before{scale:var(--_handle-on-scale);-webkit-box-shadow:var(--_handle-on-elevation);box-shadow:var(--_handle-on-elevation);background-color:var(--_handle-on-color)}.forge-switch .input:checked~.handle .icon__on{opacity:1;scale:var(--_icon-on-scale)}.forge-switch .input:checked~.handle .icon__off{opacity:0;scale:0.4}.forge-switch .input:checked~.handle forge-state-layer{--forge-state-layer-color:var(--_state-layer-on-color)}.forge-switch .input:active~.track{border-width:var(--_track-active-off-border-width);border-color:var(--_track-active-off-border-color);background-color:var(--_track-active-off-color)}.forge-switch .input:active~.handle::before{scale:var(--_handle-active-off-scale);-webkit-box-shadow:var(--_handle-active-off-elevation);box-shadow:var(--_handle-active-off-elevation);background-color:var(--_handle-active-off-color)}.forge-switch .input:active~.handle .icon{scale:var(--_icon-active-off-scale);color:var(--_icon-active-off-color);fill:var(--_icon-active-off-color)}.forge-switch .input:active:checked~.track{border-width:var(--_track-active-on-border-width);border-color:var(--_track-active-on-border-color);background-color:var(--_track-active-on-color)}.forge-switch .input:active:checked~.handle::before{scale:var(--_handle-active-on-scale);-webkit-box-shadow:var(--_handle-active-on-elevation);box-shadow:var(--_handle-active-on-elevation);background-color:var(--_handle-active-on-color)}.forge-switch .input:active:checked~.handle .icon{scale:var(--_icon-active-on-scale);color:var(--_icon-active-on-color);fill:var(--_icon-active-on-color)}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_animation-duration);transition-duration:var(--_animation-duration);-webkit-transition-timing-function:var(--_animation-timing);transition-timing-function:var(--_animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_handle-width),var(--_current-state-layer-width))/ 2 - calc(var(--_track-height)/ 2));border-width:var(--_track-off-border-width);border-color:var(--_track-off-border-color);border-style:solid;border-radius:var(--_track-shape);inline-size:var(--_track-width);block-size:var(--_track-height);background-color:var(--_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(--_animation-duration);transition-duration:var(--_animation-duration);-webkit-transition-timing-function:var(--_animation-timing);transition-timing-function:var(--_animation-timing);border-radius:var(--_handle-shape);inline-size:var(--_current-state-layer-width);block-size:var(--_current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_handle-off-scale);-webkit-transition:background-color var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing),-webkit-box-shadow var(--_animation-duration) var(--_animation-timing);transition:background-color var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing),-webkit-box-shadow var(--_animation-duration) var(--_animation-timing);transition:background-color var(--_animation-duration) var(--_animation-timing),box-shadow var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing);transition:background-color var(--_animation-duration) var(--_animation-timing),box-shadow var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing),-webkit-box-shadow var(--_animation-duration) var(--_animation-timing);-webkit-box-shadow:var(--_handle-off-elevation);box-shadow:var(--_handle-off-elevation);border-radius:var(--_handle-shape);inline-size:var(--_handle-width);block-size:var(--_handle-height);background-color:var(--_handle-off-color)}.forge-switch .icon{--forge-icon-font-size:var(--_icon-off-size);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(--_animation-duration);transition-duration:var(--_animation-duration);-webkit-transition-timing-function:var(--_animation-timing);transition-timing-function:var(--_animation-timing);inline-size:var(--_icon-off-size);block-size:var(--_icon-off-size);color:var(--_icon-off-color);fill:var(--_icon-off-color);font-size:var(--_icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_icon-on-size);inline-size:var(--_icon-on-size);block-size:var(--_icon-on-size);color:var(--_icon-on-color);fill:var(--_icon-on-color);font-size:var(--_icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_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}:host([dense]) .forge-switch{--_current-state-layer-width:var(--_state-layer-dense-width);--_current-state-layer-height:var(--_state-layer-dense-height)}@media (prefers-reduced-motion){.switch{--_animation-duration:0s}}forge-state-layer{--forge-state-layer-color:var(--_state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_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} disabled - Controls if the switch is disabled.
+ * @property {boolean} required = Controls if the switch is required.
+ * @property {boolean} dense - The density state.
+ * @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 - Alias for `on`.
+ * @attribute {string} disabled - Controls if the switch is disabled.
+ * @attribute {string} required - Controls if the switch is required.
+ * @attribute {string} dense - Sets the density state.
+ * @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-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-active-scale - The scale transformation applied to the handle icons when the switch is active (pressed).
+ * @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 input-container - Styles the wrapper element of the input, track and handle.
+ * @csspart input - Styles the input 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 icon-on-path - Styles the default on icon path.
+ * @csspart icon-off-path - Styles the default off icon path.
+ * @csspart label - Styles the label element.
+ * @csspart state-layer - Styles the state layer element.
+ * @csspart focus-indicator - Styles the focus indicator element.
  */
-let SwitchComponent = class SwitchComponent extends BaseComponent {
+let SwitchComponent = class SwitchComponent extends BaseFormComponent {
     static get observedAttributes() {
         return [
-            SWITCH_CONSTANTS.attributes.DENSE,
-            SWITCH_CONSTANTS.attributes.DISABLED,
+            SWITCH_CONSTANTS.attributes.ON,
             SWITCH_CONSTANTS.attributes.SELECTED,
-            SWITCH_CONSTANTS.attributes.LABEL_POSITION,
-            SWITCH_CONSTANTS.attributes.BUTTON_ARIA_LABEL
+            SWITCH_CONSTANTS.attributes.DISABLED,
+            SWITCH_CONSTANTS.attributes.REQUIRED,
+            SWITCH_CONSTANTS.attributes.DENSE,
+            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);
+        // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+        // Replace with this.internals.validity.customError when resolved.
+        this._hasCustomValidityError = false;
+        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.DENSE:
-                this.dense = coerceBoolean(newValue);
+            case SWITCH_CONSTANTS.attributes.ON:
+                this.on = coerceBoolean(newValue);
+                break;
+            case SWITCH_CONSTANTS.attributes.SELECTED:
+                this.selected = 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.DENSE:
+                this.dense = 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;
+    setFormValue(value, state) {
+        this.internals.setFormValue(value, state);
+        if (isString(value)) {
+            this.on = coerceBoolean(value);
         }
-        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) {
-            return;
+        else if (value === null || value === void 0 ? void 0 : value[this.name]) {
+            this.on = coerceBoolean(value[this.name]);
         }
-        // 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);
+        else {
+            this.on = false;
         }
     }
-    _applySelected(value) {
-        this._selected = value;
-        if (this._mdcSwitch) {
-            this._mdcSwitch.selected = this._selected;
-        }
+    checkValidity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this.internals.checkValidity();
     }
-    _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();
+    reportValidity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this.internals.reportValidity();
     }
-    _applyLabelPosition() {
-        toggleClass(this._containerElement, this._labelPosition === 'start', SWITCH_CONSTANTS.classes.LABEL_START);
+    setCustomValidity(error) {
+        this._hasCustomValidityError = !!error;
+        this._foundation.setValidity({ customError: !!error }, error);
     }
-    _applyButtonLabel(value) {
-        if (!this._buttonElement) {
-            return;
-        }
-        toggleAttribute(this._buttonElement, !!value, 'aria-label', value);
+    formResetCallback() {
+        this.on = false;
     }
-    get dense() {
-        return this._dense;
+    formStateRestoreCallback(state) {
+        this.on = coerceBoolean(state);
     }
-    set dense(value) {
-        if (this._dense !== value) {
-            this._dense = value;
-            this._applyDense();
-        }
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
     }
-    get disabled() {
-        return this._disabled;
-    }
-    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);
-        }
-    }
-    get selected() {
-        return this._selected;
-    }
-    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;
         }
     }
 };
+SwitchComponent.formAssociated = true;
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "on", void 0);
+__decorate([
+    FoundationProperty({ name: 'on' })
+], SwitchComponent.prototype, "selected", 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, "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/tabs/tab/tab.js

@@ -11,8 +11,8 @@ import { TAB_CONSTANTS } from './tab-constants';
 import { BaseComponent } from '../../core/base/base-component';
 import { FocusIndicatorComponent } from '../../focus-indicator/focus-indicator';
 import { StateLayerComponent } from '../../state-layer/state-layer';
-const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer target=\":host\"></forge-state-layer><forge-focus-indicator target=\":host\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{display:-webkit-inline-box;display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}:host(:focus) .forge-tab{color:var(--_focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_focus-icon-color)}:host(:active) .forge-tab{color:var(--_pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_pressed-icon-color)}:host([disabled]){cursor:not-allowed;opacity:var(--forge-tab-disabled-opacity, .38)}:host([disabled]) .forge-tab{pointer-events:none}:host([selected]) .forge-tab{color:var(--_active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]:not([vertical])) forge-focus-indicator{--forge-focus-indicator-offset-block:0 calc(var(--_active-indicator-height) + 1px)}:host([selected]:focus) .forge-tab{color:var(--_active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_active-pressed-icon-color)}:host([stacked]) .forge-tab{--_height:var(--forge-tab-stacked-height, 64px)}:host([stacked]) .forge-tab .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([secondary]) .forge-tab{--_active-indicator-height:var(--forge-tab-indicator-height, 2px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 0)}:host([secondary]) .content{width:100%}:host([secondary]) .indicator{min-width:100%}:host([vertical]) .forge-tab{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_active-indicator-height);inset:0 0 0 auto}:host([vertical]) forge-focus-indicator{--forge-focus-indicator-offset-inline:0 calc(var(--_active-indicator-height) + 1px)}:host([vertical][secondary]) .content{min-height:100%}:host([vertical]:not([secondary])) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 0 0 3px)}:host([inverted]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 0 3px 3px)}:host([inverted]) .indicator{inset:0 0 auto;-webkit-transform-origin:top left;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 3px 3px 0)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}.forge-tab{--_active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-secondary, rgba(0, 0, 0, 0.54)));--_height:var(--forge-tab-height, 48px);--_active-indicator-color:var(--forge-tab-indicator-color, var(--_active-color));--_active-indicator-height:var(--forge-tab-indicator-height, 3px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_container-color:var(--forge-tab-container-color, transparent);--_container-height:var(--forge-tab-container-height, var(--_height));--_container-shape:var(--forge-tab-container-shape, 0);--_content-height:var(--forge-tab-content-height, var(--_height));--_active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_active-color));--_active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_active-color));--_active-icon-color:var(--forge-tab-active-icon-color, var(--_active-color));--_active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_active-color));--_icon-size:var(--forge-tab-icon-size, 24px);--_focus-icon-color:var(--forge-tab-focus-icon-color, var(--_inactive-color));--_hover-icon-color:var(--forge-tab-hover-icon-color, var(--_inactive-color));--_icon-color:var(--forge-tab-icon-color, var(--_inactive-color));--_pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_inactive-color));--_active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_active-color));--_active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_active-color));--_active-label-text-color:var(--forge-tab-active-label-text-color, var(--_active-color));--_active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_active-color));--_focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_inactive-color));--_hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_inactive-color));--_label-text-color:var(--forge-tab-label-text-color, var(--_inactive-color));--_pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_inactive-color));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, Roboto, sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-line-height-scale, 2.25)));letter-spacing:var(--forge-typography-button-letter-spacing, .0892857143em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);color:var(--forge-typography-button-color,var(--forge-theme-text-primary,rgba(0,0,0,.87)));display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;background-color:var(--_container-color);color:var(--_label-text-color);min-height:var(--_container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:-webkit-inline-box;display:inline-flex;position:relative;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.forge-tab:hover{color:var(--_hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_hover-icon-color)}.forge-tab .content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;white-space:nowrap;-webkit-transition:150ms color linear;transition:150ms color linear;max-height:calc(var(--_content-height) + 2 * var(--forge-spacing-100,8px));min-height:var(--_content-height);padding:var(--forge-spacing-100,8px) calc(2 * var(--forge-spacing-100,8px));gap:var(--forge-spacing-050,4px)}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:-1;-webkit-transform-origin:bottom left;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0;opacity:0}::slotted(*),host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_inactive-color)}';
+const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer exportparts=\"surface:state-layer__surface\" target=\":host\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator:focus-indicator__indicator\" target=\":host\" inward></forge-focus-indicator></div></template>';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}:host(:focus) .forge-tab{color:var(--_focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_focus-icon-color)}:host(:active) .forge-tab{color:var(--_pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_pressed-icon-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-tab{opacity:var(--_disabled-opacity);pointer-events:none}:host([selected]) .forge-tab{color:var(--_active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]:not([vertical])) forge-focus-indicator{--forge-focus-indicator-offset-block:0 calc(var(--_active-indicator-height) + 1px)}:host([selected]:focus) .forge-tab{color:var(--_active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_active-pressed-icon-color)}:host([stacked]) .forge-tab{--_height:var(--_stacked-height)}:host([stacked]) .forge-tab .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([secondary]) .forge-tab{--_active-indicator-height:var(--forge-tab-indicator-height, 2px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 0)}:host([secondary]) .content{width:100%}:host([secondary]) .indicator{min-width:100%}:host([vertical]) .forge-tab{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_active-indicator-height);inset:0 0 0 auto}:host([vertical]) forge-focus-indicator{--forge-focus-indicator-offset-inline:0 calc(var(--_active-indicator-height) + 1px)}:host([vertical][secondary]) .content{min-height:100%}:host([vertical]:not([secondary])) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 0 0 3px)}:host([inverted]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 0 3px 3px)}:host([inverted]) .indicator{inset:0 0 auto;-webkit-transform-origin:top left;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 3px 3px 0)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}.forge-tab{--_active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_height:var(--forge-tab-height, 48px);--_stacked-height:var(--forge-tab-stacked-height, 64px);--_disabled-opacity:var(--forge-tab-disabled-opacity, 0.38);--_active-indicator-color:var(--forge-tab-indicator-color, var(--_active-color));--_active-indicator-height:var(--forge-tab-indicator-height, 3px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_container-color:var(--forge-tab-container-color, transparent);--_container-height:var(--forge-tab-container-height, var(--_height));--_container-shape:var(--forge-tab-container-shape, 0);--_content-height:var(--forge-tab-content-height, var(--_height));--_content-padding:var(--forge-tab-content-padding, var(--forge-spacing-025, 4px));--_active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_active-color));--_active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_active-color));--_active-icon-color:var(--forge-tab-active-icon-color, var(--_active-color));--_active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_active-color));--_icon-size:var(--forge-tab-icon-size, 24px);--_focus-icon-color:var(--forge-tab-focus-icon-color, var(--_inactive-color));--_hover-icon-color:var(--forge-tab-hover-icon-color, var(--_inactive-color));--_icon-color:var(--forge-tab-icon-color, var(--_inactive-color));--_pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_inactive-color));--_active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_active-color));--_active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_active-color));--_active-label-text-color:var(--forge-tab-active-label-text-color, var(--_active-color));--_active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_active-color));--_focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_inactive-color));--_hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_inactive-color));--_label-text-color:var(--forge-tab-label-text-color, var(--_inactive-color));--_pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_inactive-color));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-line-height-scale, 2.25)));letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;background-color:var(--_container-color);color:var(--_label-text-color);min-height:var(--_container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:-webkit-inline-box;display:inline-flex;position:relative;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.forge-tab:hover{color:var(--_hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_hover-icon-color)}.forge-tab .content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;white-space:nowrap;-webkit-transition:150ms color linear;transition:150ms color linear;max-height:calc(var(--_content-height) + 2 * var(--_content-padding));min-height:var(--_content-height);padding:var(--_content-padding) calc(2 * var(--_content-padding));gap:var(--_content-padding)}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:-1;-webkit-transform-origin:bottom left;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0;opacity:0}::slotted(*),host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_inactive-color)}';
 /**
  * @tag forge-tab
  *

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

@@ -14,7 +14,7 @@ import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TabBarFoundation } from './tab-bar-foundation';
 import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
 const template = '<template><div class=\"container\" part=\"container\"><div role=\"tablist\" class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
-const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-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}}.forge-icon-button{--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}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}:host{position:relative;display:block}:host([vertical]) .container{grid-template-columns:none;grid-template-rows:auto 1fr auto;-webkit-box-align:initial;align-items:initial;border-bottom:none;border-right:var(--_divider-thickness) solid var(--_divider-color);height:100%}:host([vertical]) .scroll-container{display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:stretch;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .container{border-bottom:none;border-top:var(--_divider-thickness) solid var(--_divider-color)}:host([inverted][vertical]) .container{border-right:none;border-left:var(--_divider-thickness) solid var(--_divider-color)}:host([clustered]){--forge-tab-bar-justify:flex-start;--forge-tab-bar-stretch:0}:host([clustered=start]){--forge-tab-bar-justify:flex-start}:host([clustered=center]){--forge-tab-bar-justify:center}:host([clustered=end]){--forge-tab-bar-justify:flex-end}:host([hidden]){display:none}.container{--_container-justify:var(--forge-tab-bar-justify, space-between);--_tab-flex:var(--forge-tab-bar-stretch, 1);--_divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-border-color, #e0e0e0));--_divider-thickness:var(--forge-tab-bar-divider-thickness, 1px);position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;-webkit-box-align:center;align-items:center;border-bottom:var(--_divider-thickness) solid var(--_divider-color)}.scroll-container{position:relative;display:-webkit-box;display:flex;-webkit-box-pack:var(--_container-justify);justify-content:var(--_container-justify);-webkit-box-align:end;align-items:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){-webkit-box-flex:var(--_tab-flex);flex:var(--_tab-flex)}::slotted([selected]){z-index:1}';
+const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-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}}.forge-icon-button{--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}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}:host{position:relative;display:block}:host([vertical]) .container{grid-template-columns:none;grid-template-rows:auto 1fr auto;-webkit-box-align:initial;align-items:initial;border-bottom:none;border-right:var(--_divider-thickness) solid var(--_divider-color);height:100%}:host([vertical]) .scroll-container{display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:stretch;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .container{border-bottom:none;border-top:var(--_divider-thickness) solid var(--_divider-color)}:host([inverted][vertical]) .container{border-right:none;border-left:var(--_divider-thickness) solid var(--_divider-color)}:host([clustered]){--forge-tab-bar-justify:flex-start;--forge-tab-bar-stretch:0}:host([clustered=start]){--forge-tab-bar-justify:flex-start}:host([clustered=center]){--forge-tab-bar-justify:center}:host([clustered=end]){--forge-tab-bar-justify:flex-end}:host([hidden]){display:none}.container{--_container-justify:var(--forge-tab-bar-justify, space-between);--_tab-flex:var(--forge-tab-bar-stretch, 1);--_divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_divider-thickness:var(--forge-tab-bar-divider-thickness, 1px);position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;-webkit-box-align:center;align-items:center;border-bottom:var(--_divider-thickness) solid var(--_divider-color)}.scroll-container{position:relative;display:-webkit-box;display:flex;-webkit-box-pack:var(--_container-justify);justify-content:var(--_container-justify);-webkit-box-align:end;align-items:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){-webkit-box-flex:var(--_tab-flex);flex:var(--_tab-flex)}::slotted([selected]){z-index:1}';
 /**
  * @tag forge-tab-bar
  *

package/esm/time-picker/time-picker-foundation.js

@@ -220,12 +220,12 @@ export class TimePickerFoundation {
         }
     }
     _onInputFocus(evt) {
-        if (this._allowInput) {
-            this._adapter.selectInputText();
-        }
         if (this.masked && this._showMaskFormat) {
             this._applyMask();
         }
+        if (this._allowInput) {
+            this._adapter.selectInputText();
+        }
     }
     _onInputBlur(evt) {
         if (this.masked && this._showMaskFormat) {