@m3e/web 2.5.10 → 2.5.12

package/dist/switch.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.min.js","sources":["../../src/switch/styles/SwitchToken.ts","../../src/switch/styles/SwitchHandleStyle.ts","../../src/switch/styles/SwitchIconStyle.ts","../../src/switch/styles/SwitchStateLayerStyle.ts","../../src/switch/styles/SwitchStyle.ts","../../src/switch/styles/SwitchTrackStyle.ts","../../src/switch/SwitchElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchToken = {\r\n  selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),\r\n  selectedIconSize: unsafeCSS(\"var(--m3e-switch-selected-icon-size, 1rem)\"),\r\n  unselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedIconSize: unsafeCSS(\"var(--m3e-switch-unselected-icon-size, 1rem)\"),\r\n  trackHeight: unsafeCSS(\"var(--m3e-switch-track-height, 2rem)\"),\r\n  trackWidth: unsafeCSS(\"var(--m3e-switch-track-width, 3.25rem)\"),\r\n  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),\r\n  trackOutlineWidth: unsafeCSS(\"var(--m3e-switch-track-outline-width, 2px)\"),\r\n  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),\r\n  unselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHandleHeight: unsafeCSS(\"var(--m3e-switch-unselected-handle-height, 1rem)\"),\r\n  unselectedHandleWidth: unsafeCSS(\"var(--m3e-switch-unselected-handle-width, 1rem)\"),\r\n  withIconHandleHeight: unsafeCSS(\"var(--m3e-switch-with-icon-handle-height, 1.5rem)\"),\r\n  withIconHandleWidth: unsafeCSS(\"var(--m3e-switch-with-icon-handle-width, 1.5rem)\"),\r\n  selectedHandleHeight: unsafeCSS(\"var(--m3e-switch-selected-handle-height, 1.5rem)\"),\r\n  selectedHandleWidth: unsafeCSS(\"var(--m3e-switch-selected-handle-width, 1.5rem)\"),\r\n  pressedHandleHeight: unsafeCSS(\"var(--m3e-switch-pressed-handle-height, 1.75rem)\"),\r\n  pressedHandleWidth: unsafeCSS(\"var(--m3e-switch-pressed-handle-width, 1.75rem)\"),\r\n  handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),\r\n  unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),\r\n  stateLayerSize: unsafeCSS(\"var(--m3e-switch-state-layer-size, 2.5rem)\"),\r\n  stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),\r\n  disabledSelectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledSelectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-icon-opacity, 38%)\"),\r\n  disabledUnselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-icon-opacity, 38%)\"),\r\n  disabledTrackOpacity: unsafeCSS(\"var(--m3e-switch-disabled-track-opacity, 12%)\"),\r\n  disabledSelectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-handle-opacity, 38%)\"),\r\n  disabledSelectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-handle-opacity, 100%)\"),\r\n  disabledSelectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`,\r\n  ),\r\n  disabledUnselectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  selectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),\r\n  selectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-hover-state-layer-opacity, 8%)\"),\r\n  unselectedHoverTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)\"),\r\n  selectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),\r\n  selectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-focus-state-layer-opacity, 10%)\"),\r\n  unselectedFocusTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedFocusTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)\"),\r\n  selectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),\r\n  selectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)\"),\r\n  unselectedPressedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedPressedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)\"),\r\n  selectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Handle styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchHandleStyle = css`\r\n  .handle {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: none;\r\n    transform-origin: center center;\r\n    border-radius: ${SwitchToken.handleShape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  .track:not(.pressed) .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};\r\n  }\r\n  .track.pressed .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.withIconHandleWidth};\r\n    height: ${SwitchToken.withIconHandleHeight};\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    width: ${SwitchToken.unselectedHandleWidth};\r\n    height: ${SwitchToken.unselectedHandleHeight};\r\n  }\r\n  :host([checked]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.selectedHandleWidth};\r\n    height: ${SwitchToken.selectedHandleHeight};\r\n  }\r\n  .track.pressed .handle {\r\n    width: ${SwitchToken.pressedHandleWidth};\r\n    height: ${SwitchToken.pressedHandleHeight};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n    background-color: ${SwitchToken.unselectedPressedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n    background-color: ${SwitchToken.selectedPressedHandleColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2))\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2)\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(0px - calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth}))\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:not(:dir(rtl))[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n      )\r\n    );\r\n  }\r\n  :host(:dir(rtl):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:dir(rtl)[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackOutlineWidth} +\r\n              calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(${SwitchToken.trackOutlineWidth});\r\n  }\r\n  :host(:dir(rtl):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(calc(0px - ${SwitchToken.trackOutlineWidth}));\r\n  }\r\n  @media (forced-colors: active) {\r\n    .handle {\r\n      transition: ${unsafeCSS(\r\n        `transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n      background-color: GrayText;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .handle {\r\n      background-color: Canvas;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .handle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Icon styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchIconStyle = css`\r\n  :host([icons=\"none\"]) .icon,\r\n  :host([icons=\"selected\"]:not([checked])) .icon,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    display: none;\r\n  }\r\n  .icon {\r\n    width: 1em;\r\n    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not([checked])) .icon {\r\n    font-size: ${SwitchToken.unselectedIconSize};\r\n  }\r\n  :host([checked]) .icon {\r\n    font-size: ${SwitchToken.selectedIconSize};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n    color: ${SwitchToken.unselectedPressedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n    color: ${SwitchToken.selectedPressedIconColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n      color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n      color: CanvasText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n      color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .icon {\r\n      color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .icon {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * State layer styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStateLayerStyle = css`\r\n  .state-layer {\r\n    width: ${SwitchToken.stateLayerSize};\r\n    height: ${SwitchToken.stateLayerSize};\r\n    border-radius: ${SwitchToken.stateLayerShape};\r\n    transition: ${unsafeCSS(\r\n      `top ${DesignToken.motion.spring.fastEffects},\r\n          left ${DesignToken.motion.spring.fastEffects},\r\n          right ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])[icons=\"both\"]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(\r\n      0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2)\r\n    );\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));\r\n  }\r\n  :host([checked]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));\r\n  }\r\n  .track.pressed .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n  }\r\n  :host(:not([checked])) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};\r\n  }\r\n  :host([checked]) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};\r\n  }\r\n`;\r\n","import { css } from \"lit\";\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStyle = css`\r\n  :host {\r\n    display: inline-block;\r\n    position: relative;\r\n    outline: none;\r\n    height: fit-content;\r\n    width: fit-content;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])) {\r\n    cursor: pointer;\r\n  }\r\n  .focus-ring {\r\n    border-radius: ${SwitchToken.trackShape};\r\n  }\r\n  .touch {\r\n    position: absolute;\r\n    height: 3rem;\r\n    left: 0;\r\n    right: 0;\r\n  }\r\n  .base {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Track styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchTrackStyle = css`\r\n  .track {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${SwitchToken.trackShape};\r\n    width: ${SwitchToken.trackWidth};\r\n    height: ${SwitchToken.trackHeight};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])) .track {\r\n    border-width: ${SwitchToken.trackOutlineWidth};\r\n    border-style: solid;\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.trackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n    border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n    border-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n    background-color: ${SwitchToken.selectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .track {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n      border-color: ButtonText;\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n      border-color: GrayText;\r\n      background-color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .track {\r\n      background-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  Checked,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Focusable,\r\n  KeyboardClick,\r\n  PressedController,\r\n  HoverController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from \"./styles\";\r\n\r\nimport { SwitchIcons } from \"./SwitchIcons\";\r\n\r\n/**\r\n * An on/off control that can be toggled by clicking.\r\n *\r\n * @description\r\n * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.\r\n * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color\r\n * theming across selected, unselected, and disabled states. The component responds to user interaction\r\n * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)\r\n * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.\r\n *\r\n * @example\r\n * The following example illustrates a switch wrapped by a `label`.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>\r\n * ```\r\n *\r\n * @example\r\n * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next\r\n * example illustrates showing both the unselected and selected icons.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch icons=\"both\"></m3e-switch></label>\r\n * ```\r\n *\r\n * @tag m3e-switch\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr icons - The icons to present.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - A string representing the value of the switch.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.\r\n * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.\r\n * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.\r\n * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.\r\n * @cssprop --m3e-switch-track-height - Height of the switch track.\r\n * @cssprop --m3e-switch-track-width - Width of the switch track.\r\n * @cssprop --m3e-switch-track-outline-color - Color of the track's outline.\r\n * @cssprop --m3e-switch-track-outline-width - Thickness of the track's outline.\r\n * @cssprop --m3e-switch-track-shape - Corner shape of the track.\r\n * @cssprop --m3e-switch-selected-track-color - Track color when selected.\r\n * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.\r\n * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.\r\n * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.\r\n * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.\r\n * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.\r\n * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.\r\n * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.\r\n * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.\r\n * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.\r\n * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.\r\n * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.\r\n * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.\r\n * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.\r\n * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.\r\n * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.\r\n */\r\n@customElement(\"m3e-switch\")\r\nexport class M3eSwitchElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      ConstraintValidation(\r\n        Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"switch\"))))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    SwitchStyle,\r\n    SwitchStateLayerStyle,\r\n    SwitchTrackStyle,\r\n    SwitchHandleStyle,\r\n    SwitchIconStyle,\r\n  ];\r\n\r\n  /** @private */ @query(\".track\") private readonly _track?: HTMLElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The icons to present.\r\n   * @default \"none\"\r\n   */\r\n  @property({ reflect: true }) icons: SwitchIcons = \"none\";\r\n\r\n  /**\r\n   * A string representing the value of the switch.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"handle\">\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n          <div class=\"base\">${this.#renderIcon()}</div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return this.checked\r\n      ? html`<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <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>\r\n        </svg>`\r\n      : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <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\" />\r\n        </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = !this.checked;\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-switch\": M3eSwitchElement;\r\n  }\r\n}\r\n"],"names":["SwitchToken","unsafeCSS","DesignToken","color","onPrimaryContainer","surfaceContainerHighest","outline","shape","corner","full","primary","onPrimary","onSurface","surface","onSurfaceVariant","primaryContainer","SwitchHandleStyle","css","motion","duration","short4","easing","standard","spring","fastEffects","fastSpatial","SwitchIconStyle","SwitchStateLayerStyle","SwitchStyle","SwitchTrackStyle","M3eSwitchElement","Labelled","Dirty","Touched","ConstraintValidation","Checked","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","super","_M3eSwitchElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eSwitchElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","value","isPressedKey","key","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","closest","preventDefault","styles","__decorate","query","prototype","property","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"switch.min.js","sources":["../../src/switch/styles/SwitchToken.ts","../../src/switch/styles/SwitchHandleStyle.ts","../../src/switch/styles/SwitchIconStyle.ts","../../src/switch/styles/SwitchStateLayerStyle.ts","../../src/switch/styles/SwitchStyle.ts","../../src/switch/styles/SwitchTrackStyle.ts","../../src/switch/SwitchElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchToken = {\r\n  selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),\r\n  selectedIconSize: unsafeCSS(\"var(--m3e-switch-selected-icon-size, 1rem)\"),\r\n  unselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedIconSize: unsafeCSS(\"var(--m3e-switch-unselected-icon-size, 1rem)\"),\r\n  trackHeight: unsafeCSS(`calc(var(--m3e-switch-track-height, 2rem) + ${DesignToken.density.calc(-3)})`),\r\n  trackWidth: unsafeCSS(`calc(var(--m3e-switch-track-width, 3.25rem) + ${DesignToken.density.calc(-3)})`),\r\n  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),\r\n  trackOutlineWidth: unsafeCSS(\"var(--m3e-switch-track-outline-width, 2px)\"),\r\n  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),\r\n  unselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHandleHeight: unsafeCSS(\r\n    `calc(var(--m3e-switch-unselected-handle-height, 1rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  unselectedHandleWidth: unsafeCSS(\r\n    `calc(var(--m3e-switch-unselected-handle-width, 1rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  withIconHandleHeight: unsafeCSS(\r\n    `calc(var(--m3e-switch-with-icon-handle-height, 1.5rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  withIconHandleWidth: unsafeCSS(\r\n    `calc(var(--m3e-switch-with-icon-handle-width, 1.5rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  selectedHandleHeight: unsafeCSS(\r\n    `calc(var(--m3e-switch-selected-handle-height, 1.5rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  selectedHandleWidth: unsafeCSS(\r\n    `calc(var(--m3e-switch-selected-handle-width, 1.5rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  pressedHandleHeight: unsafeCSS(\r\n    `calc(var(--m3e-switch-pressed-handle-height, 1.75rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  pressedHandleWidth: unsafeCSS(\r\n    `calc(var(--m3e-switch-pressed-handle-width, 1.75rem) + ${DesignToken.density.calc(-3)})`,\r\n  ),\r\n  handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),\r\n  unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),\r\n  stateLayerSize: unsafeCSS(`calc(var(--m3e-switch-state-layer-size, 2.5rem) + ${DesignToken.density.calc(-3)})`),\r\n  stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),\r\n  disabledSelectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledSelectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-icon-opacity, 38%)\"),\r\n  disabledUnselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-icon-opacity, 38%)\"),\r\n  disabledTrackOpacity: unsafeCSS(\"var(--m3e-switch-disabled-track-opacity, 12%)\"),\r\n  disabledSelectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-handle-opacity, 38%)\"),\r\n  disabledSelectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-handle-opacity, 100%)\"),\r\n  disabledSelectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`,\r\n  ),\r\n  disabledUnselectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  selectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),\r\n  selectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-hover-state-layer-opacity, 8%)\"),\r\n  unselectedHoverTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)\"),\r\n  selectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),\r\n  selectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-focus-state-layer-opacity, 10%)\"),\r\n  unselectedFocusTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedFocusTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)\"),\r\n  selectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),\r\n  selectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)\"),\r\n  unselectedPressedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedPressedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)\"),\r\n  selectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Handle styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchHandleStyle = css`\r\n  .handle {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: none;\r\n    transform-origin: center center;\r\n    border-radius: ${SwitchToken.handleShape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  .track:not(.pressed) .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};\r\n  }\r\n  .track.pressed .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.withIconHandleWidth};\r\n    height: ${SwitchToken.withIconHandleHeight};\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    width: ${SwitchToken.unselectedHandleWidth};\r\n    height: ${SwitchToken.unselectedHandleHeight};\r\n  }\r\n  :host([checked]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.selectedHandleWidth};\r\n    height: ${SwitchToken.selectedHandleHeight};\r\n  }\r\n  .track.pressed .handle {\r\n    width: ${SwitchToken.pressedHandleWidth};\r\n    height: ${SwitchToken.pressedHandleHeight};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n    background-color: ${SwitchToken.unselectedPressedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n    background-color: ${SwitchToken.selectedPressedHandleColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2))\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2)\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(0px - calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth}))\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:not(:dir(rtl))[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n      )\r\n    );\r\n  }\r\n  :host(:dir(rtl):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:dir(rtl)[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackOutlineWidth} +\r\n              calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(${SwitchToken.trackOutlineWidth});\r\n  }\r\n  :host(:dir(rtl):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(calc(0px - ${SwitchToken.trackOutlineWidth}));\r\n  }\r\n  @media (forced-colors: active) {\r\n    .handle {\r\n      transition: ${unsafeCSS(\r\n        `transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n      background-color: GrayText;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .handle {\r\n      background-color: Canvas;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .handle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Icon styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchIconStyle = css`\r\n  :host([icons=\"none\"]) .icon,\r\n  :host([icons=\"selected\"]:not([checked])) .icon,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    display: none;\r\n  }\r\n  .icon {\r\n    width: 1em;\r\n    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not([checked])) .icon {\r\n    font-size: ${SwitchToken.unselectedIconSize};\r\n  }\r\n  :host([checked]) .icon {\r\n    font-size: ${SwitchToken.selectedIconSize};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n    color: ${SwitchToken.unselectedPressedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n    color: ${SwitchToken.selectedPressedIconColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n      color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n      color: CanvasText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n      color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .icon {\r\n      color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .icon {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * State layer styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStateLayerStyle = css`\r\n  .state-layer {\r\n    width: ${SwitchToken.stateLayerSize};\r\n    height: ${SwitchToken.stateLayerSize};\r\n    border-radius: ${SwitchToken.stateLayerShape};\r\n    transition: ${unsafeCSS(\r\n      `top ${DesignToken.motion.spring.fastEffects},\r\n          left ${DesignToken.motion.spring.fastEffects},\r\n          right ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])[icons=\"both\"]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(\r\n      0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2)\r\n    );\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));\r\n  }\r\n  :host([checked]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));\r\n  }\r\n  .track.pressed .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n  }\r\n  :host(:not([checked])) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};\r\n  }\r\n  :host([checked]) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};\r\n  }\r\n`;\r\n","import { css } from \"lit\";\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStyle = css`\r\n  :host {\r\n    display: inline-block;\r\n    position: relative;\r\n    outline: none;\r\n    height: fit-content;\r\n    width: fit-content;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])) {\r\n    cursor: pointer;\r\n  }\r\n  .focus-ring {\r\n    border-radius: ${SwitchToken.trackShape};\r\n  }\r\n  .touch {\r\n    position: absolute;\r\n    height: 3rem;\r\n    left: 0;\r\n    right: 0;\r\n  }\r\n  .base {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Track styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchTrackStyle = css`\r\n  .track {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${SwitchToken.trackShape};\r\n    width: ${SwitchToken.trackWidth};\r\n    height: ${SwitchToken.trackHeight};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])) .track {\r\n    border-width: ${SwitchToken.trackOutlineWidth};\r\n    border-style: solid;\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.trackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n    border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n    border-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n    background-color: ${SwitchToken.selectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .track {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n      border-color: ButtonText;\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n      border-color: GrayText;\r\n      background-color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .track {\r\n      background-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  Checked,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Focusable,\r\n  KeyboardClick,\r\n  PressedController,\r\n  HoverController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from \"./styles\";\r\n\r\nimport { SwitchIcons } from \"./SwitchIcons\";\r\n\r\n/**\r\n * An on/off control that can be toggled by clicking.\r\n *\r\n * @description\r\n * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.\r\n * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color\r\n * theming across selected, unselected, and disabled states. The component responds to user interaction\r\n * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)\r\n * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.\r\n *\r\n * @example\r\n * The following example illustrates a switch wrapped by a `label`.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>\r\n * ```\r\n *\r\n * @example\r\n * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next\r\n * example illustrates showing both the unselected and selected icons.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch icons=\"both\"></m3e-switch></label>\r\n * ```\r\n *\r\n * @tag m3e-switch\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr icons - The icons to present.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - A string representing the value of the switch.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.\r\n * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.\r\n * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.\r\n * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.\r\n * @cssprop --m3e-switch-track-height - Height of the switch track.\r\n * @cssprop --m3e-switch-track-width - Width of the switch track.\r\n * @cssprop --m3e-switch-track-outline-color - Color of the track's outline.\r\n * @cssprop --m3e-switch-track-outline-width - Thickness of the track's outline.\r\n * @cssprop --m3e-switch-track-shape - Corner shape of the track.\r\n * @cssprop --m3e-switch-selected-track-color - Track color when selected.\r\n * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.\r\n * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.\r\n * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.\r\n * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.\r\n * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.\r\n * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.\r\n * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.\r\n * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.\r\n * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.\r\n * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.\r\n * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.\r\n * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.\r\n * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.\r\n * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.\r\n * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.\r\n */\r\n@customElement(\"m3e-switch\")\r\nexport class M3eSwitchElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      ConstraintValidation(\r\n        Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"switch\"))))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    SwitchStyle,\r\n    SwitchStateLayerStyle,\r\n    SwitchTrackStyle,\r\n    SwitchHandleStyle,\r\n    SwitchIconStyle,\r\n  ];\r\n\r\n  /** @private */ @query(\".track\") private readonly _track?: HTMLElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The icons to present.\r\n   * @default \"none\"\r\n   */\r\n  @property({ reflect: true }) icons: SwitchIcons = \"none\";\r\n\r\n  /**\r\n   * A string representing the value of the switch.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"handle\">\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n          <div class=\"base\">${this.#renderIcon()}</div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return this.checked\r\n      ? html`<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <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>\r\n        </svg>`\r\n      : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <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\" />\r\n        </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n      return;\r\n    }\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = !this.checked;\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-switch\": M3eSwitchElement;\r\n  }\r\n}\r\n"],"names":["SwitchToken","unsafeCSS","DesignToken","color","onPrimaryContainer","surfaceContainerHighest","density","calc","outline","shape","corner","full","primary","onPrimary","onSurface","surface","onSurfaceVariant","primaryContainer","SwitchHandleStyle","css","motion","duration","short4","easing","standard","spring","fastEffects","fastSpatial","SwitchIconStyle","SwitchStateLayerStyle","SwitchStyle","SwitchTrackStyle","M3eSwitchElement","Labelled","Dirty","Touched","ConstraintValidation","Checked","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","super","_M3eSwitchElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eSwitchElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","value","isPressedKey","key","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","preventDefault","stopImmediatePropagation","dispatchEvent","Event","bubbles","cancelable","closest","styles","__decorate","query","prototype","property","reflect","customElement"],"mappings":"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"}

package/dist/theme.js

@@ -6,7 +6,7 @@
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { unsafeCSS, css, LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { DesignToken, registerStyleSheet, customElement } from '@m3e/web/core';
+import { DesignToken, registerStyleSheet, customElement, Role } from '@m3e/web/core';
 
 /**
  * @license
@@ -6764,7 +6764,7 @@ async function getColorFromImage(image) {
   return hexFromArgb(await sourceColorFromImage(image));
 }
 
-var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getContrastLevel;
+var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getVariant, _M3eThemeElement_getContrastLevel;
 /**
  * A non-visual element responsible for application-level theming.
  *
@@ -6799,6 +6799,7 @@ var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_fi
  * @attr density - The density scale (0, -1, -2).
  * @attr scheme - The color scheme of the theme.
  * @attr strong-focus - Whether to enable strong focus indicators.
+ * @attr variant - The color variant of the theme.
  *
  * @fires change - Dispatched when the theme changes.
  */
@@ -6823,6 +6824,10 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
      * @default "#6750A4"
      */
     this.color = "#6750A4";
+    /** The color variant of the theme.
+     * @default "neutral"
+     */
+    this.variant = "neutral";
     /**
      * The color scheme of the theme.
      * @default "auto"
@@ -6927,7 +6932,7 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
   const theme = themeFromSourceColor(color);
   const scheme = new DynamicScheme({
     sourceColorHct: Hct.fromInt(color),
-    variant: 1,
+    variant: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getVariant).call(this),
     contrastLevel: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this),
     isDark: this.isDark,
     primaryPalette: theme.palettes.primary,
@@ -6997,6 +7002,29 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply(forceReflow) {
     void document.body.offsetHeight;
   }
 };
+_M3eThemeElement_getVariant = function _M3eThemeElement_getVariant() {
+  switch (this.variant) {
+    case "neutral":
+      return 1;
+    case "tonal-spot":
+      return 2;
+    case "vibrant":
+      return 3;
+    case "expressive":
+      return 4;
+    case "fidelity":
+      return 5;
+    case "content":
+      return 6;
+    case "rainbow":
+      return 7;
+    case "fruit-salad":
+      return 8;
+    default:
+      return 0;
+    // monochrome
+  }
+};
 _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel() {
   switch (this.contrast) {
     case "high":
@@ -7022,11 +7050,13 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
       }
       return css;
     };
-    const omitKey = (obj, key) => {
-      const {
-        [key]: _unused,
-        ...rest
-      } = obj;
+    const omitKeys = (obj, ...keys) => {
+      const rest = {
+        ...obj
+      };
+      for (const key of keys) {
+        delete rest[key];
+      }
       return rest;
     };
     let css = "";
@@ -7047,11 +7077,12 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
     css += composeCss(DesignToken.typescale.standard.body.small);
     css += composeCss(DesignToken.elevation);
     css += composeCss(DesignToken.shape.corner.value);
-    css += composeCss(omitKey(DesignToken.shape.corner, "value"));
+    // Omit nonstandard tokens.
+    css += composeCss(omitKeys(DesignToken.shape.corner, "value", "extraLargeEnd", "extraLargeStart", "mediumTop", "mediumEnd", "mediumStart", "smallTop", "smallEnd", "smallStart", "extraSmallEnd", "extraSmallStart", "extraSmallBottom"));
     css += composeCss(DesignToken.motion.duration);
     css += composeCss(DesignToken.motion.easing);
     css += composeCss(DesignToken.motion.spring);
-    css += composeCss(omitKey(DesignToken.density, "calc"));
+    css += composeCss(omitKeys(DesignToken.density, "calc"));
     css += composeCss(DesignToken.measurement);
     css += composeCss(DesignToken.state);
     registerStyleSheet(unsafeCSS(`html{${css}}`));
@@ -7060,6 +7091,7 @@ _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel()
 /** The styles of the element. */
 M3eThemeElement.styles = css`:host { display: contents; }`;
 __decorate([property()], M3eThemeElement.prototype, "color", void 0);
+__decorate([property()], M3eThemeElement.prototype, "variant", void 0);
 __decorate([property()], M3eThemeElement.prototype, "scheme", void 0);
 __decorate([property()], M3eThemeElement.prototype, "contrast", void 0);
 __decorate([property({
@@ -7072,5 +7104,146 @@ __decorate([property({
 __decorate([property()], M3eThemeElement.prototype, "motion", void 0);
 M3eThemeElement = __decorate([customElement("m3e-theme")], M3eThemeElement);
 
-export { M3eThemeElement, getColorFromImage };
+var _M3eThemeIconElement_instances, _M3eThemeIconElement_light, _M3eThemeIconElement_dark, _M3eThemeIconElement_colorSchemeChangeHandler, _M3eThemeIconElement_getVariant;
+/**
+ * An icon that visually presents a preview of a theme.
+ *
+ * @description
+ * The `m3e-theme-icon` renders a small preview of a theme's surface and primary colors.
+ *
+ * @example
+ * The following example presents a preview of a teal light theme.
+ * ```html
+ * <m3e-theme-icon color="#004f4f" scheme="light"></m3e-theme-icon>
+ * ```
+ *
+ * @tag m3e-theme-icon
+ *
+ * @attr color - The hex color of the theme to preview
+ * @attr scheme - The color scheme of the theme to preview.
+ * @attr variant - The color variant of the theme to preview.
+ *
+ * @cssprop --m3e-theme-icon-size - Size of the theme icon.
+ * @cssprop --m3e-theme-icon-shape - Border radius of the icon container.
+ * @cssprop --m3e-theme-icon-outline-color - Outline stroke color of the icon border.
+ * @cssprop --m3e-theme-icon-outline-opacity - Opacity percentage applied to the outline color.
+ * @cssprop --m3e-theme-icon-container-color - Fill color for the container layer of the previewed theme.
+ * @cssprop --m3e-theme-icon-color - Fill color for the primary layer of the previewed theme.
+ */
+let M3eThemeIconElement = class M3eThemeIconElement extends Role(LitElement, "img") {
+  constructor() {
+    super(...arguments);
+    _M3eThemeIconElement_instances.add(this);
+    /** @private */
+    _M3eThemeIconElement_light.set(this, void 0);
+    /** @private */
+    _M3eThemeIconElement_dark.set(this, void 0);
+    /** @private */
+    _M3eThemeIconElement_colorSchemeChangeHandler.set(this, () => this.requestUpdate());
+    /**
+     * The hex color of the theme to preview
+     * @default "#6750A4"
+     */
+    this.color = "#6750A4";
+    /** The color variant of the theme.
+     * @default "neutral"
+     */
+    this.variant = "neutral";
+    /**
+     * The color scheme of the theme.
+     * @default "auto"
+     */
+    this.scheme = "auto";
+  }
+  /** Whether a dark theme is applied. */
+  get isDark() {
+    switch (this.scheme) {
+      case "light":
+        return false;
+      case "dark":
+        return true;
+      default:
+        // auto
+        if (this.parentElement instanceof HTMLBodyElement) {
+          switch (document.documentElement.style.colorScheme) {
+            case "light":
+              return false;
+            case "dark":
+              return true;
+          }
+        }
+        return __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")?.matches ?? false;
+    }
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldSet(this, _M3eThemeIconElement_light, matchMedia("(prefers-color-scheme: light)"), "f");
+    __classPrivateFieldSet(this, _M3eThemeIconElement_dark, matchMedia("(prefers-color-scheme: dark)"), "f");
+    [__classPrivateFieldGet(this, _M3eThemeIconElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")].forEach(x => x.addEventListener("change", __classPrivateFieldGet(this, _M3eThemeIconElement_colorSchemeChangeHandler, "f")));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    [__classPrivateFieldGet(this, _M3eThemeIconElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeIconElement_dark, "f")].forEach(x => x?.removeEventListener("change", __classPrivateFieldGet(this, _M3eThemeIconElement_colorSchemeChangeHandler, "f")));
+    __classPrivateFieldSet(this, _M3eThemeIconElement_light, __classPrivateFieldSet(this, _M3eThemeIconElement_dark, undefined, "f"), "f");
+  }
+  /** @inheritdoc */
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    const base = this.shadowRoot?.querySelector(".base");
+    const color = argbFromHex(this.color);
+    const theme = themeFromSourceColor(color);
+    const scheme = new DynamicScheme({
+      sourceColorHct: Hct.fromInt(color),
+      variant: __classPrivateFieldGet(this, _M3eThemeIconElement_instances, "m", _M3eThemeIconElement_getVariant).call(this),
+      contrastLevel: 0,
+      isDark: this.isDark,
+      primaryPalette: theme.palettes.primary,
+      neutralPalette: theme.palettes.neutral
+    });
+    const dynamicColors = new MaterialDynamicColors();
+    base?.style.setProperty("--_theme-icon-container-color", hexFromArgb(dynamicColors.surface().getArgb(scheme)));
+    base?.style.setProperty("--_theme-icon-color", hexFromArgb(dynamicColors.primary().getArgb(scheme)));
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><svg viewBox="0 0 80 80" class="icon"><path class="container" d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"/><path class="color" d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"/><path class="color" d="M0 0h80v17.24H0V0z"/></svg></div>`;
+  }
+};
+_M3eThemeIconElement_light = new WeakMap();
+_M3eThemeIconElement_dark = new WeakMap();
+_M3eThemeIconElement_colorSchemeChangeHandler = new WeakMap();
+_M3eThemeIconElement_instances = new WeakSet();
+_M3eThemeIconElement_getVariant = function _M3eThemeIconElement_getVariant() {
+  switch (this.variant) {
+    case "neutral":
+      return 1;
+    case "tonal-spot":
+      return 2;
+    case "vibrant":
+      return 3;
+    case "expressive":
+      return 4;
+    case "fidelity":
+      return 5;
+    case "content":
+      return 6;
+    case "rainbow":
+      return 7;
+    case "fruit-salad":
+      return 8;
+    default:
+      return 0;
+    // monochrome
+  }
+};
+/** The styles of the element. */
+M3eThemeIconElement.styles = css`:host { display: inline-block; width: var(--m3e-theme-icon-size, 1.5rem); height: var(--m3e-theme-icon-size, 1.5rem); } .base { width: 100%; height: 100%; border-radius: var(--m3e-theme-icon-shape, ${DesignToken.shape.corner.extraSmall}); outline: solid 1px color-mix( in srgb, var(--m3e-theme-icon-outline-color, ${DesignToken.color.outlineVariant}) var(--m3e-theme-icon-outline-opacity, 50%), transparent ); } .icon { width: 100%; height: 100%; } .container { fill: var(--m3e-theme-icon-container-color, var(--_theme-icon-container-color)); } .color { fill: var(--m3e-theme-icon-color, var(--_theme-icon-color)); }`;
+__decorate([property()], M3eThemeIconElement.prototype, "color", void 0);
+__decorate([property()], M3eThemeIconElement.prototype, "variant", void 0);
+__decorate([property()], M3eThemeIconElement.prototype, "scheme", void 0);
+M3eThemeIconElement = __decorate([customElement("m3e-theme-icon")], M3eThemeIconElement);
+
+export { M3eThemeElement, M3eThemeIconElement, getColorFromImage };
 //# sourceMappingURL=theme.js.map