chore(checkbox): address pr comments

src/lib/checkbox/checkbox-adapter.ts

@@ -1,5 +1,5 @@
 import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
-import { BaseAdapter, IBaseAdapter, INPUT_PROPERTIES, InputAdapter, cloneAttributes, cloneProperties, cloneValidationMessage, forwardAttributes } from '../core';
+import { BaseAdapter, IBaseAdapter, INPUT_PROPERTIES, SlottedElementAdapter, cloneAttributes, cloneProperties, cloneValidationMessage, forwardAttributes } from '../core';
 import { StateLayerComponent } from '../state-layer';
 import { ICheckboxComponent } from './checkbox';
 import { CHECKBOX_CONSTANTS, CheckboxLabelPosition, CheckboxState } from './checkbox-constants';
@@ -28,7 +28,7 @@ export class CheckboxAdapter extends BaseAdapter<ICheckboxComponent> implements
   private readonly _labelElement: HTMLElement;
   private readonly _inputSlotElement: HTMLSlotElement;
   private readonly _stateLayerElement: StateLayerComponent;
-  private readonly _inputAdapter: InputAdapter;
+  private readonly _inputAdapter: SlottedElementAdapter<HTMLInputElement>;
   private _forwardObserver?: MutationObserver;
 
   private get _activeInputElement(): HTMLInputElement {
@@ -43,19 +43,31 @@ export class CheckboxAdapter extends BaseAdapter<ICheckboxComponent> implements
     this._labelElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.LABEL);
     this._inputSlotElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.INPUT_SLOT) as HTMLSlotElement;
     this._stateLayerElement = getShadowElement(component, CHECKBOX_CONSTANTS.selectors.STATE_LAYER) as StateLayerComponent;
-    this._inputAdapter = new InputAdapter();
+    this._inputAdapter = new SlottedElementAdapter();
   }
 
   public initialize(): void {
-    this._inputAdapter.initialize(this._inputElement, (newEl, oldEl) => {
-      if (oldEl) {
-        cloneAttributes(oldEl, newEl, ['type', 'checked', 'aria-readonly']);
-        cloneProperties(oldEl, newEl, INPUT_PROPERTIES);
-        cloneValidationMessage(oldEl, newEl);
-      }
-
-      this._forwardObserver?.disconnect();
-      this._initializeForwardObserver(newEl);
+    const slottedInput = this._component.querySelector(':is(input[type=checkbox]:not([slot]), [slot=input])') as HTMLInputElement;
+    if (slottedInput) {
+      slottedInput.slot = 'input';
+    }
+    this.observeInput(slottedInput ?? this._inputElement);
+    if (!slottedInput) {
+      this.initializeInput();
+    }
+  }
+
+  public initializeInput(): void {
+    this._forwardObserver?.disconnect();
+    this._initializeForwardObserver(this._activeInputElement);
+  }
+
+  public observeInput(el: HTMLInputElement = this._inputElement): void {
+    this._inputAdapter.initialize(el, (newEl, oldEl) => {
+      cloneAttributes(oldEl, newEl, ['type', 'checked', 'aria-readonly']);
+      cloneProperties(oldEl, newEl, INPUT_PROPERTIES);
+      cloneValidationMessage(oldEl, newEl);
+      this.initializeInput();
     });
   }
 
@@ -111,9 +123,9 @@ export class CheckboxAdapter extends BaseAdapter<ICheckboxComponent> implements
   public detectInputElement(): void {
     const inputElement = this._inputSlotElement.assignedElements()[0] as HTMLInputElement;
     if (inputElement) {
-      this._inputAdapter.attachInput(inputElement);
+      this._inputAdapter.attachElement(inputElement);
     } else {
-      this._inputAdapter.attachInput(this._inputElement);
+      this._inputAdapter.attachElement(this._inputElement);
     }
   }
 

src/lib/checkbox/checkbox.html

@@ -1,19 +1,19 @@
 <template>
   <div class="forge-checkbox" part="checkbox">
-    <div id="container" class="container" part="input-container">
+    <div id="container" class="container">
       <slot name="input">
-        <input id="input" class="input" type="checkbox" part="input" />
+        <input id="input" class="input" type="checkbox" />
       </slot>
       <div class="background" part="background">
         <svg class="icon icon--checked" aria-hidden="true" viewBox="0 0 24 24" part="checkmark">
-          <path class="path path--checkmark" d="M1.73,12.91 8.1,19.28 22.79,4.59" part="checkmark-path"></path>
+          <path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
         </svg>
         <svg class="icon icon--indeterminate" aria-hidden="true" viewBox="0 0 24 24" part="mixedmark">
-          <line x1="2" y1="12" x2="22" y2="12" part="mixedmark-path"></line>
+          <line x1="2" y1="12" x2="22" y2="12"></line>
         </svg>
-        <forge-focus-indicator target="container" part="focus-indicator"></forge-focus-indicator>
+        <forge-focus-indicator target="container" exportparts="indicator:focus-indicator"></forge-focus-indicator>
       </div>
-      <forge-state-layer target="container" part="state-layer"></forge-state-layer>
+      <forge-state-layer target="container" exportparts="surface:state-layer"></forge-state-layer>
     </div>
     <label id="label" for="input" class="label" part="label">
       <slot></slot>

src/lib/checkbox/checkbox.scss

@@ -1,6 +1,5 @@
 @use './core';
 @use './configuration';
-@use '../core/styles/tokens/checkbox/tokens';
 @use '../focus-indicator';
 @use '../state-layer';
 

src/lib/core/styles/tokens/checkbox/_tokens.scss

@@ -21,7 +21,7 @@ $tokens: (
   width: utils.module-ref(checkbox, width, size),
   height: utils.module-ref(checkbox, height, size),
   unchecked-border-width: utils.module-ref(checkbox, unchecked-border-width, border-width),
-  unchecked-border-color: utils.module-val(checkbox, unchecked-border-color, theme.variable(surface-container-high)), // TODO: check out surface-container
+  unchecked-border-color: utils.module-val(checkbox, unchecked-border-color, theme.variable(surface-container-high)),
   shape: utils.module-val(checkbox, shape, shape.variable(small)),
   elevation: utils.module-val(checkbox, elevation, elevation.value(0)),
 

src/lib/core/utils/reflect-utils.ts

@@ -162,16 +162,16 @@ export function cloneValidationMessage(from: HTMLInputElement, to: HTMLInputElem
 }
 
 /**
- * A utility class for switching between input elements.
+ * A utility class for switching between elements.
  */
-export class InputAdapter {
-  private _el: HTMLInputElement;
-  private _attachCallback: (newEl: HTMLInputElement, oldEl?: HTMLInputElement) => void;
+export class SlottedElementAdapter<T extends HTMLElement = HTMLElement> {
+  private _el: T;
+  private _attachCallback: (newEl: T, oldEl: T) => void;
 
   /**
-   * Returns the input element associated with this adapter.
+   * Returns the element associated with this adapter.
    */
-  public get el(): HTMLInputElement {
+  public get el(): T {
     return this._el;
   }
 
@@ -182,7 +182,7 @@ export class InputAdapter {
    * @param to - The element to clone attributes to.
    * @param attributes - The names of the attributes to clone.
    */
-  public static cloneAttributes(from: HTMLInputElement, to: HTMLInputElement, attributes: string[]): void {
+  public static cloneAttributes(from: HTMLElement, to: HTMLElement, attributes: string[]): void {
     cloneAttributes(from, to, attributes);
   }
 
@@ -192,38 +192,41 @@ export class InputAdapter {
    * @param from - The element to clone properties from.
    * @param to - The element to clone properties to.
    */
-  public static cloneProperties(from: HTMLInputElement, to: HTMLInputElement): void {
-    cloneProperties(from, to, INPUT_PROPERTIES);
+  public static cloneProperties(from: HTMLElement, to: HTMLElement, properties: (keyof HTMLElement)[]): void {
+    cloneProperties(from, to, properties);
   }
 
   /**
-   * Clones the validation message from one input element to another.
+   * Clones the validation message from one element to another.
    * 
-   * @param from - The input element to clone the validation message from.
-   * @param to - The input element to clone the validation message to.
+   * @param from - The element to clone the validation message from.
+   * @param to - The element to clone the validation message to.
    */
-  public static cloneValidationMessage(from: HTMLInputElement, to: HTMLInputElement): void {
-    cloneValidationMessage(from, to);
+  public static cloneValidationMessage(from: HTMLElement, to: HTMLElement): void {
+    if (Object.hasOwnProperty.call(from, 'validationMessage') && Object.hasOwnProperty.call(to, 'validationMessage')) {
+      cloneValidationMessage(from as HTMLInputElement, to as HTMLInputElement);
+    } else {
+      console.warn('cloneValidationMessage() requires both elements to be input elements.');
+    }
   }
 
   /**
-   * Initializes the adapter with an initial input element and attach callback.
+   * Initializes the adapter with an initial element and attach callback.
    * 
-   * @param el - The input element to associate with the adapter.
-   * @param attachCallback - The callback to invoke when attaching the input element.
+   * @param el - The element to associate with the adapter.
+   * @param attachCallback - The callback to invoke when attaching the element.
    */
-  public initialize(el: HTMLInputElement, attachCallback: (newEl: HTMLInputElement, oldEl?: HTMLInputElement) => void): void {
+  public initialize(el: T, attachCallback: (newEl: T, oldEl: T) => void): void {
     this._attachCallback = attachCallback;
-    this._attachCallback(el, this._el);
     this._el = el;
   }
 
   /**
-   * Replaces the attached input element.
+   * Replaces the attached element.
    * 
-   * @param el - The new input element to attach.
+   * @param el - The new element to attach.
    */
-  public attachInput(el: HTMLInputElement): void {
+  public attachElement(el: T): void {
     this._attachCallback(el, this._el);
     this._el = el;
   }

src/lib/list/list/list-adapter.ts

@@ -32,7 +32,6 @@ export class ListAdapter extends BaseAdapter<IListComponent> implements IListAda
     const listItems = this._getFocusableListItems();
     if (listItems.length) {
       const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus'));
-      console.log('focusedListItemIndex', focusedListItemIndex);
       const nextIndex = focusedListItemIndex < listItems.length - 1 ? focusedListItemIndex + 1 : 0;
       if (nextIndex <= listItems.length - 1) {
         listItems[nextIndex].focus({ preventScroll: true});

src/lib/slider/slider.html

@@ -6,8 +6,8 @@
       <div class="handle-container-block">
         <div class="handle-container">
           <div class="handle end" part="handle-end">
-            <forge-state-layer exportparts="surface:state-layer__surface" target="end"></forge-state-layer>
-            <forge-focus-indicator exportparts="indicator:focus-indicator__indicator" target="end"></forge-focus-indicator>
+            <forge-state-layer exportparts="surface:state-layer" target="end"></forge-state-layer>
+            <forge-focus-indicator exportparts="indicator:focus-indicator" target="end"></forge-focus-indicator>
             <div class="handle-thumb" part="handle-end-thumb"></div>
             <div class="handle-label" part="handle-end-label">
               <span class="handle-label-content" part="handle-end-label-content"></span>

src/lib/switch/switch-adapter.ts

@@ -1,5 +1,5 @@
 import { getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
-import { BaseAdapter, IBaseAdapter, InputAdapter, forwardAttributes } from '../core';
+import { BaseAdapter, IBaseAdapter, SlottedElementAdapter, forwardAttributes } from '../core';
 import { StateLayerComponent } from '../state-layer';
 import { ISwitchComponent } from './switch';
 import { SWITCH_CONSTANTS, SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
@@ -30,7 +30,7 @@ export class SwitchAdapter extends BaseAdapter<ISwitchComponent> implements ISwi
   private readonly _iconOffElement: HTMLElement;
   private readonly _inputSlotElement: HTMLSlotElement;
   private readonly _stateLayerElement: StateLayerComponent;
-  private readonly _inputAdapter: InputAdapter;
+  private readonly _inputAdapter: SlottedElementAdapter;
   private _forwardObserver?: MutationObserver;
 
   private get _activeInputElement(): HTMLInputElement {
@@ -46,15 +46,15 @@ export class SwitchAdapter extends BaseAdapter<ISwitchComponent> implements ISwi
     this._iconOnElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ICON_ON);
     this._iconOffElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ICON_OFF);
     this._stateLayerElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.STATE_LAYER) as StateLayerComponent;
-    this._inputAdapter = new InputAdapter();
+    this._inputAdapter = new SlottedElementAdapter();
   }
 
   public initialize(): void {
     this._inputAdapter.initialize(this._inputElement, (newEl, oldEl) => {
       if (oldEl) {
-        InputAdapter.cloneAttributes(oldEl, newEl, ['type', 'role', 'checked', 'aria-readonly']);
-        InputAdapter.cloneProperties(oldEl, newEl);
-        InputAdapter.cloneValidationMessage(oldEl, newEl);
+        SlottedElementAdapter.cloneAttributes(oldEl, newEl, ['type', 'role', 'checked', 'aria-readonly']);
+        SlottedElementAdapter.cloneProperties(oldEl, newEl);
+        SlottedElementAdapter.cloneValidationMessage(oldEl, newEl);
       }
 
       this._forwardObserver?.disconnect();
@@ -121,9 +121,9 @@ export class SwitchAdapter extends BaseAdapter<ISwitchComponent> implements ISwi
   public detectInputElement(): void {
     const inputElement = this._inputSlotElement.assignedElements()[0] as HTMLInputElement;
     if (inputElement) {
-      this._inputAdapter.attachInput(inputElement);
+      this._inputAdapter.attachElement(inputElement);
     } else {
-      this._inputAdapter.attachInput(this._inputElement);
+      this._inputAdapter.attachElement(this._inputElement);
     }
   }