@m3e/switch 1.0.0-rc.1

package/rollup.config.js

@@ -0,0 +1,32 @@
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+
+const banner = `/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */`;
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/index.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/index.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["@m3e/core", "lit"],
+    plugins: [resolve(), typescript()],
+  },
+];

package/src/SwitchElement.ts

@@ -0,0 +1,268 @@
+import { CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+import {
+  Labelled,
+  Checked,
+  ConstraintValidation,
+  Dirty,
+  Disabled,
+  FormAssociated,
+  formValue,
+  Touched,
+  AttachInternals,
+  Role,
+  M3eFocusRingElement,
+  M3eStateLayerElement,
+  Focusable,
+  KeyboardClick,
+  PressedController,
+  HoverController,
+} from "@m3e/core";
+
+import { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from "./styles";
+
+import { SwitchIcons } from "./SwitchIcons";
+
+/**
+ * @summary
+ * An on/off control that can be toggled by clicking.
+ *
+ * @description
+ * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.
+ * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color
+ * theming across selected, unselected, and disabled states. The component responds to user interaction
+ * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)
+ * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.
+ *
+ * @example
+ * The following example illustrates a switch wrapped by a `label`.
+ *
+ * ```html
+ * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>
+ * ```
+ *
+ * @example
+ * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next
+ * example illustrates showing both the unselected and selected icons.
+ *
+ * ```html
+ * <label>Switch label&nbsp;<m3e-switch icons="both"></m3e-switch></label>
+ * ```
+ *
+ * @tag m3e-switch
+ *
+ * @attr checked - Whether the element is checked.
+ * @attr disabled - Whether the element is disabled.
+ * @attr icons - The icons to present.
+ * @attr name - The name that identifies the element when submitting the associated form.
+ * @attr value - A string representing the value of the switch.
+ *
+ * @fires input - Emitted when the checked state changes.
+ * @fires change - Emitted when the checked state changes.
+ *
+ * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.
+ * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.
+ * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.
+ * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.
+ * @cssprop --m3e-switch-track-height - Height of the switch track.
+ * @cssprop --m3e-switch-track-width - Width of the switch track.
+ * @cssprop --m3e-switch-track-outline-color - Color of the track’s outline.
+ * @cssprop --m3e-switch-track-outline-width - Thickness of the track’s outline.
+ * @cssprop --m3e-switch-track-shape - Corner shape of the track.
+ * @cssprop --m3e-switch-selected-track-color - Track color when selected.
+ * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.
+ * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.
+ * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.
+ * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.
+ * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.
+ * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.
+ * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.
+ * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.
+ * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.
+ * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.
+ * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.
+ * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.
+ * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.
+ * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.
+ * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.
+ * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.
+ * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.
+ * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.
+ * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.
+ * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.
+ * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.
+ * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.
+ * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.
+ * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.
+ * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.
+ * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.
+ * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.
+ * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.
+ * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.
+ * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.
+ * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.
+ * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.
+ * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.
+ * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.
+ * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.
+ */
+@customElement("m3e-switch")
+export class M3eSwitchElement extends Labelled(
+  Dirty(
+    Touched(
+      ConstraintValidation(
+        Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, "switch")))))))
+      )
+    )
+  )
+) {
+  /** The styles of the element. */
+  static override styles: CSSResultGroup = [
+    SwitchStyle,
+    SwitchStateLayerStyle,
+    SwitchTrackStyle,
+    SwitchHandleStyle,
+    SwitchIconStyle,
+  ];
+
+  /** @private */ @query(".track") private readonly _track?: HTMLElement;
+  /** @private */ @query(".focus-ring") private readonly _focusRing?: M3eFocusRingElement;
+  /** @private */ @query(".state-layer") private readonly _stateLayer?: M3eStateLayerElement;
+  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);
+
+  /** @private */ readonly #hoverController = new HoverController(this, {
+    target: null,
+    callback: (hovering) => {
+      if (this.disabled) return;
+      if (hovering) {
+        this._stateLayer?.show("hover");
+      } else {
+        this._stateLayer?.hide("hover");
+      }
+    },
+  });
+
+  /** @private */ readonly #pressedController = new PressedController(this, {
+    target: null,
+    callback: (pressed) => this._track?.classList.toggle("pressed", pressed && !this.disabled),
+  });
+
+  constructor() {
+    super();
+
+    new PressedController(this, {
+      isPressedKey: (key) => key === " " || key === "Enter",
+      callback: (pressed) => this._track?.classList.toggle("pressed", pressed && !this.disabled),
+    });
+  }
+
+  /**
+   * The icons to present.
+   * @default "none"
+   */
+  @property({ reflect: true }) icons: SwitchIcons = "none";
+
+  /**
+   * A string representing the value of the switch.
+   * @default "on"
+   */
+  @property() value = "on";
+
+  /** @inheritdoc @private */
+  override get [formValue](): string | File | FormData | null {
+    return !this.checked ? null : this.value;
+  }
+
+  /** @inheritdoc */
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addEventListener("click", this.#clickHandler);
+    for (const label of this.labels) {
+      this.#hoverController.observe(label);
+      this.#pressedController.observe(label);
+    }
+  }
+
+  /** @inheritdoc */
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this.removeEventListener("click", this.#clickHandler);
+    for (const label of this.labels) {
+      this.#hoverController.unobserve(label);
+      this.#pressedController.unobserve(label);
+    }
+  }
+
+  /** @inheritdoc */
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));
+  }
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    return html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>
+      <div class="track" aria-hidden="true">
+        <div class="touch" aria-hidden="true"></div>
+        <div class="handle">
+          <m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
+          <div class="base">${this.#renderIcon()}</div>
+        </div>
+      </div>`;
+  }
+
+  /** @private */
+  #renderIcon(): unknown {
+    return this.checked
+      ? html`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path fill="currentColor" d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"></path>
+        </svg>`
+      : html`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor">
+          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+        </svg>`;
+  }
+
+  /** @private */
+  #handleClick(e: Event): void {
+    if (e.defaultPrevented) return;
+    this.checked = !this.checked;
+    if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true }))) {
+      this.dispatchEvent(new Event("change", { bubbles: true }));
+    } else {
+      this.checked = !this.checked;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-switch": M3eSwitchElement;
+  }
+}

package/src/SwitchIcons.ts

@@ -0,0 +1,2 @@
+/** Specifies the possible icons to display in a switch. */
+export type SwitchIcons = "none" | "selected" | "both";

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./SwitchElement";
+export * from "./SwitchIcons";

package/src/styles/SwitchHandleStyle.ts

@@ -0,0 +1,140 @@
+import { css, unsafeCSS } from "lit";
+import { DesignToken } from "@m3e/core";
+
+import { SwitchToken } from "./SwitchToken";
+
+/**
+ * Handle styles for `M3eSwitchElement`.
+ * @internal
+ */
+export const SwitchHandleStyle = css`
+  .handle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    transform-origin: center center;
+    border-radius: ${SwitchToken.handleShape};
+    transition: ${unsafeCSS(
+      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+      transform var(--_switch-handle-effect),
+      width ${DesignToken.motion.spring.fastEffects},
+      height ${DesignToken.motion.spring.fastEffects}`
+    )};
+  }
+  .track:not(.pressed) .handle {
+    --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};
+  }
+  .track.pressed .handle {
+    --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};
+  }
+  :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle {
+    width: ${SwitchToken.withIconHandleWidth};
+    height: ${SwitchToken.withIconHandleHeight};
+  }
+  :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle,
+  :host([aria-disabled="true"]:not([checked])) .handle {
+    width: ${SwitchToken.unselectedHandleWidth};
+    height: ${SwitchToken.unselectedHandleHeight};
+  }
+  :host([checked]) .track:not(.pressed) .handle {
+    width: ${SwitchToken.selectedHandleWidth};
+    height: ${SwitchToken.selectedHandleHeight};
+  }
+  .track.pressed .handle {
+    width: ${SwitchToken.pressedHandleWidth};
+    height: ${SwitchToken.pressedHandleHeight};
+  }
+  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {
+    background-color: ${SwitchToken.unselectedHandleColor};
+  }
+  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {
+    background-color: ${SwitchToken.unselectedHoverHandleColor};
+  }
+  :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle {
+    background-color: ${SwitchToken.unselectedFocusHandleColor};
+  }
+  :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle {
+    background-color: ${SwitchToken.unselectedPressedHandleColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {
+    background-color: ${SwitchToken.selectedHandleColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {
+    background-color: ${SwitchToken.selectedHoverHandleColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle {
+    background-color: ${SwitchToken.selectedFocusHandleColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle {
+    background-color: ${SwitchToken.selectedPressedHandleColor};
+  }
+  :host([aria-disabled="true"]:not([checked])) .handle {
+    background-color: color-mix(
+      in srgb,
+      ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},
+      transparent
+    );
+  }
+  :host([aria-disabled="true"][checked]) .handle {
+    background-color: color-mix(
+      in srgb,
+      ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},
+      transparent
+    );
+  }
+  :host([checked]) .track:not(.pressed) .handle {
+    transform: translateX(
+      calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - ${SwitchToken.trackOutlineWidth})
+    );
+  }
+  :host([checked]) .track.pressed .handle {
+    transform: translateX(
+      calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})
+    );
+  }
+  :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle,
+  :host([aria-disabled="true"]:not([checked])) .handle {
+    transform: translateX(
+      calc(
+        ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})
+      )
+    );
+  }
+  :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle {
+    transform: translateX(${SwitchToken.trackOutlineWidth});
+  }
+  @media (forced-colors: active) {
+    .handle {
+      transition: ${unsafeCSS(
+        `transform var(--_switch-handle-effect),
+      width ${DesignToken.motion.spring.fastEffects},
+      height ${DesignToken.motion.spring.fastEffects}`
+      )};
+    }
+    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,
+    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,
+    :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle,
+    :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle {
+      background-color: ButtonText;
+    }
+    :host([aria-disabled="true"]:not([checked])) .handle {
+      background-color: GrayText;
+    }
+    :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,
+    :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,
+    :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle,
+    :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle {
+      background-color: Canvas;
+    }
+    :host([aria-disabled="true"][checked]) .handle {
+      background-color: Canvas;
+    }
+  }
+  @media (prefers-reduced-motion) {
+    .handle {
+      transition: none;
+    }
+  }
+`;

package/src/styles/SwitchIconStyle.ts

@@ -0,0 +1,89 @@
+import { css, unsafeCSS } from "lit";
+import { DesignToken } from "@m3e/core";
+
+import { SwitchToken } from "./SwitchToken";
+
+/**
+ * Icon styles for `M3eSwitchElement`.
+ * @internal
+ */
+export const SwitchIconStyle = css`
+  :host([icons="none"]) .icon,
+  :host([icons="selected"]:not([checked])) .icon,
+  :host([aria-disabled="true"]:not([checked])) .icon {
+    display: none;
+  }
+  .icon {
+    width: 1em;
+    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
+  }
+  :host(:not([checked])) .icon {
+    font-size: ${SwitchToken.unselectedIconSize};
+  }
+  :host([checked]) .icon {
+    font-size: ${SwitchToken.selectedIconSize};
+  }
+  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {
+    color: ${SwitchToken.unselectedIconColor};
+  }
+  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {
+    color: ${SwitchToken.unselectedHoverIconColor};
+  }
+  :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon {
+    color: ${SwitchToken.unselectedFocusIconColor};
+  }
+  :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon {
+    color: ${SwitchToken.unselectedPressedIconColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {
+    color: ${SwitchToken.selectedIconColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {
+    color: ${SwitchToken.selectedHoverIconColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon {
+    color: ${SwitchToken.selectedFocusIconColor};
+  }
+  :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon {
+    color: ${SwitchToken.selectedPressedIconColor};
+  }
+  :host([aria-disabled="true"]:not([checked])) .icon {
+    color: color-mix(
+      in srgb,
+      ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},
+      transparent
+    );
+  }
+  :host([aria-disabled="true"][checked]) .icon {
+    color: color-mix(
+      in srgb,
+      ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},
+      transparent
+    );
+  }
+  @media (forced-colors: active) {
+    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,
+    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,
+    :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon,
+    :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon {
+      color: Canvas;
+    }
+    :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,
+    :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,
+    :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon,
+    :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon {
+      color: CanvasText;
+    }
+    :host([aria-disabled="true"]:not([checked])) .icon {
+      color: Canvas;
+    }
+    :host([aria-disabled="true"][checked]) .icon {
+      color: GrayText;
+    }
+  }
+  @media (prefers-reduced-motion) {
+    .icon {
+      transition: none;
+    }
+  }
+`;

package/src/styles/SwitchStateLayerStyle.ts

@@ -0,0 +1,43 @@
+import { css } from "lit";
+
+import { SwitchToken } from "./SwitchToken";
+
+/**
+ * State layer styles for `M3eSwitchElement`.
+ * @internal
+ */
+export const SwitchStateLayerStyle = css`
+  .state-layer {
+    width: ${SwitchToken.stateLayerSize};
+    height: ${SwitchToken.stateLayerSize};
+    border-radius: ${SwitchToken.stateLayerShape};
+  }
+  :host(:not([checked])[icons="both"]) .track:not(.pressed) .state-layer {
+    left: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));
+    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));
+  }
+  :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .state-layer {
+    left: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2));
+    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));
+  }
+  :host([checked]) .track:not(.pressed) .state-layer {
+    left: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));
+    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));
+  }
+  .track.pressed .state-layer {
+    left: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));
+    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));
+  }
+  :host(:not([checked])) .state-layer {
+    --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};
+    --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};
+    --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};
+    --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};
+  }
+  :host([checked]) .state-layer {
+    --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};
+    --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};
+    --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};
+    --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};
+  }
+`;

package/src/styles/SwitchStyle.ts

@@ -0,0 +1,30 @@
+import { css } from "lit";
+import { SwitchToken } from "./SwitchToken";
+
+/**
+ * Baseline styles for `M3eSwitchElement`.
+ * @internal
+ */
+export const SwitchStyle = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    height: fit-content;
+    width: fit-content;
+  }
+  .focus-ring {
+    border-radius: ${SwitchToken.trackShape};
+  }
+  .touch {
+    position: absolute;
+    height: 3rem;
+    left: 0;
+    right: 0;
+  }
+  .base {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;