@m3e/switch 1.0.0-rc.1 → 1.0.0-rc.2

package/src/styles/SwitchHandleStyle.ts

@@ -1,140 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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;
-  }
-`;

package/src/styles/SwitchToken.ts

@@ -1,145 +0,0 @@
-import { unsafeCSS } from "lit";
-
-import { DesignToken } from "@m3e/core";
-
-/**
- * Component design tokens that control `M3eSwitchElement`.
- * @internal
- */
-export const SwitchToken = {
-  selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),
-  selectedIconSize: unsafeCSS("var(--m3e-switch-selected-icon-size, 1rem)"),
-  unselectedIconColor: unsafeCSS(
-    `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  unselectedIconSize: unsafeCSS("var(--m3e-switch-unselected-icon-size, 1rem)"),
-  trackHeight: unsafeCSS("var(--m3e-switch-track-height, 2rem)"),
-  trackWidth: unsafeCSS("var(--m3e-switch-track-width, 3.25rem)"),
-  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),
-  trackOutlineWidth: unsafeCSS("var(--m3e-switch-track-outline-width, 0.125rem)"),
-  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),
-  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),
-  unselectedTrackColor: unsafeCSS(
-    `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  unselectedHandleHeight: unsafeCSS("var(--m3e-switch-unselected-handle-height, 1rem)"),
-  unselectedHandleWidth: unsafeCSS("var(--m3e-switch-unselected-handle-width, 1rem)"),
-  withIconHandleHeight: unsafeCSS("var(--m3e-switch-with-icon-handle-height, 1.5rem)"),
-  withIconHandleWidth: unsafeCSS("var(--m3e-switch-with-icon-handle-width, 1.5rem)"),
-  selectedHandleHeight: unsafeCSS("var(--m3e-switch-selected-handle-height, 1.5rem)"),
-  selectedHandleWidth: unsafeCSS("var(--m3e-switch-selected-handle-width, 1.5rem)"),
-  pressedHandleHeight: unsafeCSS("var(--m3e-switch-pressed-handle-height, 1.75rem)"),
-  pressedHandleWidth: unsafeCSS("var(--m3e-switch-pressed-handle-width, 1.75rem)"),
-  handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),
-  selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),
-  unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),
-  stateLayerSize: unsafeCSS("var(--m3e-switch-state-layer-size, 2.5rem)"),
-  stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),
-  disabledSelectedIconColor: unsafeCSS(
-    `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`
-  ),
-  disabledSelectedIconOpacity: unsafeCSS("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),
-  disabledUnselectedIconColor: unsafeCSS(
-    `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  disabledUnselectedIconOpacity: unsafeCSS("var(--m3e-switch-disabled-unselected-icon-opacity, 38%)"),
-  disabledTrackOpacity: unsafeCSS("var(--m3e-switch-disabled-track-opacity, 12%)"),
-  disabledSelectedTrackColor: unsafeCSS(
-    `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`
-  ),
-  disabledUnselectedTrackColor: unsafeCSS(
-    `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  disabledUnselectedTrackOutlineColor: unsafeCSS(
-    `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`
-  ),
-  disabledUnselectedHandleOpacity: unsafeCSS("var(--m3e-switch-disabled-unselected-handle-opacity, 38%)"),
-  disabledSelectedHandleOpacity: unsafeCSS("var(--m3e-switch-disabled-selected-handle-opacity, 100%)"),
-  disabledSelectedHandleColor: unsafeCSS(
-    `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`
-  ),
-  disabledUnselectedHandleColor: unsafeCSS(
-    `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`
-  ),
-  selectedHoverIconColor: unsafeCSS(
-    `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`
-  ),
-  unselectedHoverIconColor: unsafeCSS(
-    `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),
-  selectedHoverStateLayerColor: unsafeCSS(
-    `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`
-  ),
-  selectedHoverStateLayerOpacity: unsafeCSS("var(--m3e-switch-selected-hover-state-layer-opacity, 8%)"),
-  unselectedHoverTrackColor: unsafeCSS(
-    `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  unselectedHoverTrackOutlineColor: unsafeCSS(
-    `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`
-  ),
-  unselectedHoverStateLayerColor: unsafeCSS(
-    `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`
-  ),
-  unselectedHoverStateLayerOpacity: unsafeCSS("var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)"),
-  selectedHoverHandleColor: unsafeCSS(
-    `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  unselectedHoverHandleColor: unsafeCSS(
-    `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`
-  ),
-  selectedFocusIconColor: unsafeCSS(
-    `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`
-  ),
-  unselectedFocusIconColor: unsafeCSS(
-    `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),
-  selectedFocusStateLayerColor: unsafeCSS(
-    `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`
-  ),
-  selectedFocusStateLayerOpacity: unsafeCSS("var(--m3e-switch-selected-focus-state-layer-opacity, 10%)"),
-  unselectedFocusTrackColor: unsafeCSS(
-    `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  unselectedFocusTrackOutlineColor: unsafeCSS(
-    `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`
-  ),
-  unselectedFocusStateLayerColor: unsafeCSS(
-    `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`
-  ),
-  unselectedFocusStateLayerOpacity: unsafeCSS("var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)"),
-  selectedFocusHandleColor: unsafeCSS(
-    `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`
-  ),
-  unselectedFocusHandleColor: unsafeCSS(
-    `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`
-  ),
-  selectedPressedIconColor: unsafeCSS(
-    `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`
-  ),
-  unselectedPressedIconColor: unsafeCSS(
-    `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),
-  selectedPressedStateLayerColor: unsafeCSS(
-    `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`
-  ),
-  selectedPressedStateLayerOpacity: unsafeCSS("var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)"),
-  unselectedPressedTrackColor: unsafeCSS(
-    `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`
-  ),
-  unselectedPressedTrackOutlineColor: unsafeCSS(
-    `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`
-  ),
-  unselectedPressedStateLayerColor: unsafeCSS(
-    `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`
-  ),
-  unselectedPressedStateLayerOpacity: unsafeCSS("var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)"),
-  selectedPressedHandleColor: unsafeCSS(
-    `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`
-  ),
-  unselectedPressedHandleColor: unsafeCSS(
-    `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`
-  ),
-} as const;

package/src/styles/SwitchTrackStyle.ts

@@ -1,104 +0,0 @@
-import { css, unsafeCSS } from "lit";
-import { DesignToken } from "@m3e/core";
-
-import { SwitchToken } from "./SwitchToken";
-
-/**
- * Track styles for `M3eSwitchElement`.
- * @internal
- */
-export const SwitchTrackStyle = css`
-  .track {
-    display: flex;
-    align-items: center;
-    position: relative;
-    box-sizing: border-box;
-    border-radius: ${SwitchToken.trackShape};
-    width: ${SwitchToken.trackWidth};
-    height: ${SwitchToken.trackHeight};
-    transition: ${unsafeCSS(
-      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`
-    )};
-  }
-  :host(:not([checked])) .track {
-    border-width: ${SwitchToken.trackOutlineWidth};
-    border-style: solid;
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {
-    border-color: ${SwitchToken.trackOutlineColor};
-    background-color: ${SwitchToken.unselectedTrackColor};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) {
-    border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};
-    background-color: ${SwitchToken.unselectedHoverTrackColor};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) {
-    border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};
-    background-color: ${SwitchToken.unselectedFocusTrackColor};
-  }
-  :host(:not([aria-disabled="true"]):not([checked])) .track.pressed {
-    border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};
-    background-color: ${SwitchToken.unselectedPressedTrackColor};
-  }
-  :host([aria-disabled="true"]:not([checked])) .track {
-    border-color: color-mix(
-      in srgb,
-      ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},
-      transparent
-    );
-    background-color: color-mix(
-      in srgb,
-      ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},
-      transparent
-    );
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {
-    background-color: ${SwitchToken.selectedTrackColor};
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) {
-    background-color: ${SwitchToken.selectedHoverTrackColor};
-  }
-  :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) {
-    background-color: ${SwitchToken.selectedFocusTrackColor};
-  }
-  :host(:not([aria-disabled="true"])[checked]) .track.pressed {
-    background-color: ${SwitchToken.selectedPressedTrackColor};
-  }
-  :host([aria-disabled="true"][checked]) .track {
-    background-color: color-mix(
-      in srgb,
-      ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},
-      transparent
-    );
-  }
-  @media (forced-colors: active) {
-    .track {
-      transition: none;
-    }
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed),
-    :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed),
-    :host(:not([aria-disabled="true"]):not([checked])) .track.pressed {
-      border-color: ButtonText;
-      background-color: Canvas;
-    }
-    :host([aria-disabled="true"]:not([checked])) .track {
-      border-color: GrayText;
-      background-color: Canvas;
-    }
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed),
-    :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed),
-    :host(:not([aria-disabled="true"])[checked]) .track.pressed {
-      background-color: ButtonText;
-    }
-    :host([aria-disabled="true"][checked]) .track {
-      background-color: GrayText;
-    }
-  }
-  @media (prefers-reduced-motion) {
-    .track {
-      transition: none;
-    }
-  }
-`;

package/src/styles/index.ts

@@ -1,5 +0,0 @@
-export * from "./SwitchHandleStyle";
-export * from "./SwitchIconStyle";
-export * from "./SwitchStateLayerStyle";
-export * from "./SwitchStyle";
-export * from "./SwitchTrackStyle";

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist/src"
-  },
-  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
-  "exclude": []
-}