@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

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

@@ -4,19 +4,6 @@
  * License: Apache-2.0
  */
 export declare const SWITCH_CONSTANTS: {
-    classes: {
-        HIDDEN: string;
-    };
-    selectors: {
-        ROOT: string;
-        INPUT: string;
-        LABEL: string;
-        ICON_ON: string;
-        ICON_OFF: string;
-        INPUT_SLOT: string;
-        STATE_LAYER: string;
-        SLOTTED_INPUT: string;
-    };
     attributes: {
         ON: string;
         SELECTED: string;
@@ -28,6 +15,30 @@ export declare const SWITCH_CONSTANTS: {
         READONLY: string;
         ICON: string;
         LABEL_POSITION: string;
+        TABINDEX: string;
+    };
+    observedAttributes: {
+        ON: string;
+        SELECTED: string;
+        DEFAULT_ON: string;
+        VALUE: string;
+        DENSE: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        ICON: string;
+        LABEL_POSITION: string;
+        TABINDEX: string;
+    };
+    classes: {
+        HIDDEN: string;
+    };
+    selectors: {
+        ROOT: string;
+        LABEL: string;
+        ICON_ON: string;
+        ICON_OFF: string;
+        STATE_LAYER: string;
     };
     elementName: "forge-switch";
     events: {
@@ -37,7 +48,6 @@ export declare const SWITCH_CONSTANTS: {
         ON: string;
         OFF: string;
     };
-    forwardedAttributes: string[];
 };
 export type SwitchLabelPosition = 'start' | 'end';
 export type SwitchIconVisibility = 'both' | 'none' | 'off' | 'on';

package/esm/switch/switch-constants.js

@@ -4,12 +4,8 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { INPUT_ARIA_ATTRIBUTES } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}switch`;
-const classes = {
-    HIDDEN: 'hidden'
-};
-const attributes = {
+const observedAttributes = {
     ON: 'on',
     SELECTED: 'selected',
     DEFAULT_ON: 'default-on',
@@ -19,17 +15,19 @@ const attributes = {
     REQUIRED: 'required',
     READONLY: 'readonly',
     ICON: 'icon',
-    LABEL_POSITION: 'label-position'
+    LABEL_POSITION: 'label-position',
+    TABINDEX: 'tabindex'
+};
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    HIDDEN: 'hidden'
 };
 const selectors = {
     ROOT: '.forge-switch',
-    INPUT: '#input',
     LABEL: '#label',
     ICON_ON: '#icon-on',
     ICON_OFF: '#icon-off',
-    INPUT_SLOT: 'slot[name=input]',
-    STATE_LAYER: 'forge-state-layer',
-    SLOTTED_INPUT: 'input[type=checkbox]'
+    STATE_LAYER: 'forge-state-layer'
 };
 const events = {
     CHANGE: `${elementName}-change`
@@ -38,13 +36,12 @@ const state = {
     ON: 'on',
     OFF: 'off'
 };
-const forwardedAttributes = [...INPUT_ARIA_ATTRIBUTES];
 export const SWITCH_CONSTANTS = {
+    attributes,
+    observedAttributes,
     classes,
     selectors,
-    attributes,
     elementName,
     events,
-    state,
-    forwardedAttributes
+    state
 };

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

@@ -16,10 +16,6 @@ export interface ISwitchFoundation extends ICustomElementFoundation {
     readonly: boolean;
     icon: SwitchIconVisibility;
     labelPosition: SwitchLabelPosition;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
 }
 export declare class SwitchFoundation implements ISwitchFoundation {
     private readonly _adapter;
@@ -33,16 +29,14 @@ export declare class SwitchFoundation implements ISwitchFoundation {
     private _icon;
     private _labelPosition;
     private get _submittedValue();
-    private readonly _changeListener;
-    private readonly _inputSlotListener;
+    private readonly _clickListener;
+    private readonly _keydownListener;
+    private readonly _keyupListener;
     constructor(_adapter: ISwitchAdapter);
     initialize(): void;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+    private _handleKeydown;
+    private _handleKeyup;
     private _handleChange;
-    private _handleInputSlotChange;
     private _setOnAttribute;
     get on(): boolean;
     set on(value: boolean);

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, start);--_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/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) {