@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

package/esm/switch/switch-foundation.js

@@ -20,48 +20,44 @@ export class SwitchFoundation {
         this._readonly = false;
         this._icon = 'on';
         this._labelPosition = 'end';
-        this._changeListener = (evt) => this._handleChange(evt);
-        this._inputSlotListener = () => this._handleInputSlotChange();
+        // Listeners
+        this._clickListener = () => this._handleChange();
+        this._keydownListener = (evt) => this._handleKeydown(evt);
+        this._keyupListener = (evt) => this._handleKeyup(evt);
     }
     initialize() {
-        this._adapter.initialize();
-        this._adapter.addRootListener('change', this._changeListener);
-        this._adapter.addInputSlotListener(this._inputSlotListener);
+        this._adapter.addHostListener('click', this._clickListener);
+        this._adapter.addHostListener('keydown', this._keydownListener);
+        this._adapter.addHostListener('keyup', this._keyupListener);
         this._adapter.setIconVisibility(this._icon);
         this._adapter.syncValue(this._submittedValue);
     }
-    proxyClick() {
-        this._adapter.proxyClick();
-    }
-    proxyLabel(value) {
-        this._adapter.proxyLabel(value);
-    }
-    syncValidity(hasCustomValidityError) {
-        this._adapter.syncValidity(hasCustomValidityError);
+    _handleKeydown(evt) {
+        if (evt.key === ' ') {
+            evt.preventDefault();
+        }
     }
-    setValidity(flags, message) {
-        this._adapter.setValidity(flags, message);
+    _handleKeyup(evt) {
+        if (evt.key === ' ') {
+            this._handleChange();
+        }
     }
-    _handleChange(evt) {
+    _handleChange() {
         if (this._readonly) {
-            this._adapter.setOn(this._on);
             return;
         }
-        const target = evt.target;
-        const newValue = target.checked;
         const oldValue = this._on;
-        this._on = newValue;
-        const isCancelled = !this._adapter.emitHostEvent(SWITCH_CONSTANTS.events.CHANGE, newValue, true, true);
-        if (isCancelled) {
-            this._on = oldValue;
-            this._adapter.setOn(this._on);
+        const newValue = !this._on;
+        // Call the public setter to ensure all the update logic is run
+        this.on = newValue;
+        const event = new Event('change', { cancelable: true });
+        const forgeEvent = new CustomEvent(SWITCH_CONSTANTS.events.CHANGE, { detail: newValue, bubbles: true, cancelable: true });
+        this._adapter.dispatchHostEvent(event);
+        this._adapter.dispatchHostEvent(forgeEvent);
+        if (event.defaultPrevented || forgeEvent.defaultPrevented) {
+            this.on = oldValue;
             return;
         }
-        this._adapter.syncValue(this._submittedValue);
-        this._setOnAttribute();
-    }
-    _handleInputSlotChange() {
-        this._adapter.detectInputElement();
     }
     _setOnAttribute() {
         this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.ON, this._on);
@@ -85,7 +81,6 @@ export class SwitchFoundation {
     set defaultOn(value) {
         if (this._defaultOn !== value) {
             this._defaultOn = value;
-            this._adapter.setDefaultOn(this._defaultOn);
             this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DEFAULT_ON, this._defaultOn);
         }
     }
@@ -95,7 +90,6 @@ export class SwitchFoundation {
     set value(value) {
         if (this._value !== value) {
             this._value = value;
-            this._adapter.setValue(this._value);
             this._adapter.syncValue(this._submittedValue);
             this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.VALUE, true, this._value);
         }

package/esm/switch/switch.d.ts

@@ -3,22 +3,29 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseNullableFormComponent, IBaseNullableFormComponent } from '../core/base/base-nullable-form-component';
+import { getFormState, getFormValue, setValidity } from '../constants';
+import { BaseComponent, FormValue } from '../core';
+import { IWithFocusable } from '../core/mixins/focus/with-focusable';
+import { IWithFormAssociation } from '../core/mixins/form/with-form-associated';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { IWithLabelAwareness } from '../core/mixins/label/with-label-aware';
 import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
-import { ILabelAware } from '../label/label-aware';
-import { internals } from '../constants';
-export interface ISwitchComponent extends IBaseNullableFormComponent, ILabelAware {
+export interface ISwitchComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
+    value: string;
     on: boolean;
     /**
      * @deprecated use `on` instead
      */
     selected: boolean;
     defaultOn: boolean;
+    required: boolean;
     dense: boolean;
     icon: SwitchIconVisibility;
     labelPosition: SwitchLabelPosition;
     toggle(force?: boolean): void;
-    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
+    [setValidity](): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -28,6 +35,7 @@ declare global {
         'forge-switch-change': CustomEvent<boolean>;
     }
 }
+declare const BaseSwitchClass: import("../constants").AbstractConstructor<import("../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../constants").AbstractConstructor<import("../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../constants").AbstractConstructor<import("../core/mixins/focus/with-focusable").WithFocusableContract> & import("../constants").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../constants").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-switch
  *
@@ -141,29 +149,20 @@ declare global {
  * @csspart state-layer - Styles the state layer root element.
  * @csspart focus-indicator - Styles the focus indicator root element.
  */
-export declare class SwitchComponent extends BaseNullableFormComponent implements ISwitchComponent {
+export declare class SwitchComponent extends BaseSwitchClass implements ISwitchComponent {
     static get observedAttributes(): string[];
-    get form(): HTMLFormElement | null;
-    get labels(): NodeList;
-    get name(): string;
-    set name(value: string);
-    get validity(): ValidityState;
-    get validationMessage(): string;
-    get willValidate(): boolean;
-    readonly [internals]: ElementInternals;
     private readonly _foundation;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    setCustomValidity(error: string): void;
+    [getFormValue](): FormValue | null;
+    [getFormState](): string;
+    [setValidity](): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
-    formDisabledCallback(isDisabled: boolean): void;
     labelClickedCallback(): void;
     labelChangedCallback(value: string | null): void;
+    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
     on: boolean;
     /**
      * @deprecated use `on` instead
@@ -183,3 +182,4 @@ export declare class SwitchComponent extends BaseNullableFormComponent implement
      */
     toggle(force?: boolean): void;
 }
+export {};

package/esm/switch/switch.js

@@ -4,16 +4,22 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, isDefined, isString, toggleAttribute } from '@tylertech/forge-core';
-import { BaseNullableFormComponent } from '../core/base/base-nullable-form-component';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty, isDefined, isString } from '@tylertech/forge-core';
+import { getFormState, getFormValue, getValidationMessage, inputType, internals, setDefaultAria, setValidity } from '../constants';
+import { BaseComponent } from '../core';
+import { WithFocusable } from '../core/mixins/focus/with-focusable';
+import { WithFormAssociation } from '../core/mixins/form/with-form-associated';
+import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { WithLabelAwareness } from '../core/mixins/label/with-label-aware';
 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 { SwitchFoundation } from './switch-foundation';
-import { internals } from '../constants';
-const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\"></slot><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"container\" 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;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, space-between);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_switch-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_switch-justify);justify-content:var(--_switch-justify);gap:var(--_switch-gap);display:-webkit-box;display:flex;--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);-webkit-transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);-webkit-box-shadow:var(--_switch-handle-off-elevation);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);-webkit-box-shadow:var(--_switch-handle-on-elevation);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);-webkit-box-shadow:var(--_switch-handle-active-off-elevation);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);-webkit-box-shadow:var(--_switch-handle-active-on-elevation);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch{opacity:var(--_switch-disabled-opacity)}:host([disabled]) .forge-switch .container{cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{-webkit-box-shadow:none;box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
+const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><label id=\"label\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
+const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, space-between);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:-webkit-box;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_switch-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_switch-justify);justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);-webkit-transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);-webkit-box-shadow:var(--_switch-handle-off-elevation);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);-webkit-box-shadow:var(--_switch-handle-on-elevation);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);-webkit-box-shadow:var(--_switch-handle-active-off-elevation);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);-webkit-box-shadow:var(--_switch-handle-active-on-elevation);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch{opacity:var(--_switch-disabled-opacity)}:host([disabled]) .forge-switch .container{cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{-webkit-box-shadow:none;box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
+const BaseSwitchClass = WithFormAssociation(WithLabelAwareness(WithFocusable(WithDefaultAria(WithElementInternals(BaseComponent)))));
 /**
  * @tag forge-switch
  *
@@ -127,85 +133,84 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
  * @csspart state-layer - Styles the state layer root element.
  * @csspart focus-indicator - Styles the focus indicator root element.
  */
-let SwitchComponent = class SwitchComponent extends BaseNullableFormComponent {
+let SwitchComponent = class SwitchComponent extends BaseSwitchClass {
     static get observedAttributes() {
-        return [
-            SWITCH_CONSTANTS.attributes.ON,
-            SWITCH_CONSTANTS.attributes.SELECTED,
-            SWITCH_CONSTANTS.attributes.DEFAULT_ON,
-            SWITCH_CONSTANTS.attributes.VALUE,
-            SWITCH_CONSTANTS.attributes.DENSE,
-            SWITCH_CONSTANTS.attributes.DISABLED,
-            SWITCH_CONSTANTS.attributes.REQUIRED,
-            SWITCH_CONSTANTS.attributes.READONLY,
-            SWITCH_CONSTANTS.attributes.ICON,
-            SWITCH_CONSTANTS.attributes.LABEL_POSITION
-        ];
-    }
-    get form() {
-        return this[internals].form;
-    }
-    get labels() {
-        return this[internals].labels;
-    }
-    get name() {
-        var _a;
-        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
-    }
-    set name(value) {
-        toggleAttribute(this, !!value, 'name', value !== null && value !== void 0 ? value : '');
-    }
-    get validity() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].validity;
-    }
-    get validationMessage() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].validationMessage;
-    }
-    get willValidate() {
-        return this[internals].willValidate;
+        return Object.values(SWITCH_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
-        attachShadowTemplate(this, template, styles, true);
-        this[internals] = this.attachInternals();
+        attachShadowTemplate(this, template, styles);
+        this[inputType] = 'checkbox';
         this._foundation = new SwitchFoundation(new SwitchAdapter(this));
     }
     connectedCallback() {
+        super.connectedCallback();
+        this[setDefaultAria]({
+            role: 'switch',
+            ariaChecked: this.on ? 'true' : 'false',
+            ariaDisabled: this.disabled ? 'true' : 'false',
+            ariaRequired: this.required ? 'true' : 'false'
+        });
         this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case SWITCH_CONSTANTS.attributes.ON:
-            case SWITCH_CONSTANTS.attributes.SELECTED:
+            case SWITCH_CONSTANTS.observedAttributes.ON:
+            case SWITCH_CONSTANTS.observedAttributes.SELECTED:
                 this.on = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.DEFAULT_ON:
+            case SWITCH_CONSTANTS.observedAttributes.DEFAULT_ON:
                 this.defaultOn = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.VALUE:
+            case SWITCH_CONSTANTS.observedAttributes.VALUE:
                 this.value = newValue;
                 break;
-            case SWITCH_CONSTANTS.attributes.DENSE:
+            case SWITCH_CONSTANTS.observedAttributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.DISABLED:
+            case SWITCH_CONSTANTS.observedAttributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.REQUIRED:
+            case SWITCH_CONSTANTS.observedAttributes.REQUIRED:
                 this.required = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.READONLY:
+            case SWITCH_CONSTANTS.observedAttributes.READONLY:
                 this.readonly = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.ICON:
+            case SWITCH_CONSTANTS.observedAttributes.ICON:
                 this.icon = newValue;
                 break;
-            case SWITCH_CONSTANTS.attributes.LABEL_POSITION:
+            case SWITCH_CONSTANTS.observedAttributes.LABEL_POSITION:
                 this.labelPosition = newValue;
                 break;
         }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    [getFormValue]() {
+        return this.on ? this.value : null;
+    }
+    [getFormState]() {
+        return this.on ? SWITCH_CONSTANTS.state.ON : SWITCH_CONSTANTS.state.OFF;
+    }
+    [setValidity]() {
+        this[internals].setValidity({ valueMissing: this.required && !this.on }, this[getValidationMessage]({
+            checked: this.on,
+            required: this.required
+        }));
+    }
+    formResetCallback() {
+        this.on = this.defaultOn;
+    }
+    formStateRestoreCallback(state) {
+        this.on = state === SWITCH_CONSTANTS.state.ON;
+    }
+    labelClickedCallback() {
+        this.click();
+        // TODO: use `{ focusVisible: false }` when supported.
+        this.focus();
+    }
+    labelChangedCallback(value) {
+        this[setDefaultAria]({ ariaLabel: value });
     }
     setFormValue(value, state) {
         this[internals].setFormValue(value, state);
@@ -224,33 +229,6 @@ let SwitchComponent = class SwitchComponent extends BaseNullableFormComponent {
             this.on = false;
         }
     }
-    checkValidity() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].checkValidity();
-    }
-    reportValidity() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].reportValidity();
-    }
-    setCustomValidity(error) {
-        this._hasCustomValidityError = !!error;
-        this._foundation.setValidity({ customError: !!error }, error);
-    }
-    formResetCallback() {
-        this.on = this.defaultOn;
-    }
-    formStateRestoreCallback(state) {
-        this.on = state === SWITCH_CONSTANTS.state.ON;
-    }
-    formDisabledCallback(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    labelClickedCallback() {
-        this._foundation.proxyClick();
-    }
-    labelChangedCallback(value) {
-        this._foundation.proxyLabel(value);
-    }
     /**
      * Toggles the switch on or off.
      * @param force Whether to set the switch on or off.

package/esm/table/table-utils.js

@@ -1287,14 +1287,15 @@ export class TableUtils {
             const expandableRow = tbody.rows[actualRowIndex + 1];
             const expansionPanel = expandableRow.querySelector(EXPANSION_PANEL_CONSTANTS.elementName);
             if (expansionPanel && expansionPanel.open) {
-                expansionPanel.open = false;
-                return new Promise(resolve => {
-                    setTimeout(() => {
+                const promise = new Promise(resolve => {
+                    expansionPanel.addEventListener(EXPANSION_PANEL_CONSTANTS.events.ANIMATION_COMPLETE, () => {
                         requestedRow.classList.remove(TABLE_CONSTANTS.classes.TABLE_ROW_EXPANDED);
                         removeElement(expandableRow);
                         resolve();
-                    }, EXPANSION_PANEL_CONSTANTS.numbers.COLLAPSE_ANIMATION_DURATION);
+                    }, { once: true });
                 });
+                expansionPanel.open = false;
+                return promise;
             }
         }
         return Promise.resolve();

package/esm/text-field/text-field-adapter.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IFieldComponent } from '../field-next';
-import { BaseFieldAdapter, IBaseFieldAdapter } from '../field-next/base/base-field-adapter';
+import { IFieldComponent } from '../field';
+import { BaseFieldAdapter, IBaseFieldAdapter } from '../field/base/base-field-adapter';
 import { ITextFieldComponent } from './text-field';
 import { TextFieldInputAttributeObserver, TextFieldValueChangeListener } from './text-field-constants';
 export interface ITextFieldAdapter extends IBaseFieldAdapter {

package/esm/text-field/text-field-adapter.js

@@ -4,8 +4,8 @@
  * License: Apache-2.0
  */
 import { getShadowElement, listenOwnProperty, randomChars, toggleAttribute } from '@tylertech/forge-core';
-import { FIELD_CONSTANTS } from '../field-next';
-import { BaseFieldAdapter } from '../field-next/base/base-field-adapter';
+import { FIELD_CONSTANTS } from '../field';
+import { BaseFieldAdapter } from '../field/base/base-field-adapter';
 import { TEXT_FIELD_CONSTANTS } from './text-field-constants';
 export class TextFieldAdapter extends BaseFieldAdapter {
     get hasValue() {
@@ -76,6 +76,9 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         this._inputElements.forEach(el => {
             var _a;
             (_a = this._inputMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { attributes: true, attributeFilter: TEXT_FIELD_CONSTANTS.observedInputAttributes });
+            if (this._component.disabled) {
+                el.disabled = true;
+            }
             // Call the listener with each observed attribute to capture the initial state
             Object.values(TEXT_FIELD_CONSTANTS.observedInputAttributes).forEach(value => {
                 const attributeName = value;

package/esm/text-field/text-field-foundation.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { FieldLabelPosition } from '../field-next';
-import { BaseFieldFoundation, IBaseFieldFoundation } from '../field-next/base/base-field-foundation';
+import { FieldLabelPosition } from '../field';
+import { BaseFieldFoundation, IBaseFieldFoundation } from '../field/base/base-field-foundation';
 import { ITextFieldAdapter, TextFieldAdapter } from './text-field-adapter';
 export interface ITextFieldFoundation extends IBaseFieldFoundation {
     readonly popoverTargetElement: HTMLElement;

package/esm/text-field/text-field-foundation.js

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { FIELD_CONSTANTS } from '../field-next';
-import { BaseFieldFoundation } from '../field-next/base/base-field-foundation';
+import { FIELD_CONSTANTS } from '../field';
+import { BaseFieldFoundation } from '../field/base/base-field-foundation';
 import { TEXT_FIELD_CONSTANTS } from './text-field-constants';
 export class TextFieldFoundation extends BaseFieldFoundation {
     constructor(_adapter) {

package/esm/text-field/text-field.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseField, IBaseField } from '../field-next/base/base-field';
+import { BaseField, IBaseField } from '../field/base/base-field';
 import { TextFieldFoundation } from './text-field-foundation';
 export interface ITextFieldComponent extends IBaseField {
     showClear: boolean;

package/esm/text-field/text-field.js

@@ -6,8 +6,8 @@
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconClear } from '@tylertech/tyler-icons/standard';
-import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field-next';
-import { BaseField } from '../field-next/base/base-field';
+import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
+import { BaseField } from '../field/base/base-field';
 import { IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
 import { TooltipComponent } from '../tooltip';

package/esm/time-picker/time-picker-adapter.d.ts

@@ -28,7 +28,9 @@ export interface ITimePickerAdapter extends BaseAdapter<ITimePickerComponent> {
     isInputFocused(): boolean;
     setDisabled(isDisabled: boolean): void;
     attachDropdown(config: IListDropdownConfig): void;
-    detachDropdown(): void;
+    detachDropdown(options: {
+        destroy?: boolean;
+    }): Promise<void>;
     setActiveDescendant(id: string): void;
     propagateKey(key: string): void;
     getTargetElementWidth(selector: string): number;
@@ -67,7 +69,9 @@ export declare class TimePickerAdapter extends BaseAdapter<ITimePickerComponent>
     getInputValue(): string;
     setDisabled(isDisabled: boolean): void;
     attachDropdown(config: IListDropdownConfig): void;
-    detachDropdown(): void;
+    detachDropdown({ destroy }?: {
+        destroy?: boolean | undefined;
+    }): Promise<void>;
     propagateKey(key: string): void;
     setActiveDescendant(id: string): void;
     getTargetElementWidth(selector: string): number;

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

@@ -135,10 +135,14 @@ export class TimePickerAdapter extends BaseAdapter {
         this._listDropdown.open();
         this._inputElement.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
     }
-    detachDropdown() {
+    async detachDropdown({ destroy = false } = {}) {
         if (this._listDropdown) {
-            this._listDropdown.close();
-            this._listDropdown.destroy();
+            if (destroy) {
+                this._listDropdown.destroy();
+            }
+            else {
+                await this._listDropdown.close();
+            }
             this._listDropdown = undefined;
         }
         this._inputElement.removeAttribute('aria-controls');