@m3e/web 2.5.10 → 2.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/dist/all.js +282 -86
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +8 -8
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/breadcrumb.js +1 -1
  6. package/dist/breadcrumb.js.map +1 -1
  7. package/dist/breadcrumb.min.js +1 -1
  8. package/dist/breadcrumb.min.js.map +1 -1
  9. package/dist/button.js +13 -7
  10. package/dist/button.js.map +1 -1
  11. package/dist/button.min.js +1 -1
  12. package/dist/button.min.js.map +1 -1
  13. package/dist/checkbox.js +5 -0
  14. package/dist/checkbox.js.map +1 -1
  15. package/dist/checkbox.min.js +1 -1
  16. package/dist/checkbox.min.js.map +1 -1
  17. package/dist/chips.js +2 -2
  18. package/dist/chips.js.map +1 -1
  19. package/dist/chips.min.js +1 -1
  20. package/dist/chips.min.js.map +1 -1
  21. package/dist/css-custom-data.json +5263 -5233
  22. package/dist/custom-elements.json +50798 -49906
  23. package/dist/fab.js +9 -9
  24. package/dist/fab.js.map +1 -1
  25. package/dist/fab.min.js +1 -1
  26. package/dist/fab.min.js.map +1 -1
  27. package/dist/form-field.js +4 -5
  28. package/dist/form-field.js.map +1 -1
  29. package/dist/form-field.min.js +1 -1
  30. package/dist/form-field.min.js.map +1 -1
  31. package/dist/html-custom-data.json +1693 -1666
  32. package/dist/icon-button.js +48 -42
  33. package/dist/icon-button.js.map +1 -1
  34. package/dist/icon-button.min.js +1 -1
  35. package/dist/icon-button.min.js.map +1 -1
  36. package/dist/menu.js +2 -2
  37. package/dist/menu.js.map +1 -1
  38. package/dist/menu.min.js +1 -1
  39. package/dist/menu.min.js.map +1 -1
  40. package/dist/option.js +1 -1
  41. package/dist/option.js.map +1 -1
  42. package/dist/option.min.js +1 -1
  43. package/dist/option.min.js.map +1 -1
  44. package/dist/paginator.js +1 -1
  45. package/dist/paginator.js.map +1 -1
  46. package/dist/paginator.min.js +2 -2
  47. package/dist/paginator.min.js.map +1 -1
  48. package/dist/radio-group.js +6 -1
  49. package/dist/radio-group.js.map +1 -1
  50. package/dist/radio-group.min.js +1 -1
  51. package/dist/radio-group.min.js.map +1 -1
  52. package/dist/split-button.js +1 -1
  53. package/dist/split-button.js.map +1 -1
  54. package/dist/split-button.min.js +1 -1
  55. package/dist/split-button.min.js.map +1 -1
  56. package/dist/src/button/ButtonElement.d.ts +1 -0
  57. package/dist/src/button/ButtonElement.d.ts.map +1 -1
  58. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  59. package/dist/src/fab/styles/FabSizeToken.d.ts.map +1 -1
  60. package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
  61. package/dist/src/icon-button/IconButtonElement.d.ts +1 -0
  62. package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
  63. package/dist/src/icon-button/styles/IconButtonSizeToken.d.ts.map +1 -1
  64. package/dist/src/menu/MenuElement.d.ts.map +1 -1
  65. package/dist/src/menu/MenuItemElementBase.d.ts.map +1 -1
  66. package/dist/src/option/OptionElement.d.ts.map +1 -1
  67. package/dist/src/paginator/PaginatorElement.d.ts.map +1 -1
  68. package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
  69. package/dist/src/split-button/SplitButtonElement.d.ts.map +1 -1
  70. package/dist/src/switch/SwitchElement.d.ts.map +1 -1
  71. package/dist/src/switch/styles/SwitchToken.d.ts.map +1 -1
  72. package/dist/src/theme/ThemeElement.d.ts +6 -0
  73. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  74. package/dist/src/theme/ThemeIconElement.d.ts +60 -0
  75. package/dist/src/theme/ThemeIconElement.d.ts.map +1 -0
  76. package/dist/src/theme/ThemeVariant.d.ts +3 -0
  77. package/dist/src/theme/ThemeVariant.d.ts.map +1 -0
  78. package/dist/src/theme/index.d.ts +2 -0
  79. package/dist/src/theme/index.d.ts.map +1 -1
  80. package/dist/switch.js +16 -11
  81. package/dist/switch.js.map +1 -1
  82. package/dist/switch.min.js +1 -1
  83. package/dist/switch.min.js.map +1 -1
  84. package/dist/theme.js +174 -4
  85. package/dist/theme.js.map +1 -1
  86. package/dist/theme.min.js +31 -31
  87. package/dist/theme.min.js.map +1 -1
  88. package/package.json +1 -1
package/dist/switch.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"switch.js","sources":["../../src/switch/styles/SwitchToken.ts","../../src/switch/styles/SwitchHandleStyle.ts","../../src/switch/styles/SwitchIconStyle.ts","../../src/switch/styles/SwitchStateLayerStyle.ts","../../src/switch/styles/SwitchStyle.ts","../../src/switch/styles/SwitchTrackStyle.ts","../../src/switch/SwitchElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchToken = {\r\n selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),\r\n selectedIconSize: unsafeCSS(\"var(--m3e-switch-selected-icon-size, 1rem)\"),\r\n unselectedIconColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n unselectedIconSize: unsafeCSS(\"var(--m3e-switch-unselected-icon-size, 1rem)\"),\r\n trackHeight: unsafeCSS(\"var(--m3e-switch-track-height, 2rem)\"),\r\n trackWidth: unsafeCSS(\"var(--m3e-switch-track-width, 3.25rem)\"),\r\n trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),\r\n trackOutlineWidth: unsafeCSS(\"var(--m3e-switch-track-outline-width, 2px)\"),\r\n trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),\r\n selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),\r\n unselectedTrackColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n unselectedHandleHeight: unsafeCSS(\"var(--m3e-switch-unselected-handle-height, 1rem)\"),\r\n unselectedHandleWidth: unsafeCSS(\"var(--m3e-switch-unselected-handle-width, 1rem)\"),\r\n withIconHandleHeight: unsafeCSS(\"var(--m3e-switch-with-icon-handle-height, 1.5rem)\"),\r\n withIconHandleWidth: unsafeCSS(\"var(--m3e-switch-with-icon-handle-width, 1.5rem)\"),\r\n selectedHandleHeight: unsafeCSS(\"var(--m3e-switch-selected-handle-height, 1.5rem)\"),\r\n selectedHandleWidth: unsafeCSS(\"var(--m3e-switch-selected-handle-width, 1.5rem)\"),\r\n pressedHandleHeight: unsafeCSS(\"var(--m3e-switch-pressed-handle-height, 1.75rem)\"),\r\n pressedHandleWidth: unsafeCSS(\"var(--m3e-switch-pressed-handle-width, 1.75rem)\"),\r\n handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),\r\n selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),\r\n unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),\r\n stateLayerSize: unsafeCSS(\"var(--m3e-switch-state-layer-size, 2.5rem)\"),\r\n stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),\r\n disabledSelectedIconColor: unsafeCSS(\r\n `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`,\r\n ),\r\n disabledSelectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-icon-opacity, 38%)\"),\r\n disabledUnselectedIconColor: unsafeCSS(\r\n `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n disabledUnselectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-icon-opacity, 38%)\"),\r\n disabledTrackOpacity: unsafeCSS(\"var(--m3e-switch-disabled-track-opacity, 12%)\"),\r\n disabledSelectedTrackColor: unsafeCSS(\r\n `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`,\r\n ),\r\n disabledUnselectedTrackColor: unsafeCSS(\r\n `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n disabledUnselectedTrackOutlineColor: unsafeCSS(\r\n `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`,\r\n ),\r\n disabledUnselectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-handle-opacity, 38%)\"),\r\n disabledSelectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-handle-opacity, 100%)\"),\r\n disabledSelectedHandleColor: unsafeCSS(\r\n `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`,\r\n ),\r\n disabledUnselectedHandleColor: unsafeCSS(\r\n `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`,\r\n ),\r\n selectedHoverIconColor: unsafeCSS(\r\n `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n ),\r\n unselectedHoverIconColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),\r\n selectedHoverStateLayerColor: unsafeCSS(\r\n `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`,\r\n ),\r\n selectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-hover-state-layer-opacity, 8%)\"),\r\n unselectedHoverTrackColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n unselectedHoverTrackOutlineColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`,\r\n ),\r\n unselectedHoverStateLayerColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`,\r\n ),\r\n unselectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)\"),\r\n selectedHoverHandleColor: unsafeCSS(\r\n `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n unselectedHoverHandleColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n ),\r\n selectedFocusIconColor: unsafeCSS(\r\n `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n ),\r\n unselectedFocusIconColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),\r\n selectedFocusStateLayerColor: unsafeCSS(\r\n `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`,\r\n ),\r\n selectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-focus-state-layer-opacity, 10%)\"),\r\n unselectedFocusTrackColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n unselectedFocusTrackOutlineColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`,\r\n ),\r\n unselectedFocusStateLayerColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`,\r\n ),\r\n unselectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)\"),\r\n selectedFocusHandleColor: unsafeCSS(\r\n `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`,\r\n ),\r\n unselectedFocusHandleColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n ),\r\n selectedPressedIconColor: unsafeCSS(\r\n `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n ),\r\n unselectedPressedIconColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),\r\n selectedPressedStateLayerColor: unsafeCSS(\r\n `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`,\r\n ),\r\n selectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)\"),\r\n unselectedPressedTrackColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n ),\r\n unselectedPressedTrackOutlineColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`,\r\n ),\r\n unselectedPressedStateLayerColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`,\r\n ),\r\n unselectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)\"),\r\n selectedPressedHandleColor: unsafeCSS(\r\n `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`,\r\n ),\r\n unselectedPressedHandleColor: unsafeCSS(\r\n `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Handle styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchHandleStyle = css`\r\n .handle {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n transform-origin: center center;\r\n border-radius: ${SwitchToken.handleShape};\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n transform var(--_switch-handle-effect),\r\n width ${DesignToken.motion.spring.fastEffects},\r\n height ${DesignToken.motion.spring.fastEffects}`,\r\n )};\r\n }\r\n .track:not(.pressed) .handle {\r\n --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};\r\n }\r\n .track.pressed .handle {\r\n --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n width: ${SwitchToken.withIconHandleWidth};\r\n height: ${SwitchToken.withIconHandleHeight};\r\n }\r\n :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n width: ${SwitchToken.unselectedHandleWidth};\r\n height: ${SwitchToken.unselectedHandleHeight};\r\n }\r\n :host([checked]) .track:not(.pressed) .handle {\r\n width: ${SwitchToken.selectedHandleWidth};\r\n height: ${SwitchToken.selectedHandleHeight};\r\n }\r\n .track.pressed .handle {\r\n width: ${SwitchToken.pressedHandleWidth};\r\n height: ${SwitchToken.pressedHandleHeight};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n background-color: ${SwitchToken.unselectedHandleColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {\r\n background-color: ${SwitchToken.unselectedHoverHandleColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle {\r\n background-color: ${SwitchToken.unselectedFocusHandleColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n background-color: ${SwitchToken.unselectedPressedHandleColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n background-color: ${SwitchToken.selectedHandleColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {\r\n background-color: ${SwitchToken.selectedHoverHandleColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle {\r\n background-color: ${SwitchToken.selectedFocusHandleColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n background-color: ${SwitchToken.selectedPressedHandleColor};\r\n }\r\n :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n background-color: color-mix(\r\n in srgb,\r\n ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},\r\n transparent\r\n );\r\n }\r\n :host([aria-disabled=\"true\"][checked]) .handle {\r\n background-color: color-mix(\r\n in srgb,\r\n ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},\r\n transparent\r\n );\r\n }\r\n :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle {\r\n transform: translateX(\r\n calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2))\r\n );\r\n }\r\n :host(:dir(rtl)[checked]) .track:not(.pressed) .handle {\r\n transform: translateX(\r\n calc(\r\n 0px - calc(\r\n ${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2)\r\n )\r\n )\r\n );\r\n }\r\n :host(:not(:dir(rtl))[checked]) .track.pressed .handle {\r\n transform: translateX(\r\n calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})\r\n );\r\n }\r\n :host(:dir(rtl)[checked]) .track.pressed .handle {\r\n transform: translateX(\r\n calc(0px - calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth}))\r\n );\r\n }\r\n :host(:not(:dir(rtl)):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n :host(:not(:dir(rtl))[aria-disabled=\"true\"]:not([checked])) .handle {\r\n transform: translateX(\r\n calc(\r\n ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n )\r\n );\r\n }\r\n :host(:dir(rtl):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n :host(:dir(rtl)[aria-disabled=\"true\"]:not([checked])) .handle {\r\n transform: translateX(\r\n calc(\r\n 0px - calc(\r\n ${SwitchToken.trackOutlineWidth} +\r\n calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n )\r\n )\r\n );\r\n }\r\n :host(:not(:dir(rtl)):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n transform: translateX(${SwitchToken.trackOutlineWidth});\r\n }\r\n :host(:dir(rtl):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n transform: translateX(calc(0px - ${SwitchToken.trackOutlineWidth}));\r\n }\r\n @media (forced-colors: active) {\r\n .handle {\r\n transition: ${unsafeCSS(\r\n `transform var(--_switch-handle-effect),\r\n width ${DesignToken.motion.spring.fastEffects},\r\n height ${DesignToken.motion.spring.fastEffects}`,\r\n )};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle,\r\n :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n background-color: ButtonText;\r\n }\r\n :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n background-color: GrayText;\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,\r\n :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle,\r\n :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n background-color: Canvas;\r\n }\r\n :host([aria-disabled=\"true\"][checked]) .handle {\r\n background-color: Canvas;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .handle {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Icon styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchIconStyle = css`\r\n :host([icons=\"none\"]) .icon,\r\n :host([icons=\"selected\"]:not([checked])) .icon,\r\n :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n display: none;\r\n }\r\n .icon {\r\n width: 1em;\r\n transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host(:not([checked])) .icon {\r\n font-size: ${SwitchToken.unselectedIconSize};\r\n }\r\n :host([checked]) .icon {\r\n font-size: ${SwitchToken.selectedIconSize};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n color: ${SwitchToken.unselectedIconColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {\r\n color: ${SwitchToken.unselectedHoverIconColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon {\r\n color: ${SwitchToken.unselectedFocusIconColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n color: ${SwitchToken.unselectedPressedIconColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n color: ${SwitchToken.selectedIconColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {\r\n color: ${SwitchToken.selectedHoverIconColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon {\r\n color: ${SwitchToken.selectedFocusIconColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n color: ${SwitchToken.selectedPressedIconColor};\r\n }\r\n :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n color: color-mix(\r\n in srgb,\r\n ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},\r\n transparent\r\n );\r\n }\r\n :host([aria-disabled=\"true\"][checked]) .icon {\r\n color: color-mix(\r\n in srgb,\r\n ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},\r\n transparent\r\n );\r\n }\r\n @media (forced-colors: active) {\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon,\r\n :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n color: Canvas;\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,\r\n :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon,\r\n :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n color: CanvasText;\r\n }\r\n :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n color: Canvas;\r\n }\r\n :host([aria-disabled=\"true\"][checked]) .icon {\r\n color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .icon {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * State layer styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStateLayerStyle = css`\r\n .state-layer {\r\n width: ${SwitchToken.stateLayerSize};\r\n height: ${SwitchToken.stateLayerSize};\r\n border-radius: ${SwitchToken.stateLayerShape};\r\n transition: ${unsafeCSS(\r\n `top ${DesignToken.motion.spring.fastEffects},\r\n left ${DesignToken.motion.spring.fastEffects},\r\n right ${DesignToken.motion.spring.fastEffects}`,\r\n )};\r\n }\r\n :host(:not([checked])[icons=\"both\"]) .track:not(.pressed) .state-layer {\r\n inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));\r\n top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));\r\n }\r\n :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .state-layer {\r\n inset-inline-start: calc(\r\n 0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2)\r\n );\r\n top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));\r\n }\r\n :host([checked]) .track:not(.pressed) .state-layer {\r\n inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));\r\n top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));\r\n }\r\n .track.pressed .state-layer {\r\n inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n }\r\n :host(:not([checked])) .state-layer {\r\n --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};\r\n --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};\r\n --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};\r\n --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};\r\n }\r\n :host([checked]) .state-layer {\r\n --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};\r\n --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};\r\n --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};\r\n --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};\r\n }\r\n`;\r\n","import { css } from \"lit\";\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStyle = css`\r\n :host {\r\n display: inline-block;\r\n position: relative;\r\n outline: none;\r\n height: fit-content;\r\n width: fit-content;\r\n user-select: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n :host(:not([aria-disabled=\"true\"])) {\r\n cursor: pointer;\r\n }\r\n .focus-ring {\r\n border-radius: ${SwitchToken.trackShape};\r\n }\r\n .touch {\r\n position: absolute;\r\n height: 3rem;\r\n left: 0;\r\n right: 0;\r\n }\r\n .base {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Track styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchTrackStyle = css`\r\n .track {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n border-radius: ${SwitchToken.trackShape};\r\n width: ${SwitchToken.trackWidth};\r\n height: ${SwitchToken.trackHeight};\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n :host(:not([checked])) .track {\r\n border-width: ${SwitchToken.trackOutlineWidth};\r\n border-style: solid;\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {\r\n border-color: ${SwitchToken.trackOutlineColor};\r\n background-color: ${SwitchToken.unselectedTrackColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) {\r\n border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};\r\n background-color: ${SwitchToken.unselectedHoverTrackColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) {\r\n border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};\r\n background-color: ${SwitchToken.unselectedFocusTrackColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};\r\n background-color: ${SwitchToken.unselectedPressedTrackColor};\r\n }\r\n :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n border-color: color-mix(\r\n in srgb,\r\n ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},\r\n transparent\r\n );\r\n background-color: color-mix(\r\n in srgb,\r\n ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n transparent\r\n );\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {\r\n background-color: ${SwitchToken.selectedTrackColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) {\r\n background-color: ${SwitchToken.selectedHoverTrackColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) {\r\n background-color: ${SwitchToken.selectedFocusTrackColor};\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n background-color: ${SwitchToken.selectedPressedTrackColor};\r\n }\r\n :host([aria-disabled=\"true\"][checked]) .track {\r\n background-color: color-mix(\r\n in srgb,\r\n ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n transparent\r\n );\r\n }\r\n @media (forced-colors: active) {\r\n .track {\r\n transition: none;\r\n }\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed),\r\n :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed),\r\n :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n border-color: ButtonText;\r\n background-color: Canvas;\r\n }\r\n :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n border-color: GrayText;\r\n background-color: Canvas;\r\n }\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),\r\n :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed),\r\n :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed),\r\n :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n background-color: ButtonText;\r\n }\r\n :host([aria-disabled=\"true\"][checked]) .track {\r\n background-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .track {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n Labelled,\r\n Checked,\r\n ConstraintValidation,\r\n Dirty,\r\n Disabled,\r\n FormAssociated,\r\n formValue,\r\n Touched,\r\n AttachInternals,\r\n Role,\r\n M3eFocusRingElement,\r\n M3eStateLayerElement,\r\n Focusable,\r\n KeyboardClick,\r\n PressedController,\r\n HoverController,\r\n customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from \"./styles\";\r\n\r\nimport { SwitchIcons } from \"./SwitchIcons\";\r\n\r\n/**\r\n * An on/off control that can be toggled by clicking.\r\n *\r\n * @description\r\n * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.\r\n * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color\r\n * theming across selected, unselected, and disabled states. The component responds to user interaction\r\n * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)\r\n * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.\r\n *\r\n * @example\r\n * The following example illustrates a switch wrapped by a `label`.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>\r\n * ```\r\n *\r\n * @example\r\n * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next\r\n * example illustrates showing both the unselected and selected icons.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch icons=\"both\"></m3e-switch></label>\r\n * ```\r\n *\r\n * @tag m3e-switch\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr icons - The icons to present.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - A string representing the value of the switch.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.\r\n * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.\r\n * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.\r\n * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.\r\n * @cssprop --m3e-switch-track-height - Height of the switch track.\r\n * @cssprop --m3e-switch-track-width - Width of the switch track.\r\n * @cssprop --m3e-switch-track-outline-color - Color of the track's outline.\r\n * @cssprop --m3e-switch-track-outline-width - Thickness of the track's outline.\r\n * @cssprop --m3e-switch-track-shape - Corner shape of the track.\r\n * @cssprop --m3e-switch-selected-track-color - Track color when selected.\r\n * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.\r\n * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.\r\n * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.\r\n * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.\r\n * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.\r\n * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.\r\n * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.\r\n * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.\r\n * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.\r\n * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.\r\n * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.\r\n * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.\r\n * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.\r\n * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.\r\n * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.\r\n */\r\n@customElement(\"m3e-switch\")\r\nexport class M3eSwitchElement extends Labelled(\r\n Dirty(\r\n Touched(\r\n ConstraintValidation(\r\n Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"switch\"))))))),\r\n ),\r\n ),\r\n ),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = [\r\n SwitchStyle,\r\n SwitchStateLayerStyle,\r\n SwitchTrackStyle,\r\n SwitchHandleStyle,\r\n SwitchIconStyle,\r\n ];\r\n\r\n /** @private */ @query(\".track\") private readonly _track?: HTMLElement;\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n /** @private */ readonly #hoverController = new HoverController(this, {\r\n target: null,\r\n callback: (hovering) => {\r\n if (this.disabled) return;\r\n if (hovering) {\r\n this._stateLayer?.show(\"hover\");\r\n } else {\r\n this._stateLayer?.hide(\"hover\");\r\n }\r\n },\r\n });\r\n\r\n /** @private */ readonly #pressedController = new PressedController(this, {\r\n target: null,\r\n callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n });\r\n\r\n constructor() {\r\n super();\r\n\r\n new PressedController(this, {\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n });\r\n }\r\n\r\n /**\r\n * The icons to present.\r\n * @default \"none\"\r\n */\r\n @property({ reflect: true }) icons: SwitchIcons = \"none\";\r\n\r\n /**\r\n * A string representing the value of the switch.\r\n * @default \"on\"\r\n */\r\n @property() value = \"on\";\r\n\r\n /** @inheritdoc @private */\r\n override get [formValue](): string | File | FormData | null {\r\n return this.checked && !this.disabled ? this.value : null;\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n for (const label of this.labels) {\r\n this.#hoverController.observe(label);\r\n this.#pressedController.observe(label);\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n for (const label of this.labels) {\r\n this.#hoverController.unobserve(label);\r\n this.#pressedController.unobserve(label);\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n <div class=\"track\" aria-hidden=\"true\">\r\n <div class=\"touch\" aria-hidden=\"true\"></div>\r\n <div class=\"handle\">\r\n <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n <div class=\"base\">${this.#renderIcon()}</div>\r\n </div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #renderIcon(): unknown {\r\n return this.checked\r\n ? html`<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"></path>\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>`;\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (e.defaultPrevented) return;\r\n\r\n if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n this.checked = !this.checked;\r\n\r\n this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }\r\n\r\n // Prevent default avoids double-click in FireFox.\r\n if (this.closest(\"label\")) {\r\n e.preventDefault();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-switch\": M3eSwitchElement;\r\n }\r\n}\r\n"],"names":["SwitchToken","selectedIconColor","unsafeCSS","DesignToken","color","onPrimaryContainer","selectedIconSize","unselectedIconColor","surfaceContainerHighest","unselectedIconSize","trackHeight","trackWidth","trackOutlineColor","outline","trackOutlineWidth","trackShape","shape","corner","full","selectedTrackColor","primary","unselectedTrackColor","unselectedHandleHeight","unselectedHandleWidth","withIconHandleHeight","withIconHandleWidth","selectedHandleHeight","selectedHandleWidth","pressedHandleHeight","pressedHandleWidth","handleShape","selectedHandleColor","onPrimary","unselectedHandleColor","stateLayerSize","stateLayerShape","disabledSelectedIconColor","onSurface","disabledSelectedIconOpacity","disabledUnselectedIconColor","disabledUnselectedIconOpacity","disabledTrackOpacity","disabledSelectedTrackColor","disabledUnselectedTrackColor","disabledUnselectedTrackOutlineColor","disabledUnselectedHandleOpacity","disabledSelectedHandleOpacity","disabledSelectedHandleColor","surface","disabledUnselectedHandleColor","selectedHoverIconColor","unselectedHoverIconColor","selectedHoverTrackColor","selectedHoverStateLayerColor","selectedHoverStateLayerOpacity","unselectedHoverTrackColor","unselectedHoverTrackOutlineColor","unselectedHoverStateLayerColor","unselectedHoverStateLayerOpacity","selectedHoverHandleColor","unselectedHoverHandleColor","onSurfaceVariant","selectedFocusIconColor","unselectedFocusIconColor","selectedFocusTrackColor","selectedFocusStateLayerColor","selectedFocusStateLayerOpacity","unselectedFocusTrackColor","unselectedFocusTrackOutlineColor","unselectedFocusStateLayerColor","unselectedFocusStateLayerOpacity","selectedFocusHandleColor","primaryContainer","unselectedFocusHandleColor","selectedPressedIconColor","unselectedPressedIconColor","selectedPressedTrackColor","selectedPressedStateLayerColor","selectedPressedStateLayerOpacity","unselectedPressedTrackColor","unselectedPressedTrackOutlineColor","unselectedPressedStateLayerColor","unselectedPressedStateLayerOpacity","selectedPressedHandleColor","unselectedPressedHandleColor","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","_M3eSwitchElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eSwitchElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","value","isPressedKey","key","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","closest","preventDefault","styles","__decorate","query","prototype","property","reflect","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"switch.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","selectedIconColor","unsafeCSS","DesignToken","color","onPrimaryContainer","selectedIconSize","unselectedIconColor","surfaceContainerHighest","unselectedIconSize","trackHeight","density","calc","trackWidth","trackOutlineColor","outline","trackOutlineWidth","trackShape","shape","corner","full","selectedTrackColor","primary","unselectedTrackColor","unselectedHandleHeight","unselectedHandleWidth","withIconHandleHeight","withIconHandleWidth","selectedHandleHeight","selectedHandleWidth","pressedHandleHeight","pressedHandleWidth","handleShape","selectedHandleColor","onPrimary","unselectedHandleColor","stateLayerSize","stateLayerShape","disabledSelectedIconColor","onSurface","disabledSelectedIconOpacity","disabledUnselectedIconColor","disabledUnselectedIconOpacity","disabledTrackOpacity","disabledSelectedTrackColor","disabledUnselectedTrackColor","disabledUnselectedTrackOutlineColor","disabledUnselectedHandleOpacity","disabledSelectedHandleOpacity","disabledSelectedHandleColor","surface","disabledUnselectedHandleColor","selectedHoverIconColor","unselectedHoverIconColor","selectedHoverTrackColor","selectedHoverStateLayerColor","selectedHoverStateLayerOpacity","unselectedHoverTrackColor","unselectedHoverTrackOutlineColor","unselectedHoverStateLayerColor","unselectedHoverStateLayerOpacity","selectedHoverHandleColor","unselectedHoverHandleColor","onSurfaceVariant","selectedFocusIconColor","unselectedFocusIconColor","selectedFocusTrackColor","selectedFocusStateLayerColor","selectedFocusStateLayerOpacity","unselectedFocusTrackColor","unselectedFocusTrackOutlineColor","unselectedFocusStateLayerColor","unselectedFocusStateLayerOpacity","selectedFocusHandleColor","primaryContainer","unselectedFocusHandleColor","selectedPressedIconColor","unselectedPressedIconColor","selectedPressedTrackColor","selectedPressedStateLayerColor","selectedPressedStateLayerOpacity","unselectedPressedTrackColor","unselectedPressedTrackOutlineColor","unselectedPressedStateLayerColor","unselectedPressedStateLayerOpacity","selectedPressedHandleColor","unselectedPressedHandleColor","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","_M3eSwitchElement_clickHandler","set","e","__classPrivateFieldGet","call","_M3eSwitchElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","value","isPressedKey","key","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","preventDefault","stopImmediatePropagation","dispatchEvent","Event","bubbles","cancelable","closest","styles","__decorate","query","prototype","property","reflect","customElement"],"mappings":"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"}
package/dist/switch.min.js CHANGED
@@ -3,5 +3,5 @@
3
3
  * Copyright (c) 2025–2026 matraic
4
4
  * See LICENSE file in the project root for full license text.
5
5
  */
6
- import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{unsafeCSS as o,css as r,LitElement as c,html as a}from"lit";import{query as s,property as n}from"lit/decorators.js";import{DesignToken as i,Labelled as d,Dirty as l,Touched as h,ConstraintValidation as u,Checked as k,FormAssociated as p,KeyboardClick as b,Focusable as $,Disabled as f,AttachInternals as m,Role as v,HoverController as w,PressedController as g,formValue as y,customElement as x}from"@m3e/web/core";const C=o(`var(--m3e-switch-selected-icon-color, ${i.color.onPrimaryContainer})`),E=o("var(--m3e-switch-selected-icon-size, 1rem)"),_=o(`var(--m3e-switch-unselected-icon-color, ${i.color.surfaceContainerHighest})`),L=o("var(--m3e-switch-unselected-icon-size, 1rem)"),S=o("var(--m3e-switch-track-height, 2rem)"),H=o("var(--m3e-switch-track-width, 3.25rem)"),T=o(`var(--m3e-switch-track-outline-color, ${i.color.outline})`),X=o("var(--m3e-switch-track-outline-width, 2px)"),z=o(`var(--m3e-switch-track-shape, ${i.shape.corner.full})`),P=o(`var(--m3e-switch-selected-track-color, ${i.color.primary})`),B=o(`var(--m3e-switch-unselected-track-color, ${i.color.surfaceContainerHighest})`),G=o("var(--m3e-switch-unselected-handle-height, 1rem)"),M=o("var(--m3e-switch-unselected-handle-width, 1rem)"),W=o("var(--m3e-switch-with-icon-handle-height, 1.5rem)"),j=o("var(--m3e-switch-with-icon-handle-width, 1.5rem)"),V=o("var(--m3e-switch-selected-handle-height, 1.5rem)"),R=o("var(--m3e-switch-selected-handle-width, 1.5rem)"),U=o("var(--m3e-switch-pressed-handle-height, 1.75rem)"),D=o("var(--m3e-switch-pressed-handle-width, 1.75rem)"),K=o(`var(--m3e-switch-handle-shape, ${i.shape.corner.full})`),Z=o(`var(--m3e-switch-selected-handle-color, ${i.color.onPrimary})`),q=o(`var(--m3e-switch-unselected-handle-color, ${i.color.outline})`),A=o("var(--m3e-switch-state-layer-size, 2.5rem)"),F=o(`var(--m3e-switch-state-layer-shape, ${i.shape.corner.full})`),I=o(`var(--m3e-switch-disabled-selected-icon-color, ${i.color.onSurface})`),J=o("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),N=o(`var(--m3e-switch-disabled-unselected-icon-color, ${i.color.surfaceContainerHighest})`),O=o("var(--m3e-switch-disabled-unselected-icon-opacity, 38%)"),Q=o("var(--m3e-switch-disabled-track-opacity, 12%)"),Y=o(`var(--m3e-switch-disabled-selected-track-color, ${i.color.onSurface})`),ee=o(`var(--m3e-switch-disabled-unselected-track-color, ${i.color.surfaceContainerHighest})`),te=o(`var(--m3e-switch-disabled-unselected-track-outline-color, ${i.color.onSurface})`),oe=o("var(--m3e-switch-disabled-unselected-handle-opacity, 38%)"),re=o("var(--m3e-switch-disabled-selected-handle-opacity, 100%)"),ce=o(`var(--m3e-switch-disabled-selected-handle-color, ${i.color.surface})`),ae=o(`var(--m3e-switch-disabled-unselected-handle-color, ${i.color.onSurface})`),se=o(`var(--m3e-switch-selected-hover-icon-color, ${i.color.onPrimaryContainer})`),ne=o(`var(--m3e-switch-unselected-hover-icon-color, ${i.color.surfaceContainerHighest})`),ie=o(`var(--m3e-switch-selected-hover-track-color, ${i.color.primary})`),de=o(`var(--m3e-switch-selected-hover-state-layer-color, ${i.color.primary})`),le=o("var(--m3e-switch-selected-hover-state-layer-opacity, 8%)"),he=o(`var(--m3e-switch-unselected-hover-track-color, ${i.color.surfaceContainerHighest})`),ue=o(`var(--m3e-switch-unselected-hover-track-outline-color, ${i.color.outline})`),ke=o(`var(--m3e-switch-unselected-hover-state-layer-color, ${i.color.onSurface})`),pe=o("var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)"),be=o(`var(--m3e-switch-selected-hover-handle-color, ${i.color.surfaceContainerHighest})`),$e=o(`var(--m3e-switch-unselected-hover-handle-color, ${i.color.onSurfaceVariant})`),fe=o(`var(--m3e-switch-selected-focus-icon-color, ${i.color.onPrimaryContainer})`),me=o(`var(--m3e-switch-unselected-focus-icon-color, ${i.color.surfaceContainerHighest})`),ve=o(`var(--m3e-switch-selected-focus-track-color, ${i.color.primary})`),we=o(`var(--m3e-switch-selected-focus-state-layer-color, ${i.color.primary})`),ge=o("var(--m3e-switch-selected-focus-state-layer-opacity, 10%)"),ye=o(`var(--m3e-switch-unselected-focus-track-color, ${i.color.surfaceContainerHighest})`),xe=o(`var(--m3e-switch-unselected-focus-track-outline-color, ${i.color.outline})`),Ce=o(`var(--m3e-switch-unselected-focus-state-layer-color, ${i.color.onSurface})`),Ee=o("var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)"),_e=o(`var(--m3e-switch-selected-focus-handle-color, ${i.color.primaryContainer})`),Le=o(`var(--m3e-switch-unselected-focus-handle-color, ${i.color.onSurfaceVariant})`),Se=o(`var(--m3e-switch-selected-pressed-icon-color, ${i.color.onPrimaryContainer})`),He=o(`var(--m3e-switch-unselected-pressed-icon-color, ${i.color.surfaceContainerHighest})`),Te=o(`var(--m3e-switch-selected-pressed-track-color, ${i.color.primary})`),Xe=(o(`var(--m3e-switch-selected-pressed-state-layer-color, ${i.color.primary})`),o("var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)"),o(`var(--m3e-switch-unselected-pressed-track-color, ${i.color.surfaceContainerHighest})`)),ze=o(`var(--m3e-switch-unselected-pressed-track-outline-color, ${i.color.outline})`),Pe=(o(`var(--m3e-switch-unselected-pressed-state-layer-color, ${i.color.onSurface})`),o("var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)"),o(`var(--m3e-switch-selected-pressed-handle-color, ${i.color.primaryContainer})`)),Be=o(`var(--m3e-switch-unselected-pressed-handle-color, ${i.color.onSurfaceVariant})`),Ge=r`.handle { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; transform-origin: center center; border-radius: ${K}; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard},\n transform var(--_switch-handle-effect),\n width ${i.motion.spring.fastEffects},\n height ${i.motion.spring.fastEffects}`)}; } .track:not(.pressed) .handle { --_switch-handle-effect: ${i.motion.spring.fastSpatial}; } .track.pressed .handle { --_switch-handle-effect: ${i.motion.spring.fastEffects}; } :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { width: ${j}; height: ${W}; } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host([aria-disabled="true"]:not([checked])) .handle { width: ${M}; height: ${G}; } :host([checked]) .track:not(.pressed) .handle { width: ${R}; height: ${V}; } .track.pressed .handle { width: ${D}; height: ${U}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${q}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle { background-color: ${$e}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle { background-color: ${Le}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ${Be}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${Z}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle { background-color: ${be}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle { background-color: ${_e}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: ${Pe}; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: color-mix( in srgb, ${ae} ${oe}, transparent ); } :host([aria-disabled="true"][checked]) .handle { background-color: color-mix( in srgb, ${ce} ${re}, transparent ); } :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle { transform: translateX( calc(${H} - ${R} - calc(${X} * 2)) ); } :host(:dir(rtl)[checked]) .track:not(.pressed) .handle { transform: translateX( calc( 0px - calc( ${H} - ${R} - calc(${X} * 2) ) ) ); } :host(:not(:dir(rtl))[checked]) .track.pressed .handle { transform: translateX( calc(${H} - ${D} - ${X}) ); } :host(:dir(rtl)[checked]) .track.pressed .handle { transform: translateX( calc(0px - calc(${H} - ${D} - ${X})) ); } :host(:not(:dir(rtl)):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:not(:dir(rtl))[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( ${X} + calc(${D} - ${j}) ) ); } :host(:dir(rtl):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:dir(rtl)[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( 0px - calc( ${X} + calc(${D} - ${j}) ) ) ); } :host(:not(:dir(rtl)):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(${X}); } :host(:dir(rtl):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(calc(0px - ${X})); } @media (forced-colors: active) { .handle { transition: ${o(`transform var(--_switch-handle-effect),\n width ${i.motion.spring.fastEffects},\n height ${i.motion.spring.fastEffects}`)}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ButtonText; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: GrayText; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: Canvas; } :host([aria-disabled="true"][checked]) .handle { background-color: Canvas; } } @media (prefers-reduced-motion) { .handle { transition: none; } }`,Me=r`:host([icons="none"]) .icon, :host([icons="selected"]:not([checked])) .icon, :host([aria-disabled="true"]:not([checked])) .icon { display: none; } .icon { width: 1em; transition: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not([checked])) .icon { font-size: ${L}; } :host([checked]) .icon { font-size: ${E}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${_}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon { color: ${ne}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon { color: ${me}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: ${He}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${C}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon { color: ${se}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon { color: ${fe}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: ${Se}; } :host([aria-disabled="true"]:not([checked])) .icon { color: color-mix( in srgb, ${N} ${O}, transparent ); } :host([aria-disabled="true"][checked]) .icon { color: color-mix( in srgb, ${I} ${J}, transparent ); } @media (forced-colors: active) { :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: CanvasText; } :host([aria-disabled="true"]:not([checked])) .icon { color: Canvas; } :host([aria-disabled="true"][checked]) .icon { color: GrayText; } } @media (prefers-reduced-motion) { .icon { transition: none; } }`,We=r`.state-layer { width: ${A}; height: ${A}; border-radius: ${F}; transition: ${o(`top ${i.motion.spring.fastEffects},\n left ${i.motion.spring.fastEffects},\n right ${i.motion.spring.fastEffects}`)}; } :host(:not([checked])[icons="both"]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${A} - ${j}) / 2)); top: calc(0px - calc(calc(${A} - ${W}) / 2)); } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .state-layer { inset-inline-start: calc( 0px - calc(calc(${A} - ${M}) / 2) ); top: calc(0px - calc(calc(${A} - ${G}) / 2)); } :host([checked]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${A} - ${R}) / 2)); top: calc(0px - calc(calc(${A} - ${V}) / 2)); } .track.pressed .state-layer { inset-inline-start: calc(0px - calc(calc(${A} - ${D}) / 2)); top: calc(0px - calc(calc(${A} - ${D}) / 2)); } :host(:not([checked])) .state-layer { --m3e-state-layer-hover-color: ${ke}; --m3e-state-layer-hover-opacity: ${pe}; --m3e-state-layer-focus-color: ${Ce}; --m3e-state-layer-focus-opacity: ${Ee}; } :host([checked]) .state-layer { --m3e-state-layer-hover-color: ${de}; --m3e-state-layer-hover-opacity: ${le}; --m3e-state-layer-focus-color: ${we}; --m3e-state-layer-focus-opacity: ${ge}; }`,je=r`:host { display: inline-block; position: relative; outline: none; height: fit-content; width: fit-content; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .focus-ring { border-radius: ${z}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .base { display: flex; align-items: center; justify-content: center; }`,Ve=r`.track { display: flex; align-items: center; position: relative; box-sizing: border-box; border-radius: ${z}; width: ${H}; height: ${S}; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not([checked])) .track { border-width: ${X}; border-style: solid; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) { border-color: ${T}; background-color: ${B}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) { border-color: ${ue}; background-color: ${he}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) { border-color: ${xe}; background-color: ${ye}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ${ze}; background-color: ${Xe}; } :host([aria-disabled="true"]:not([checked])) .track { border-color: color-mix( in srgb, ${te} ${Q}, transparent ); background-color: color-mix( in srgb, ${ee} ${Q}, transparent ); } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) { background-color: ${P}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) { background-color: ${ie}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) { background-color: ${ve}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ${Te}; } :host([aria-disabled="true"][checked]) .track { background-color: color-mix( in srgb, ${Y} ${Q}, transparent ); } @media (forced-colors: active) { .track { transition: none; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ButtonText; background-color: Canvas; } :host([aria-disabled="true"]:not([checked])) .track { border-color: GrayText; background-color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ButtonText; } :host([aria-disabled="true"][checked]) .track { background-color: GrayText; } } @media (prefers-reduced-motion) { .track { transition: none; } }`;var Re,Ue,De,Ke,Ze,qe;let Ae=class extends(d(l(h(u(k(p(b($(f(m(v(c,"switch")))))))))))){constructor(){super(),Re.add(this),Ue.set(this,t=>e(this,Re,"m",qe).call(this,t)),De.set(this,new w(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),Ke.set(this,new g(this,{target:null,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})),this.icons="none",this.value="on",new g(this,{isPressedKey:e=>" "===e,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})}get[(Ue=new WeakMap,De=new WeakMap,Ke=new WeakMap,Re=new WeakSet,y)](){return this.checked&&!this.disabled?this.value:null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,Ue,"f"));for(const t of this.labels)e(this,De,"f").observe(t),e(this,Ke,"f").observe(t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,Ue,"f"));for(const t of this.labels)e(this,De,"f").unobserve(t),e(this,Ke,"f").unobserve(t)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return a`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="track" aria-hidden="true"><div class="touch" aria-hidden="true"></div><div class="handle"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><div class="base">${e(this,Re,"m",Ze).call(this)}</div></div></div>`}};Ze=function(){return this.checked?a`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"></path></svg>`:a`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`},qe=function(e){e.defaultPrevented||(this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))),this.closest("label")&&e.preventDefault())},Ae.styles=[je,We,Ve,Ge,Me],t([s(".track")],Ae.prototype,"_track",void 0),t([s(".focus-ring")],Ae.prototype,"_focusRing",void 0),t([s(".state-layer")],Ae.prototype,"_stateLayer",void 0),t([n({reflect:!0})],Ae.prototype,"icons",void 0),t([n()],Ae.prototype,"value",void 0),Ae=t([x("m3e-switch")],Ae);export{Ae as M3eSwitchElement};
6
+ import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{unsafeCSS as o,css as r,LitElement as c,html as a}from"lit";import{query as s,property as n}from"lit/decorators.js";import{DesignToken as i,Labelled as d,Dirty as l,Touched as h,ConstraintValidation as u,Checked as k,FormAssociated as p,KeyboardClick as $,Focusable as b,Disabled as f,AttachInternals as m,Role as v,HoverController as w,PressedController as g,formValue as y,customElement as x}from"@m3e/web/core";const C=o(`var(--m3e-switch-selected-icon-color, ${i.color.onPrimaryContainer})`),E=o("var(--m3e-switch-selected-icon-size, 1rem)"),_=o(`var(--m3e-switch-unselected-icon-color, ${i.color.surfaceContainerHighest})`),L=o("var(--m3e-switch-unselected-icon-size, 1rem)"),S=o(`calc(var(--m3e-switch-track-height, 2rem) + ${i.density.calc(-3)})`),H=o(`calc(var(--m3e-switch-track-width, 3.25rem) + ${i.density.calc(-3)})`),P=o(`var(--m3e-switch-track-outline-color, ${i.color.outline})`),T=o("var(--m3e-switch-track-outline-width, 2px)"),X=o(`var(--m3e-switch-track-shape, ${i.shape.corner.full})`),z=o(`var(--m3e-switch-selected-track-color, ${i.color.primary})`),B=o(`var(--m3e-switch-unselected-track-color, ${i.color.surfaceContainerHighest})`),G=o(`calc(var(--m3e-switch-unselected-handle-height, 1rem) + ${i.density.calc(-3)})`),M=o(`calc(var(--m3e-switch-unselected-handle-width, 1rem) + ${i.density.calc(-3)})`),W=o(`calc(var(--m3e-switch-with-icon-handle-height, 1.5rem) + ${i.density.calc(-3)})`),j=o(`calc(var(--m3e-switch-with-icon-handle-width, 1.5rem) + ${i.density.calc(-3)})`),V=o(`calc(var(--m3e-switch-selected-handle-height, 1.5rem) + ${i.density.calc(-3)})`),D=o(`calc(var(--m3e-switch-selected-handle-width, 1.5rem) + ${i.density.calc(-3)})`),R=o(`calc(var(--m3e-switch-pressed-handle-height, 1.75rem) + ${i.density.calc(-3)})`),U=o(`calc(var(--m3e-switch-pressed-handle-width, 1.75rem) + ${i.density.calc(-3)})`),I=o(`var(--m3e-switch-handle-shape, ${i.shape.corner.full})`),K=o(`var(--m3e-switch-selected-handle-color, ${i.color.onPrimary})`),Z=o(`var(--m3e-switch-unselected-handle-color, ${i.color.outline})`),q=o(`calc(var(--m3e-switch-state-layer-size, 2.5rem) + ${i.density.calc(-3)})`),A=o(`var(--m3e-switch-state-layer-shape, ${i.shape.corner.full})`),F=o(`var(--m3e-switch-disabled-selected-icon-color, ${i.color.onSurface})`),J=o("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),N=o(`var(--m3e-switch-disabled-unselected-icon-color, ${i.color.surfaceContainerHighest})`),O=o("var(--m3e-switch-disabled-unselected-icon-opacity, 38%)"),Q=o("var(--m3e-switch-disabled-track-opacity, 12%)"),Y=o(`var(--m3e-switch-disabled-selected-track-color, ${i.color.onSurface})`),ee=o(`var(--m3e-switch-disabled-unselected-track-color, ${i.color.surfaceContainerHighest})`),te=o(`var(--m3e-switch-disabled-unselected-track-outline-color, ${i.color.onSurface})`),oe=o("var(--m3e-switch-disabled-unselected-handle-opacity, 38%)"),re=o("var(--m3e-switch-disabled-selected-handle-opacity, 100%)"),ce=o(`var(--m3e-switch-disabled-selected-handle-color, ${i.color.surface})`),ae=o(`var(--m3e-switch-disabled-unselected-handle-color, ${i.color.onSurface})`),se=o(`var(--m3e-switch-selected-hover-icon-color, ${i.color.onPrimaryContainer})`),ne=o(`var(--m3e-switch-unselected-hover-icon-color, ${i.color.surfaceContainerHighest})`),ie=o(`var(--m3e-switch-selected-hover-track-color, ${i.color.primary})`),de=o(`var(--m3e-switch-selected-hover-state-layer-color, ${i.color.primary})`),le=o("var(--m3e-switch-selected-hover-state-layer-opacity, 8%)"),he=o(`var(--m3e-switch-unselected-hover-track-color, ${i.color.surfaceContainerHighest})`),ue=o(`var(--m3e-switch-unselected-hover-track-outline-color, ${i.color.outline})`),ke=o(`var(--m3e-switch-unselected-hover-state-layer-color, ${i.color.onSurface})`),pe=o("var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)"),$e=o(`var(--m3e-switch-selected-hover-handle-color, ${i.color.surfaceContainerHighest})`),be=o(`var(--m3e-switch-unselected-hover-handle-color, ${i.color.onSurfaceVariant})`),fe=o(`var(--m3e-switch-selected-focus-icon-color, ${i.color.onPrimaryContainer})`),me=o(`var(--m3e-switch-unselected-focus-icon-color, ${i.color.surfaceContainerHighest})`),ve=o(`var(--m3e-switch-selected-focus-track-color, ${i.color.primary})`),we=o(`var(--m3e-switch-selected-focus-state-layer-color, ${i.color.primary})`),ge=o("var(--m3e-switch-selected-focus-state-layer-opacity, 10%)"),ye=o(`var(--m3e-switch-unselected-focus-track-color, ${i.color.surfaceContainerHighest})`),xe=o(`var(--m3e-switch-unselected-focus-track-outline-color, ${i.color.outline})`),Ce=o(`var(--m3e-switch-unselected-focus-state-layer-color, ${i.color.onSurface})`),Ee=o("var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)"),_e=o(`var(--m3e-switch-selected-focus-handle-color, ${i.color.primaryContainer})`),Le=o(`var(--m3e-switch-unselected-focus-handle-color, ${i.color.onSurfaceVariant})`),Se=o(`var(--m3e-switch-selected-pressed-icon-color, ${i.color.onPrimaryContainer})`),He=o(`var(--m3e-switch-unselected-pressed-icon-color, ${i.color.surfaceContainerHighest})`),Pe=o(`var(--m3e-switch-selected-pressed-track-color, ${i.color.primary})`),Te=(o(`var(--m3e-switch-selected-pressed-state-layer-color, ${i.color.primary})`),o("var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)"),o(`var(--m3e-switch-unselected-pressed-track-color, ${i.color.surfaceContainerHighest})`)),Xe=o(`var(--m3e-switch-unselected-pressed-track-outline-color, ${i.color.outline})`),ze=(o(`var(--m3e-switch-unselected-pressed-state-layer-color, ${i.color.onSurface})`),o("var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)"),o(`var(--m3e-switch-selected-pressed-handle-color, ${i.color.primaryContainer})`)),Be=o(`var(--m3e-switch-unselected-pressed-handle-color, ${i.color.onSurfaceVariant})`),Ge=r`.handle { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; transform-origin: center center; border-radius: ${I}; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard},\n transform var(--_switch-handle-effect),\n width ${i.motion.spring.fastEffects},\n height ${i.motion.spring.fastEffects}`)}; } .track:not(.pressed) .handle { --_switch-handle-effect: ${i.motion.spring.fastSpatial}; } .track.pressed .handle { --_switch-handle-effect: ${i.motion.spring.fastEffects}; } :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { width: ${j}; height: ${W}; } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host([aria-disabled="true"]:not([checked])) .handle { width: ${M}; height: ${G}; } :host([checked]) .track:not(.pressed) .handle { width: ${D}; height: ${V}; } .track.pressed .handle { width: ${U}; height: ${R}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${Z}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle { background-color: ${be}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle { background-color: ${Le}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ${Be}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${K}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle { background-color: ${$e}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle { background-color: ${_e}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: ${ze}; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: color-mix( in srgb, ${ae} ${oe}, transparent ); } :host([aria-disabled="true"][checked]) .handle { background-color: color-mix( in srgb, ${ce} ${re}, transparent ); } :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle { transform: translateX( calc(${H} - ${D} - calc(${T} * 2)) ); } :host(:dir(rtl)[checked]) .track:not(.pressed) .handle { transform: translateX( calc( 0px - calc( ${H} - ${D} - calc(${T} * 2) ) ) ); } :host(:not(:dir(rtl))[checked]) .track.pressed .handle { transform: translateX( calc(${H} - ${U} - ${T}) ); } :host(:dir(rtl)[checked]) .track.pressed .handle { transform: translateX( calc(0px - calc(${H} - ${U} - ${T})) ); } :host(:not(:dir(rtl)):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:not(:dir(rtl))[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( ${T} + calc(${U} - ${j}) ) ); } :host(:dir(rtl):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:dir(rtl)[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( 0px - calc( ${T} + calc(${U} - ${j}) ) ) ); } :host(:not(:dir(rtl)):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(${T}); } :host(:dir(rtl):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(calc(0px - ${T})); } @media (forced-colors: active) { .handle { transition: ${o(`transform var(--_switch-handle-effect),\n width ${i.motion.spring.fastEffects},\n height ${i.motion.spring.fastEffects}`)}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ButtonText; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: GrayText; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: Canvas; } :host([aria-disabled="true"][checked]) .handle { background-color: Canvas; } } @media (prefers-reduced-motion) { .handle { transition: none; } }`,Me=r`:host([icons="none"]) .icon, :host([icons="selected"]:not([checked])) .icon, :host([aria-disabled="true"]:not([checked])) .icon { display: none; } .icon { width: 1em; transition: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not([checked])) .icon { font-size: ${L}; } :host([checked]) .icon { font-size: ${E}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${_}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon { color: ${ne}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon { color: ${me}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: ${He}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${C}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon { color: ${se}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon { color: ${fe}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: ${Se}; } :host([aria-disabled="true"]:not([checked])) .icon { color: color-mix( in srgb, ${N} ${O}, transparent ); } :host([aria-disabled="true"][checked]) .icon { color: color-mix( in srgb, ${F} ${J}, transparent ); } @media (forced-colors: active) { :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: CanvasText; } :host([aria-disabled="true"]:not([checked])) .icon { color: Canvas; } :host([aria-disabled="true"][checked]) .icon { color: GrayText; } } @media (prefers-reduced-motion) { .icon { transition: none; } }`,We=r`.state-layer { width: ${q}; height: ${q}; border-radius: ${A}; transition: ${o(`top ${i.motion.spring.fastEffects},\n left ${i.motion.spring.fastEffects},\n right ${i.motion.spring.fastEffects}`)}; } :host(:not([checked])[icons="both"]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${q} - ${j}) / 2)); top: calc(0px - calc(calc(${q} - ${W}) / 2)); } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .state-layer { inset-inline-start: calc( 0px - calc(calc(${q} - ${M}) / 2) ); top: calc(0px - calc(calc(${q} - ${G}) / 2)); } :host([checked]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${q} - ${D}) / 2)); top: calc(0px - calc(calc(${q} - ${V}) / 2)); } .track.pressed .state-layer { inset-inline-start: calc(0px - calc(calc(${q} - ${U}) / 2)); top: calc(0px - calc(calc(${q} - ${U}) / 2)); } :host(:not([checked])) .state-layer { --m3e-state-layer-hover-color: ${ke}; --m3e-state-layer-hover-opacity: ${pe}; --m3e-state-layer-focus-color: ${Ce}; --m3e-state-layer-focus-opacity: ${Ee}; } :host([checked]) .state-layer { --m3e-state-layer-hover-color: ${de}; --m3e-state-layer-hover-opacity: ${le}; --m3e-state-layer-focus-color: ${we}; --m3e-state-layer-focus-opacity: ${ge}; }`,je=r`:host { display: inline-block; position: relative; outline: none; height: fit-content; width: fit-content; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .focus-ring { border-radius: ${X}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .base { display: flex; align-items: center; justify-content: center; }`,Ve=r`.track { display: flex; align-items: center; position: relative; box-sizing: border-box; border-radius: ${X}; width: ${H}; height: ${S}; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not([checked])) .track { border-width: ${T}; border-style: solid; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) { border-color: ${P}; background-color: ${B}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) { border-color: ${ue}; background-color: ${he}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) { border-color: ${xe}; background-color: ${ye}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ${Xe}; background-color: ${Te}; } :host([aria-disabled="true"]:not([checked])) .track { border-color: color-mix( in srgb, ${te} ${Q}, transparent ); background-color: color-mix( in srgb, ${ee} ${Q}, transparent ); } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) { background-color: ${z}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) { background-color: ${ie}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) { background-color: ${ve}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ${Pe}; } :host([aria-disabled="true"][checked]) .track { background-color: color-mix( in srgb, ${Y} ${Q}, transparent ); } @media (forced-colors: active) { .track { transition: none; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ButtonText; background-color: Canvas; } :host([aria-disabled="true"]:not([checked])) .track { border-color: GrayText; background-color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ButtonText; } :host([aria-disabled="true"][checked]) .track { background-color: GrayText; } } @media (prefers-reduced-motion) { .track { transition: none; } }`;var De,Re,Ue,Ie,Ke,Ze;let qe=class extends(d(l(h(u(k(p($(b(f(m(v(c,"switch")))))))))))){constructor(){super(),De.add(this),Re.set(this,t=>e(this,De,"m",Ze).call(this,t)),Ue.set(this,new w(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),Ie.set(this,new g(this,{target:null,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})),this.icons="none",this.value="on",new g(this,{isPressedKey:e=>" "===e,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})}get[(Re=new WeakMap,Ue=new WeakMap,Ie=new WeakMap,De=new WeakSet,y)](){return this.checked&&!this.disabled?this.value:null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,Re,"f"));for(const t of this.labels)e(this,Ue,"f").observe(t),e(this,Ie,"f").observe(t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,Re,"f"));for(const t of this.labels)e(this,Ue,"f").unobserve(t),e(this,Ie,"f").unobserve(t)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return a`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="track" aria-hidden="true"><div class="touch" aria-hidden="true"></div><div class="handle"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><div class="base">${e(this,De,"m",Ke).call(this)}</div></div></div>`}};Ke=function(){return this.checked?a`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"></path></svg>`:a`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`},Ze=function(e){if(!e.defaultPrevented){if(this.disabled)return e.preventDefault(),void e.stopImmediatePropagation();this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))),this.closest("label")&&e.preventDefault()}},qe.styles=[je,We,Ve,Ge,Me],t([s(".track")],qe.prototype,"_track",void 0),t([s(".focus-ring")],qe.prototype,"_focusRing",void 0),t([s(".state-layer")],qe.prototype,"_stateLayer",void 0),t([n({reflect:!0})],qe.prototype,"icons",void 0),t([n()],qe.prototype,"value",void 0),qe=t([x("m3e-switch")],qe);export{qe as M3eSwitchElement};
7
7
  //# sourceMappingURL=switch.min.js.map