@luzmo/lucero 1.0.1-alpha.17 → 1.0.1-alpha.19

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 (277) hide show
  1. package/components/NumberFormatter-DewVDY5w.cjs +18 -0
  2. package/components/NumberFormatter-DgOUVrge.js +136 -0
  3. package/components/NumberParser-Dik4a0h-.cjs +18 -0
  4. package/components/NumberParser-ci9J5EKv.js +173 -0
  5. package/components/accordion/index.cjs +6 -183
  6. package/components/accordion/index.js +88 -136
  7. package/components/action-bar/index.cjs +4 -85
  8. package/components/action-bar/index.js +50 -72
  9. package/components/action-button/index.cjs +3 -205
  10. package/components/action-button/index.js +93 -167
  11. package/components/action-group/index.cjs +1 -7
  12. package/components/action-group/index.js +8 -12
  13. package/components/action-group-C54IxNZk.cjs +20 -0
  14. package/components/action-group-C9dsPJg-.js +258 -0
  15. package/components/action-menu/index.cjs +11 -91
  16. package/components/action-menu/index.js +47 -66
  17. package/components/async-directive-BwIAw5tB.js +82 -0
  18. package/components/async-directive-DLz6JB0v.cjs +22 -0
  19. package/components/avatar/index.cjs +3 -63
  20. package/components/avatar/index.js +42 -54
  21. package/components/{focusable-selectors-D0t_5P7C.cjs → base-BjTwmyRF.cjs} +5 -16
  22. package/components/base-CFWO09N1.js +684 -0
  23. package/components/base-Cy0MQrPT.cjs +40 -0
  24. package/components/base-D76d76ww.js +26 -0
  25. package/components/button/index.cjs +2 -134
  26. package/components/button/index.js +72 -106
  27. package/components/button-base-B8bWcklV.js +144 -0
  28. package/components/button-base-tf95Lyl4.cjs +25 -0
  29. package/components/button-group/index.cjs +1 -45
  30. package/components/button-group/index.js +25 -37
  31. package/components/calendar/index.cjs +1 -632
  32. package/components/calendar/index.js +7 -637
  33. package/components/checkbox/index.cjs +4 -111
  34. package/components/checkbox/index.js +53 -98
  35. package/components/checkbox-mixin-BOTvuPEu.js +70 -0
  36. package/components/checkbox-mixin-BVPpXtsq.cjs +27 -0
  37. package/components/class-map-CGfNk3Ee.js +51 -0
  38. package/components/class-map-D-Y-hsN5.cjs +22 -0
  39. package/components/clear-button-CuPbWwZY.cjs +18 -0
  40. package/components/clear-button-DzZ5ulBW.js +53 -0
  41. package/components/close-button-BTo4yrFR.cjs +18 -0
  42. package/components/close-button-CuQdsez5.js +51 -0
  43. package/components/color-area/index.cjs +13 -440
  44. package/components/color-area/index.js +187 -322
  45. package/components/color-controller-B0uX6Zso.js +3230 -0
  46. package/components/color-controller-CoUL5f9K.cjs +18 -0
  47. package/components/color-field/index.cjs +2 -95
  48. package/components/color-field/index.js +41 -77
  49. package/components/color-handle/index.cjs +3 -64
  50. package/components/color-handle/index.js +37 -58
  51. package/components/color-loupe/index.cjs +1 -7
  52. package/components/color-loupe/index.js +8 -12
  53. package/components/color-loupe-CrM2DVY3.cjs +56 -0
  54. package/components/color-loupe-DmQe3SpP.js +81 -0
  55. package/components/color-menu/index.cjs +12 -217
  56. package/components/color-menu/index.js +93 -187
  57. package/components/color-palette/index.cjs +1 -89
  58. package/components/color-palette/index.js +51 -78
  59. package/components/color-palette-group/index.cjs +3 -259
  60. package/components/color-palette-group/index.js +105 -193
  61. package/components/color-picker/index.cjs +6 -114
  62. package/components/color-picker/index.js +72 -92
  63. package/components/color-slider/index.cjs +1 -585
  64. package/components/color-slider/index.js +7 -590
  65. package/components/condition-attribute-with-id-DrQYZzFS.cjs +18 -0
  66. package/components/condition-attribute-with-id-Dv4lSRbe.js +31 -0
  67. package/components/date-time-picker/index.cjs +31 -1357
  68. package/components/date-time-picker/index.js +637 -951
  69. package/components/{dependency-manger-XHpQjFgK.js → dependency-manger-CO-VPlqq.js} +14 -24
  70. package/components/dependency-manger-uthev62E.cjs +18 -0
  71. package/components/directive-C7oCP5Bh.cjs +22 -0
  72. package/components/directive-helpers-D4KMv2dC.js +62 -0
  73. package/components/directive-helpers-t-TVum7J.cjs +22 -0
  74. package/components/{slottable-request-event-CANixJnR.cjs → directive-oAbCiebi.js} +25 -14
  75. package/components/divider/index.cjs +1 -54
  76. package/components/divider/index.js +30 -49
  77. package/components/divider.module-DDvBo9zo.cjs +18 -0
  78. package/components/divider.module-DoQWQEIJ.js +21 -0
  79. package/components/element-resolution-BvRLGqIU.cjs +18 -0
  80. package/components/element-resolution-FCUT-wql.js +91 -0
  81. package/components/field-group/index.cjs +1 -7
  82. package/components/field-group/index.js +8 -12
  83. package/components/field-group-5WQMBOk4.cjs +23 -0
  84. package/components/field-group-D4B0IOdA.js +66 -0
  85. package/components/field-label/index.cjs +1 -7
  86. package/components/field-label/index.js +8 -12
  87. package/components/field-label-DxmPiC5p.js +106 -0
  88. package/components/field-label-Dz9kisdW.cjs +25 -0
  89. package/components/flow-D-0MTYCm.js +527 -0
  90. package/components/flow-DM3dNAKs.cjs +30 -0
  91. package/components/focus-group-DHeTq18L.js +218 -0
  92. package/components/focus-group-DnxZUBhQ.cjs +18 -0
  93. package/components/focus-visible-BvScGDCE.js +74 -0
  94. package/components/focus-visible-D4BXb5RB.cjs +18 -0
  95. package/components/focusable-B_KwfEec.cjs +18 -0
  96. package/components/focusable-C5JjRZmT.js +153 -0
  97. package/components/{focusable-selectors-IltOAOd9.js → focusable-selectors-B4YgbghQ.js} +4 -7
  98. package/components/focusable-selectors-BgFlyFcY.cjs +18 -0
  99. package/components/icon/index.cjs +1 -90
  100. package/components/icon/index.js +46 -74
  101. package/components/if-defined-DULpqYwi.js +27 -0
  102. package/components/if-defined-DaXWqfzc.cjs +22 -0
  103. package/components/index-CNK8wHXu.cjs +57 -0
  104. package/components/index-Cf6G4q52.js +1490 -0
  105. package/components/index-D3ICqC7S.js +1174 -0
  106. package/components/index-hqVbNKYy.cjs +113 -0
  107. package/components/index.cjs +1 -174
  108. package/components/index.js +172 -174
  109. package/components/infield-button/index.cjs +2 -46
  110. package/components/infield-button/index.js +30 -41
  111. package/components/label/index.cjs +1 -37
  112. package/components/label/index.js +24 -36
  113. package/components/{language-resolution-BSGJAWiQ.js → language-resolution-B-wjV5bb.js} +17 -21
  114. package/components/language-resolution-EUER43cg.cjs +18 -0
  115. package/components/like-anchor-Bu3pXbjT.cjs +32 -0
  116. package/components/like-anchor-DCFJN0LV.js +69 -0
  117. package/components/luzmo-icons-CiSek5iM.js +229 -0
  118. package/components/luzmo-icons-CtA-TJPd.cjs +29 -0
  119. package/components/manage-help-text-CHfMLzSa.js +92 -0
  120. package/components/manage-help-text-DNqdEkTA.cjs +30 -0
  121. package/components/menu/index.cjs +29 -1297
  122. package/components/menu/index.js +499 -954
  123. package/components/multi-language-field/index.cjs +2 -132
  124. package/components/multi-language-field/index.js +88 -118
  125. package/components/mutation-controller-DH7YOCyj.js +52 -0
  126. package/components/mutation-controller-DkOMCW-c.cjs +22 -0
  127. package/components/number-field/index.cjs +10 -613
  128. package/components/number-field/index.js +243 -442
  129. package/components/observe-slot-presence-CmVi0zTc.js +68 -0
  130. package/components/observe-slot-presence-bc9chhsi.cjs +18 -0
  131. package/components/observe-slot-text-C3moTjwy.js +87 -0
  132. package/components/observe-slot-text-D2VAEFSd.cjs +18 -0
  133. package/components/options/index.cjs +60 -693
  134. package/components/options/index.js +953 -519
  135. package/components/overlay/index.cjs +21 -367
  136. package/components/overlay/index.js +189 -273
  137. package/components/overlay-B3ajDLLq.cjs +47 -0
  138. package/components/overlay-CUKs69yr.js +2745 -0
  139. package/components/{pending-state-CXbe-Xul.js → pending-state-B2wWssTo.js} +13 -28
  140. package/components/pending-state-bJr-nEJl.cjs +26 -0
  141. package/components/picker/index.cjs +1 -9
  142. package/components/picker/index.js +11 -15
  143. package/components/picker-C0LvseZe.cjs +123 -0
  144. package/components/picker-W1qNmtsh.js +461 -0
  145. package/components/picker-button/index.cjs +4 -56
  146. package/components/picker-button/index.js +34 -45
  147. package/components/{condition-attribute-with-id-Cn815e9W.js → platform-BM-uMWpX.js} +49 -24
  148. package/components/platform-BiXhwqk3.cjs +18 -0
  149. package/components/popover/index.cjs +1 -7
  150. package/components/popover/index.js +8 -12
  151. package/components/popover-fwJeZHMQ.cjs +30 -0
  152. package/components/popover-iD8f5Jkp.js +67 -0
  153. package/components/progress-circle/index.cjs +1 -7
  154. package/components/progress-circle/index.js +8 -12
  155. package/components/progress-circle-DZxaMe8L.cjs +33 -0
  156. package/components/progress-circle-USIIU1up.js +97 -0
  157. package/components/query-BL-TJj7K.cjs +22 -0
  158. package/components/query-D_KR_GUc.js +51 -0
  159. package/components/query-assigned-elements-DjfhL1cl.js +36 -0
  160. package/components/query-assigned-elements-DsKsfk7G.cjs +22 -0
  161. package/components/query-assigned-nodes-BcKWmGzy.cjs +22 -0
  162. package/components/query-assigned-nodes-C76XVPWY.js +36 -0
  163. package/components/radio/index.cjs +2 -244
  164. package/components/radio/index.js +110 -192
  165. package/components/{random-id-BEc6QIUL.js → random-id-ByCz1xaq.js} +3 -3
  166. package/components/random-id-CqvckpWe.cjs +18 -0
  167. package/components/roving-tabindex-By_fCy_e.cjs +18 -0
  168. package/components/roving-tabindex-DOg4z6ZU.js +66 -0
  169. package/components/search/index.cjs +8 -115
  170. package/components/search/index.js +66 -96
  171. package/components/select/index.cjs +51 -720
  172. package/components/select/index.js +347 -563
  173. package/components/sized-mixin-CJbBHWRQ.js +63 -0
  174. package/components/sized-mixin-WPHH0a_D.cjs +18 -0
  175. package/components/slider/index.cjs +1 -119
  176. package/components/slider/index.js +1113 -100
  177. package/components/slottable-request-event-BfUUt1Mh.cjs +18 -0
  178. package/components/{slottable-request-event-D9WzrdWv.js → slottable-request-event-DggLA4Rx.js} +9 -12
  179. package/components/state-DwIwYPvt.js +29 -0
  180. package/components/state-vf0PJN3_.cjs +22 -0
  181. package/components/strategies-C6HsQpU2.cjs +18 -0
  182. package/components/strategies-CUMLHtQI.js +195 -0
  183. package/components/streaming-listener-BQ68fKMa.js +91 -0
  184. package/components/streaming-listener-DeGQYM-9.cjs +18 -0
  185. package/components/style-map-Bnhf_mVZ.js +53 -0
  186. package/components/style-map-DuMd5xlY.cjs +22 -0
  187. package/components/swatch/index.cjs +7 -436
  188. package/components/swatch/index.js +205 -350
  189. package/components/switch/index.cjs +2 -61
  190. package/components/switch/index.js +34 -51
  191. package/components/tabs/index.cjs +26 -693
  192. package/components/tabs/index.js +388 -521
  193. package/components/tags/index.cjs +4 -201
  194. package/components/tags/index.js +87 -152
  195. package/components/text-field/index.cjs +3 -49
  196. package/components/text-field/index.js +30 -44
  197. package/components/text-field-BkFPYo7S.cjs +85 -0
  198. package/components/text-field-C2n3rzCK.js +314 -0
  199. package/components/text-field.module-C2KVUJcX.js +21 -0
  200. package/components/text-field.module-DXhFA9G-.cjs +18 -0
  201. package/components/toast/index.cjs +12 -177
  202. package/components/toast/index.js +73 -145
  203. package/components/tooltip/index.cjs +6 -221
  204. package/components/tooltip/index.js +131 -155
  205. package/components/tooltip/tooltip.d.ts +12 -1
  206. package/components/unit-input/index.cjs +8 -232
  207. package/components/unit-input/index.js +108 -201
  208. package/components/utils.cjs +1 -25
  209. package/components/utils.js +22 -22
  210. package/components/{random-id-BE6HA503.cjs → when-CDK1Tt5Y.js} +10 -7
  211. package/components/when-CDZyJPvd.cjs +22 -0
  212. package/custom-elements.json +1 -1
  213. package/package.json +1 -1
  214. package/components/action-group-DHp8RHDf.js +0 -392
  215. package/components/action-group-MPf19RPV.cjs +0 -391
  216. package/components/base-COw9n7UR.cjs +0 -119
  217. package/components/base-DmeVy0cq.js +0 -120
  218. package/components/button-base-7Ak55xFd.cjs +0 -206
  219. package/components/button-base-C3kf6BTK.js +0 -207
  220. package/components/checkbox-mixin-8cL-vfDy.js +0 -84
  221. package/components/checkbox-mixin-CE7dJj3J.cjs +0 -83
  222. package/components/clear-button-Co6oKSgl.js +0 -59
  223. package/components/clear-button-X_HDY2eH.cjs +0 -58
  224. package/components/close-button-DPBK6Kpu.cjs +0 -59
  225. package/components/close-button-Miw9ZjoJ.js +0 -60
  226. package/components/color-controller-BjDZaxhX.js +0 -491
  227. package/components/color-controller-C3c_vb2P.cjs +0 -490
  228. package/components/color-loupe-BQqNR8YD.cjs +0 -88
  229. package/components/color-loupe-B_DDFv8l.js +0 -89
  230. package/components/condition-attribute-with-id-DEc2Yjne.cjs +0 -43
  231. package/components/dependency-manger-CcIE1uvQ.cjs +0 -63
  232. package/components/divider.module-Cm5LcDRV.cjs +0 -20
  233. package/components/divider.module-DauH6k2_.js +0 -21
  234. package/components/element-resolution-DCsrhGZO.cjs +0 -112
  235. package/components/element-resolution-nMlmW4Jy.js +0 -113
  236. package/components/field-group-DNmY8W9v.cjs +0 -86
  237. package/components/field-group-DVdAWCQF.js +0 -87
  238. package/components/field-label-CKH9EXpR.cjs +0 -156
  239. package/components/field-label-Dpsecoc6.js +0 -157
  240. package/components/focus-group-BqDAk9Is.js +0 -337
  241. package/components/focus-group-DFzOlalL.cjs +0 -336
  242. package/components/focus-visible-B-B8-P9R.cjs +0 -104
  243. package/components/focus-visible-BUPRWlsh.js +0 -105
  244. package/components/focusable-BPrTcZPd.cjs +0 -262
  245. package/components/focusable-ChCLg1k4.js +0 -263
  246. package/components/language-resolution-iN9EImbb.cjs +0 -57
  247. package/components/like-anchor-D62faRNG.cjs +0 -79
  248. package/components/like-anchor-v3cJ9RWM.js +0 -80
  249. package/components/manage-help-text-BYx84zZR.cjs +0 -125
  250. package/components/manage-help-text-DOuMTGht.js +0 -126
  251. package/components/observe-slot-presence-9AwLGUQ_.cjs +0 -78
  252. package/components/observe-slot-presence-DcMdoumP.js +0 -79
  253. package/components/observe-slot-text-CSofZeeF.cjs +0 -104
  254. package/components/observe-slot-text-CjnkkBPn.js +0 -105
  255. package/components/overlay-CN8ISP1F.js +0 -2485
  256. package/components/overlay-LViy9VWM.cjs +0 -2484
  257. package/components/pending-state-e4RbXe9u.cjs +0 -75
  258. package/components/picker-DNde3awt.cjs +0 -672
  259. package/components/picker-PfUAF05y.js +0 -673
  260. package/components/platform-CxDar3Dn.cjs +0 -68
  261. package/components/platform-Cxn0WbyT.js +0 -69
  262. package/components/popover-BkbYhl3i.js +0 -74
  263. package/components/popover-BkgUf0kL.cjs +0 -74
  264. package/components/progress-circle-Hu_ivPHf.js +0 -133
  265. package/components/progress-circle-_Etqsj9f.cjs +0 -132
  266. package/components/roving-tabindex-AsmAh2In.cjs +0 -95
  267. package/components/roving-tabindex-DPF9NmrH.js +0 -96
  268. package/components/sized-mixin-DmkrNdWB.js +0 -80
  269. package/components/sized-mixin-UaTVa-AE.cjs +0 -79
  270. package/components/strategies-DlMlaSJR.cjs +0 -317
  271. package/components/strategies-DlPQoTFE.js +0 -318
  272. package/components/streaming-listener-D4sHaMub.cjs +0 -145
  273. package/components/streaming-listener-cAz5zJyk.js +0 -146
  274. package/components/text-field-11tcnftU.cjs +0 -338
  275. package/components/text-field-Chi9J2Cz.js +0 -339
  276. package/components/text-field.module-CMBS0jSL.js +0 -21
  277. package/components/text-field.module-DIJdV_sA.cjs +0 -20
package/components/switch/index.cjs CHANGED
@@ -15,67 +15,8 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";
19
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
20
- const lit = require("lit");
21
- const decorators_js = require("lit/decorators.js");
22
- const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
23
- const focusable = require("../focusable-BPrTcZPd.cjs");
24
- const checkboxMixin = require("../checkbox-mixin-CE7dJj3J.cjs");
25
- class CheckboxBase extends checkboxMixin.checkboxMixin(focusable.Focusable) {
26
- get focusElement() {
27
- return this.inputElement;
28
- }
29
- }
30
- const switchStyles = ':host{--switch-focus-indicator-width: var( --luzmo-focus-indicator-width, var(--luzmo-indicator-width) );min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-selected-color);--switch-handle-border-color-hover: var(--luzmo-selected-color-hover);--switch-handle-border-color-down: var(--luzmo-selected-color-down);--switch-handle-border-color-focus: var(--luzmo-selected-color-focus);--switch-handle-border-color-selected-default: var( --luzmo-selected-color-hover );--switch-handle-border-color-selected-hover: var(--luzmo-selected-color-down);--switch-handle-border-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-handle-border-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-selected-color-hard);--switch-label-color-hover: var(--luzmo-selected-color-hard-hover);--switch-label-color-down: var(--luzmo-selected-color-hard-down);--switch-label-color-focus: var(--luzmo-selected-color-hard-focus);--switch-label-color-disabled: var(--luzmo-disabled-color);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-disabled-color);--switch-background-color-selected-default: var(--luzmo-selected-color-hover);--switch-background-color-selected-hover: var(--luzmo-selected-color-down);--switch-background-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-background-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-disabled-color);--switch-spacing-top-to-control: calc( (var(--switch-min-height) - var(--switch-control-height)) / 2 )}:host([disabled]){--switch-label-color-default: var(--luzmo-disabled-color)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';
31
- var __defProp = Object.defineProperty;
32
- var __decorateClass = (decorators, target, key, kind) => {
33
- var result = void 0;
34
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
35
- if (decorator = decorators[i])
36
- result = decorator(target, key, result) || result;
37
- if (result) __defProp(target, key, result);
38
- return result;
39
- };
40
- class LuzmoSwitch extends sizedMixin.SizedMixin(CheckboxBase) {
41
- constructor() {
42
- super(...arguments);
43
- this.emphasized = false;
44
- this.thumb = "overflow";
45
- }
46
- static get styles() {
47
- if (window.hasOwnProperty("ShadyDOM")) {
48
- return [lit.unsafeCSS(switchStyles)];
49
- }
50
- return [lit.unsafeCSS(switchStyles)];
51
- }
52
- render() {
53
- return lit.html`
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../base-Cy0MQrPT.cjs"),d=require("../sized-mixin-WPHH0a_D.cjs"),n=require("../focusable-B_KwfEec.cjs"),u=require("../checkbox-mixin-BVPpXtsq.cjs");class w extends u.checkboxMixin(n.Focusable){get focusElement(){return this.inputElement}}const s=':host{--switch-focus-indicator-width: var( --luzmo-focus-indicator-width, var(--luzmo-indicator-width) );min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-selected-color);--switch-handle-border-color-hover: var(--luzmo-selected-color-hover);--switch-handle-border-color-down: var(--luzmo-selected-color-down);--switch-handle-border-color-focus: var(--luzmo-selected-color-focus);--switch-handle-border-color-selected-default: var( --luzmo-selected-color-hover );--switch-handle-border-color-selected-hover: var(--luzmo-selected-color-down);--switch-handle-border-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-handle-border-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-selected-color-hard);--switch-label-color-hover: var(--luzmo-selected-color-hard-hover);--switch-label-color-down: var(--luzmo-selected-color-hard-down);--switch-label-color-focus: var(--luzmo-selected-color-hard-focus);--switch-label-color-disabled: var(--luzmo-disabled-color);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-disabled-color);--switch-background-color-selected-default: var(--luzmo-selected-color-hover);--switch-background-color-selected-hover: var(--luzmo-selected-color-down);--switch-background-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-background-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-disabled-color);--switch-spacing-top-to-control: calc( (var(--switch-min-height) - var(--switch-control-height)) / 2 )}:host([disabled]){--switch-label-color-default: var(--luzmo-disabled-color)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';var b=Object.defineProperty,h=(t,o,l,v)=>{for(var r=void 0,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=a(o,l,r)||r);return r&&b(o,l,r),r};class e extends d.SizedMixin(w){constructor(){super(...arguments),this.emphasized=!1,this.thumb="overflow"}static get styles(){return window.hasOwnProperty("ShadyDOM")?[c.r(s)]:[c.r(s)]}render(){return c.x`
54
19
  ${super.render()}
55
20
  <span id="switch"></span>
56
21
  <label id="label" for="input"><slot></slot></label>
57
- `;
58
- }
59
- firstUpdated(changes) {
60
- super.firstUpdated(changes);
61
- this.inputElement.setAttribute("role", "switch");
62
- }
63
- updated(changes) {
64
- if (changes.has("checked")) {
65
- this.inputElement.setAttribute(
66
- "aria-checked",
67
- this.checked ? "true" : "false"
68
- );
69
- }
70
- }
71
- }
72
- __decorateClass([
73
- decorators_js.property({ type: Boolean, reflect: true })
74
- ], LuzmoSwitch.prototype, "emphasized");
75
- __decorateClass([
76
- decorators_js.property({ type: String, reflect: true })
77
- ], LuzmoSwitch.prototype, "thumb");
78
- if (!customElements.get("luzmo-switch")) {
79
- customElements.define("luzmo-switch", LuzmoSwitch);
80
- }
81
- exports.LuzmoSwitch = LuzmoSwitch;
22
+ `}firstUpdated(o){super.firstUpdated(o),this.inputElement.setAttribute("role","switch")}updated(o){o.has("checked")&&this.inputElement.setAttribute("aria-checked",this.checked?"true":"false")}}h([c.n({type:Boolean,reflect:!0})],e.prototype,"emphasized");h([c.n({type:String,reflect:!0})],e.prototype,"thumb");customElements.get("luzmo-switch")||customElements.define("luzmo-switch",e);exports.LuzmoSwitch=e;
package/components/switch/index.js CHANGED
@@ -15,76 +15,59 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- const initializeGlobalLuzmoCSSVariables = () => {
19
- if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
20
- const styleElement = document.createElement("style");
21
- styleElement.setAttribute("data-luzmo-vars", "");
22
- styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
23
- document.head.appendChild(styleElement);
18
+ import { r as a, x as u, n as h } from "../base-CFWO09N1.js";
19
+ import { S as b } from "../sized-mixin-CJbBHWRQ.js";
20
+ import { F as w } from "../focusable-C5JjRZmT.js";
21
+ import { c as m } from "../checkbox-mixin-BOTvuPEu.js";
22
+ const n = () => {
23
+ if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
24
+ const o = document.createElement("style");
25
+ o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
24
26
  }
25
27
  };
26
- initializeGlobalLuzmoCSSVariables();
27
- import { unsafeCSS, html } from "lit";
28
- import { property } from "lit/decorators.js";
29
- import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
30
- import { F as Focusable } from "../focusable-ChCLg1k4.js";
31
- import { c as checkboxMixin } from "../checkbox-mixin-8cL-vfDy.js";
32
- class CheckboxBase extends checkboxMixin(Focusable) {
28
+ n();
29
+ class v extends m(w) {
33
30
  get focusElement() {
34
31
  return this.inputElement;
35
32
  }
36
33
  }
37
- const switchStyles = ':host{--switch-focus-indicator-width: var( --luzmo-focus-indicator-width, var(--luzmo-indicator-width) );min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-selected-color);--switch-handle-border-color-hover: var(--luzmo-selected-color-hover);--switch-handle-border-color-down: var(--luzmo-selected-color-down);--switch-handle-border-color-focus: var(--luzmo-selected-color-focus);--switch-handle-border-color-selected-default: var( --luzmo-selected-color-hover );--switch-handle-border-color-selected-hover: var(--luzmo-selected-color-down);--switch-handle-border-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-handle-border-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-selected-color-hard);--switch-label-color-hover: var(--luzmo-selected-color-hard-hover);--switch-label-color-down: var(--luzmo-selected-color-hard-down);--switch-label-color-focus: var(--luzmo-selected-color-hard-focus);--switch-label-color-disabled: var(--luzmo-disabled-color);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-disabled-color);--switch-background-color-selected-default: var(--luzmo-selected-color-hover);--switch-background-color-selected-hover: var(--luzmo-selected-color-down);--switch-background-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-background-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-disabled-color);--switch-spacing-top-to-control: calc( (var(--switch-min-height) - var(--switch-control-height)) / 2 )}:host([disabled]){--switch-label-color-default: var(--luzmo-disabled-color)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';
38
- var __defProp = Object.defineProperty;
39
- var __decorateClass = (decorators, target, key, kind) => {
40
- var result = void 0;
41
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
42
- if (decorator = decorators[i])
43
- result = decorator(target, key, result) || result;
44
- if (result) __defProp(target, key, result);
45
- return result;
34
+ const s = ':host{--switch-focus-indicator-width: var( --luzmo-focus-indicator-width, var(--luzmo-indicator-width) );min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-selected-color);--switch-handle-border-color-hover: var(--luzmo-selected-color-hover);--switch-handle-border-color-down: var(--luzmo-selected-color-down);--switch-handle-border-color-focus: var(--luzmo-selected-color-focus);--switch-handle-border-color-selected-default: var( --luzmo-selected-color-hover );--switch-handle-border-color-selected-hover: var(--luzmo-selected-color-down);--switch-handle-border-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-handle-border-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-selected-color-hard);--switch-label-color-hover: var(--luzmo-selected-color-hard-hover);--switch-label-color-down: var(--luzmo-selected-color-hard-down);--switch-label-color-focus: var(--luzmo-selected-color-hard-focus);--switch-label-color-disabled: var(--luzmo-disabled-color);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-disabled-color);--switch-background-color-selected-default: var(--luzmo-selected-color-hover);--switch-background-color-selected-hover: var(--luzmo-selected-color-down);--switch-background-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-background-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-disabled-color);--switch-spacing-top-to-control: calc( (var(--switch-min-height) - var(--switch-control-height)) / 2 )}:host([disabled]){--switch-label-color-default: var(--luzmo-disabled-color)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';
35
+ var g = Object.defineProperty, d = (o, r, l, z) => {
36
+ for (var c = void 0, e = o.length - 1, i; e >= 0; e--)
37
+ (i = o[e]) && (c = i(r, l, c) || c);
38
+ return c && g(r, l, c), c;
46
39
  };
47
- class LuzmoSwitch extends SizedMixin(CheckboxBase) {
40
+ class t extends b(v) {
48
41
  constructor() {
49
- super(...arguments);
50
- this.emphasized = false;
51
- this.thumb = "overflow";
42
+ super(...arguments), this.emphasized = !1, this.thumb = "overflow";
52
43
  }
53
44
  static get styles() {
54
- if (window.hasOwnProperty("ShadyDOM")) {
55
- return [unsafeCSS(switchStyles)];
56
- }
57
- return [unsafeCSS(switchStyles)];
45
+ return window.hasOwnProperty("ShadyDOM") ? [a(s)] : [a(s)];
58
46
  }
59
47
  render() {
60
- return html`
48
+ return u`
61
49
  ${super.render()}
62
50
  <span id="switch"></span>
63
51
  <label id="label" for="input"><slot></slot></label>
64
52
  `;
65
53
  }
66
- firstUpdated(changes) {
67
- super.firstUpdated(changes);
68
- this.inputElement.setAttribute("role", "switch");
54
+ firstUpdated(r) {
55
+ super.firstUpdated(r), this.inputElement.setAttribute("role", "switch");
69
56
  }
70
- updated(changes) {
71
- if (changes.has("checked")) {
72
- this.inputElement.setAttribute(
73
- "aria-checked",
74
- this.checked ? "true" : "false"
75
- );
76
- }
57
+ updated(r) {
58
+ r.has("checked") && this.inputElement.setAttribute(
59
+ "aria-checked",
60
+ this.checked ? "true" : "false"
61
+ );
77
62
  }
78
63
  }
79
- __decorateClass([
80
- property({ type: Boolean, reflect: true })
81
- ], LuzmoSwitch.prototype, "emphasized");
82
- __decorateClass([
83
- property({ type: String, reflect: true })
84
- ], LuzmoSwitch.prototype, "thumb");
85
- if (!customElements.get("luzmo-switch")) {
86
- customElements.define("luzmo-switch", LuzmoSwitch);
87
- }
64
+ d([
65
+ h({ type: Boolean, reflect: !0 })
66
+ ], t.prototype, "emphasized");
67
+ d([
68
+ h({ type: String, reflect: !0 })
69
+ ], t.prototype, "thumb");
70
+ customElements.get("luzmo-switch") || customElements.define("luzmo-switch", t);
88
71
  export {
89
- LuzmoSwitch
72
+ t as LuzmoSwitch
90
73
  };