@m3e/web 2.5.12 → 2.5.14

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(`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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"}
+{"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    contain: layout style paint;\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    contain: layout style;\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":";;;;;oeAQO,MAAMA,EACQC,EAAU,yCAAyCC,EAAYC,MAAMC,uBAD7EJ,EAEOC,EAAU,8CAFjBD,EAGUC,EACnB,2CAA2CC,EAAYC,MAAME,4BAJpDL,EAMSC,EAAU,gDANnBD,EAOEC,EAAU,+CAA+CC,EAAYI,QAAQC,MAAK,OAPpFP,EAQCC,EAAU,iDAAiDC,EAAYI,QAAQC,MAAK,OARrFP,EASQC,EAAU,yCAAyCC,EAAYC,MAAMK,YAT7ER,EAUQC,EAAU,8CAVlBD,EAWCC,EAAU,iCAAiCC,EAAYO,MAAMC,OAAOC,SAXrEX,EAYSC,EAAU,0CAA0CC,EAAYC,MAAMS,YAZ/EZ,EAaWC,EACpB,4CAA4CC,EAAYC,MAAME,4BAdrDL,EAgBaC,EACtB,2DAA2DC,EAAYI,QAAQC,MAAK,OAjB3EP,EAmBYC,EACrB,0DAA0DC,EAAYI,QAAQC,MAAK,OApB1EP,EAsBWC,EACpB,4DAA4DC,EAAYI,QAAQC,MAAK,OAvB5EP,EAyBUC,EACnB,2DAA2DC,EAAYI,QAAQC,MAAK,OA1B3EP,EA4BWC,EACpB,2DAA2DC,EAAYI,QAAQC,MAAK,OA7B3EP,EA+BUC,EACnB,0DAA0DC,EAAYI,QAAQC,MAAK,OAhC1EP,EAkCUC,EACnB,2DAA2DC,EAAYI,QAAQC,MAAK,OAnC3EP,EAqCSC,EAClB,0DAA0DC,EAAYI,QAAQC,MAAK,OAtC1EP,EAwCEC,EAAU,kCAAkCC,EAAYO,MAAMC,OAAOC,SAxCvEX,EAyCUC,EAAU,2CAA2CC,EAAYC,MAAMU,cAzCjFb,EA0CYC,EAAU,6CAA6CC,EAAYC,MAAMK,YA1CrFR,EA2CKC,EAAU,qDAAqDC,EAAYI,QAAQC,MAAK,OA3C7FP,EA4CMC,EAAU,uCAAuCC,EAAYO,MAAMC,OAAOC,SA5ChFX,EA6CgBC,EACzB,kDAAkDC,EAAYC,MAAMW,cA9C3Dd,EAgDkBC,EAAU,yDAhD5BD,EAiDkBC,EAC3B,oDAAoDC,EAAYC,MAAME,4BAlD7DL,EAoDoBC,EAAU,2DApD9BD,EAqDWC,EAAU,iDArDrBD,EAsDiBC,EAC1B,mDAAmDC,EAAYC,MAAMW,cAvD5Dd,GAyDmBC,EAC5B,qDAAqDC,EAAYC,MAAME,4BA1D9DL,GA4D0BC,EACnC,6DAA6DC,EAAYC,MAAMW,cA7DtEd,GA+DsBC,EAAU,6DA/DhCD,GAgEoBC,EAAU,4DAhE9BD,GAiEkBC,EAC3B,oDAAoDC,EAAYC,MAAMY,YAlE7Df,GAoEoBC,EAC7B,sDAAsDC,EAAYC,MAAMW,cArE/Dd,GAuEaC,EACtB,+CAA+CC,EAAYC,MAAMC,uBAxExDJ,GA0EeC,EACxB,iDAAiDC,EAAYC,MAAME,4BA3E1DL,GA6EcC,EAAU,gDAAgDC,EAAYC,MAAMS,YA7E1FZ,GA8EmBC,EAC5B,sDAAsDC,EAAYC,MAAMS,YA/E/DZ,GAiFqBC,EAAU,4DAjF/BD,GAkFgBC,EACzB,kDAAkDC,EAAYC,MAAME,4BAnF3DL,GAqFuBC,EAChC,0DAA0DC,EAAYC,MAAMK,YAtFnER,GAwFqBC,EAC9B,wDAAwDC,EAAYC,MAAMW,cAzFjEd,GA2FuBC,EAAU,8DA3FjCD,GA4FeC,EACxB,iDAAiDC,EAAYC,MAAME,4BA7F1DL,GA+FiBC,EAC1B,mDAAmDC,EAAYC,MAAMa,qBAhG5DhB,GAkGaC,EACtB,+CAA+CC,EAAYC,MAAMC,uBAnGxDJ,GAqGeC,EACxB,iDAAiDC,EAAYC,MAAME,4BAtG1DL,GAwGcC,EAAU,gDAAgDC,EAAYC,MAAMS,YAxG1FZ,GAyGmBC,EAC5B,sDAAsDC,EAAYC,MAAMS,YA1G/DZ,GA4GqBC,EAAU,6DA5G/BD,GA6GgBC,EACzB,kDAAkDC,EAAYC,MAAME,4BA9G3DL,GAgHuBC,EAChC,0DAA0DC,EAAYC,MAAMK,YAjHnER,GAmHqBC,EAC9B,wDAAwDC,EAAYC,MAAMW,cApHjEd,GAsHuBC,EAAU,+DAtHjCD,GAuHeC,EACxB,iDAAiDC,EAAYC,MAAMc,qBAxH1DjB,GA0HiBC,EAC1B,mDAAmDC,EAAYC,MAAMa,qBA3H5DhB,GA6HeC,EACxB,iDAAiDC,EAAYC,MAAMC,uBA9H1DJ,GAgIiBC,EAC1B,mDAAmDC,EAAYC,MAAME,4BAjI5DL,GAmIgBC,EAAU,kDAAkDC,EAAYC,MAAMS,YAnI9FZ,IAoIqBC,EAC9B,wDAAwDC,EAAYC,MAAMS,YAE1CX,EAAU,+DACfA,EAC3B,oDAAoDC,EAAYC,MAAME,6BAzI7DL,GA2IyBC,EAClC,4DAA4DC,EAAYC,MAAMK,YA5IrER,IA8IuBC,EAChC,0DAA0DC,EAAYC,MAAMW,cAE1Cb,EAAU,iEAClBA,EAC1B,mDAAmDC,EAAYC,MAAMc,sBAnJ5DjB,GAqJmBC,EAC5B,qDAAqDC,EAAYC,MAAMa,qBCrJ9DE,GAAoBC,CAAG,oKAQfnB,kBACHC,EACZ,oBAAoBC,EAAYkB,OAAOC,SAASC,UAAUpB,EAAYkB,OAAOG,OAAOC,yEAE5EtB,EAAYkB,OAAOK,OAAOC,8BACzBxB,EAAYkB,OAAOK,OAAOC,6EAIVxB,EAAYkB,OAAOK,OAAOE,oEAG1BzB,EAAYkB,OAAOK,OAAOC,yHAG5C1B,cACCA,+IAIDA,cACCA,+DAGDA,cACCA,wCAGDA,cACCA,oIAGUA,8HAGAA,mHAGAA,uGAGAA,+HAGAA,wHAGAA,6GAGAA,iGAGAA,sGAKhBA,MAA6CA,+GAO7CA,MAA2CA,mHAMtCA,OAA4BA,YAA0CA,kHAOrEA,OAA4BA,YAA0CA,wGAOvEA,OAA4BA,OAAoCA,qGAKrDA,OAA4BA,OAAoCA,uMAO9EA,YAAwCA,OAAoCA,wMASxEA,YACOA,OAAoCA,oJAM7BA,mJAGWA,iEAInBC,EACZ,wDACMC,EAAYkB,OAAOK,OAAOC,8BACzBxB,EAAYkB,OAAOK,OAAOC,4/BCnI5BE,GAAkBT,CAAG,sLAQhBlB,EAAU,SAASC,EAAYkB,OAAOC,SAASC,UAAUpB,EAAYkB,OAAOG,OAAOC,4DAGpFxB,4CAGAA,uHAGJA,iHAGAA,sGAGAA,0FAGAA,kHAGAA,2GAGAA,gGAGAA,oFAGAA,yFAKLA,KAA2CA,iGAO3CA,KAAyCA,69BCjDpC6B,GAAwBV,CAAG,yBAE3BnB,cACCA,qBACOA,kBACHC,EACZ,OAAOC,EAAYkB,OAAOK,OAAOC,gCACtBxB,EAAYkB,OAAOK,OAAOC,iCACzBxB,EAAYkB,OAAOK,OAAOC,uIAIG1B,OAAgCA,uCAC/CA,OAAgCA,wIAIxCA,OAAgCA,wCAExBA,OAAgCA,6GAGjBA,OAAgCA,uCAC/CA,OAAgCA,sFAGjBA,OAAgCA,uCAC/CA,OAAgCA,oFAG3BA,wCACEA,sCACFA,wCACEA,wEAGFA,wCACEA,sCACFA,wCACEA,QC1C1B8B,GAAcX,CAAG,wQAcTnB,2KCZR+B,GAAmBZ,CAAG,kIAOdnB,aACRA,cACCA,kBACIC,EACZ,oBAAoBC,EAAYkB,OAAOC,SAASC,UAAUpB,EAAYkB,OAAOG,OAAOC,gEAItExB,6IAIAA,wBACIA,kHAGJA,yBACIA,uGAGJA,yBACIA,2FAGJA,yBACIA,iGAKhBA,MAAmDA,2DAKnDA,MAA4CA,qIAK5BA,gHAGAA,qGAGAA,yFAGAA,+FAKhBA,KAA0CA,ikCCkE3C,IAAMgC,GAAN,cAA+BC,EACpCC,EACEC,EACEC,EACEC,EAAQC,EAAeC,EAAcC,EAAUC,EAASC,EAAgBC,EAAKC,EAAY,qBAoC/FC,WAAAA,GACEC,qBApBuBC,GAAAC,IAAAC,KAAiBC,GAAaC,EAAAF,gBAAiBG,KAAjBH,KAAkBC,IAEhDG,GAAAL,IAAAC,KAAmB,IAAIK,EAAgBL,KAAM,CACpEM,OAAQ,KACRC,SAAWC,IACLR,KAAKS,WACLD,EACFR,KAAKU,aAAaC,KAAK,SAEvBX,KAAKU,aAAaE,KAAK,cAKJC,GAAAd,IAAAC,KAAqB,IAAIc,EAAkBd,KAAM,CACxEM,OAAQ,KACRC,SAAWQ,GAAYf,KAAKgB,QAAQC,UAAUC,OAAO,UAAWH,IAAYf,KAAKS,aAgBtDT,KAAAmB,MAAqB,OAMtCnB,KAAAoB,MAAQ,KAhBlB,IAAIN,EAAkBd,KAAM,CAC1BqB,aAAeC,GAAgB,MAARA,EACvBf,SAAWQ,GAAYf,KAAKgB,QAAQC,UAAUC,OAAO,UAAWH,IAAYf,KAAKS,WAErF,CAeA,KAAaX,GAAA,IAAAyB,QAAAnB,GAAA,IAAAmB,QAAAV,GAAA,IAAAU,QAAAC,GAAA,IAAAC,QAACC,MACZ,OAAO1B,KAAK2B,UAAY3B,KAAKS,SAAWT,KAAKoB,MAAQ,IACvD,CAGSQ,iBAAAA,GACP/B,MAAM+B,oBAEN5B,KAAK6B,iBAAiB,QAAS3B,EAAAF,KAAIF,GAAA,MACnC,IAAK,MAAMgC,KAAS9B,KAAK+B,OACvB7B,EAAAF,KAAII,GAAA,KAAkB4B,QAAQF,GAC9B5B,EAAAF,KAAIa,GAAA,KAAoBmB,QAAQF,EAEpC,CAGSG,oBAAAA,GACPpC,MAAMoC,uBAENjC,KAAKkC,oBAAoB,QAAShC,EAAAF,KAAIF,GAAA,MACtC,IAAK,MAAMgC,KAAS9B,KAAK+B,OACvB7B,EAAAF,KAAII,GAAA,KAAkB+B,UAAUL,GAChC5B,EAAAF,KAAIa,GAAA,KAAoBsB,UAAUL,EAEtC,CAGmBM,YAAAA,CAAaC,GAC9BxC,MAAMuC,aAAaC,GACnB,CAACrC,KAAKsC,WAAYtC,KAAKU,aAAa6B,QAASC,GAAMA,GAAGC,OAAOzC,MAC/D,CAGmB0C,MAAAA,GACjB,OAAOC,CAAI,6MAI6C3C,KAAKS,iDACnCP,EAAAF,KAAIwB,GAAA,IAAAoB,IAAYzC,KAAhBH,yBAG5B,iBAIE,OAAOA,KAAK2B,QACRgB,CAAI,2KAGJA,CAAI,oLAGV,cAGa1C,GACX,IAAIA,EAAE4C,iBAAN,CAEA,GAAI7C,KAAKS,SAGP,OAFAR,EAAE6C,sBACF7C,EAAE8C,2BAIA/C,KAAKgD,cAAc,IAAIC,MAAM,cAAe,CAAEC,SAAS,EAAMC,YAAY,OAC3EnD,KAAK2B,SAAW3B,KAAK2B,QAErB3B,KAAKgD,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,KACjDlD,KAAKgD,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,MAIhDlD,KAAKoD,QAAQ,UACfnD,EAAE6C,gBAjBoB,CAmB1B,EAhIgB/D,GAAAsE,OAAyB,CACvCxE,GACAD,GACAE,GACAb,GACAU,IAGgD2E,EAAA,CAAjCC,EAAM,WAAgDxE,GAAAyE,UAAA,iBAChBF,EAAA,CAAtCC,EAAM,gBAAiExE,GAAAyE,UAAA,qBAChCF,EAAA,CAAvCC,EAAM,iBAAoExE,GAAAyE,UAAA,sBAiC9DF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAoC3E,GAAAyE,UAAA,aAAA,GAM7CF,EAAA,CAAXG,KAAwB1E,GAAAyE,UAAA,gBA3DdzE,GAAgBuE,EAAA,CAD5BK,EAAc,eACF5E"}

package/dist/tabs.js

@@ -141,7 +141,7 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eTabElement.styles = css`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${DesignToken.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
+M3eTabElement.styles = css`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { contain: layout style; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${DesignToken.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
 /** @private */
 M3eTabElement.__nextId = 0;
 __decorate([query(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0);
@@ -190,7 +190,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role(LitElement, "tabp
   }
 };
 /** The styles of the element. */
-M3eTabPanelElement.styles = css`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; }`;
+M3eTabPanelElement.styles = css`:host { contain: layout style paint; display: block; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; }`;
 M3eTabPanelElement = __decorate([customElement("m3e-tab-panel")], M3eTabPanelElement);
 
 var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_swipe, _M3eTabsElement_velocityTracker, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_handleActiveItemChange, _M3eTabsElement_handleTabsPaginationChange, _M3eTabsElement_handleTabsPointerDown, _M3eTabsElement_handleTabsPointerMove, _M3eTabsElement_handleTabsPointerUp, _M3eTabsElement_handleTabsPointerCancel, _M3eTabsElement_handleTabsLostPointerCapture, _M3eTabsElement_endSwipeGesture, _M3eTabsElement_scrollTabIntoView, _M3eTabsElement_updateInkBar, _a;
@@ -573,7 +573,7 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
   }
 };
 /** The styles of the element. */
-M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { contain: layout style; position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { contain: layout style paint; box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
         width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } .tabs.sliding ::slotted([slot="panel"]) { transform: translateX(var(--_tabs-slide-offset-x)); visibility: var(--_tabs-slide-visibility, "hidden"); } .tabs.snap ::slotted([slot="panel"]) { transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
         transform var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
         visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .tabs:not(.sliding) ::slotted([slot="panel"]) { transform: translateX(0); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } .tabs.snap ::slotted([slot="panel"]) { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;