@luzmo/lucero 0.0.12 → 0.0.13

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 (166) hide show
  1. package/components/accordion/index.cjs +6 -6
  2. package/components/accordion/index.js +5 -5
  3. package/components/action-bar/index.cjs +4 -4
  4. package/components/action-bar/index.js +8 -9
  5. package/components/action-button/index.cjs +2 -2
  6. package/components/action-button/index.js +3 -4
  7. package/components/action-group/index.cjs +1 -1
  8. package/components/action-group/index.js +1 -1
  9. package/components/action-group-Uimj-MJP.cjs +20 -0
  10. package/components/{action-group-DzT5e9uS.js → action-group-enfc-YnW.js} +3 -3
  11. package/components/action-menu/index.cjs +7 -7
  12. package/components/action-menu/index.js +8 -8
  13. package/components/async-directive-DWRUSKKF.js +82 -0
  14. package/components/async-directive-D_Ter1F8.cjs +22 -0
  15. package/components/avatar/index.cjs +3 -3
  16. package/components/avatar/index.js +6 -6
  17. package/components/base-B7Pfl2if.cjs +40 -0
  18. package/components/{sized-mixin-DcvJLFeo.cjs → base-BjTwmyRF.cjs} +5 -1
  19. package/components/{base-CCsOyfm4.js → base-CawdqE7p.js} +132 -98
  20. package/components/base-D76d76ww.js +26 -0
  21. package/components/button/index.cjs +2 -2
  22. package/components/button/index.js +6 -7
  23. package/components/{button-base-BUylwU1F.js → button-base-B7v4eeRh.js} +5 -5
  24. package/components/{button-base-D62oiPcu.cjs → button-base-DmjYs2s9.cjs} +3 -3
  25. package/components/button-group/index.cjs +1 -1
  26. package/components/button-group/index.js +5 -6
  27. package/components/checkbox/index.cjs +4 -4
  28. package/components/checkbox/index.js +3 -4
  29. package/components/{checkbox-mixin-CM4VUJxF.js → checkbox-mixin-BFGTmw17.js} +9 -9
  30. package/components/{checkbox-mixin-CifGmiLR.cjs → checkbox-mixin-DUhXwD46.cjs} +3 -3
  31. package/components/{clear-button-BmUyRVoz.js → clear-button-DgZmX5RX.js} +6 -7
  32. package/components/clear-button-KdrF2jaV.cjs +18 -0
  33. package/components/{close-button-BekXo6bQ.js → close-button-CFHQnbsK.js} +9 -10
  34. package/components/close-button-DVGUppyd.cjs +18 -0
  35. package/components/color-area/index.cjs +5 -5
  36. package/components/color-area/index.js +4 -4
  37. package/components/color-field/index.cjs +2 -2
  38. package/components/color-field/index.js +2 -3
  39. package/components/color-handle/index.cjs +2 -2
  40. package/components/color-handle/index.js +2 -3
  41. package/components/color-loupe/index.cjs +1 -1
  42. package/components/color-loupe/index.js +1 -1
  43. package/components/{color-loupe-DiegGLZu.js → color-loupe-DxcqXoJ6.js} +1 -2
  44. package/components/color-loupe-SskbNeMp.cjs +56 -0
  45. package/components/color-menu/index.cjs +5 -5
  46. package/components/color-menu/index.js +4 -3
  47. package/components/color-picker/index.cjs +4 -4
  48. package/components/color-picker/index.js +9 -8
  49. package/components/color-slider/index.cjs +6 -6
  50. package/components/color-slider/index.js +6 -6
  51. package/components/directive-C7oCP5Bh.cjs +22 -0
  52. package/components/directive-helpers-TkFq2eZF.cjs +22 -0
  53. package/components/directive-helpers-nlQRAaQt.js +28 -0
  54. package/components/directive-oAbCiebi.js +44 -0
  55. package/components/divider/index.cjs +1 -1
  56. package/components/divider/index.js +2 -3
  57. package/components/field-group/index.cjs +1 -1
  58. package/components/field-group/index.js +1 -1
  59. package/components/{field-group-BPZvGJi1.js → field-group-DAhrTCfl.js} +2 -3
  60. package/components/field-group-DSY2HUoj.cjs +23 -0
  61. package/components/field-label/index.cjs +1 -1
  62. package/components/field-label/index.js +1 -1
  63. package/components/{field-label-6AaW05kA.js → field-label-CAFfGxEL.js} +3 -3
  64. package/components/field-label-CjsQ3ujK.cjs +25 -0
  65. package/components/focusable-DGWL1v1p.cjs +18 -0
  66. package/components/{focusable-CxA_NMK_.js → focusable-cj2QhwDT.js} +1 -2
  67. package/components/icon/index.cjs +1 -1
  68. package/components/icon/index.js +4 -5
  69. package/components/if-defined-B56xGmAg.cjs +22 -0
  70. package/components/if-defined-BSAr_4u4.js +27 -0
  71. package/components/{index-QeYYAZQR.js → index-CMvLpPKD.js} +17 -15
  72. package/components/index-DnWavOZD.cjs +77 -0
  73. package/components/index.cjs +1 -1
  74. package/components/index.js +16 -16
  75. package/components/infield-button/index.cjs +2 -2
  76. package/components/infield-button/index.js +3 -4
  77. package/components/label/index.cjs +1 -1
  78. package/components/label/index.js +1 -2
  79. package/components/like-anchor-Bmabl9ra.cjs +32 -0
  80. package/components/{like-anchor-D7tY6am5.js → like-anchor-QBlvwFfT.js} +23 -24
  81. package/components/{manage-help-text-CmE_nfjl.js → manage-help-text-Cozl9Sgn.js} +4 -4
  82. package/components/{manage-help-text-CoX77cTJ.cjs → manage-help-text-OHXDgxyj.cjs} +2 -2
  83. package/components/menu/index.cjs +1 -1
  84. package/components/menu/index.js +1 -1
  85. package/components/multi-language-field/index.cjs +2 -2
  86. package/components/multi-language-field/index.js +3 -4
  87. package/components/number-field/index.cjs +3 -3
  88. package/components/number-field/index.js +4 -4
  89. package/components/observe-slot-text-CrYB2Pj-.cjs +18 -0
  90. package/components/{observe-slot-text-CugmOzNZ.js → observe-slot-text-ggb4kKgY.js} +21 -20
  91. package/components/overlay/index.cjs +7 -7
  92. package/components/overlay/index.js +48 -46
  93. package/components/{overlay-CtdbWiFs.js → overlay-CJ9by37f.js} +71 -69
  94. package/components/overlay-Deh6Ki6I.cjs +47 -0
  95. package/components/{pending-state-DWvTsSoS.cjs → pending-state-Do522lTd.cjs} +1 -1
  96. package/components/{pending-state-B_JeaE62.js → pending-state-TJj1x9xn.js} +2 -2
  97. package/components/picker/index.cjs +1 -1
  98. package/components/picker/index.js +2 -2
  99. package/components/{picker-DwbcFve2.js → picker-833Apxe4.js} +134 -105
  100. package/components/picker-DDx8ii73.cjs +127 -0
  101. package/components/popover/index.cjs +1 -1
  102. package/components/popover/index.js +1 -1
  103. package/components/popover-BGOgXaka.cjs +30 -0
  104. package/components/{popover-DLFHilGS.js → popover-DlkzrLpl.js} +3 -3
  105. package/components/progress-circle/index.cjs +1 -1
  106. package/components/progress-circle/index.js +1 -1
  107. package/components/{progress-circle-CUCJ_Ehs.js → progress-circle-Be24kv6B.js} +4 -4
  108. package/components/{progress-circle-BXyXtMcs.cjs → progress-circle-NNbCMK2i.cjs} +6 -6
  109. package/components/query-BL-TJj7K.cjs +22 -0
  110. package/components/query-D_KR_GUc.js +51 -0
  111. package/components/query-assigned-elements-DjfhL1cl.js +36 -0
  112. package/components/query-assigned-elements-DsKsfk7G.cjs +22 -0
  113. package/components/query-assigned-nodes-BcKWmGzy.cjs +22 -0
  114. package/components/query-assigned-nodes-C76XVPWY.js +36 -0
  115. package/components/radio/index.cjs +2 -2
  116. package/components/radio/index.js +6 -6
  117. package/components/search/index.cjs +7 -7
  118. package/components/search/index.js +4 -4
  119. package/components/{sized-mixin-cJbo3PKR.js → sized-mixin-BxMraZLS.js} +5 -5
  120. package/components/sized-mixin-D9LkrMjb.cjs +18 -0
  121. package/components/slider/index.cjs +1 -1
  122. package/components/slider/index.js +2 -3
  123. package/components/state-C5I1gP3G.cjs +22 -0
  124. package/components/state-CYxk12SV.js +29 -0
  125. package/components/{streaming-listener-BgCzt2TI.js → streaming-listener-CCalHg57.js} +6 -5
  126. package/components/streaming-listener-KVex1WWB.cjs +18 -0
  127. package/components/style-map-Ct2LiEds.js +53 -0
  128. package/components/style-map-uMq-yDJ3.cjs +22 -0
  129. package/components/swatch/index.cjs +7 -7
  130. package/components/swatch/index.js +11 -11
  131. package/components/switch/index.cjs +2 -2
  132. package/components/switch/index.js +4 -5
  133. package/components/tags/index.cjs +4 -4
  134. package/components/tags/index.js +4 -4
  135. package/components/text-field/index.cjs +3 -3
  136. package/components/text-field/index.js +3 -4
  137. package/components/text-field-5_ev9way.cjs +85 -0
  138. package/components/text-field-CvKSS59x.js +313 -0
  139. package/components/toast/index.cjs +11 -11
  140. package/components/toast/index.js +2 -3
  141. package/components/tooltip/index.cjs +4 -4
  142. package/components/tooltip/index.js +4 -4
  143. package/components/unit-input/index.cjs +6 -6
  144. package/components/unit-input/index.js +3 -3
  145. package/components/utils.cjs +1 -1
  146. package/components/utils.js +4 -4
  147. package/components/when-CDK1Tt5Y.js +28 -0
  148. package/components/when-CDZyJPvd.cjs +22 -0
  149. package/package.json +1 -1
  150. package/components/action-group-B59CWNnT.cjs +0 -20
  151. package/components/base-CaRKlVkL.cjs +0 -36
  152. package/components/clear-button-Cc5-XUOJ.cjs +0 -18
  153. package/components/close-button-Bf8yzpLd.cjs +0 -18
  154. package/components/color-loupe-CLzp2MiI.cjs +0 -56
  155. package/components/field-group-CodR_26L.cjs +0 -23
  156. package/components/field-label-B91K6moC.cjs +0 -25
  157. package/components/focusable-BFdecx5l.cjs +0 -18
  158. package/components/index-Cg_y7WKM.cjs +0 -77
  159. package/components/like-anchor-b3cNzw52.cjs +0 -32
  160. package/components/observe-slot-text-ByPG1Lqw.cjs +0 -18
  161. package/components/overlay-BWBJGJN_.cjs +0 -47
  162. package/components/picker-CaC1rQOK.cjs +0 -123
  163. package/components/popover-C4w3aY8m.cjs +0 -30
  164. package/components/streaming-listener-C2bsIc4J.cjs +0 -18
  165. package/components/text-field-BX_aHXSW.js +0 -288
  166. package/components/text-field-DAr2RyH9.cjs +0 -81
@@ -1,123 +0,0 @@
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";const c=require("./base-CaRKlVkL.cjs"),i=require("lit/decorators.js"),f=require("lit/directives/class-map.js"),d=require("lit/directives/if-defined.js"),z=require("lit/directives/style-map.js"),y=require("./focusable-BFdecx5l.cjs"),w=require("./dependency-manger-C5HCkMMB.cjs"),x=require("./pending-state-DWvTsSoS.cjs"),C=require("./sized-mixin-DcvJLFeo.cjs"),u=require("@luzmo/icons");require("./index-Cg_y7WKM.cjs");require("./overlay/index.cjs");require("./progress-circle/index.cjs");require("./tooltip/index.cjs");const k=require("./platform-BiXhwqk3.cjs"),I="(max-width: 743px) and (hover: none) and (pointer: coarse)";class q{constructor(e,o){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(o),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}}const S='#button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--luzmo-button-font-family, var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height, 1.3));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}@media (forced-colors: active){:host{--highcontrast-picker-focus-indicator-color: Highlight;--highcontrast-picker-border-color-default: ButtonBorder;--highcontrast-picker-border-color-hover: Highlight;--highcontrast-picker-border-color-disabled: GrayText;--highcontrast-picker-content-color-default: ButtonText;--highcontrast-picker-content-color-disabled: GrayText;--highcontrast-picker-background-color: ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover: ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--picker-minimum-width-multiplier) * var(--luzmo-picker-block-size, var(--picker-block-size)));block-size:var(--luzmo-picker-block-size, var(--picker-block-size));border-width:var(--luzmo-picker-border-width, var(--picker-border-width));border-radius:var(--luzmo-picker-border-radius, var(--picker-border-radius));box-shadow:var(--luzmo-picker-box-shadow, var(--picker-box-shadow));transition:background-color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)),box-shadow var(--luzmo-picker-animation-duration, var(--picker-animation-duration)),border-color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)) ease-in-out;color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-default, var(--picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-default, var(--picker-border-color-default)));margin-block-start:var(--luzmo-picker-spacing-label-to-picker, var(--picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--luzmo-picker-spacing-edge-to-text, var(--picker-spacing-edge-to-text));padding-inline-end:var(--luzmo-picker-spacing-edge-to-disclosure-icon, var(--picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) * 2 + var(--luzmo-picker-border-width, var(--picker-border-width)) * 2);inline-size:calc(100% + var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) * 2 + var(--luzmo-picker-border-width, var(--picker-border-width)) * 2);border-style:solid;border-width:var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness));border-radius:calc(var(--luzmo-picker-border-radius, var(--picker-border-radius)) + var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-border-width, var(--picker-border-width)));border-color:#0000;margin-block-start:calc((var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness)) + var(--luzmo-picker-border-width, var(--picker-border-width))) * -1);margin-inline-start:calc((var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness)) + var(--luzmo-picker-border-width, var(--picker-border-width))) * -1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-active, var(--picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-active, var(--picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-active, var(--picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-key-focus, var(--picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-key-focus, var(--picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-key-focus, var(--picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color, var(--luzmo-picker-focus-indicator-color, var(--picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-key-focus, var(--picker-font-color-key-focus)))}#button.is-keyboardFocused .disclosure-icon,#button:focus-visible .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-key-focus, var(--picker-icon-color-key-focus)))}:host([open]) #button:not(:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default-open, var(--picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-default-open, var(--picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-default-open, var(--picker-border-color-default-open)))}:host([open]) #button:not(:disabled,.is-disabled) .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-default-open, var(--picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-default, var(--picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-error, var(--picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-active, var(--picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-default-open, var(--picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-error-key-focus, var(--picker-border-color-error-key-focus)))}:host([pending]) #button .disclosure-icon{color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-icon-color-disabled, var(--picker-icon-color-disabled)))}.icon{flex-shrink:0}.label{white-space:nowrap;font-size:var(--luzmo-picker-font-size, var(--picker-font-size));line-height:var(--luzmo-picker-line-height, var(--picker-line-height));font-weight:var(--luzmo-picker-font-weight, var(--picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;overflow:hidden}.label.placeholder{font-weight:var(--luzmo-picker-placeholder-font-weight, var(--picker-font-weight));font-style:var(--luzmo-picker-placeholder-font-style, var(--picker-placeholder-font-style));transition:color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)) ease-in-out;color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-active, var(--picker-font-color-active)))}.disclosure-icon{vertical-align:top;transition:color var(--luzmo-picker-animation-duration, var(--picker-animation-duration)) ease-out;margin-inline-start:var(--luzmo-picker-spacing-icon-to-disclosure-icon, var(--picker-spacing-icon-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-default, var(--picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.disclosure-icon:active{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-active, var(--picker-icon-color-active)))}luzmo-progress-circle,.validation-icon{margin-inline-start:var(--luzmo-picker-spacing-text-to-icon, var(--picker-spacing-text-to-icon))}.icon-container{display:flex;position:relative;height:100%;align-items:center;font-size:var(--luzmo-picker-disclosure-icon-size, var(--picker-disclosure-icon-size))}.icon-container.disclosure-icon{margin-inline-end:0}.label~.disclosure-icon{margin-inline-start:var(--luzmo-picker-spacing-text-to-icon, var(--picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--luzmo-picker-spacing-edge-to-text-quiet, var(--picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent);border:none;border-radius:0;box-shadow:none;margin-block-start:calc(var(--luzmo-picker-spacing-label-to-picker-quiet, var(--picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .disclosure-icon{margin-inline-end:var(--luzmo-picker-spacing-edge-to-disclosure-icon-quiet, var(--picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover: hover){#button:hover{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-hover, var(--picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-hover, var(--picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-hover, var(--picker-border-color-hover)))}#button:hover .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-hover, var(--picker-icon-color-hover)))}:host([open]):not([quiet]) #button:not(:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-hover-open, var(--picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-hover-open, var(--picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-hover-open, var(--picker-border-color-hover-open)))}:host([open]) #button:not(:disabled,.is-disabled):hover .disclosure-icon{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-icon-color-hover-open, var(--picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-error-hover, var(--picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover, var(--luzmo-picker-border-color-error-hover-open, var(--picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-hover, var(--picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent)!important}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--luzmo-picker-focus-indicator-thickness, var(--picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--luzmo-picker-focus-indicator-color, var(--picker-focus-indicator-color)));margin:calc((var(--luzmo-picker-focus-indicator-gap, var(--picker-focus-indicator-gap)) + var(--luzmo-picker-border-width, var(--picker-border-width))) * -1) 0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color, transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-disabled, var(--picker-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-picker-border-color-disabled, transparent);color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-font-color-disabled, var(--picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .disclosure-icon,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .disclosure-icon,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-icon-color-disabled, var(--picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled, var(--luzmo-picker-font-color-disabled, var(--picker-font-color-disabled)))}:host{--picker-box-shadow: 0px 1px 3px 0px rgba(var(--luzmo-border-color-rgb), .06);--picker-background-color-default: var(--luzmo-background-color);--picker-background-color-default-open: var(--luzmo-background-color-hover);--picker-background-color-active: var(--luzmo-background-color-down);--picker-background-color-hover: var(--luzmo-background-color-hover);--picker-background-color-hover-open: var(--luzmo-background-color-down);--picker-background-color-key-focus: var(--luzmo-background-color-down);--picker-border-color-default: var(--luzmo-border-color);--picker-border-color-default-open: var(--luzmo-border-color-hover);--picker-border-color-hover: var(--luzmo-border-color);--picker-border-color-hover-open: var(--luzmo-border-color-hover);--picker-border-color-active: var(--luzmo-border-color);--picker-border-color-key-focus: var(--luzmo-border-color);--picker-border-width: var(--luzmo-border-width);--picker-font-size: var(--luzmo-font-size);--picker-font-weight: var(--luzmo-font-weight);--picker-placeholder-font-style: var(--luzmo-font-style);--picker-line-height: var(--luzmo-line-height);--picker-block-size: 32px;--picker-border-radius: var(--luzmo-border-radius);--picker-spacing-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-text-quiet: 0px;--picker-spacing-label-to-picker: 0px;--picker-spacing-label-to-picker-quiet: calc( -1 * var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-disclosure-icon-quiet: 0px;--picker-animation-duration: var(--luzmo-animation-duration);--picker-font-color-default: var(--luzmo-font-color);--picker-font-color-default-open: var(--luzmo-font-color-hover);--picker-font-color-hover: var(--luzmo-font-color-hover);--picker-font-color-hover-open: var(--luzmo-font-color-down);--picker-font-color-active: var(--luzmo-font-color-focus);--picker-font-color-key-focus: var(--luzmo-font-color-focus);--picker-icon-color-default: var(--luzmo-font-color);--picker-icon-color-default-open: var(--luzmo-font-color-hover);--picker-icon-color-hover: var(--luzmo-font-color-hover);--picker-icon-color-hover-open: var(--luzmo-font-color-hover);--picker-icon-color-active: var(--luzmo-font-color-focus);--picker-icon-color-key-focus: var(--luzmo-font-color-focus);--picker-border-color-error-default: var(--luzmo-color-negative);--picker-border-color-error-default-open: var(--luzmo-color-negative-down);--picker-border-color-error-hover: var(--luzmo-color-negative-hover);--picker-border-color-error-hover-open: var(--luzmo-color-negative-down);--picker-border-color-error-active: var(--luzmo-color-negative-down);--picker-border-color-error-key-focus: var(--luzmo-color-negative-focus);--picker-icon-color-error: var(--luzmo-color-negative);--picker-background-color-disabled: var(--luzmo-background-color-disabled);--picker-font-color-disabled: var(--luzmo-color-disabled);--picker-icon-color-disabled: var(--luzmo-color-disabled);--picker-focus-indicator-gap: var(--luzmo-indicator-gap);--picker-focus-indicator-thickness: var(--luzmo-indicator-width);--picker-focus-indicator-color: var(--luzmo-indicator-color);--picker-disclosure-icon-size: var(--luzmo-font-size-s)}:host([size=s]){--picker-block-size: 28px;--picker-font-size: var(--luzmo-font-size-s);--picker-border-radius: var(--luzmo-border-radius);--picker-spacing-edge-to-text: var(--luzmo-spacing-3);--picker-spacing-text-to-icon: var(--luzmo-spacing-3);--picker-spacing-text-to-icon-inline-end: var(--luzmo-spacing-3);--picker-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-3);--picker-spacing-label-to-picker-quiet: calc(-1 * var(--luzmo-spacing-3));--picker-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-3);--picker-disclosure-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--picker-block-size: 40px;--picker-font-size: var(--luzmo-font-size-l);--picker-border-radius: var(--luzmo-border-radius);--picker-spacing-edge-to-text: var(--luzmo-spacing-4);--picker-spacing-text-to-icon: var(--luzmo-spacing-4);--picker-spacing-text-to-icon-inline-end: var(--luzmo-spacing-4);--picker-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-4);--picker-spacing-label-to-picker-quiet: calc(-1 * var(--luzmo-spacing-4));--picker-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-4);--picker-disclosure-icon-size: var(--luzmo-font-size)}:host([size=xl]){--picker-block-size: 48px;--picker-font-size: var(--luzmo-font-size-xl);--picker-border-radius: var(--luzmo-border-radius-l);--picker-spacing-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-label-to-picker-quiet: calc( -1 * var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--picker-disclosure-icon-size: var(--luzmo-font-size-l)}:host([variant=highlight]) ::slotted(luzmo-menu-item[selected]){--menu-item-highlight-label-content-color: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));background-color:var(--luzmo-menu-item-highlight-label-background-color, var(--menu-item-highlight-label-background-color, var(--luzmo-border-color)))}:host{display:inline-flex;vertical-align:top;max-inline-size:100%;inline-size:var(--luzmo-picker-inline-size, var(--picker-inline-size));min-inline-size:calc(var(--picker-minimum-width-multiplier) * var(--luzmo-picker-block-size, var(--picker-block-size)))}:host([quiet]){width:auto;min-width:0}:host([disabled]){pointer-events:none}#button{width:100%;min-width:100%;max-width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.picker,.validation-icon{flex-shrink:0}luzmo-overlay{pointer-events:none}luzmo-menu{pointer-events:initial}:host>luzmo-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--picker-placeholder-text-color-key-focus, var(--alias-placeholder-text-color-hover))}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet],[pending])) #button .picker{color:var(--picker-icon-color-key-focus, var(--alias-icon-color-focus))}.visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}luzmo-overlay:not(:defined){display:none}#button.remove-focus-ring-safari-hack:focus-visible{background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-default, var(--picker-background-color-default)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-default, var(--picker-border-color-default)));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)))}#button.remove-focus-ring-safari-hack:after{border:none}#button.remove-focus-ring-safari-hack:focus-visible:after{box-shadow:none}#button.remove-focus-ring-safari-hack:active{background-color:var(--highcontrast-picker-background-color, var(--luzmo-picker-background-color-default, var(--picker-background-color-default)));border-color:var(--highcontrast-picker-border-color-default, var(--luzmo-picker-border-color-default, var(--picker-border-color-default)));color:var(--highcontrast-picker-content-color-default, var(--luzmo-picker-font-color-default, var(--picker-font-color-default)))}';var b=(s=>(s[s.desktop=0]="desktop",s[s.mobile=1]="mobile",s))(b||{});class m{constructor(e,o){this.target=e,this.host=o,this.preventNextToggle="no",this.pointerdownState=!1,this.enterKeydownOn=null,this._open=!1,this.target=e,this.host=o,this.host.addController(this),this.init()}get activelyOpening(){return!1}get open(){return this._open}set open(e){if(this._open!==e){if(this._open=e,this.overlay){this.host.open=e;return}customElements.whenDefined("luzmo-overlay").then(async()=>{const{LuzmoOverlay:o}=await Promise.resolve().then(()=>require("./overlay/index.cjs"));this.overlay=new o,this.host.open=!0,this.host.requestUpdate()}),Promise.resolve().then(()=>require("./overlay/index.cjs"))}}get overlay(){return this._overlay}set overlay(e){e&&this.overlay!==e&&(this._overlay=e,this.initOverlay())}releaseDescription(){}handleBeforetoggle(e){var o;e.composedPath()[0]===e.target&&(e.newState==="closed"&&(this.preventNextToggle==="no"?this.open=!1:this.pointerdownState||(o=this.overlay)==null||o.manuallyKeepOpen()),this.open||(this.host.optionsMenu.updateSelectedItemIndex(),this.host.optionsMenu.closeDescendentOverlays()))}initOverlay(){this.overlay&&(this.overlay.addEventListener("beforetoggle",e=>{this.handleBeforetoggle(e)}),this.overlay.type=this.host.isMobile.matches?"modal":"auto",this.overlay.triggerElement=this.host,this.overlay.placement=this.host.isMobile.matches?void 0:this.host.placement,this.overlay.receivesFocus="true",this.overlay.willPreventClose=this.preventNextToggle!=="no"&&this.open,this.overlay.addEventListener("slottable-request",this.host.handleSlottableRequest))}handlePointerdown(e){}handleButtonFocus(e){this.preventNextToggle==="maybe"&&e.relatedTarget===this.host.optionsMenu&&(this.preventNextToggle="yes")}handleActivate(e){}init(){}abort(){var e;this.releaseDescription(),(e=this.abortController)==null||e.abort()}hostConnected(){this.init()}hostDisconnected(){var e;(e=this.abortController)==null||e.abort()}hostUpdated(){this.overlay&&this.host.dependencyManager.loaded&&this.host.open!==this.overlay.open&&(this.overlay.willPreventClose=this.preventNextToggle!=="no",this.overlay.open=this.host.open)}}class M extends m{constructor(){super(...arguments),this.type=b.desktop}handlePointerdown(e){if(e.button!==0||e.pointerType==="touch")return;this.pointerdownState=this.open,this.preventNextToggle="maybe";let o=0;const r=()=>{cancelAnimationFrame(o),o=requestAnimationFrame(()=>{document.removeEventListener("pointerup",r),document.removeEventListener("pointercancel",r),this.target.removeEventListener("click",r),requestAnimationFrame(()=>{this.preventNextToggle="no"})})};document.addEventListener("pointerup",r),document.addEventListener("pointercancel",r),this.target.addEventListener("click",r),this.handleActivate()}handleActivate(e){this.enterKeydownOn&&this.enterKeydownOn!==this.target||this.preventNextToggle!=="yes"&&((e==null?void 0:e.type)==="click"&&this.open!==this.pointerdownState||this.host.toggle())}init(){var o;(o=this.abortController)==null||o.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("click",r=>this.handleActivate(r),{signal:e}),this.target.addEventListener("pointerdown",r=>this.handlePointerdown(r),{signal:e}),this.target.addEventListener("focus",r=>this.handleButtonFocus(r),{signal:e})}}const h="remove-focus-ring-safari-hack";class E extends m{constructor(){super(...arguments),this.type=b.mobile}handleClick(){this.preventNextToggle==="no"&&(this.open=!this.open),this.preventNextToggle="no"}handlePointerdown(){this.preventNextToggle=this.open?"yes":"no",k.isWebKit()&&this.target.classList.add(h)}handleFocusOut(){this.host.open||k.isWebKit()&&this.target.classList.contains(h)&&this.target.classList.remove(h)}init(){var o;(o=this.abortController)==null||o.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("click",()=>this.handleClick(),{signal:e}),this.target.addEventListener("pointerdown",()=>this.handlePointerdown(),{signal:e}),this.target.addEventListener("focusout",()=>this.handleFocusOut(),{signal:e})}}const g={desktop:M,mobile:E};var $=Object.defineProperty,L=Object.getOwnPropertyDescriptor,n=(s,e,o,r)=>{for(var a=r>1?void 0:r?L(e,o):e,l=s.length-1,p;l>=0;l--)(p=s[l])&&(a=(r?p(e,o,a):p(a))||a);return r&&a&&$(e,o,a),a};const F=()=>c.x`
19
- <div class="disclosure-icon icon">
20
- ${u.luzmoIcon(u.luzmoAngleDown,{className:"indicator"})}
21
- </div>
22
- `,A=()=>c.x`
23
- <div class="icon-container validation-icon icon">
24
- ${u.luzmoIcon(u.luzmoAlert)}
25
- </div>
26
- `,v="option-picker";class t extends C.SizedMixin(y.Focusable,{noDefaultSize:!0}){constructor(){super(),this.disabled=!1,this.focused=!1,this.invalid=!1,this.pending=!1,this.pendingLabel="Pending",this.open=!1,this.readonly=!1,this.placement="bottom-start",this.quiet=!1,this.value="",this.selects="single",this.dependencyManager=new w.DependencyManagerController(this),this.isMobile=new q(this,I),this.listRole="listbox",this.itemRole="option",this.hasRenderedOverlay=!1,this._selfManageFocusElement=!1,this.deprecatedMenu=null,this.selectionPromise=Promise.resolve(),this.willManageSelection=!1,this.recentlyConnected=!1,this.enterKeydownOn=null,this.handleSlottableRequest=e=>{},this.applyFocusElementLabel=(e,o)=>{this.appliedLabel=e,this.labelAlignment=o.sideAligned?"inline":void 0},this.handleKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.stopPropagation(),e.preventDefault(),this.toggle(!0))},this.renderAngleIcon=()=>F(),this.renderAlertIcon=()=>A(),this.handleEnterKeydown=e=>{if(e.code==="Enter"){if(this.enterKeydownOn){e.preventDefault();return}this.enterKeydownOn=e.target,this.addEventListener("keyup",o=>{o.code==="Enter"&&(this.enterKeydownOn=null)},{once:!0})}},this.pendingStateController=new x.PendingStateController(this)}get selectedItem(){return this._selectedItem}get selectedItemContent(){return this._selectedItemContent||{icon:[],content:[]}}get selfManageFocusElement(){return this._selfManageFocusElement}get menuItems(){return this.optionsMenu.childItems}set selectedItem(e){if(this.selectedItemContent=e?e.itemChildren:void 0,e===this.selectedItem)return;const o=this.selectedItem;this._selectedItem=e,this.requestUpdate("selectedItem",o)}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.disabled||(this.focused=!0)}click(){this.disabled||this.toggle()}handleButtonBlur(){this.focused=!1}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}handleHelperFocus(){this.focused=!0,this.button.focus()}handleChange(e){this.strategy&&(this.strategy.preventNextToggle="no");const o=e.target,[r]=o.selectedItems;e.stopPropagation(),e.cancelable?this.setValueFromItem(r,e):(this.open=!1,this.strategy&&(this.strategy.open=!1))}handleButtonFocus(e){var o;(o=this.strategy)==null||o.handleButtonFocus(e)}toggle(e){this.readonly||this.pending||(this.open=e===void 0?!this.open:e,this.strategy&&(this.strategy.open=this.open),this._selfManageFocusElement=this.open)}close(){this.readonly||this.strategy&&(this.open=!1,this.strategy.open=!1)}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.strategy=this.isMobile.matches?new g.mobile(this.button,this):new g.desktop(this.button,this)}connectedCallback(){super.connectedCallback(),this.recentlyConnected=this.hasUpdated}disconnectedCallback(){var e;this.close(),(e=this.strategy)==null||e.releaseDescription(),super.disconnectedCallback()}async setValueFromItem(e,o){this.open=!1,this.strategy&&(this.strategy.open=!1);const r=this.selectedItem,a=this.value;if(this.selectedItem=e,this.value=(e==null?void 0:e.value)??"",await this.updateComplete,!this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:this.value}))&&this.selects){o&&o.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),r&&this.setMenuItemSelected(r,!0),this.selectedItem=r,this.value=a,this.open=!0,this.strategy&&(this.strategy.open=!0);return}else if(!this.selects){this.selectedItem=r,this.value=a;return}r&&this.setMenuItemSelected(r,!1),this.setMenuItemSelected(e,!!this.selects)}setMenuItemSelected(e,o){this.selects!=null&&(e.selected=o)}get containerStyles(){return this.isMobile.matches?{"--swc-menu-width":"100%"}:{}}set selectedItemContent(e){if(e===this.selectedItemContent)return;const o=this.selectedItemContent;this._selectedItemContent=e,this.requestUpdate("selectedItemContent",o)}handleTooltipSlotchange(e){this.tooltipEl=e.target.assignedElements()[0]}renderLabelContent(e){return this.value&&this.selectedItem?e:c.x`
27
- <slot name="label" id="label">
28
- <span aria-hidden=${d.ifDefined(this.appliedLabel?void 0:"true")}>
29
- ${this.label}
30
- </span>
31
- </slot>
32
- `}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value,label:!0},o=this.appliedLabel||this.label;return[c.x`
33
- <div id="icon" ?hidden=${this.icons==="none"}>
34
- ${this.selectedItemContent.icon}
35
- </div>
36
- <div
37
- id=${d.ifDefined(this.value&&this.selectedItem?"label":void 0)}
38
- class=${f.classMap(e)}
39
- >
40
- ${this.renderLabelContent(this.selectedItemContent.content)}
41
- </div>
42
- ${this.value&&this.selectedItem?c.x`
43
- <div
44
- aria-hidden="true"
45
- class="visually-hidden"
46
- id="applied-label"
47
- >
48
- ${o}
49
- <slot name="label"></slot>
50
- </div>
51
- `:c.x` <span hidden id="applied-label">${o}</span> `}
52
- ${this.invalid&&!this.pending?c.x` ${this.renderAlertIcon()} `:c.E}
53
- ${this.pendingStateController.renderPendingState()}
54
- ${this.renderAngleIcon()}
55
- <slot
56
- aria-hidden="true"
57
- name="tooltip"
58
- id="tooltip"
59
- @slotchange=${this.handleTooltipSlotchange}
60
- ></slot>
61
- `]}renderOverlay(e){var r,a,l;if(((r=this.strategy)==null?void 0:r.overlay)===void 0)return e;const o=this.renderContainer(e);return c.B(o,(a=this.strategy)==null?void 0:a.overlay,{host:this}),(l=this.strategy)==null?void 0:l.overlay}get renderDescriptionSlot(){return c.x`
62
- <div id=${v}>
63
- <slot name="description"></slot>
64
- </div>
65
- `}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),c.x`
66
- <span
67
- id="focus-helper"
68
- tabindex=${this.focused||this.open?"-1":"0"}
69
- @focus=${this.handleHelperFocus}
70
- aria-describedby=${v}
71
- ></span>
72
- <button
73
- aria-controls=${d.ifDefined(this.open?"menu":void 0)}
74
- aria-describedby="tooltip"
75
- aria-expanded=${this.open?"true":"false"}
76
- aria-haspopup="true"
77
- aria-labelledby="loader icon label applied-label"
78
- id="button"
79
- class=${d.ifDefined(this.labelAlignment?`label-${this.labelAlignment}`:void 0)}
80
- @blur=${this.handleButtonBlur}
81
- @keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
82
- ?disabled=${this.disabled}
83
- tabindex="-1"
84
- >
85
- ${this.buttonContent}
86
- </button>
87
- ${this.renderMenu} ${this.renderDescriptionSlot}
88
- `}update(e){var o,r;this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&this.strategy&&(this.open=!1,this.strategy.open=!1),e.has("pending")&&this.pending&&this.strategy&&(this.open=!1,this.strategy.open=!1),e.has("value")&&this.shouldScheduleManageSelection(),this.hasUpdated||(this.deprecatedMenu=this.querySelector(":scope > luzmo-menu"),(o=this.deprecatedMenu)==null||o.toggleAttribute("ignore",!0),(r=this.deprecatedMenu)==null||r.setAttribute("selects","inherit")),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("open")&&(this.strategy.open=this.open)}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener(),this.bindEvents()}get dismissHelper(){return c.x`
89
- <div class="visually-hidden">
90
- <button
91
- tabindex="-1"
92
- aria-label="Dismiss"
93
- @click=${this.close}
94
- ></button>
95
- </div>
96
- `}renderContainer(e){const o=c.x`
97
- ${this.dismissHelper} ${e} ${this.dismissHelper}
98
- `;return this.dependencyManager.add("luzmo-popover"),Promise.resolve().then(()=>require("./popover/index.cjs")),c.x`
99
- <luzmo-popover
100
- id="popover"
101
- size=${this.size}
102
- role="presentation"
103
- style=${z.styleMap(this.containerStyles)}
104
- placement=${this.placement}
105
- >
106
- ${o}
107
- </luzmo-popover>
108
- `}get renderMenu(){const e=c.x`
109
- <luzmo-menu
110
- aria-labelledby="applied-label"
111
- @change=${this.handleChange}
112
- id="menu"
113
- @keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
114
- @scroll=${this.onScroll}
115
- role=${this.listRole}
116
- .selects=${this.selects}
117
- .selected=${this.value?[this.value]:[]}
118
- size=${this.size}
119
- @luzmo-menu-item-added-or-updated=${this.shouldManageSelection}
120
- >
121
- <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
122
- </luzmo-menu>
123
- `;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?(this.dependencyManager.loaded&&this.dependencyManager.add("luzmo-overlay"),this.renderOverlay(e)):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(o=>this.selectionResolver=o);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(o=>requestAnimationFrame(()=>o(!0))),this.recentlyConnected=!1),this.menuItems.forEach(o=>{this.value===o.value&&!o.disabled?e=o:o.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,e}onScroll(){this.dispatchEvent(new Event("scroll",{cancelable:!0,composed:!0}))}}n([i.state()],t.prototype,"appliedLabel",2);n([i.query("#button")],t.prototype,"button",2);n([i.property({type:Boolean,reflect:!0})],t.prototype,"disabled",2);n([i.property({type:Boolean,reflect:!0})],t.prototype,"focused",2);n([i.property({type:String,reflect:!0})],t.prototype,"icons",2);n([i.property({type:String,reflect:!0})],t.prototype,"variant",2);n([i.property({type:Boolean,reflect:!0})],t.prototype,"invalid",2);n([i.property({type:Boolean,reflect:!0})],t.prototype,"pending",2);n([i.property({type:String,attribute:"pending-label"})],t.prototype,"pendingLabel",2);n([i.property()],t.prototype,"label",2);n([i.property({type:Boolean,reflect:!0})],t.prototype,"open",2);n([i.property({type:Boolean,reflect:!0})],t.prototype,"readonly",2);n([i.state()],t.prototype,"labelAlignment",2);n([i.query("luzmo-menu")],t.prototype,"optionsMenu",2);n([i.query("luzmo-overlay")],t.prototype,"overlayElement",2);n([i.property()],t.prototype,"placement",2);n([i.property({type:Boolean,reflect:!0})],t.prototype,"quiet",2);n([i.property({type:String})],t.prototype,"value",2);n([i.property({attribute:!1})],t.prototype,"selectedItem",1);n([i.state()],t.prototype,"selectedItemContent",1);class D extends t{constructor(){super(...arguments),this.handleKeydown=e=>{const{code:o}=e;if(this.focused=!0,!o.startsWith("Arrow")||this.readonly||this.pending)return;if(o==="ArrowUp"||o==="ArrowDown"){this.toggle(!0),e.preventDefault();return}e.preventDefault();const r=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,a=r<0||o==="ArrowRight"?1:-1;let l=r+a;for(;this.menuItems[l]&&this.menuItems[l].disabled;)l+=a;!this.menuItems[l]||this.menuItems[l].disabled||(!this.value||l!==r)&&this.setValueFromItem(this.menuItems[l])}}static get styles(){return[c.r(S)]}get containerStyles(){const e=super.containerStyles;return this.quiet||(e["min-width"]=`${this.offsetWidth}px`),e}}exports.DESCRIPTION_ID=v;exports.LuzmoPicker=D;exports.LuzmoPickerBase=t;
@@ -1,30 +0,0 @@
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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./base-CaRKlVkL.cjs"),p=require("lit/decorators.js"),v=require("./sized-mixin-DcvJLFeo.cjs"),m=":host{pointer-events:none;visibility:hidden;opacity:0;transition:transform .13s ease-in-out,opacity .13s ease-in-out,visibility 0s linear .13s;transition:transform var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s)) ease-in-out,opacity var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s)) ease-in-out,visibility 0s linear var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s))}:host([open]){pointer-events:auto;visibility:visible;opacity:1;transition-delay:0s;transition-delay:var(--luzmo-overlay-animation-duration-opened, var(--animation-duration-0, 0s))}@media (forced-colors: active){:host{--highcontrast-popover-border-color: CanvasText}}:host{--popover-filter: drop-shadow( var(--luzmo-popover-shadow-horizontal, var(--popover-shadow-horizontal)) var(--luzmo-popover-shadow-vertical, var(--popover-shadow-vertical)) var(--luzmo-popover-shadow-blur, var(--popover-shadow-blur)) var(--luzmo-popover-shadow-color, var(--popover-shadow-color)) );box-sizing:border-box;padding:var(--luzmo-popover-content-area-spacing-vertical, var(--popover-content-area-spacing-vertical)) 0;border-radius:var(--luzmo-popover-corner-radius, var(--popover-corner-radius));border-style:solid;border-color:var(--highcontrast-popover-border-color, var(--luzmo-popover-border-color, var(--popover-border-color)));border-width:var(--luzmo-popover-border-width, var(--popover-border-width));background-color:var(--luzmo-popover-background-color, var(--popover-background-color));filter:var(--luzmo-popover-filter, var(--popover-filter));outline:none;flex-direction:column;display:inline-flex;position:absolute}:host([tip]) #tip .triangle{stroke-linecap:square;stroke-linejoin:miter;fill:var(--highcontrast-popover-background-color, var(--luzmo-popover-background-color, var(--popover-background-color)));stroke:var(--highcontrast-popover-border-color, var(--luzmo-popover-border-color, var(--popover-border-color)));stroke-width:var(--luzmo-popover-border-width, var(--popover-border-width))}*{--luzmo-popover-filter: none}:host([tip]) .luzmo-Popover--top-end,:host([tip]) .luzmo-Popover--top-left,:host([tip]) .luzmo-Popover--top-right,:host([tip]) .luzmo-Popover--top-start,:host([placement*=top][tip]){margin-block-end:calc(var(--luzmo-popover-pointer-height, var(--popover-pointer-height)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--top-end,:host([open]) .luzmo-Popover--top-left,:host([open]) .luzmo-Popover--top-right,:host([open]) .luzmo-Popover--top-start,:host([placement*=top][open]){transform:translateY(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) .luzmo-Popover--bottom-end,:host([tip]) .luzmo-Popover--bottom-left,:host([tip]) .luzmo-Popover--bottom-right,:host([tip]) .luzmo-Popover--bottom-start,:host([placement*=bottom][tip]){margin-block-start:calc(var(--luzmo-popover-pointer-height, var(--popover-pointer-height)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--bottom-end,:host([open]) .luzmo-Popover--bottom-left,:host([open]) .luzmo-Popover--bottom-right,:host([open]) .luzmo-Popover--bottom-start,:host([placement*=bottom][open]){transform:translateY(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--right-bottom,:host([tip]) .luzmo-Popover--right-top,:host([placement*=right][tip]){margin-left:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--right-bottom,:host([open]) .luzmo-Popover--right-top,:host([placement*=right][open]){transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--left-bottom,:host([tip]) .luzmo-Popover--left-top,:host([placement*=left][tip]){margin-right:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--left-bottom,:host([open]) .luzmo-Popover--left-top,:host([placement*=left][open]){transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) .luzmo-Popover--start-bottom,:host([tip]) .luzmo-Popover--start-top,:host([tip]) .luzmo-Popover--start{margin-inline-end:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--start-bottom,:host([open]) .luzmo-Popover--start-top,:host([open]) .luzmo-Popover--start{transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([open]) .luzmo-Popover--start-bottom:dir(rtl),:host([open]) .luzmo-Popover--start-top:dir(rtl),:host([open]) .luzmo-Popover--start:dir(rtl),:host([dir=rtl][open]) .luzmo-Popover--start-bottom,:host([dir=rtl][open]) .luzmo-Popover--start-top,:host([dir=rtl][open]) .luzmo-Popover--start{transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--end-bottom,:host([tip]) .luzmo-Popover--end-top,:host([tip]) .luzmo-Popover--end{margin-inline-start:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--end-bottom,:host([open]) .luzmo-Popover--end-top,:host([open]) .luzmo-Popover--end{transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([open]) .luzmo-Popover--end-bottom:dir(rtl),:host([open]) .luzmo-Popover--end-top:dir(rtl),:host([open]) .luzmo-Popover--end:dir(rtl),:host([dir=rtl][open]) .luzmo-Popover--end-bottom,:host([dir=rtl][open]) .luzmo-Popover--end-top,:host([dir=rtl][open]) .luzmo-Popover--end{transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) #tip,:host([tip][placement*=bottom]) #tip,:host([tip]) .luzmo-Popover--bottom-end #tip,:host([tip]) .luzmo-Popover--bottom-left #tip,:host([tip]) .luzmo-Popover--bottom-right #tip,:host([tip]) .luzmo-Popover--bottom-start #tip,:host([tip][placement*=top]) #tip,:host([tip]) .luzmo-Popover--top-end #tip,:host([tip]) .luzmo-Popover--top-left #tip,:host([tip]) .luzmo-Popover--top-right #tip,:host([tip]) .luzmo-Popover--top-start #tip{inline-size:var(--luzmo-popover-pointer-width, var(--popover-pointer-width));block-size:var(--luzmo-popover-pointer-height, var(--popover-pointer-height));margin:auto;position:absolute;inset-block-start:100%;inset-inline:0;transform:translate(0)}:host([tip]) .luzmo-Popover--top-left #tip{inset-inline:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--top-right #tip{inset-inline:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--top-start #tip{margin-inline-start:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--top-end #tip{margin-inline-end:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip][placement*=bottom]) #tip,:host([tip]) .luzmo-Popover--bottom-end #tip,:host([tip]) .luzmo-Popover--bottom-left #tip,:host([tip]) .luzmo-Popover--bottom-right #tip,:host([tip]) .luzmo-Popover--bottom-start #tip{inset-block:auto 100%;transform:scaleY(-1)}:host([tip]) .luzmo-Popover--bottom-left #tip{inset-inline:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--bottom-right #tip{inset-inline:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--bottom-start #tip{margin-inline-start:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--bottom-end #tip{margin-inline-end:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--end #tip,:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--end-top #tip,:host([tip][placement*=left]) #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--left-top #tip,:host([tip][placement*=right]) #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--right-top #tip,:host([tip]) .luzmo-Popover--start #tip,:host([tip]) .luzmo-Popover--start-bottom #tip,:host([tip]) .luzmo-Popover--start-top #tip{inline-size:var(--luzmo-popover-pointer-height, var(--popover-pointer-height));block-size:var(--luzmo-popover-pointer-width, var(--popover-pointer-width));inset-block:0}:host([tip][placement*=left]) #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--left-top #tip{left:100%;right:auto}:host([tip][placement*=right]) #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--right-top #tip{left:auto;right:100%;transform:scaleX(-1)}:host([tip]) .luzmo-Popover--end-top #tip,:host([tip]) .luzmo-Popover--left-top #tip,:host([tip]) .luzmo-Popover--right-top #tip,:host([tip]) .luzmo-Popover--start-top #tip{inset-block:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--start-bottom #tip{inset-block:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--start #tip,:host([tip]) .luzmo-Popover--start-bottom #tip,:host([tip]) .luzmo-Popover--start-top #tip{margin-inline-start:100%}:host([tip]) .luzmo-Popover--start #tip:dir(rtl),:host([tip]) .luzmo-Popover--start-bottom #tip:dir(rtl),:host([tip]) .luzmo-Popover--start-top #tip:dir(rtl),:host([dir=rtl][tip]) .luzmo-Popover--start #tip,:host([dir=rtl][tip]) .luzmo-Popover--start-bottom #tip,:host([dir=rtl][tip]) .luzmo-Popover--start-top #tip{transform:none}:host([tip]) .luzmo-Popover--end #tip,:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--end-top #tip{margin-inline-end:100%;transform:scaleX(-1)}:host([tip]) .luzmo-Popover--end #tip:dir(rtl),:host([tip]) .luzmo-Popover--end-bottom #tip:dir(rtl),:host([tip]) .luzmo-Popover--end-top #tip:dir(rtl),:host([dir=rtl][tip]) .luzmo-Popover--end #tip,:host([dir=rtl][tip]) .luzmo-Popover--end-bottom #tip,:host([dir=rtl][tip]) .luzmo-Popover--end-top #tip{transform:scaleX(1)}:host{--popover-border-width: var(--luzmo-border-width);--popover-animation-distance: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--popover-background-color: var(--luzmo-background-color);--popover-border-color: var(--luzmo-border-color);--popover-content-area-spacing-vertical: var(--luzmo-spacing-2);--popover-shadow-horizontal: 0;--popover-shadow-vertical: 1px;--popover-shadow-blur: 4px;--popover-shadow-color: var(--luzmo-border-color);--popover-corner-radius: var(--luzmo-border-radius);--popover-pointer-width: var(--luzmo-spacing-5);--popover-pointer-height: var(--luzmo-spacing-3);--popover-pointer-edge-offset: 16px;--popover-pointer-edge-spacing: 24px}:host([size=s]){--popover-animation-distance: var(--luzmo-spacing-2)}:host([size=l]){--popover-animation-distance: var(--luzmo-spacing-3)}:host([size=xl]){--popover-animation-distance: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host{min-width:min-content;max-height:100%;max-width:100%;clip-path:none}::slotted(*){overscroll-behavior:contain}:host([placement*=left]) #tip[style],:host([placement*=right]) #tip[style]{inset-block-end:auto}:host([placement*=top]) #tip[style],:host([placement*=bottom]) #tip[style]{inset-inline-end:auto}.block,.inline{width:100%;height:100%;display:block}:host([placement*=left]) .block,:host([placement*=right]) .block{display:none}:host([placement*=top]) .inline,:host([placement*=bottom]) .inline{display:none}::slotted(.visually-hidden){border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}::slotted(luzmo-menu){margin:0}:host([dialog]){min-width:var(--luzmo-popover-dialog-min-width, 270px);padding:var(--luzmo-popover-dialog-padding, 30px 29px)}:host([tip][placement]) #tip{height:auto}";var h=Object.defineProperty,e=(i,n,l,d)=>{for(var o=void 0,a=i.length-1,s;a>=0;a--)(s=i[a])&&(o=s(n,l,o)||o);return o&&h(n,l,o),o};class r extends v.SizedMixin(t.LuzmoElement){constructor(){super(...arguments),this.open=!1,this.tip=!1}static get styles(){return[t.r(m)]}renderTip(){return t.x`
19
- <div id="tip" aria-hidden="true">
20
- <svg class="tip block" viewBox="0 -0.5 16 9">
21
- <path class="triangle" d="M-1,-1 8,8 17,-1"></path>
22
- </svg>
23
- <svg class="tip inline" viewBox="0 -0.5 9 16">
24
- <path class="triangle" d="M-1,-1 8,8 -1,17"></path>
25
- </svg>
26
- </div>
27
- `}render(){return t.x`
28
- <slot></slot>
29
- ${this.tip?this.renderTip():t.E}
30
- `}}e([p.property({type:Boolean,reflect:!0})],r.prototype,"open");e([p.property({reflect:!0})],r.prototype,"placement");e([p.property({type:Boolean,reflect:!0})],r.prototype,"tip");e([p.query("#tip")],r.prototype,"tipElement");exports.LuzmoPopover=r;
@@ -1,18 +0,0 @@
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";const d=require("./base-CaRKlVkL.cjs"),n=require("lit/async-directive.js"),s=["",()=>{}];class m extends n.AsyncDirective{constructor(){super(...arguments),this.start=s,this.streamInside=s,this.end=s,this.streamOutside=s,this.state="off",this.handleStart=e=>{this.clearStream(),this.callHandler(this.start[1],e),!e.defaultPrevented&&(this.removeListeners(),this.addListeners("on"))},this.handleInside=e=>{this.handleStream(this.streamInside[1],e)},this.handleEnd=e=>{this.clearStream(),this.callHandler(this.end[1],e),this.removeListeners(),this.addListeners("off")},this.handleOutside=e=>{this.handleStream(this.streamOutside[1],e)}}render(e){return d.E}update(e,[{start:t,end:i,streamInside:h=s,streamOutside:a=s}]){var r;this.element!==e.element&&(this.element=e.element,this.removeListeners()),this.host=((r=e.options)==null?void 0:r.host)||this.element,this.start=t,this.end=i,this.streamInside=h,this.streamOutside=a,this.addListeners()}addListeners(e){this.state=e||this.state,this.state==="off"?(this.addListener(this.streamOutside[0],this.handleOutside),this.addListener(this.start[0],this.handleStart)):this.state==="on"&&(this.addListener(this.streamInside[0],this.handleInside),this.addListener(this.end[0],this.handleEnd))}callHandler(e,t){typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}handleStream(e,t){this.stream||(this.callHandler(e,t),this.stream=requestAnimationFrame(()=>{this.stream=void 0}))}clearStream(){this.stream!=null&&(cancelAnimationFrame(this.stream),this.stream=void 0)}addListener(e,t){Array.isArray(e)?e.map(i=>{this.element.addEventListener(i,t)}):this.element.addEventListener(e,t)}removeListener(e,t){Array.isArray(e)?e.map(i=>{this.element.removeEventListener(i,t)}):this.element.removeEventListener(e,t)}removeListeners(){this.removeListener(this.start[0],this.handleStart),this.removeListener(this.streamInside[0],this.handleInside),this.removeListener(this.end[0],this.handleEnd),this.removeListener(this.streamOutside[0],this.handleOutside)}disconnected(){this.removeListeners()}reconnected(){this.addListeners()}}const l=n.directive(m);exports.streamingListener=l;
@@ -1,288 +0,0 @@
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 { r as v, x as d, E as s } from "./base-CCsOyfm4.js";
19
- import { state as f, property as o, query as x } from "lit/decorators.js";
20
- import { ifDefined as r } from "lit/directives/if-defined.js";
21
- import { live as m } from "lit/directives/live.js";
22
- import { luzmoIcon as p, luzmoAlert as g, luzmoCheck as b } from "@luzmo/icons";
23
- import { F as z } from "./focusable-CxA_NMK_.js";
24
- import { S as y } from "./sized-mixin-cJbo3PKR.js";
25
- import { M as k } from "./manage-help-text-CmE_nfjl.js";
26
- const w = '#text-field{--luzmo-text-field-input-line-height: var( --luzmo-text-field-height, var(--text-field-height) );text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width, 240px);grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width, 2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap, 2px) + var(--luzmo-text-field-focus-indicator-width, 2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0;display:flex;align-items:center;justify-content:center}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid, var(--luzmo-text-field-icon-color-valid, var(--luzmo-color-positive)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid, var(--luzmo-text-field-icon-color-invalid, var(--luzmo-color-negative)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid, 0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid, 0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block, 0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet, var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block, 0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size, var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight, var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block, var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline, 12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet, var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align, start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width, 1.5);block-size:var(--luzmo-text-field-height, var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color, var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color, var(--luzmo-text-field-border-color, var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width, var(--luzmo-border-width));border-radius:var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-text-color-default, var(--luzmo-font-color)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-placeholder-text-color-default, var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus, var(--luzmo-text-field-border-color-focus, var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-text-color-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-placeholder-text-color-focus, var(--luzmo-color-disabled)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus, var(--luzmo-text-field-border-color-keyboard-focus, var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width, 0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)));outline-offset:var(--luzmo-text-field-focus-indicator-gap, 2px);color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-text-color-keyboard-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-placeholder-text-color-keyboard-focus, var(--luzmo-color-disabled)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid, var(--luzmo-text-field-text-color-valid, var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid, var(--luzmo-text-field-text-color-invalid, var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(luzmo-danger-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus, var(--luzmo-text-field-border-color-invalid-focus, var(luzmo-danger-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus, var(--luzmo-text-field-border-color-invalid-keyboard-focus, var(luzmo-danger-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet, 0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet, 0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-color-disabled)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-color-disabled)));background-color:initial}@media (hover: hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover, var(--luzmo-text-field-border-color-hover, rgba(var(--luzmo-primary-rgb), .3)))}.input:hover,#text-field:hover .input{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-text-color-hover, var(--luzmo-font-color-hard)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-placeholder-text-color-hover, var(--luzmo-color-disabled)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover, var(--luzmo-text-field-border-color-focus-hover, var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-text-color-focus-hover, var(--luzmo-font-color-hard)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-placeholder-text-color-focus-hover, var(--luzmo-color-disabled)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover, var(--luzmo-text-field-border-color-invalid-hover, var(luzmo-danger-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover, var(--luzmo-text-field-border-color-invalid-focus-hover, var(luzmo-danger-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label, var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side, var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side, 12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height: normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size, 112px);min-block-size:var(--luzmo-text-area-min-block-size, 56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet, var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors: active){:host{--highcontrast-text-field-border-color-hover: Highlight;--highcontrast-text-field-border-color-focus: Highlight;--highcontrast-text-field-border-color-keyboard-focus: CanvasText;--highcontrast-text-field-focus-indicator-color: Highlight;--highcontrast-text-field-border-color-invalid-default: Highlight;--highcontrast-text-field-border-color-invalid-hover: Highlight;--highcontrast-text-field-border-color-invalid-focus: Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus: Highlight;--highcontrast-text-field-text-color-valid: CanvasText;--highcontrast-text-field-text-color-invalid: CanvasText}#text-field .input{--highcontrast-text-field-text-color-default: CanvasText;--highcontrast-text-field-text-color-hover: CanvasText;--highcontrast-text-field-text-color-keyboard-focus: CanvasText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default: GrayText;--highcontrast-text-field-text-color-hover: GrayText;--highcontrast-text-field-text-color-keyboard-focus: GrayText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}}:host{display:inline-flex;flex-direction:column;inline-size:var(--luzmo-text-field-width, 240px)}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width, 1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{display:inline-grid;--luzmo-text-field-input-line-height: normal}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out,border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{background-color:#0000;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size, var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap, 2px) * 2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){position:absolute;top:0;left:0;height:100%;resize:none;overflow:hidden}:host{--text-field-height: var(--luzmo-component-height);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 14px;--text-field-spacing-inline: 12px;--text-field-icon-size-invalid: 18px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 12px;--text-field-icon-spacing-inline-end-valid: 15px;--text-field-icon-spacing-block-invalid: 7px;--text-field-icon-spacing-block-valid: 4px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-4);--text-field-character-count-font-size: var(--luzmo-font-size-s);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 8px;--text-area-min-block-size-quiet: var(--luzmo-component-height)}:host([size=s]){--text-field-height: var(--luzmo-component-height-s);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 8px;--text-field-placeholder-font-size: 12px;--text-field-spacing-inline: 9px;--text-field-icon-size-invalid: 16px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 9px;--text-field-icon-spacing-inline-end-valid: 11px;--text-field-icon-spacing-block-invalid: 2px;--text-field-icon-spacing-block-valid: -1px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-3);--text-field-character-count-font-size: var(--luzmo-font-size-xs);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 4px;--text-area-min-block-size-quiet: var(--luzmo-component-height-s)}:host([size=l]){--text-field-height: var(--luzmo-component-height-l);--text-field-label-spacing-block-quiet: -12px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 16px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 20px;--text-field-icon-size-valid: 12px;--text-field-icon-spacing-inline-end-invalid: 15px;--text-field-icon-spacing-inline-end-valid: 17px;--text-field-icon-spacing-block-invalid: 10px;--text-field-icon-spacing-block-valid: 8px;--text-field-icon-spacing-inline-start-invalid: 15px;--text-field-icon-spacing-inline-start-valid: 15px;--text-field-character-count-font-size: var(--luzmo-font-size);--text-field-character-count-spacing-block: 9px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 11px;--text-area-min-block-size-quiet: var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height: var(--luzmo-component-height-xl);--text-field-label-spacing-block-quiet: -15px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 18px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 22px;--text-field-icon-size-valid: 14px;--text-field-icon-spacing-inline-end-invalid: 18px;--text-field-icon-spacing-inline-end-valid: 20px;--text-field-icon-spacing-block-invalid: 12px;--text-field-icon-spacing-block-valid: 13px;--text-field-icon-spacing-inline-start-invalid: 18px;--text-field-icon-spacing-inline-start-valid: 18px;--text-field-character-count-font-size: var(--luzmo-font-size-l);--text-field-character-count-spacing-block: 11px;--text-field-character-count-spacing-block-quiet: -4px;--text-field-character-count-spacing-block-side: 14px;--text-area-min-block-size-quiet: var(--luzmo-component-height-xl)}';
27
- var q = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (c, e, l, n) => {
28
- for (var a = n > 1 ? void 0 : n ? $(e, l) : e, u = c.length - 1, h; u >= 0; u--)
29
- (h = c[u]) && (a = (n ? h(e, l, a) : h(a)) || a);
30
- return n && a && q(e, l, a), a;
31
- };
32
- const E = ["text", "url", "tel", "email", "password"];
33
- class i extends k(
34
- y(z, {
35
- noDefaultSize: !0
36
- })
37
- ) {
38
- constructor() {
39
- super(...arguments), this.allowedKeys = "", this.focused = !1, this.invalid = !1, this.label = "", this.placeholder = "", this._type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.readonly = !1, this.rows = -1, this.valid = !1, this._value = "", this.quiet = !1, this.required = !1;
40
- }
41
- static get styles() {
42
- return [v(w)];
43
- }
44
- set type(e) {
45
- const l = this._type;
46
- this._type = e, this.requestUpdate("type", l);
47
- }
48
- get type() {
49
- return E.find((e) => e === this._type) ?? "text";
50
- }
51
- set value(e) {
52
- if (e === this.value)
53
- return;
54
- const l = this._value;
55
- this._value = e, this.requestUpdate("value", l);
56
- }
57
- get value() {
58
- return this._value;
59
- }
60
- get focusElement() {
61
- return this.inputElement;
62
- }
63
- /**
64
- * Sets the start and end positions of the current selection.
65
- *
66
- * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the
67
- * element's value is treated as pointing to the end of the value.
68
- * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than
69
- * the length of the element's value is treated as pointing to the end of the value.
70
- * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
71
- * have been performed.
72
- */
73
- setSelectionRange(e, l, n = "none") {
74
- this.inputElement.setSelectionRange(
75
- e,
76
- l,
77
- n
78
- );
79
- }
80
- /**
81
- * Selects all the text.
82
- */
83
- select() {
84
- this.inputElement.select();
85
- }
86
- handleInput(e) {
87
- if (this.allowedKeys && this.inputElement.value && !new RegExp(`^[${this.allowedKeys}]*$`, "u").test(this.inputElement.value)) {
88
- const a = this.inputElement.selectionStart - 1;
89
- this.inputElement.value = this.value.toString(), this.inputElement.setSelectionRange(a, a);
90
- return;
91
- }
92
- this.value = this.inputElement.value;
93
- }
94
- handleChange() {
95
- this.dispatchEvent(
96
- new Event("change", {
97
- bubbles: !0,
98
- composed: !0
99
- })
100
- );
101
- }
102
- onFocus() {
103
- this.focused = !this.readonly && !0;
104
- }
105
- onBlur(e) {
106
- this.focused = !this.readonly && !1;
107
- }
108
- handleInputElementPointerdown() {
109
- }
110
- renderStateIcons() {
111
- return this.invalid ? d`
112
- <div id="invalid" class="icon">${p(g)}</div>
113
- ` : this.valid ? d`
114
- <div id="valid" class="icon">${p(b)}</div>
115
- ` : s;
116
- }
117
- get displayValue() {
118
- return this.value.toString();
119
- }
120
- // prettier-ignore
121
- get renderMultiline() {
122
- return d`
123
- ${this.multiline && this.grows && this.rows === -1 ? d`
124
- <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
125
- </div>
126
- ` : s}
127
- <!-- @ts-ignore -->
128
- <textarea
129
- name=${r(this.name || void 0)}
130
- aria-describedby=${this.helpTextId}
131
- aria-label=${this.label || this.appliedLabel || this.placeholder}
132
- aria-invalid=${r(this.invalid || void 0)}
133
- class="input"
134
- maxlength=${r(this.maxlength > -1 ? this.maxlength : void 0)}
135
- minlength=${r(this.minlength > -1 ? this.minlength : void 0)}
136
- title=${this.invalid ? "" : s}
137
- pattern=${r(this.pattern)}
138
- placeholder=${this.placeholder}
139
- .value=${this.displayValue}
140
- @change=${this.handleChange}
141
- @input=${this.handleInput}
142
- @focus=${this.onFocus}
143
- @blur=${this.onBlur}
144
- ?disabled=${this.disabled}
145
- ?required=${this.required}
146
- ?readonly=${this.readonly}
147
- rows=${r(this.rows > -1 ? this.rows : void 0)}
148
- autocomplete=${r(this.autocomplete)}
149
- ></textarea>
150
- `;
151
- }
152
- get renderInput() {
153
- return d`
154
- <!-- @ts-ignore -->
155
- <input
156
- name=${r(this.name || void 0)}
157
- type=${this.type}
158
- aria-describedby=${this.helpTextId}
159
- aria-label=${this.label || this.appliedLabel || this.placeholder}
160
- aria-invalid=${r(this.invalid || void 0)}
161
- class="input"
162
- title=${this.invalid ? "" : s}
163
- maxlength=${r(this.maxlength > -1 ? this.maxlength : void 0)}
164
- minlength=${r(this.minlength > -1 ? this.minlength : void 0)}
165
- pattern=${r(this.pattern)}
166
- placeholder=${this.placeholder}
167
- .value=${m(this.displayValue)}
168
- @change=${this.handleChange}
169
- @input=${this.handleInput}
170
- @pointerdown=${this.handleInputElementPointerdown}
171
- @focus=${this.onFocus}
172
- @blur=${this.onBlur}
173
- ?disabled=${this.disabled}
174
- ?required=${this.required}
175
- ?readonly=${this.readonly}
176
- autocomplete=${r(this.autocomplete)}
177
- />
178
- `;
179
- }
180
- renderField() {
181
- return d`
182
- ${this.renderStateIcons()}
183
- ${this.multiline ? this.renderMultiline : this.renderInput}
184
- `;
185
- }
186
- render() {
187
- return d`
188
- <div id="text-field">${this.renderField()}</div>
189
- ${this.renderHelpText(this.invalid)}
190
- `;
191
- }
192
- update(e) {
193
- (e.has("value") || e.has("required") && this.required) && this.updateComplete.then(() => {
194
- this.checkValidity();
195
- }), super.update(e);
196
- }
197
- checkValidity() {
198
- let e = this.inputElement.checkValidity();
199
- return (this.required || this.value && this.pattern) && ((this.disabled || this.multiline) && this.pattern && (e = new RegExp(`^${this.pattern}$`, "u").test(this.value.toString())), this.minlength !== void 0 && (e = e && this.value.toString().length >= this.minlength), this.valid = e, this.invalid = !e), e;
200
- }
201
- }
202
- t([
203
- f()
204
- ], i.prototype, "appliedLabel", 2);
205
- t([
206
- o({ attribute: "allowed-keys" })
207
- ], i.prototype, "allowedKeys", 2);
208
- t([
209
- o({ type: Boolean, reflect: !0 })
210
- ], i.prototype, "focused", 2);
211
- t([
212
- x(".input:not(#sizer)")
213
- ], i.prototype, "inputElement", 2);
214
- t([
215
- o({ type: Boolean, reflect: !0 })
216
- ], i.prototype, "invalid", 2);
217
- t([
218
- o()
219
- ], i.prototype, "label", 2);
220
- t([
221
- o({ type: String, reflect: !0 })
222
- ], i.prototype, "name", 2);
223
- t([
224
- o()
225
- ], i.prototype, "placeholder", 2);
226
- t([
227
- f()
228
- ], i.prototype, "type", 1);
229
- t([
230
- o({ attribute: "type", reflect: !0 })
231
- ], i.prototype, "_type", 2);
232
- t([
233
- o()
234
- ], i.prototype, "pattern", 2);
235
- t([
236
- o({ type: Boolean, reflect: !0 })
237
- ], i.prototype, "grows", 2);
238
- t([
239
- o({ type: Number })
240
- ], i.prototype, "maxlength", 2);
241
- t([
242
- o({ type: Number })
243
- ], i.prototype, "minlength", 2);
244
- t([
245
- o({ type: Boolean, reflect: !0 })
246
- ], i.prototype, "multiline", 2);
247
- t([
248
- o({ type: Boolean, reflect: !0 })
249
- ], i.prototype, "readonly", 2);
250
- t([
251
- o({ type: Number })
252
- ], i.prototype, "rows", 2);
253
- t([
254
- o({ type: Boolean, reflect: !0 })
255
- ], i.prototype, "valid", 2);
256
- t([
257
- o({ type: String })
258
- ], i.prototype, "value", 1);
259
- t([
260
- o({ type: Boolean, reflect: !0 })
261
- ], i.prototype, "quiet", 2);
262
- t([
263
- o({ type: Boolean, reflect: !0 })
264
- ], i.prototype, "required", 2);
265
- t([
266
- o({ type: String, reflect: !0 })
267
- ], i.prototype, "autocomplete", 2);
268
- class S extends i {
269
- constructor() {
270
- super(...arguments), this._value = "";
271
- }
272
- set value(e) {
273
- if (e === this.value)
274
- return;
275
- const l = this._value;
276
- this._value = e, this.requestUpdate("value", l);
277
- }
278
- get value() {
279
- return this._value;
280
- }
281
- }
282
- t([
283
- o({ type: String })
284
- ], S.prototype, "value", 1);
285
- export {
286
- S as L,
287
- i as a
288
- };