feat(switch): refactor switch component

---------

Co-authored-by: Nichols, Kieran <kieran.nichols@tylertech.com>

package.json

@@ -54,12 +54,7 @@
     "@material/rtl": "^14.0.0",
     "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
-    "@material/slider": "^14.0.0",
-    "@material/switch": "^14.0.0",
-    "@material/tab-indicator": "^14.0.0",
-    "@material/tab-scroller": "^14.0.0",
     "@material/theme": "^14.0.0",
-    "@material/tokens": "^14.0.0",
     "@material/top-app-bar": "^14.0.0",
     "@material/touch-target": "^14.0.0",
     "@material/typography": "^14.0.0",

src/dev/pages/switch/switch.ejs

@@ -1,7 +1,7 @@
 <div class="vert">
   <div>
     <h3 class="forge-typography--subtitle1-secondary">Default</h3>
-    <forge-switch id="forge-switch-01">
+    <forge-switch id="forge-switch-01" required aria-label="Active">
       <span>off/on</span>
     </forge-switch>
   </div>
@@ -22,9 +22,38 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Disabled (selected)</h3>
+    <h3 class="forge-typography--subtitle1-secondary">Disabled (on)</h3>
     <forge-switch disabled selected>off/on</forge-switch>
   </div>
+
+  <div>
+    <h3 class="forge-typography--subtitle1-secondary">Custom icons</h3>
+    <forge-switch icon="both">
+      <span>sad/happy</span>
+      <forge-icon slot="icon-off" name="emoticon_sad"></forge-icon>
+      <forge-icon slot="icon-on" name="emoticon_happy"></forge-icon>
+    </forge-switch>
+  </div>
+
+  <form id="test-form">
+    <h3 class="forge-typography--subtitle1-secondary">Form associated</h3>
+    <label class="form-switch">
+      <span class="forge-typography--caption">off/on</span>
+      <forge-switch id="form-switch" name="test-switch" aria-label="Aria active"></forge-switch>
+    </label>
+    <button type="reset">Reset</button>
+    <button type="submit">Submit</button>
+  </form>
+
+  <div>
+    <h3 class="forge-typography--subtitle1-secondary">Custom styling</h3>
+    <forge-switch class="custom-switch" label-position="start">off/on</forge-switch>
+  </div>
+
+  <div>
+    <h3 class="forge-typography--subtitle1-secondary">Prevent default</h3>
+    <forge-switch id="prevent-switch">off/on</forge-switch>
+  </div>
 </div>
 
 <script type="module" src="switch.ts"></script>

src/dev/pages/switch/switch.scss

@@ -0,0 +1,28 @@
+@use '../../../lib/switch';
+
+.form-switch {
+  display: flex;
+  align-items: center;
+}
+
+.custom-switch {
+  --primary-color: var(--forge-theme-primary);
+
+  @include switch.provide-theme((
+    handle-on-color: var(--forge-theme-surface),
+    handle-size: 24px,
+    handle-off-scale: 0.67,
+    handle-active-off-scale: 0.83,
+    handle-on-elevation: none,
+    track-on-color: var(--primary-color),
+    track-width: 54px,
+    track-height: 32px,
+    track-border-width: 2px,
+    track-off-border-color: #9e9e9e,
+    icon-on-size: 16px,
+    icon-on-color: var(--primary-color),
+    direction: column,
+    gap: 4px,
+    state-layer-on-color: var(--primary-color)
+  ));
+}

src/dev/pages/switch/switch.ts

@@ -1,2 +1,20 @@
 import '$src/shared';
 import '@tylertech/forge/switch';
+import { ISwitchComponent, IconRegistry } from '@tylertech/forge';
+import { tylIconEmoticonHappy, tylIconEmoticonSad } from '@tylertech/tyler-icons/extended';
+import './switch.scss';
+
+IconRegistry.define([
+  tylIconEmoticonHappy,
+  tylIconEmoticonSad
+]);
+
+const preventSwitch = document.getElementById('prevent-switch') as ISwitchComponent;
+
+preventSwitch.addEventListener('forge-switch-change', (evt: CustomEvent) => evt.preventDefault());
+
+const testForm = document.getElementById('test-form') as HTMLFormElement;
+testForm.addEventListener('submit', (evt: Event) => {
+  evt.preventDefault();
+  console.log('[submit] switch value:', new FormData(testForm).get('test-switch'));
+});

src/lib/core/base/base-component.ts

@@ -2,3 +2,44 @@ export interface IBaseComponent extends HTMLElement {}
 
 /** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
 export abstract class BaseComponent extends HTMLElement implements IBaseComponent {}
+
+export interface IBaseFormComponent<T = string> extends IBaseComponent {
+  disabled: boolean;
+  required: boolean;
+  name: string;
+  readonly form: HTMLFormElement | null;
+  readonly labels: NodeList;
+  readonly validity: ValidityState;
+  readonly validationMessage: string;
+  readonly willValidate: boolean;
+  readonly internals: ElementInternals;
+  setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  setCustomValidity(error: string): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: T, reason: 'restore' | 'autocomplete'): void;
+  formDisabledCallback(isDisabled: boolean): void;
+}
+
+/** Any form associated Custom HTML element. */
+export abstract class BaseFormComponent<T = string> extends BaseComponent implements IBaseFormComponent<T> {
+  public abstract disabled: boolean;
+  public abstract required: boolean;
+  public abstract name: string;
+
+  public abstract get form(): HTMLFormElement | null;
+  public abstract get labels(): NodeList;
+  public abstract get validity(): ValidityState;
+  public abstract get validationMessage(): string;
+  public abstract get willValidate(): boolean;
+  public abstract get internals(): ElementInternals;
+
+  public abstract setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+  public abstract checkValidity(): boolean;
+  public abstract reportValidity(): boolean;
+  public abstract setCustomValidity(error: string): void;
+  public abstract formResetCallback(): void;
+  public abstract formStateRestoreCallback(state: T, reason: 'restore' | 'autocomplete'): void;
+  public abstract formDisabledCallback(isDisabled: boolean): void;
+}