@luzmo/lucero 1.0.1-alpha.14 → 1.0.1-alpha.16

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 (275) hide show
  1. package/components/accordion/index.cjs +183 -6
  2. package/components/accordion/index.js +136 -88
  3. package/components/action-bar/index.cjs +85 -4
  4. package/components/action-bar/index.js +72 -50
  5. package/components/action-button/index.cjs +205 -3
  6. package/components/action-button/index.js +167 -93
  7. package/components/action-group/index.cjs +7 -1
  8. package/components/action-group/index.js +12 -8
  9. package/components/action-group-DHp8RHDf.js +392 -0
  10. package/components/action-group-MPf19RPV.cjs +391 -0
  11. package/components/action-menu/index.cjs +91 -11
  12. package/components/action-menu/index.js +66 -47
  13. package/components/avatar/index.cjs +63 -3
  14. package/components/avatar/index.js +54 -42
  15. package/components/base-COw9n7UR.cjs +119 -0
  16. package/components/base-DmeVy0cq.js +120 -0
  17. package/components/button/index.cjs +134 -2
  18. package/components/button/index.js +106 -72
  19. package/components/button-base-7Ak55xFd.cjs +206 -0
  20. package/components/button-base-C3kf6BTK.js +207 -0
  21. package/components/button-group/index.cjs +45 -1
  22. package/components/button-group/index.js +37 -25
  23. package/components/calendar/index.cjs +632 -1
  24. package/components/calendar/index.js +637 -7
  25. package/components/checkbox/index.cjs +111 -4
  26. package/components/checkbox/index.js +98 -53
  27. package/components/checkbox-mixin-8cL-vfDy.js +84 -0
  28. package/components/checkbox-mixin-CE7dJj3J.cjs +83 -0
  29. package/components/clear-button-Co6oKSgl.js +59 -0
  30. package/components/clear-button-X_HDY2eH.cjs +58 -0
  31. package/components/close-button-DPBK6Kpu.cjs +59 -0
  32. package/components/close-button-Miw9ZjoJ.js +60 -0
  33. package/components/color-area/index.cjs +440 -13
  34. package/components/color-area/index.js +322 -187
  35. package/components/color-controller-BjDZaxhX.js +491 -0
  36. package/components/color-controller-C3c_vb2P.cjs +490 -0
  37. package/components/color-field/index.cjs +95 -2
  38. package/components/color-field/index.js +77 -41
  39. package/components/color-handle/index.cjs +64 -3
  40. package/components/color-handle/index.js +58 -37
  41. package/components/color-loupe/index.cjs +7 -1
  42. package/components/color-loupe/index.js +12 -8
  43. package/components/color-loupe-BQqNR8YD.cjs +88 -0
  44. package/components/color-loupe-B_DDFv8l.js +89 -0
  45. package/components/color-menu/index.cjs +217 -12
  46. package/components/color-menu/index.js +187 -93
  47. package/components/color-palette/index.cjs +89 -1
  48. package/components/color-palette/index.js +78 -51
  49. package/components/color-palette-group/index.cjs +259 -3
  50. package/components/color-palette-group/index.js +193 -105
  51. package/components/color-picker/index.cjs +114 -6
  52. package/components/color-picker/index.js +92 -72
  53. package/components/color-slider/index.cjs +585 -1
  54. package/components/color-slider/index.js +590 -7
  55. package/components/{directive-oAbCiebi.js → condition-attribute-with-id-Cn815e9W.js} +22 -22
  56. package/components/condition-attribute-with-id-DEc2Yjne.cjs +43 -0
  57. package/components/date-time-picker/index.cjs +1357 -31
  58. package/components/date-time-picker/index.js +951 -637
  59. package/components/dependency-manger-CcIE1uvQ.cjs +63 -0
  60. package/components/{dependency-manger-CEXvGQUV.js → dependency-manger-XHpQjFgK.js} +24 -14
  61. package/components/divider/index.cjs +54 -1
  62. package/components/divider/index.js +49 -30
  63. package/components/divider.module-Cm5LcDRV.cjs +20 -0
  64. package/components/divider.module-DauH6k2_.js +21 -0
  65. package/components/element-resolution-DCsrhGZO.cjs +112 -0
  66. package/components/element-resolution-nMlmW4Jy.js +113 -0
  67. package/components/field-group/index.cjs +7 -1
  68. package/components/field-group/index.js +12 -8
  69. package/components/field-group-DNmY8W9v.cjs +86 -0
  70. package/components/field-group-DVdAWCQF.js +87 -0
  71. package/components/field-label/index.cjs +7 -1
  72. package/components/field-label/index.js +12 -8
  73. package/components/field-label-CKH9EXpR.cjs +156 -0
  74. package/components/field-label-Dpsecoc6.js +157 -0
  75. package/components/focus-group-BqDAk9Is.js +337 -0
  76. package/components/focus-group-DFzOlalL.cjs +336 -0
  77. package/components/focus-visible-B-B8-P9R.cjs +104 -0
  78. package/components/focus-visible-BUPRWlsh.js +105 -0
  79. package/components/focusable-BPrTcZPd.cjs +262 -0
  80. package/components/focusable-ChCLg1k4.js +263 -0
  81. package/components/{directive-C7oCP5Bh.cjs → focusable-selectors-D0t_5P7C.cjs} +16 -5
  82. package/components/{focusable-selectors-B4YgbghQ.js → focusable-selectors-IltOAOd9.js} +7 -4
  83. package/components/icon/index.cjs +90 -1
  84. package/components/icon/index.js +74 -46
  85. package/components/index.cjs +174 -1
  86. package/components/index.js +174 -172
  87. package/components/infield-button/index.cjs +46 -2
  88. package/components/infield-button/index.js +41 -30
  89. package/components/label/index.cjs +37 -1
  90. package/components/label/index.js +36 -24
  91. package/components/{language-resolution-8yZa5r_P.js → language-resolution-BSGJAWiQ.js} +21 -16
  92. package/components/language-resolution-iN9EImbb.cjs +57 -0
  93. package/components/like-anchor-D62faRNG.cjs +79 -0
  94. package/components/like-anchor-v3cJ9RWM.js +80 -0
  95. package/components/manage-help-text-BYx84zZR.cjs +125 -0
  96. package/components/manage-help-text-DOuMTGht.js +126 -0
  97. package/components/menu/index.cjs +1297 -29
  98. package/components/menu/index.js +954 -499
  99. package/components/multi-language-field/index.cjs +132 -2
  100. package/components/multi-language-field/index.js +118 -88
  101. package/components/number-field/index.cjs +613 -10
  102. package/components/number-field/index.js +442 -243
  103. package/components/observe-slot-presence-9AwLGUQ_.cjs +78 -0
  104. package/components/observe-slot-presence-DcMdoumP.js +79 -0
  105. package/components/observe-slot-text-CSofZeeF.cjs +104 -0
  106. package/components/observe-slot-text-CjnkkBPn.js +105 -0
  107. package/components/options/index.cjs +693 -60
  108. package/components/options/index.js +519 -953
  109. package/components/overlay/index.cjs +367 -21
  110. package/components/overlay/index.js +273 -189
  111. package/components/overlay-CN8ISP1F.js +2485 -0
  112. package/components/overlay-LViy9VWM.cjs +2484 -0
  113. package/components/{pending-state-DTX7ggyF.js → pending-state-CXbe-Xul.js} +28 -13
  114. package/components/pending-state-e4RbXe9u.cjs +75 -0
  115. package/components/picker/index.cjs +9 -1
  116. package/components/picker/index.js +15 -11
  117. package/components/picker-DNde3awt.cjs +672 -0
  118. package/components/picker-PfUAF05y.js +673 -0
  119. package/components/picker-button/index.cjs +56 -4
  120. package/components/picker-button/index.js +45 -34
  121. package/components/platform-CxDar3Dn.cjs +68 -0
  122. package/components/platform-Cxn0WbyT.js +69 -0
  123. package/components/popover/index.cjs +7 -1
  124. package/components/popover/index.js +12 -8
  125. package/components/popover-BkbYhl3i.js +74 -0
  126. package/components/popover-BkgUf0kL.cjs +74 -0
  127. package/components/progress-circle/index.cjs +7 -1
  128. package/components/progress-circle/index.js +12 -8
  129. package/components/progress-circle-Hu_ivPHf.js +133 -0
  130. package/components/progress-circle-_Etqsj9f.cjs +132 -0
  131. package/components/radio/index.cjs +244 -2
  132. package/components/radio/index.js +192 -110
  133. package/components/{when-CDK1Tt5Y.js → random-id-BE6HA503.cjs} +7 -10
  134. package/components/{random-id-ByCz1xaq.js → random-id-BEc6QIUL.js} +3 -3
  135. package/components/roving-tabindex-AsmAh2In.cjs +95 -0
  136. package/components/roving-tabindex-DPF9NmrH.js +96 -0
  137. package/components/search/index.cjs +115 -8
  138. package/components/search/index.js +96 -66
  139. package/components/select/index.cjs +720 -51
  140. package/components/select/index.js +563 -347
  141. package/components/sized-mixin-DmkrNdWB.js +80 -0
  142. package/components/sized-mixin-UaTVa-AE.cjs +79 -0
  143. package/components/slider/index.cjs +119 -1
  144. package/components/slider/index.js +100 -1113
  145. package/components/{condition-attribute-with-id-Dv4lSRbe.js → slottable-request-event-CANixJnR.cjs} +15 -13
  146. package/components/{slottable-request-event-DggLA4Rx.js → slottable-request-event-D9WzrdWv.js} +12 -9
  147. package/components/strategies-DlMlaSJR.cjs +317 -0
  148. package/components/strategies-DlPQoTFE.js +318 -0
  149. package/components/streaming-listener-D4sHaMub.cjs +145 -0
  150. package/components/streaming-listener-cAz5zJyk.js +146 -0
  151. package/components/swatch/index.cjs +436 -7
  152. package/components/swatch/index.js +350 -205
  153. package/components/switch/index.cjs +61 -2
  154. package/components/switch/index.js +51 -34
  155. package/components/tabs/index.cjs +693 -26
  156. package/components/tabs/index.js +521 -388
  157. package/components/tags/index.cjs +201 -4
  158. package/components/tags/index.js +152 -87
  159. package/components/text-field/index.cjs +49 -3
  160. package/components/text-field/index.js +44 -30
  161. package/components/text-field-11tcnftU.cjs +338 -0
  162. package/components/text-field-Chi9J2Cz.js +339 -0
  163. package/components/text-field.module-CMBS0jSL.js +21 -0
  164. package/components/text-field.module-DIJdV_sA.cjs +20 -0
  165. package/components/toast/index.cjs +177 -12
  166. package/components/toast/index.js +145 -73
  167. package/components/tooltip/index.cjs +221 -6
  168. package/components/tooltip/index.js +156 -109
  169. package/components/unit-input/index.cjs +232 -8
  170. package/components/unit-input/index.js +201 -108
  171. package/components/utils.cjs +25 -1
  172. package/components/utils.js +22 -22
  173. package/package.json +1 -1
  174. package/components/NumberFormatter-DewVDY5w.cjs +0 -18
  175. package/components/NumberFormatter-DgOUVrge.js +0 -136
  176. package/components/NumberParser-Dik4a0h-.cjs +0 -18
  177. package/components/NumberParser-ci9J5EKv.js +0 -173
  178. package/components/action-group-DBImibFn.js +0 -258
  179. package/components/action-group-DJGMcRHb.cjs +0 -20
  180. package/components/async-directive-BX1T1e1_.cjs +0 -22
  181. package/components/async-directive-BfcqVjDp.js +0 -82
  182. package/components/base-BjTwmyRF.cjs +0 -22
  183. package/components/base-CBCg3yyw.cjs +0 -40
  184. package/components/base-D76d76ww.js +0 -26
  185. package/components/base-WsynuqaS.js +0 -677
  186. package/components/button-base-DbkDzb71.js +0 -144
  187. package/components/button-base-XgPLmwP-.cjs +0 -25
  188. package/components/checkbox-mixin-BDN0dBtS.cjs +0 -27
  189. package/components/checkbox-mixin-Do7EgtpQ.js +0 -70
  190. package/components/class-map-Di1D_rCm.cjs +0 -22
  191. package/components/class-map-NbVXqBU0.js +0 -51
  192. package/components/clear-button-DQcRdcUa.js +0 -53
  193. package/components/clear-button-OFUFFe7G.cjs +0 -18
  194. package/components/close-button-Cbnb7XXj.cjs +0 -18
  195. package/components/close-button-CqHYZhum.js +0 -51
  196. package/components/color-controller-B0uX6Zso.js +0 -3230
  197. package/components/color-controller-CoUL5f9K.cjs +0 -18
  198. package/components/color-loupe-CaA_Lfkk.cjs +0 -56
  199. package/components/color-loupe-CmMsXbjT.js +0 -81
  200. package/components/condition-attribute-with-id-DrQYZzFS.cjs +0 -18
  201. package/components/dependency-manger-C5HCkMMB.cjs +0 -18
  202. package/components/directive-helpers-Cm6gitnu.js +0 -62
  203. package/components/directive-helpers-DyIRTWwA.cjs +0 -22
  204. package/components/divider.module-DDvBo9zo.cjs +0 -18
  205. package/components/divider.module-DoQWQEIJ.js +0 -21
  206. package/components/element-resolution-BvRLGqIU.cjs +0 -18
  207. package/components/element-resolution-FCUT-wql.js +0 -91
  208. package/components/field-group-DXfBWrkO.js +0 -66
  209. package/components/field-group-DkGst3r5.cjs +0 -23
  210. package/components/field-label-CZ2zzChK.js +0 -106
  211. package/components/field-label-mO1AkUgR.cjs +0 -25
  212. package/components/flow-D-0MTYCm.js +0 -527
  213. package/components/flow-DM3dNAKs.cjs +0 -30
  214. package/components/focus-group-DHeTq18L.js +0 -218
  215. package/components/focus-group-DnxZUBhQ.cjs +0 -18
  216. package/components/focus-visible-B0P9aY_G.cjs +0 -18
  217. package/components/focus-visible-DBlJGoEW.js +0 -74
  218. package/components/focusable-BxtpnzWp.js +0 -153
  219. package/components/focusable-EbipgXRh.cjs +0 -18
  220. package/components/focusable-selectors-BgFlyFcY.cjs +0 -18
  221. package/components/if-defined-C9YGdo33.cjs +0 -22
  222. package/components/if-defined-DOaE2coe.js +0 -27
  223. package/components/index-BwxgAdzi.cjs +0 -57
  224. package/components/index-Cl54m8Yh.js +0 -1490
  225. package/components/index-HjQa8tew.js +0 -1174
  226. package/components/index-Wq3qZJGh.cjs +0 -113
  227. package/components/language-resolution-DJzmyzZq.cjs +0 -18
  228. package/components/like-anchor-Bvn_vLQ8.js +0 -69
  229. package/components/like-anchor-sod1C1fR.cjs +0 -32
  230. package/components/luzmo-icons-4nDFv1Lq.js +0 -229
  231. package/components/luzmo-icons-D4IvHgVd.cjs +0 -29
  232. package/components/manage-help-text-DhgARkZX.cjs +0 -30
  233. package/components/manage-help-text-syYnjKGL.js +0 -92
  234. package/components/mutation-controller-DH7YOCyj.js +0 -52
  235. package/components/mutation-controller-DkOMCW-c.cjs +0 -22
  236. package/components/observe-slot-presence-CmVi0zTc.js +0 -68
  237. package/components/observe-slot-presence-bc9chhsi.cjs +0 -18
  238. package/components/observe-slot-text-BPfIQQtz.js +0 -87
  239. package/components/observe-slot-text-Ceb7SvYT.cjs +0 -18
  240. package/components/overlay-Cig9r6uU.js +0 -2747
  241. package/components/overlay-KSKMzzkh.cjs +0 -47
  242. package/components/pending-state-CaH1si5b.cjs +0 -26
  243. package/components/picker-BfBP7XJN.js +0 -461
  244. package/components/picker-xIphqE6d.cjs +0 -123
  245. package/components/platform-BM-uMWpX.js +0 -69
  246. package/components/platform-BiXhwqk3.cjs +0 -18
  247. package/components/popover-DjX0aAnY.js +0 -67
  248. package/components/popover-KFfO0IYL.cjs +0 -30
  249. package/components/progress-circle-BvRJNuNo.cjs +0 -33
  250. package/components/progress-circle-DXH9z8-6.js +0 -97
  251. package/components/query-BL-TJj7K.cjs +0 -22
  252. package/components/query-D_KR_GUc.js +0 -51
  253. package/components/query-assigned-elements-DjfhL1cl.js +0 -36
  254. package/components/query-assigned-elements-DsKsfk7G.cjs +0 -22
  255. package/components/query-assigned-nodes-BcKWmGzy.cjs +0 -22
  256. package/components/query-assigned-nodes-C76XVPWY.js +0 -36
  257. package/components/random-id-CqvckpWe.cjs +0 -18
  258. package/components/roving-tabindex-By_fCy_e.cjs +0 -18
  259. package/components/roving-tabindex-DOg4z6ZU.js +0 -66
  260. package/components/sized-mixin-CPxE5C96.cjs +0 -18
  261. package/components/sized-mixin-D4ACoVUr.js +0 -63
  262. package/components/slottable-request-event-BfUUt1Mh.cjs +0 -18
  263. package/components/state-D8JEtYqe.cjs +0 -22
  264. package/components/state-Deh-vKYE.js +0 -29
  265. package/components/strategies-9indNIEb.js +0 -195
  266. package/components/strategies-BACP6MhR.cjs +0 -18
  267. package/components/streaming-listener-B00MvALi.cjs +0 -18
  268. package/components/streaming-listener-CP-JE6Fa.js +0 -91
  269. package/components/style-map-CeilmSgs.cjs +0 -22
  270. package/components/style-map-IgqIKvlE.js +0 -53
  271. package/components/text-field-CeG75PPO.cjs +0 -85
  272. package/components/text-field-DCl-AFM-.js +0 -314
  273. package/components/text-field.module-C2KVUJcX.js +0 -21
  274. package/components/text-field.module-DXhFA9G-.cjs +0 -18
  275. package/components/when-CDZyJPvd.cjs +0 -22
package/components/checkbox/index.cjs CHANGED
@@ -15,11 +15,118 @@
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../luzmo-icons-D4IvHgVd.cjs"),o=require("../base-CBCg3yyw.cjs"),b=require("../sized-mixin-CPxE5C96.cjs"),d=require("../checkbox-mixin-BDN0dBtS.cjs"),u=':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';var x=Object.defineProperty,t=(h,e,n,k)=>{for(var r=void 0,a=h.length-1,s;a>=0;a--)(s=h[a])&&(r=s(e,n,r)||r);return r&&x(e,n,r),r};const v=()=>o.x`<div id="checkmark">${i.y3(i.B)}</div>`,m=()=>o.x`<div id="partialCheckmark">${i.y3(i.R)}</div>`,l=class l extends b.SizedMixin(d.checkboxMixin(o.LuzmoElement),{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.autofocus=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[o.r(u)]}click(){var e;this.disabled||(e=this.inputElement)==null||e.click()}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return o.x`
18
+ "use strict";
19
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
20
+ const icons = require("@luzmo/icons");
21
+ const lit = require("lit");
22
+ const decorators_js = require("lit/decorators.js");
23
+ const base = require("../base-COw9n7UR.cjs");
24
+ const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
25
+ const checkboxMixin = require("../checkbox-mixin-CE7dJj3J.cjs");
26
+ const styles = ':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';
27
+ var __defProp = Object.defineProperty;
28
+ var __decorateClass = (decorators, target, key, kind) => {
29
+ var result = void 0;
30
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
31
+ if (decorator = decorators[i])
32
+ result = decorator(target, key, result) || result;
33
+ if (result) __defProp(target, key, result);
34
+ return result;
35
+ };
36
+ const checkmarkIcon = () => lit.html`<div id="checkmark">${icons.luzmoIcon(icons.luzmoCheck)}</div>`;
37
+ const dashIcon = () => lit.html`<div id="partialCheckmark">${icons.luzmoIcon(icons.luzmoDash)}</div>`;
38
+ const _LuzmoCheckbox = class _LuzmoCheckbox extends sizedMixin.SizedMixin(checkboxMixin.checkboxMixin(base.LuzmoElement), {
39
+ noDefaultSize: true
40
+ }) {
41
+ constructor() {
42
+ super(...arguments);
43
+ this.disabled = false;
44
+ this.indeterminate = false;
45
+ this.autofocus = false;
46
+ this.invalid = false;
47
+ this.emphasized = false;
48
+ this.tabIndex = 0;
49
+ }
50
+ connectedCallback() {
51
+ super.connectedCallback();
52
+ if (this.hasAttribute("autofocus")) {
53
+ this.updateComplete.then(() => {
54
+ this.focus();
55
+ });
56
+ }
57
+ }
58
+ static get styles() {
59
+ return [lit.unsafeCSS(styles)];
60
+ }
61
+ click() {
62
+ var _a;
63
+ if (this.disabled) {
64
+ return;
65
+ }
66
+ (_a = this.inputElement) == null ? void 0 : _a.click();
67
+ }
68
+ handleChange() {
69
+ this.indeterminate = false;
70
+ super.handleChange();
71
+ }
72
+ render() {
73
+ return lit.html`
19
74
  ${super.render()}
20
75
  <span id="box">
21
- ${this.checked?v():o.x``}
22
- ${this.indeterminate?m():o.x``}
76
+ ${this.checked ? checkmarkIcon() : lit.html``}
77
+ ${this.indeterminate ? dashIcon() : lit.html``}
23
78
  </span>
24
79
  <label id="label" for="input"><slot></slot></label>
25
- `}updated(e){super.updated(e),e.has("disabled")&&(e.get("disabled")!==void 0||this.disabled)&&(this.disabled?(this.inputElement.tabIndex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.inputElement.tabIndex,this.inputElement.removeAttribute("tabindex")),this.inputElement.disabled=this.disabled),e.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate),e.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid"))}};l.shadowRootOptions={...o.LuzmoElement.shadowRootOptions,delegatesFocus:!0};let c=l;t([o.n({type:Boolean,reflect:!0})],c.prototype,"disabled");t([o.n({type:Boolean,reflect:!0})],c.prototype,"indeterminate");t([o.n({type:Boolean,reflect:!0})],c.prototype,"autofocus");t([o.n({type:Boolean,reflect:!0})],c.prototype,"invalid");t([o.n({type:Boolean,reflect:!0})],c.prototype,"emphasized");t([o.n({reflect:!0,type:Number,attribute:"tabindex"})],c.prototype,"tabIndex");customElements.get("luzmo-checkbox")||customElements.define("luzmo-checkbox",c);exports.LuzmoCheckbox=c;
80
+ `;
81
+ }
82
+ updated(changes) {
83
+ super.updated(changes);
84
+ if (changes.has("disabled") && (changes.get("disabled") !== void 0 || this.disabled)) {
85
+ if (this.disabled) {
86
+ this.inputElement.tabIndex = this.tabIndex;
87
+ this.tabIndex = -1;
88
+ } else {
89
+ this.tabIndex = this.inputElement.tabIndex;
90
+ this.inputElement.removeAttribute("tabindex");
91
+ }
92
+ this.inputElement.disabled = this.disabled;
93
+ }
94
+ if (changes.has("indeterminate")) {
95
+ this.inputElement.indeterminate = this.indeterminate;
96
+ }
97
+ if (changes.has("invalid")) {
98
+ if (this.invalid) {
99
+ this.inputElement.setAttribute("aria-invalid", "true");
100
+ } else {
101
+ this.inputElement.removeAttribute("aria-invalid");
102
+ }
103
+ }
104
+ }
105
+ };
106
+ _LuzmoCheckbox.shadowRootOptions = {
107
+ ...base.LuzmoElement.shadowRootOptions,
108
+ delegatesFocus: true
109
+ };
110
+ let LuzmoCheckbox = _LuzmoCheckbox;
111
+ __decorateClass([
112
+ decorators_js.property({ type: Boolean, reflect: true })
113
+ ], LuzmoCheckbox.prototype, "disabled");
114
+ __decorateClass([
115
+ decorators_js.property({ type: Boolean, reflect: true })
116
+ ], LuzmoCheckbox.prototype, "indeterminate");
117
+ __decorateClass([
118
+ decorators_js.property({ type: Boolean, reflect: true })
119
+ ], LuzmoCheckbox.prototype, "autofocus");
120
+ __decorateClass([
121
+ decorators_js.property({ type: Boolean, reflect: true })
122
+ ], LuzmoCheckbox.prototype, "invalid");
123
+ __decorateClass([
124
+ decorators_js.property({ type: Boolean, reflect: true })
125
+ ], LuzmoCheckbox.prototype, "emphasized");
126
+ __decorateClass([
127
+ decorators_js.property({ reflect: true, type: Number, attribute: "tabindex" })
128
+ ], LuzmoCheckbox.prototype, "tabIndex");
129
+ if (!customElements.get("luzmo-checkbox")) {
130
+ customElements.define("luzmo-checkbox", LuzmoCheckbox);
131
+ }
132
+ exports.LuzmoCheckbox = LuzmoCheckbox;
package/components/checkbox/index.js CHANGED
@@ -15,82 +15,127 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- import { y as u, B as m, R as x } from "../luzmo-icons-4nDFv1Lq.js";
19
- import { a as d, r as v, x as i, n as t } from "../base-WsynuqaS.js";
20
- import { S as z } from "../sized-mixin-D4ACoVUr.js";
21
- import { c as f } from "../checkbox-mixin-Do7EgtpQ.js";
22
- const b = () => {
23
- if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
24
- const r = document.createElement("style");
25
- r.setAttribute("data-luzmo-vars", ""), r.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(r);
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);
26
24
  }
27
25
  };
28
- b();
29
- const k = ':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';
30
- var p = Object.defineProperty, l = (r, o, h, w) => {
31
- for (var c = void 0, a = r.length - 1, s; a >= 0; a--)
32
- (s = r[a]) && (c = s(o, h, c) || c);
33
- return c && p(o, h, c), c;
26
+ initializeGlobalLuzmoCSSVariables();
27
+ import { luzmoIcon, luzmoCheck, luzmoDash } from "@luzmo/icons";
28
+ import { unsafeCSS, html } from "lit";
29
+ import { property } from "lit/decorators.js";
30
+ import { a as LuzmoElement } from "../base-DmeVy0cq.js";
31
+ import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
32
+ import { c as checkboxMixin } from "../checkbox-mixin-8cL-vfDy.js";
33
+ const styles = ':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';
34
+ var __defProp = Object.defineProperty;
35
+ var __decorateClass = (decorators, target, key, kind) => {
36
+ var result = void 0;
37
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
38
+ if (decorator = decorators[i])
39
+ result = decorator(target, key, result) || result;
40
+ if (result) __defProp(target, key, result);
41
+ return result;
34
42
  };
35
- const g = () => i`<div id="checkmark">${u(m)}</div>`, y = () => i`<div id="partialCheckmark">${u(x)}</div>`, n = class n extends z(f(d), {
36
- noDefaultSize: !0
43
+ const checkmarkIcon = () => html`<div id="checkmark">${luzmoIcon(luzmoCheck)}</div>`;
44
+ const dashIcon = () => html`<div id="partialCheckmark">${luzmoIcon(luzmoDash)}</div>`;
45
+ const _LuzmoCheckbox = class _LuzmoCheckbox extends SizedMixin(checkboxMixin(LuzmoElement), {
46
+ noDefaultSize: true
37
47
  }) {
38
48
  constructor() {
39
- super(...arguments), this.disabled = !1, this.indeterminate = !1, this.autofocus = !1, this.invalid = !1, this.emphasized = !1, this.tabIndex = 0;
49
+ super(...arguments);
50
+ this.disabled = false;
51
+ this.indeterminate = false;
52
+ this.autofocus = false;
53
+ this.invalid = false;
54
+ this.emphasized = false;
55
+ this.tabIndex = 0;
40
56
  }
41
57
  connectedCallback() {
42
- super.connectedCallback(), this.hasAttribute("autofocus") && this.updateComplete.then(() => {
43
- this.focus();
44
- });
58
+ super.connectedCallback();
59
+ if (this.hasAttribute("autofocus")) {
60
+ this.updateComplete.then(() => {
61
+ this.focus();
62
+ });
63
+ }
45
64
  }
46
65
  static get styles() {
47
- return [v(k)];
66
+ return [unsafeCSS(styles)];
48
67
  }
49
68
  click() {
50
- var o;
51
- this.disabled || (o = this.inputElement) == null || o.click();
69
+ var _a;
70
+ if (this.disabled) {
71
+ return;
72
+ }
73
+ (_a = this.inputElement) == null ? void 0 : _a.click();
52
74
  }
53
75
  handleChange() {
54
- this.indeterminate = !1, super.handleChange();
76
+ this.indeterminate = false;
77
+ super.handleChange();
55
78
  }
56
79
  render() {
57
- return i`
80
+ return html`
58
81
  ${super.render()}
59
82
  <span id="box">
60
- ${this.checked ? g() : i``}
61
- ${this.indeterminate ? y() : i``}
83
+ ${this.checked ? checkmarkIcon() : html``}
84
+ ${this.indeterminate ? dashIcon() : html``}
62
85
  </span>
63
86
  <label id="label" for="input"><slot></slot></label>
64
87
  `;
65
88
  }
66
- updated(o) {
67
- super.updated(o), o.has("disabled") && (o.get("disabled") !== void 0 || this.disabled) && (this.disabled ? (this.inputElement.tabIndex = this.tabIndex, this.tabIndex = -1) : (this.tabIndex = this.inputElement.tabIndex, this.inputElement.removeAttribute("tabindex")), this.inputElement.disabled = this.disabled), o.has("indeterminate") && (this.inputElement.indeterminate = this.indeterminate), o.has("invalid") && (this.invalid ? this.inputElement.setAttribute("aria-invalid", "true") : this.inputElement.removeAttribute("aria-invalid"));
89
+ updated(changes) {
90
+ super.updated(changes);
91
+ if (changes.has("disabled") && (changes.get("disabled") !== void 0 || this.disabled)) {
92
+ if (this.disabled) {
93
+ this.inputElement.tabIndex = this.tabIndex;
94
+ this.tabIndex = -1;
95
+ } else {
96
+ this.tabIndex = this.inputElement.tabIndex;
97
+ this.inputElement.removeAttribute("tabindex");
98
+ }
99
+ this.inputElement.disabled = this.disabled;
100
+ }
101
+ if (changes.has("indeterminate")) {
102
+ this.inputElement.indeterminate = this.indeterminate;
103
+ }
104
+ if (changes.has("invalid")) {
105
+ if (this.invalid) {
106
+ this.inputElement.setAttribute("aria-invalid", "true");
107
+ } else {
108
+ this.inputElement.removeAttribute("aria-invalid");
109
+ }
110
+ }
68
111
  }
69
112
  };
70
- n.shadowRootOptions = {
71
- ...d.shadowRootOptions,
72
- delegatesFocus: !0
113
+ _LuzmoCheckbox.shadowRootOptions = {
114
+ ...LuzmoElement.shadowRootOptions,
115
+ delegatesFocus: true
73
116
  };
74
- let e = n;
75
- l([
76
- t({ type: Boolean, reflect: !0 })
77
- ], e.prototype, "disabled");
78
- l([
79
- t({ type: Boolean, reflect: !0 })
80
- ], e.prototype, "indeterminate");
81
- l([
82
- t({ type: Boolean, reflect: !0 })
83
- ], e.prototype, "autofocus");
84
- l([
85
- t({ type: Boolean, reflect: !0 })
86
- ], e.prototype, "invalid");
87
- l([
88
- t({ type: Boolean, reflect: !0 })
89
- ], e.prototype, "emphasized");
90
- l([
91
- t({ reflect: !0, type: Number, attribute: "tabindex" })
92
- ], e.prototype, "tabIndex");
93
- customElements.get("luzmo-checkbox") || customElements.define("luzmo-checkbox", e);
117
+ let LuzmoCheckbox = _LuzmoCheckbox;
118
+ __decorateClass([
119
+ property({ type: Boolean, reflect: true })
120
+ ], LuzmoCheckbox.prototype, "disabled");
121
+ __decorateClass([
122
+ property({ type: Boolean, reflect: true })
123
+ ], LuzmoCheckbox.prototype, "indeterminate");
124
+ __decorateClass([
125
+ property({ type: Boolean, reflect: true })
126
+ ], LuzmoCheckbox.prototype, "autofocus");
127
+ __decorateClass([
128
+ property({ type: Boolean, reflect: true })
129
+ ], LuzmoCheckbox.prototype, "invalid");
130
+ __decorateClass([
131
+ property({ type: Boolean, reflect: true })
132
+ ], LuzmoCheckbox.prototype, "emphasized");
133
+ __decorateClass([
134
+ property({ reflect: true, type: Number, attribute: "tabindex" })
135
+ ], LuzmoCheckbox.prototype, "tabIndex");
136
+ if (!customElements.get("luzmo-checkbox")) {
137
+ customElements.define("luzmo-checkbox", LuzmoCheckbox);
138
+ }
94
139
  export {
95
- e as LuzmoCheckbox
140
+ LuzmoCheckbox
96
141
  };
package/components/checkbox-mixin-8cL-vfDy.js ADDED
@@ -0,0 +1,84 @@
1
+ /*! * Lucero - The design system for Luzmo.
2
+ *
3
+ * Copyright © 2025 Luzmo
4
+ * All rights reserved.
5
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
+ * This license allows users with a current active Luzmo account to use Lucero.
7
+ * This license terminates automatically if a user no longer has an active Luzmo account.
8
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
+ *
10
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
+ * SOFTWARE.
17
+ * */
18
+ import { html } from "lit";
19
+ import { property, query } from "lit/decorators.js";
20
+ import { ifDefined } from "lit/directives/if-defined.js";
21
+ var __defProp = Object.defineProperty;
22
+ var __decorateClass = (decorators, target, key, kind) => {
23
+ var result = void 0;
24
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
25
+ if (decorator = decorators[i])
26
+ result = decorator(target, key, result) || result;
27
+ if (result) __defProp(target, key, result);
28
+ return result;
29
+ };
30
+ function checkboxMixin(constructor) {
31
+ class MixedElement extends constructor {
32
+ constructor() {
33
+ super(...arguments);
34
+ this.checked = false;
35
+ this.readonly = false;
36
+ }
37
+ handleChange() {
38
+ if (this.readonly) {
39
+ this.inputElement.checked = this.checked;
40
+ return;
41
+ }
42
+ this.checked = this.inputElement.checked;
43
+ const changeEvent = new CustomEvent("change", {
44
+ bubbles: true,
45
+ cancelable: true,
46
+ composed: true,
47
+ detail: this.checked
48
+ });
49
+ const applyDefault = this.dispatchEvent(changeEvent);
50
+ if (!applyDefault) {
51
+ this.checked = !this.inputElement.checked;
52
+ this.inputElement.checked = this.checked;
53
+ }
54
+ }
55
+ render() {
56
+ return html`
57
+ <input
58
+ id="input"
59
+ name=${ifDefined(this.name || void 0)}
60
+ type="checkbox"
61
+ .checked=${this.checked}
62
+ ?disabled=${this.readonly}
63
+ @change=${this.handleChange}
64
+ />
65
+ `;
66
+ }
67
+ }
68
+ __decorateClass([
69
+ property({ type: Boolean, reflect: true })
70
+ ], MixedElement.prototype, "checked");
71
+ __decorateClass([
72
+ property({ type: String, reflect: true })
73
+ ], MixedElement.prototype, "name");
74
+ __decorateClass([
75
+ property({ type: Boolean, reflect: true })
76
+ ], MixedElement.prototype, "readonly");
77
+ __decorateClass([
78
+ query("#input")
79
+ ], MixedElement.prototype, "inputElement");
80
+ return MixedElement;
81
+ }
82
+ export {
83
+ checkboxMixin as c
84
+ };
package/components/checkbox-mixin-CE7dJj3J.cjs ADDED
@@ -0,0 +1,83 @@
1
+ /*! * Lucero - The design system for Luzmo.
2
+ *
3
+ * Copyright © 2025 Luzmo
4
+ * All rights reserved.
5
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
+ * This license allows users with a current active Luzmo account to use Lucero.
7
+ * This license terminates automatically if a user no longer has an active Luzmo account.
8
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
+ *
10
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
+ * SOFTWARE.
17
+ * */
18
+ "use strict";
19
+ const lit = require("lit");
20
+ const decorators_js = require("lit/decorators.js");
21
+ const ifDefined_js = require("lit/directives/if-defined.js");
22
+ var __defProp = Object.defineProperty;
23
+ var __decorateClass = (decorators, target, key, kind) => {
24
+ var result = void 0;
25
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
26
+ if (decorator = decorators[i])
27
+ result = decorator(target, key, result) || result;
28
+ if (result) __defProp(target, key, result);
29
+ return result;
30
+ };
31
+ function checkboxMixin(constructor) {
32
+ class MixedElement extends constructor {
33
+ constructor() {
34
+ super(...arguments);
35
+ this.checked = false;
36
+ this.readonly = false;
37
+ }
38
+ handleChange() {
39
+ if (this.readonly) {
40
+ this.inputElement.checked = this.checked;
41
+ return;
42
+ }
43
+ this.checked = this.inputElement.checked;
44
+ const changeEvent = new CustomEvent("change", {
45
+ bubbles: true,
46
+ cancelable: true,
47
+ composed: true,
48
+ detail: this.checked
49
+ });
50
+ const applyDefault = this.dispatchEvent(changeEvent);
51
+ if (!applyDefault) {
52
+ this.checked = !this.inputElement.checked;
53
+ this.inputElement.checked = this.checked;
54
+ }
55
+ }
56
+ render() {
57
+ return lit.html`
58
+ <input
59
+ id="input"
60
+ name=${ifDefined_js.ifDefined(this.name || void 0)}
61
+ type="checkbox"
62
+ .checked=${this.checked}
63
+ ?disabled=${this.readonly}
64
+ @change=${this.handleChange}
65
+ />
66
+ `;
67
+ }
68
+ }
69
+ __decorateClass([
70
+ decorators_js.property({ type: Boolean, reflect: true })
71
+ ], MixedElement.prototype, "checked");
72
+ __decorateClass([
73
+ decorators_js.property({ type: String, reflect: true })
74
+ ], MixedElement.prototype, "name");
75
+ __decorateClass([
76
+ decorators_js.property({ type: Boolean, reflect: true })
77
+ ], MixedElement.prototype, "readonly");
78
+ __decorateClass([
79
+ decorators_js.query("#input")
80
+ ], MixedElement.prototype, "inputElement");
81
+ return MixedElement;
82
+ }
83
+ exports.checkboxMixin = checkboxMixin;