@luzmo/lucero 2.4.2 → 2.5.1

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 (197) hide show
  1. package/components/action-button/action-button.d.ts +3 -2
  2. package/components/action-button/index.cjs +1 -1
  3. package/components/action-button/index.js +1 -1
  4. package/components/action-button-B4_uvHiN.cjs +22 -0
  5. package/components/action-button-DU95RNNi.js +138 -0
  6. package/components/action-menu/action-menu.d.ts +16 -1
  7. package/components/action-menu/index.cjs +1 -1
  8. package/components/action-menu/index.d.ts +1 -0
  9. package/components/action-menu/index.js +1 -1
  10. package/components/{action-menu-C0sHNsjG.js → action-menu-B6nNYwlL.js} +40 -22
  11. package/components/action-menu-C_vyFNJt.cjs +58 -0
  12. package/components/badge/index.cjs +1 -1
  13. package/components/badge/index.js +1 -1
  14. package/components/badge-Bp-1d70q.js +96 -0
  15. package/components/badge-CNeUkS4b.cjs +23 -0
  16. package/components/button/index.cjs +1 -1
  17. package/components/button/index.js +1 -1
  18. package/components/button-B1V_2tHk.cjs +20 -0
  19. package/components/button-QXavBh1X.js +126 -0
  20. package/components/calendar/index.cjs +1 -1
  21. package/components/calendar/index.js +1 -1
  22. package/components/{calendar-D1UtHvpY.js → calendar-BNGwCJsG.js} +1 -1
  23. package/components/{calendar-pQxEWdYC.cjs → calendar-CLGqcox8.cjs} +1 -1
  24. package/components/checkbox/index.cjs +1 -1
  25. package/components/checkbox/index.js +1 -1
  26. package/components/{checkbox-BEjvkjfc.js → checkbox-CydI9yXG.js} +1 -1
  27. package/components/{checkbox-ClVrkeLp.cjs → checkbox-JCvBro0K.cjs} +1 -1
  28. package/components/date-range-picker/index.cjs +1 -1
  29. package/components/date-range-picker/index.js +1 -1
  30. package/components/{date-range-picker-DKVmGpUC.js → date-range-picker-5SDPe2fQ.js} +1 -1
  31. package/components/{date-range-picker-D149LIGC.cjs → date-range-picker-CLfEEYkE.cjs} +1 -1
  32. package/components/date-time-picker/index.cjs +1 -1
  33. package/components/date-time-picker/index.js +1 -1
  34. package/components/{date-time-picker-CRpvRk9T.cjs → date-time-picker-DXTksnPd.cjs} +1 -1
  35. package/components/{date-time-picker-6c19YzwF.js → date-time-picker-s3xujamC.js} +1 -1
  36. package/components/index.cjs +1 -1
  37. package/components/index.js +23 -21
  38. package/components/match-media-B_0cVVtk.cjs +18 -0
  39. package/components/match-media-C5X2OZiD.js +34 -0
  40. package/components/notice/index.cjs +1 -1
  41. package/components/notice/index.js +1 -1
  42. package/components/{notice-CsWaqcq3.cjs → notice-CQFyo6OE.cjs} +1 -1
  43. package/components/{notice-N0-lxEf_.js → notice-CQI5kFRd.js} +1 -1
  44. package/components/picker/index.cjs +1 -1
  45. package/components/picker/index.js +1 -1
  46. package/components/picker-C1tD-4ac.cjs +124 -0
  47. package/components/{picker-D0fMBZLb.js → picker-Czkf6auL.js} +7 -6
  48. package/components/progress-steps/index.cjs +1 -1
  49. package/components/progress-steps/index.js +1 -1
  50. package/components/progress-steps/progress-steps.d.ts +0 -5
  51. package/components/{progress-steps-BvCzsq9Z.js → progress-steps-CXJEaaUg.js} +2 -5
  52. package/components/{progress-steps-CvdQQwHc.cjs → progress-steps-Dqh53oC1.cjs} +2 -2
  53. package/components/prompt-box/index.cjs +1 -1
  54. package/components/prompt-box/index.js +1 -1
  55. package/components/{prompt-box-Cz_m2wso.js → prompt-box-CA8bsoZP.js} +2 -2
  56. package/components/{prompt-box-sp9_-Hnx.cjs → prompt-box-DyODaKXV.cjs} +1 -1
  57. package/components/question-box/index.cjs +1 -1
  58. package/components/question-box/index.js +1 -1
  59. package/components/{question-box-D7YSi_6c.js → question-box-DSwTpxAW.js} +4 -4
  60. package/components/{question-box-Bdtsgv1k.cjs → question-box-cBeVshAq.cjs} +1 -1
  61. package/components/search/index.cjs +1 -1
  62. package/components/search/index.js +1 -1
  63. package/components/{search-DEjLSJ96.js → search-CFTOvmWA.js} +1 -1
  64. package/components/{search-PxJEuwHt.cjs → search-DJ6KwOam.cjs} +1 -1
  65. package/components/select/index.cjs +1 -1
  66. package/components/select/index.js +1 -1
  67. package/components/{select-BUgHi69P.js → select-B86uAHme.js} +5 -4
  68. package/components/select-CKMCEJf7.cjs +158 -0
  69. package/components/status-light/index.cjs +1 -1
  70. package/components/status-light/index.js +1 -1
  71. package/components/{status-light-DwUnjE3t.js → status-light-B1T3aGJs.js} +1 -1
  72. package/components/status-light-COApWq-B.cjs +21 -0
  73. package/components/strategies-Bb7zEjrU.cjs +18 -0
  74. package/components/{strategies-Cl59wdNZ.js → strategies-COS7mShJ.js} +11 -24
  75. package/components/table/controllers/table-announcer.d.ts +12 -0
  76. package/components/table/controllers/table-column-resize.d.ts +41 -0
  77. package/components/table/controllers/table-grid-navigation.d.ts +28 -0
  78. package/components/table/controllers/table-layout.d.ts +55 -0
  79. package/components/table/controllers/table-row-expansion.d.ts +45 -0
  80. package/components/table/controllers/table-virtualizer.d.ts +42 -0
  81. package/components/table/index.cjs +18 -0
  82. package/components/table/index.d.ts +32 -0
  83. package/components/table/index.js +20 -0
  84. package/components/table/table-body.d.ts +24 -0
  85. package/components/table/table-cell.d.ts +27 -0
  86. package/components/table/table-checkbox-cell.d.ts +41 -0
  87. package/components/table/table-columns.d.ts +45 -0
  88. package/components/table/table-disclosure-cell.d.ts +21 -0
  89. package/components/table/table-head-cell.d.ts +77 -0
  90. package/components/table/table-head.d.ts +34 -0
  91. package/components/table/table-model.d.ts +56 -0
  92. package/components/table/table-row-details.d.ts +29 -0
  93. package/components/table/table-row.d.ts +64 -0
  94. package/components/table/table-styles.d.ts +9 -0
  95. package/components/table/table-templates.d.ts +41 -0
  96. package/components/table/table.d.ts +197 -0
  97. package/components/table/types.d.ts +81 -0
  98. package/components/table-BckZkgeh.js +1601 -0
  99. package/components/table-Bcq2K21l.cjs +180 -0
  100. package/components/tabs/index.cjs +1 -1
  101. package/components/tabs/index.js +1 -1
  102. package/components/{tabs-DxOD4QNt.cjs → tabs-CMU8X4ho.cjs} +1 -1
  103. package/components/{tabs-BD_ATrBg.js → tabs-D8U2PxcE.js} +1 -1
  104. package/components/tags/index.cjs +1 -1
  105. package/components/tags/index.js +1 -1
  106. package/components/tags-D8F1o4UZ.cjs +47 -0
  107. package/components/tags-ZzY_q4TH.js +208 -0
  108. package/components/template-property-DNDi7lQv.js +47 -0
  109. package/components/template-property-yhcAmPXk.cjs +18 -0
  110. package/components/utils.cjs +1 -1
  111. package/components/utils.js +2 -1
  112. package/custom-elements.json +1 -1
  113. package/index.d.ts +1 -0
  114. package/package.json +9 -1
  115. package/standalone/accordion.js +1 -1
  116. package/standalone/action-bar.js +1 -1
  117. package/standalone/action-button.js +1 -1
  118. package/standalone/action-menu.js +5 -3
  119. package/standalone/avatar.js +1 -1
  120. package/standalone/badge.js +1 -1
  121. package/standalone/button.js +1 -1
  122. package/standalone/calendar.js +1 -1
  123. package/standalone/checkbox.js +1 -1
  124. package/standalone/chunks/action-button-BJGE_BDu.js +6 -0
  125. package/standalone/chunks/badge-SNXdnyCZ.js +7 -0
  126. package/standalone/chunks/button-DHan4NJY.js +4 -0
  127. package/standalone/chunks/{button-Dykw3TSO.js → button-DTL9dD2r.js} +1 -1
  128. package/standalone/chunks/{calendar-ZwUYkzVq.js → calendar-BOzu003d.js} +1 -1
  129. package/standalone/chunks/{checkbox-OQtakoP8.js → checkbox-DQ4wPgG_.js} +2 -2
  130. package/standalone/chunks/{clear-button-pVGfwye8.js → clear-button-3zpCVxG5.js} +1 -1
  131. package/standalone/chunks/{close-button-RpPiwBdf.js → close-button-C96dazyi.js} +1 -1
  132. package/standalone/chunks/{color-field-CrCF4kqZ.js → color-field-BFvUGE4L.js} +1 -1
  133. package/standalone/chunks/{color-menu-B5UOMYmX.js → color-menu-BIKuitbH.js} +2 -2
  134. package/standalone/chunks/{icon-Dy6J1QeX.js → icon-BypO7M7G.js} +1 -1
  135. package/standalone/chunks/luzmo-icons-B-pCv-xg.js +13 -0
  136. package/standalone/chunks/match-media-BMi7j6hf.js +2 -0
  137. package/standalone/chunks/{menu-nolJetlp.js → menu-DSMoQt1w.js} +1 -1
  138. package/standalone/chunks/{number-field-C3DYfl1s.js → number-field-B6BDXkL7.js} +3 -3
  139. package/standalone/chunks/{options-BjRSj630.js → options-CkmITqgV.js} +5 -5
  140. package/standalone/chunks/{picker-button-BeXTIgUt.js → picker-button-BZWqDoNQ.js} +1 -1
  141. package/{components/picker-BliQJlY_.cjs → standalone/chunks/picker-jZI5AjVJ.js} +31 -47
  142. package/standalone/chunks/{segments-factory-Ch3AAizU.js → segments-factory-Da9ojsLC.js} +1 -1
  143. package/standalone/chunks/strategies-C-vW4MlK.js +2 -0
  144. package/standalone/chunks/{swatch-m_4GcO2_.js → swatch-CGR_GWqO.js} +1 -1
  145. package/standalone/chunks/template-property-Dn64faHO.js +2 -0
  146. package/standalone/chunks/{text-field-BnZtyodU.js → text-field-4OKvLOXG.js} +1 -1
  147. package/standalone/chunks/{text-field-BrlDeJsx.js → text-field-C2oROxum.js} +1 -1
  148. package/standalone/clear-button.js +1 -1
  149. package/standalone/close-button.js +1 -1
  150. package/standalone/color-field.js +1 -1
  151. package/standalone/color-menu.js +1 -1
  152. package/standalone/color-picker.js +1 -1
  153. package/standalone/date-range-picker.js +1 -1
  154. package/standalone/date-time-picker.js +1 -1
  155. package/standalone/icon.js +1 -1
  156. package/standalone/manifest.json +25 -22
  157. package/standalone/menu.js +1 -1
  158. package/standalone/multi-language-field.js +1 -1
  159. package/standalone/notice.js +1 -1
  160. package/standalone/number-field.js +1 -1
  161. package/standalone/options.js +1 -1
  162. package/standalone/picker-button.js +1 -1
  163. package/standalone/picker.js +1 -1
  164. package/standalone/progress-steps.js +2 -2
  165. package/standalone/prompt-box.js +9 -9
  166. package/standalone/question-box.js +1 -1
  167. package/standalone/search.js +1 -1
  168. package/standalone/select.js +2 -2
  169. package/standalone/slider.js +1 -1
  170. package/standalone/status-light.js +1 -1
  171. package/standalone/swatch.js +1 -1
  172. package/standalone/table.js +185 -0
  173. package/standalone/tabs.js +1 -1
  174. package/standalone/tags.js +1 -1
  175. package/standalone/text-field.js +1 -1
  176. package/standalone/toast.js +1 -1
  177. package/standalone/utils.js +1 -1
  178. package/utils/index.d.ts +1 -0
  179. package/utils/template-property.d.ts +13 -0
  180. package/components/action-button-BRijXjEz.js +0 -138
  181. package/components/action-button-CX1uYbQp.cjs +0 -22
  182. package/components/action-menu-CwzRbF61.cjs +0 -56
  183. package/components/badge-D2Hjf-Ww.js +0 -96
  184. package/components/badge-D8pIDEoq.cjs +0 -23
  185. package/components/button-Bvnidb4x.cjs +0 -20
  186. package/components/button-DIV_j_U3.js +0 -126
  187. package/components/select-DsGVB01K.cjs +0 -158
  188. package/components/status-light-D3hdx8Pd.cjs +0 -21
  189. package/components/strategies-BwNbUXYS.cjs +0 -18
  190. package/components/tags-BIpFgOYy.js +0 -208
  191. package/components/tags-fLCGajv_.cjs +0 -47
  192. package/standalone/chunks/action-button-BzzPBqt5.js +0 -6
  193. package/standalone/chunks/badge-DD-tMgzi.js +0 -7
  194. package/standalone/chunks/button-Bv3v7VbN.js +0 -4
  195. package/standalone/chunks/luzmo-icons-CJa-aByT.js +0 -13
  196. package/standalone/chunks/picker-hbMQOkUX.js +0 -108
  197. package/standalone/chunks/strategies-kad_0dTB.js +0 -2
@@ -1,158 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2026 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
- require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focusable-B6h03pAe.cjs");require("./icon-zOPAWCdx.cjs"),require("./popover-BsdqkvKI.cjs");const r=require("./dependency-manger-BSaHw9ju.cjs"),i=require("./strategies-BwNbUXYS.cjs");require("./progress-circle-bO_VAX3N.cjs");const a=require("./pending-state-CGHvTtKR.cjs");require("./overlay-Dn7EbA_W.cjs"),require("./tooltip-DjOW52n2.cjs");const o=require("./options-CP9V2CSJ.cjs");let s=require("lit"),c=require("lit/decorators.js"),l=require("@luzmo/icons"),u=require("lit/directives/if-defined.js"),d=require("lit/directives/class-map.js");var f=(e,t)=>{let n=getComputedStyle(e).getPropertyValue(t);for(;!n&&e.parentElement;)e=e.parentElement,n=getComputedStyle(e).getPropertyValue(t);return n.trim()},p=`:host{font-family:var(--luzmo-select-font-family,var(--select-font-family));font-size:var(--luzmo-select-font-size,var(--select-font-size))}#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}#icon{font-size:var(--luzmo-select-font-size,var(--select-font-size));margin-inline-end:var(--luzmo-select-spacing-text-to-icon,var(--select-spacing-text-to-icon))}@media (forced-colors:active){:host{--highcontrast-select-focus-indicator-color:Highlight;--highcontrast-select-border-color-default:ButtonBorder;--highcontrast-select-border-color-hover:Highlight;--highcontrast-select-border-color-disabled:GrayText;--highcontrast-select-content-color-default:ButtonText;--highcontrast-select-content-color-disabled:GrayText;--highcontrast-select-background-color:ButtonFace}#button:focus-visible{--highcontrast-select-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(--select-minimum-width-multiplier) * var(--luzmo-select-button-block-size,var(--select-button-block-size)));block-size:var(--luzmo-select-button-block-size,var(--select-button-block-size));border-width:var(--luzmo-select-button-border-width,var(--select-button-border-width));border-radius:var(--luzmo-select-button-border-radius,var(--select-button-border-radius));box-shadow:var(--luzmo-select-button-box-shadow,var(--select-button-box-shadow));transition:background-color var(--luzmo-select-animation-duration,var(--select-animation-duration)), box-shadow var(--luzmo-select-animation-duration,var(--select-animation-duration)), border-color var(--luzmo-select-animation-duration,var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-default,var(--select-background-color-default)));border-style:solid;border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-default,var(--select-border-color-default)));margin-block-start:var(--luzmo-select-spacing-label-to-select,var(--select-spacing-label-to-select));padding-block:0;padding-inline-start:var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content));padding-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon,var(--select-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width,var(--select-button-border-width)) * 2);inline-size:calc(100% + var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width,var(--select-button-border-width)) * 2);border-style:solid;border-width:var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width));border-radius:calc(var(--luzmo-select-button-border-radius,var(--select-button-border-radius)) + var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width,var(--select-button-border-width)));border-color:#0000;margin-block-start:calc((var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width,var(--select-button-border-width))) * -1);margin-inline-start:calc((var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width,var(--select-button-border-width))) * -1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-active,var(--select-background-color-active)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-active,var(--select-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-active,var(--select-font-color-active)))}#button:focus-visible{background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-key-focus,var(--select-background-color-key-focus)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-key-focus,var(--select-border-color-key-focus)));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-key-focus,var(--select-font-color-key-focus)));outline:none}#button:focus-visible:after{border-color:var(--highcontrast-select-focus-indicator-color,var(--luzmo-select-focus-indicator-color,var(--select-focus-indicator-color)))}#button.placeholder:focus-visible{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-key-focus,var(--select-font-color-key-focus)))}#button:focus-visible .disclosure-icon,#button:focus-visible .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-key-focus,var(--select-icon-color-key-focus)))}:host([open]) #button:not(:disabled,.is-disabled){color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default-open,var(--select-font-color-default-open)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-default-open,var(--select-background-color-default-open)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-default-open,var(--select-border-color-default-open)))}:host([open]) #button:not(:disabled,.is-disabled) .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled) .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-default-open,var(--select-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-default,var(--select-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-error,var(--select-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-active,var(--select-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-default-open,var(--select-border-color-error-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-error-key-focus,var(--select-border-color-error-key-focus)))}:host([pending]) #button .disclosure-icon,:host([pending]) #button .clear-icon{color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-icon-color-disabled,var(--select-icon-color-disabled)))}.icon{flex-shrink:0}.label{white-space:nowrap;font-size:var(--luzmo-select-font-size,var(--select-font-size));line-height:var(--luzmo-select-button-line-height,var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight,var(--select-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;overflow:hidden}.label.placeholder{font-weight:var(--luzmo-select-placeholder-font-weight,var(--select-font-weight));font-style:var(--luzmo-select-placeholder-font-style,var(--select-placeholder-font-style));transition:color var(--luzmo-select-animation-duration,var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-active,var(--select-font-color-active)))}.clear-icon,.disclosure-icon{vertical-align:top;transition:color var(--luzmo-select-animation-duration,var(--select-animation-duration)) ease-out;color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-default,var(--select-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.disclosure-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-disclosure-icon,var(--select-spacing-icon-to-disclosure-icon))}.clear-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-clear-icon,var(--select-spacing-icon-to-clear-icon))}.disclosure-icon:active{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-active,var(--select-icon-color-active)))}luzmo-progress-circle,.validation-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon,var(--select-spacing-text-to-icon))}.icon-container{height:100%;font-size:var(--luzmo-select-disclosure-icon-size,var(--select-disclosure-icon-size));align-items:center;display:flex;position:relative}.icon-container.disclosure-icon{margin-inline-end:0}.label~.disclosure-icon,.label~.clear-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon,var(--select-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--luzmo-select-inline-edge-to-content-quiet,var(--select-inline-edge-to-content-quiet));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)));background-color:initial;background-color:var(--highcontrast-select-background-color,transparent);box-shadow:none;border:none;border-radius:0;margin-block-start:calc(var(--luzmo-select-spacing-label-to-select-quiet,var(--select-spacing-label-to-select-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .disclosure-icon{margin-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon-quiet,var(--select-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{border:none;block-size:auto;inline-size:auto}@media (hover:hover){#button:hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-hover,var(--select-font-color-hover)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-hover,var(--select-background-color-hover)));border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-hover,var(--select-border-color-hover)))}#button:hover .disclosure-icon,#button:hover .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-hover,var(--select-icon-color-hover)))}#button:hover .clear-icon:hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-clear-icon-color-hover,var(--select-icon-color-focus)))}:host([open]):not([quiet]) #button:not(:disabled,.is-disabled):hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-hover-open,var(--select-font-color-hover-open)));background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-hover-open,var(--select-background-color-hover-open)));border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-hover-open,var(--select-border-color-hover-open)))}:host([open]) #button:not(:disabled,.is-disabled):hover .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled):hover .clear-icon{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-icon-color-hover-open,var(--select-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-error-hover,var(--select-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover,var(--luzmo-select-border-color-error-hover-open,var(--select-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-hover,var(--select-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-select-background-color,transparent)!important}}:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-select-background-color,transparent)}:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--luzmo-select-focus-indicator-width,var(--select-focus-indicator-width)) 0 0 var(--highcontrast-select-focus-indicator-color,var(--luzmo-select-focus-indicator-color,var(--select-focus-indicator-color)));margin:calc((var(--luzmo-select-focus-indicator-gap,var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width,var(--select-button-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-select-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-disabled,var(--select-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-select-border-color-disabled,transparent);color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-font-color-disabled,var(--select-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .disclosure-icon,:host([disabled]) #button .clear-icon,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .disclosure-icon,#button:disabled .clear-icon,#button:disabled .validation-icon{color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-icon-color-disabled,var(--select-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-select-content-color-disabled,var(--luzmo-select-font-color-disabled,var(--select-font-color-disabled)))}#popover{max-width:var(--luzmo-select-popover-max-width,var(--select-popover-max-width));min-width:var(--luzmo-select-popover-min-width,var(--select-popover-min-width));width:var(--luzmo-select-popover-width,var(--select-popover-width))}#popover.search-on{padding:0 0 var(--luzmo-popover-content-area-spacing-vertical,var(--popover-content-area-spacing-vertical)) 0!important}#search-container{border-bottom:var(--luzmo-select-search-container-border-bottom-width,var(--select-search-container-border-bottom-width)) solid var(--luzmo-select-search-container-border-bottom-color,var(--select-search-container-border-bottom-color));flex:none;display:flex;position:relative}#search-icon{left:var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content));color:var(--luzmo-select-search-icon-color,var(--select-search-icon-color));font-size:var(--luzmo-select-search-icon-height,var(--select-search-icon-height));width:var(--luzmo-select-search-icon-width,var(--select-search-icon-width));text-align:center;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0}#search:focus-within+#search-icon,#search:focus+#search-icon{color:var(--luzmo-select-search-icon-color-focus,var(--select-search-icon-color-focus))}#search{box-sizing:border-box;border-top-left-radius:var(--luzmo-popover-border-radius,var(--popover-border-radius));border-top-right-radius:var(--luzmo-popover-border-radius,var(--popover-border-radius));background-color:var(--luzmo-select-search-background-color,var(--select-search-background-color));width:100%;color:var(--luzmo-select-search-color,var(--select-search-color));height:var(--luzmo-select-button-block-size,var(--select-button-block-size));line-height:var(--luzmo-select-button-block-size,var(--select-button-block-size));padding-left:calc(var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content)) + var(--luzmo-select-spacing-search-icon-to-text,var(--select-spacing-search-icon-to-text)) + var(--luzmo-select-search-icon-width,var(--select-search-icon-width)));padding-right:var(--luzmo-select-inline-edge-to-content,var(--select-inline-edge-to-content));font-size:var(--luzmo-select-font-size,var(--select-font-size));font-family:var(--luzmo-select-font-family,var(--select-font-family));line-height:var(--luzmo-select-button-line-height,var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight,var(--select-font-weight));border:var(--luzmo-select-search-input-border-bottom-width,var(--select-search-input-border-bottom-width)) solid var(--luzmo-select-search-input-border-bottom-color,var(--select-search-input-border-bottom-color));outline:none}#no-results{color:var(--luzmo-select-no-results-color,var(--select-no-results-color));font-style:var(--luzmo-select-no-results-font-style,var(--select-no-results-font-style));height:var(--luzmo-select-no-results-height,var(--select-no-results-height));padding-inline:var(--luzmo-select-no-results-spacing-edge-to-text,var(--select-no-results-spacing-edge-to-text));align-items:center;display:flex}:host{--select-popover-max-width:300px;--select-popover-min-width:160px;--select-font-family:var(--luzmo-font-family);--select-font-size:var(--luzmo-font-size);--select-font-weight:var(--luzmo-font-weight);--select-spacing-search-icon-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-search-icon-height:var(--luzmo-font-size);--select-search-icon-width:var(--luzmo-font-size);--select-search-icon-color:var(--luzmo-disabled-color);--select-search-icon-color-focus:var(--luzmo-font-color);--select-search-color:var(--luzmo-font-color);--select-search-background-color:var(--luzmo-background-color);--select-search-container-border-bottom-width:var(--luzmo-border-width);--select-search-container-border-bottom-color:var(--luzmo-border-color);--select-search-input-border-bottom-width:var(--luzmo-border-width);--select-search-input-border-bottom-color:transparent;--select-background-color-default:var(--luzmo-background-color);--select-background-color-default-open:var(--luzmo-background-color-hover);--select-background-color-active:var(--luzmo-background-color-down);--select-background-color-hover:var(--luzmo-background-color-hover);--select-background-color-hover-open:var(--luzmo-background-color-down);--select-background-color-key-focus:var(--luzmo-background-color-down);--select-border-color-default:var(--luzmo-border-color);--select-border-color-default-open:var(--luzmo-border-color-hover);--select-border-color-hover:var(--luzmo-border-color);--select-border-color-hover-open:var(--luzmo-border-color-hover);--select-border-color-active:var(--luzmo-border-color);--select-border-color-key-focus:var(--luzmo-border-color);--select-button-border-width:var(--luzmo-border-width);--select-placeholder-font-style:var(--luzmo-font-style);--select-button-line-height:var(--luzmo-line-height);--select-button-box-shadow:0px 1px 3px 0px var(--luzmo-shadow-color);--select-button-block-size:var(--luzmo-component-height);--select-button-border-radius:var(--luzmo-border-radius);--select-button-border-radius-reset:0;--select-inline-edge-to-content:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-text-to-icon-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-icon-to-disclosure-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-icon-to-clear-icon:var(--select-spacing-icon-to-disclosure-icon);--select-inline-edge-to-content-quiet:0px;--select-spacing-label-to-select:0px;--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-edge-to-disclosure-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--select-spacing-edge-to-disclosure-icon-quiet:0px;--select-animation-duration:var(--luzmo-animation-duration);--select-font-color-default:var(--luzmo-font-color);--select-font-color-default-open:var(--luzmo-font-color-hover);--select-font-color-hover:var(--luzmo-font-color-hover);--select-font-color-hover-open:var(--luzmo-font-color-down);--select-font-color-active:var(--luzmo-font-color-focus);--select-font-color-key-focus:var(--luzmo-font-color-focus);--select-icon-color-default:var(--luzmo-font-color);--select-icon-color-default-open:var(--luzmo-font-color-hover);--select-icon-color-hover:var(--luzmo-font-color-hover);--select-icon-color-hover-open:var(--luzmo-font-color-hover);--select-icon-color-active:var(--luzmo-font-color-focus);--select-icon-color-key-focus:var(--luzmo-font-color-focus);--select-border-color-error-default:var(--luzmo-negative-color);--select-border-color-error-default-open:var(--luzmo-negative-color-down);--select-border-color-error-hover:var(--luzmo-negative-color-hover);--select-border-color-error-hover-open:var(--luzmo-negative-color-down);--select-border-color-error-active:var(--luzmo-negative-color-down);--select-border-color-error-key-focus:var(--luzmo-negative-color-focus);--select-icon-color-error:var(--luzmo-negative-color);--select-background-color-disabled:var(--luzmo-background-color-disabled);--select-font-color-disabled:var(--luzmo-disabled-color);--select-icon-color-disabled:var(--luzmo-disabled-color);--select-focus-indicator-gap:var(--luzmo-indicator-gap);--select-focus-indicator-width:var(--luzmo-indicator-width);--select-focus-indicator-color:var(--luzmo-indicator-color);--select-disclosure-icon-size:var(--luzmo-font-size-s);--select-no-results-height:var(--select-button-block-size);--select-no-results-color:var(--select-font-color-disabled);--select-no-results-font-style:italic;--select-no-results-spacing-edge-to-text:var(--select-inline-edge-to-content)}:host([size=s]){--select-button-block-size:var(--luzmo-component-height-s);--select-font-size:var(--luzmo-font-size-s);--select-search-icon-height:var(--luzmo-font-size-s);--select-search-icon-width:var(--luzmo-font-size-s);--select-popover-max-width:280px;--select-popover-min-width:140px;--select-spacing-search-icon-to-text:var(--luzmo-spacing-3);--select-inline-edge-to-content:var(--luzmo-spacing-3);--select-spacing-text-to-icon:var(--luzmo-spacing-3);--select-spacing-text-to-icon-inline-end:var(--luzmo-spacing-3);--select-spacing-icon-to-disclosure-icon:var(--luzmo-spacing-3);--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-3));--select-spacing-edge-to-disclosure-icon:var(--luzmo-spacing-3);--select-disclosure-icon-size:var(--luzmo-font-size-s)}:host([size=l]){--select-button-block-size:var(--luzmo-component-height-l);--select-font-size:var(--luzmo-font-size-l);--select-search-icon-height:var(--luzmo-font-size-l);--select-search-icon-width:var(--luzmo-font-size-l);--select-popover-max-width:360px;--select-popover-min-width:220px;--select-spacing-search-icon-to-text:var(--luzmo-spacing-4);--select-inline-edge-to-content:var(--luzmo-spacing-4);--select-spacing-text-to-icon:var(--luzmo-spacing-4);--select-spacing-text-to-icon-inline-end:var(--luzmo-spacing-4);--select-spacing-icon-to-disclosure-icon:var(--luzmo-spacing-4);--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-4));--select-spacing-edge-to-disclosure-icon:var(--luzmo-spacing-4);--select-disclosure-icon-size:var(--luzmo-font-size)}:host([size=xl]){--select-button-block-size:var(--luzmo-component-height-xl);--select-font-size:var(--luzmo-font-size-xl);--select-search-icon-height:var(--luzmo-font-size-xl);--select-search-icon-width:var(--luzmo-font-size-xl);--select-popover-max-width:400px;--select-popover-min-width:260px;--select-spacing-search-icon-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-inline-edge-to-content:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-text-to-icon:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-text-to-icon-inline-end:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-icon-to-disclosure-icon:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-label-to-select-quiet:calc(-1 * var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-spacing-edge-to-disclosure-icon:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--select-disclosure-icon-size:var(--luzmo-font-size-l)}:host([variant=highlight]) ::slotted(luzmo-option[selected]){--option-highlight-label-content-color:var(--luzmo-primary-inverse-color);--option-label-icon-color-default:var(--luzmo-primary-inverse-color);--menu-checkmark-display:var(--menu-checkmark-display-hidden);background-color:var(--luzmo-option-highlight-label-background-color,var(--option-highlight-label-background-color,var(--luzmo-border-color)));padding-inline-start:var(--luzmo-option-label-inline-edge-to-content,var(--option-label-inline-edge-to-content))}:host{vertical-align:top;max-inline-size:100%;inline-size:var(--luzmo-select-inline-size,var(--select-inline-size));min-inline-size:calc(var(--select-minimum-width-multiplier) * var(--luzmo-select-block-size,var(--select-block-size)));display:inline-flex}: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{user-select:inherit}.validation-icon{flex-shrink:0}luzmo-overlay{pointer-events:none}luzmo-options{pointer-events:initial}:host>#no-results,:host>luzmo-options{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--select-placeholder-text-color-key-focus,var(--alias-placeholder-text-color-hover))}.visually-hidden{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0 -1px -1px 0;padding:0;position:absolute;overflow:hidden}luzmo-overlay:not(:defined){display:none}#button.remove-focus-ring-safari-hack:focus-visible{background-color:var(--highcontrast-select-background-color,var(--luzmo-select-background-color-default,var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-default,var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-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-select-background-color,var(--luzmo-select-background-color-default,var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default,var(--luzmo-select-border-color-default,var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default,var(--luzmo-select-font-color-default,var(--select-font-color-default)))}`,m=()=>s.html`
19
- <div class="disclosure-icon icon">
20
- ${(0,l.luzmoIcon)(l.luzmoAngleDown,{className:`indicator`})}
21
- </div>
22
- `,h=()=>s.html`
23
- <div class="icon-container validation-icon icon">
24
- ${(0,l.luzmoIcon)(l.luzmoAlert)}
25
- </div>
26
- `,g=()=>s.html`
27
- <div class="icon-container search-icon icon" id="search-icon">
28
- ${(0,l.luzmoIcon)(l.luzmoSearch)}
29
- </div>
30
- `,_=`select-option-menu`,v=class extends t.n(n.t,{noDefaultSize:!0}){static get styles(){return[(0,s.unsafeCSS)(p)]}get selfManageFocusElement(){return this._selfManageFocusElement}constructor(){super(),this.disabled=!1,this.focused=!1,this.variant=`checkmarks`,this.emphasized=!1,this.invalid=!1,this.search=`auto`,this.noWrap=!1,this.retrieving=!1,this.pending=!1,this.clearable=!1,this.hideDropdownIcon=!1,this.pendingLabel=`Pending`,this.searchLabel=`Search`,this.noResultsLabel=`No results`,this.noDataLabel=`No data`,this.multipleLabelTemplate=`Selected {count} items`,this.label=`Select`,this.open=!1,this.readonly=!1,this.placement=`bottom-end`,this.quiet=!1,this.value=[],this.options=[],this.selects=`multiple`,this.dependencyManager=new r.t(this),this.isMobile=new i.i(this,i.n),this.listRole=`listbox`,this.itemRole=`option`,this.hasRenderedOverlay=!1,this._selfManageFocusElement=!1,this.selectionPromise=Promise.resolve(),this.enterKeydownOn=null,this._selectedOptions=[],this.handleSlottableRequest=e=>{},this.renderAngleIcon=()=>m(),this.renderAlertIcon=()=>h(),this._popoverDependencyRegistered=!1,this.handleEnterKeydown=e=>{if(e.code===`Enter`){if(this.enterKeydownOn){e.preventDefault();return}this.enterKeydownOn=e.target,this.addEventListener(`keyup`,e=>{e.code===`Enter`&&(this.enterKeydownOn=null)},{once:!0})}},this.clearValue=e=>{e.preventDefault(),e.stopPropagation(),this.value=[],this.strategy&&(this.strategy.preventNextToggle=`no`),this.open=!1,this.strategy&&(this.strategy.open=!1),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}}))},this.handleEscape=e=>{e.code===`Escape`&&this.open&&(e.stopPropagation(),e.preventDefault(),this.toggle(!1))},this.handleKeydown=e=>{let{code:t}=e;if(t===`Escape`){this.handleEscape(e);return}if([`Delete`,`Backspace`].includes(t)){this.clearValue(e);return}if(this.focused=!0,!(!t.startsWith(`Arrow`)||this.readonly||this.pending)){if(t===`ArrowUp`||t===`ArrowDown`){this.toggle(!0),e.preventDefault();return}if(e.preventDefault(),this.selects===`single`){let e=t===`ArrowRight`?1:-1,n=this.options.findIndex(e=>e?.value?.toString()===this.value?.[0]?.toString()),r=(this.options.length+n+e)%this.options.length,i=this.options.length;for(;(this.options?.[r]?.disabled||o.r(this.options?.[r]))&&i;)--i,r=(this.options.length+r+e)%this.options.length;let a=this.options[r];if(a?.disabled||o.r(a))return;this.value=[a.value??null],this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}}))}}},this.pendingStateController=new a.t(this)}get focusElement(){return this.open?this.search===`on`||this.search===`auto`&&this.options?.length>20?this.searchInput: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){let t=e?.detail?.value??[];JSON.stringify(this.value)!==JSON.stringify(t)&&(this.value=t),this.strategy&&(this.strategy.preventNextToggle=`no`),e.stopPropagation(),(!e.cancelable||this.selects===`single`)&&(this.open=!1,this.strategy&&(this.strategy.open=!1)),e.preventDefault(),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}}))}handleButtonFocus(e){this.strategy?.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(){this.strategy?.abort(),this.strategy=new i.t.desktop(this.button,this),this.strategy?.overlay&&(this.strategy.overlay.type=`auto`,this.strategy.overlay.placement=this.placement)}connectedCallback(){super.connectedCallback(),this.ensurePopoverDependency()}disconnectedCallback(){this.close(),this.strategy?.releaseDescription(),super.disconnectedCallback()}handleTooltipSlotchange(e){this.tooltipEl=e.target.assignedElements()[0]}get labelTemplate(){let e=this._selectedOptions?.length===1&&this._selectedOptions[0]?.icon,t=s.html`<div
31
- id="icon"
32
- ?hidden=${typeof this.icons==`string`||this.value?.length>1||!e}
33
- >
34
- ${e?(0,l.luzmoIcon)(this._selectedOptions[0].icon):s.nothing}
35
- </div>`,n=e=>e.replaceAll(/{([^}]+)}/g,(e,t)=>t===`count`?String(this.value?.length):e),r={"visually-hidden":this.icons===`only`&&this.value?.length>0,placeholder:!this.value?.length,label:!0},i;i=this.value?.length?this.value.length===1?s.html`<span
36
- >${this._selectedOptions?.[0]?.shortLabel??this._selectedOptions?.[0]?.label??this.value?.[0]}</span
37
- >`:s.html`<span
38
- >${n(this.multipleLabelTemplate)}</span
39
- >`:s.html`
40
- <slot name="label" id="label">
41
- <span aria-hidden="true"> ${this.label} </span>
42
- </slot>
43
- `;let a=this.value?.length?s.html`
44
- <div aria-hidden="true" class="visually-hidden" id="applied-label">
45
- ${this.label}
46
- <slot name="label"></slot>
47
- </div>
48
- `:s.html` <span hidden id="applied-label">${this.label}</span> `;return[s.html`
49
- ${this.value?.length===1?t:s.nothing}
50
- <div
51
- id=${(0,u.ifDefined)(this.value?.length?`label`:void 0)}
52
- class=${(0,d.classMap)(r)}
53
- >
54
- ${i}
55
- </div>
56
- ${a}
57
- ${this.invalid&&!this.pending?s.html` ${this.renderAlertIcon()} `:s.nothing}
58
- ${this.pendingStateController.renderPendingState()}
59
- ${this.clearable&&!this.readonly&&this.value?.length>0?s.html`
60
- <div class="icon-container clear-icon icon" @click=${this.clearValue}>
61
- ${(0,l.luzmoIcon)(l.luzmoClose14)}
62
- </div>
63
- `:s.nothing}
64
- ${this.readonly||this.hideDropdownIcon?s.nothing:this.renderAngleIcon()}
65
- <slot
66
- aria-hidden="true"
67
- name="tooltip"
68
- id="tooltip"
69
- @slotchange=${this.handleTooltipSlotchange}
70
- ></slot>
71
- `]}update(e){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),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener(`keydown`,this.handleKeydown)}willUpdate(e){let t=e.has(`open`),n=e.has(`value`),r=e.has(`options`),i=e.has(`selects`),a=e.get(`open`);i&&this.selects===`single`&&this.value?.length>1&&(console.warn(`luzmo-select is being set to a single value given the selects property changed to 'single'`),this.value=this.value.slice(0,1)),t&&a===!1&&this.open&&this.searchString&&(this.searchString=``),(n||r)&&this.setSelectedOptionsFromValue()}updated(e){super.updated(e);let t=e.has(`options`),n=e.has(`open`),r=e.has(`placement`);if(n&&(this.strategy.open=this.open,this.open===!1&&this.optionsMenu.scrollToTop()),t){let e=this.options?.length??0;for(let t of this.options??[])t.children?.length&&(e+=t.children.length);if(e>25){let e=(e,t=e.label)=>(t?.length??0)+(e.children?.length?0:e.shortcut?.length??0),t=this.options[0];for(let n of this.options)e(n)>e(t)&&(t=n);for(let n of this.options)if(n.children?.length)for(let r of n.children){let i=`${n.label} (${r.label})`;e(r,i)>e(t)&&(t={...r,label:i})}this._estimatePopoverWidth(t)}else this.style.removeProperty(`--select-popover-width`)}this.strategy?.overlay&&(this.strategy.overlay.type!==`auto`&&(this.strategy.overlay.type=`auto`),(r||this.strategy.overlay.type===`auto`)&&(this.strategy.overlay.placement=this.placement))}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener(),this.bindEvents()}_getCssVarInPixels(e){let t=f(this,e),n;if(t.endsWith(`rem`)){let e=Number.parseFloat(getComputedStyle(document.documentElement).fontSize);n=Number.parseFloat(t)*e}else if(t.endsWith(`em`)){let e=Number.parseFloat(getComputedStyle(this).fontSize);n=Number.parseFloat(t)*e}else n=Number.parseFloat(t);return n>=0?n:void 0}_estimatePopoverWidth(e){let t=this._getCssVarInPixels(`--luzmo-select-font-size`)??this._getCssVarInPixels(`--select-font-size`),n=this._getCssVarInPixels(`--luzmo-select-popover-min-width`)??this._getCssVarInPixels(`--select-popover-min-width`),r=this._getCssVarInPixels(`--luzmo-spacing-5`),i=document.createElement(`luzmo-options`);i.style.setProperty(`--luzmo-select-font-size`,`${t}px`),i.options=[e],i.value=[e.value??null],i.variant=this.variant,i.size=this.size,i.style.position=`absolute`,i.style.left=`-9999px`,i.style.top=`-9999px`,i.style.opacity=`0`,i.style.width=`auto`,document.body.append(i),i.updateComplete.then(()=>{let e=i.offsetWidth+(r??0);return e>(n??0)?this.style.setProperty(`--select-popover-width`,`${e}px`):this.style.removeProperty(`--select-popover-width`),i.remove(),e}).catch(e=>{console.error(e),i.remove()})}get dismissHelper(){return s.html`
72
- <div class="visually-hidden">
73
- <button
74
- tabindex="-1"
75
- aria-label="Dismiss"
76
- @click=${this.close}
77
- ></button>
78
- </div>
79
- `}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),s.html`
80
- <span
81
- id="focus-helper"
82
- tabindex=${this.focused||this.open?`-1`:`0`}
83
- @focus=${this.handleHelperFocus}
84
- aria-describedby=${_}
85
- ></span>
86
- <button
87
- aria-controls=${(0,u.ifDefined)(this.open?`menu`:void 0)}
88
- aria-describedby="tooltip"
89
- aria-expanded=${this.open?`true`:`false`}
90
- aria-haspopup="true"
91
- aria-labelledby="loader icon label applied-label"
92
- id="button"
93
- class=${(0,u.ifDefined)(this.labelAlignment?`label-${this.labelAlignment}`:void 0)}
94
- @blur=${this.handleButtonBlur}
95
- @keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
96
- ?disabled=${this.disabled}
97
- tabindex="-1"
98
- >
99
- ${this.labelTemplate}
100
- </button>
101
- ${this.renderMenu} ${this.renderDescriptionSlot}
102
- `}get renderDescriptionSlot(){return s.html`
103
- <div id=${_}>
104
- <slot name="description"></slot>
105
- </div>
106
- `}setSelectedOptionsFromValue(){let e=[];for(let t of this.options){let n=t?.value;!t.children?.length&&this.value?.includes(n??null)&&e.push(t);for(let n of t.children??[]){let r=n?.value;this.value?.includes(r??null)&&e.push({...n,label:`${t.label} (${n.label})`})}}this._selectedOptions=e}renderSearchInput(){return s.html`
107
- <div id="search-container">
108
- <input
109
- type="text"
110
- id="search"
111
- .placeholder=${this.searchLabel}
112
- @input=${this.handleSearchInput}
113
- @keydown=${this.handleSearchKeydown}
114
- .value=${this.searchString??``}
115
- .aria-label=${this.searchLabel}
116
- autocomplete="off"
117
- tabindex="0"
118
- role="searchbox"
119
- />
120
- ${g()}
121
- </div>
122
- `}filterOptions(){let e=this.searchString?.toLowerCase()??``,t=this.options.filter(t=>o.r(t)?!0:!!(typeof t==`string`?t:t?.label)?.toString()?.toLowerCase()?.includes(e));if(!e)return t;let n=t.filter((e,n)=>{if(!o.r(e))return!0;for(let e of t.slice(n+1)){if(e?.header)return!1;if(!o.r(e))return!0}return!1});return n.filter((e,t)=>!e?.divider||t>0&&!n[t-1]?.divider)}get renderMenu(){let e=this.filterOptions(),t=e.some(e=>!o.r(e)),n=s.html`
123
- <luzmo-options
124
- .variant=${this.variant}
125
- aria-labelledby="applied-label"
126
- id="menu"
127
- ?emphasized=${this.emphasized}
128
- .selects=${this.selects??`multiple`}
129
- .options=${e}
130
- .value=${this.value}
131
- .optionIconRenderer=${this.optionIconRenderer}
132
- ?pending=${this.retrieving}
133
- ?no-wrap=${this.noWrap}
134
- @change=${this.handleChange}
135
- @keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
136
- @luzmo-scrolled=${this.handleScrolled}
137
- @luzmo-exceeded-top=${this.handleExceededTop}
138
- role=${this.listRole}
139
- size=${this.size}
140
- tabindex="0"
141
- >
142
- </luzmo-options>
143
- ${!t&&!this.retrieving&&!this.pending?s.html`<div id="no-results">
144
- ${this.searchString?this.noResultsLabel:this.noDataLabel}
145
- </div>`:s.nothing}
146
- `;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open,this.hasRenderedOverlay?(this.dependencyManager.loaded&&this.dependencyManager.add(`luzmo-overlay`),this.renderOverlay(n)):n}renderOverlay(e){return this.strategy?.overlay===void 0?e:((0,s.render)(this.renderContainer(e),this.strategy?.overlay,{host:this}),this.strategy?.overlay)}ensurePopoverDependency(){this._popoverDependencyRegistered||(this._popoverDependencyRegistered=!0,this.dependencyManager.add(`luzmo-popover`))}renderContainer(e){let t=this.search===`on`||this.searchString&&this.searchString?.length>0||this.search===`auto`&&this.options?.length>20,n=s.html`
147
- ${t?this.renderSearchInput():s.nothing} ${this.dismissHelper} ${e} ${this.dismissHelper}
148
- `;return s.html`
149
- <luzmo-popover
150
- class=${(0,u.ifDefined)(t?`search-on`:void 0)}
151
- id="popover"
152
- size=${this.size}
153
- role="presentation"
154
- placement=${this.placement}
155
- >
156
- ${n}
157
- </luzmo-popover>
158
- `}async getUpdateComplete(){let e=await super.getUpdateComplete();return await this.selectionPromise,this.overlayElement&&await this.overlayElement.updateComplete,e}handleScrolled(e){e.stopPropagation(),e.preventDefault(),this.dispatchEvent(new CustomEvent(`luzmo-scrolled`,{bubbles:!0,composed:!0,cancelable:!0,detail:{first:e?.detail?.first,last:e?.detail?.last}}))}handleExceededTop(e){e.preventDefault(),e.stopPropagation(),this.searchInput?this.searchInput.focus():this.toggle(!1)}handleSearchInput(e){let t=e.target.value;t!==this.searchString&&(this.searchString=t,this.dispatchEvent(new CustomEvent(`luzmo-search`,{bubbles:!0,composed:!0,cancelable:!0,detail:{string:this.searchString}})))}handleSearchKeydown(e){if(e.code===`Escape`){this.searchString?this.searchString=``:this.handleEscape(e);return}if(e.code===`ArrowDown`){this.optionsMenu.focus(),e.preventDefault(),e.stopPropagation();return}else if(e.code===`ArrowUp`){this.toggle(!1);return}}};e.t([(0,c.query)(`#button`)],v.prototype,`button`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`disabled`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`focused`,void 0),e.t([(0,c.property)({type:String,reflect:!0})],v.prototype,`icons`,void 0),e.t([(0,c.property)({type:String,reflect:!0})],v.prototype,`variant`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`emphasized`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`invalid`,void 0),e.t([(0,c.property)({type:String,reflect:!0})],v.prototype,`search`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0,attribute:`no-wrap`})],v.prototype,`noWrap`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`retrieving`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`pending`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`clearable`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0,attribute:`hide-dropdown-icon`})],v.prototype,`hideDropdownIcon`,void 0),e.t([(0,c.property)({type:String,attribute:`pending-label`})],v.prototype,`pendingLabel`,void 0),e.t([(0,c.property)({type:String,attribute:`search-label`})],v.prototype,`searchLabel`,void 0),e.t([(0,c.property)({type:String,attribute:`no-results-label`})],v.prototype,`noResultsLabel`,void 0),e.t([(0,c.property)({type:String,attribute:`no-data-label`})],v.prototype,`noDataLabel`,void 0),e.t([(0,c.property)({type:String,attribute:`multiple-label-template`,reflect:!0})],v.prototype,`multipleLabelTemplate`,void 0),e.t([(0,c.property)({type:String,reflect:!0})],v.prototype,`label`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`open`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`readonly`,void 0),e.t([(0,c.state)()],v.prototype,`labelAlignment`,void 0),e.t([(0,c.state)()],v.prototype,`displayLabelContent`,void 0),e.t([(0,c.state)()],v.prototype,`searchString`,void 0),e.t([(0,c.query)(`luzmo-options`)],v.prototype,`optionsMenu`,void 0),e.t([(0,c.query)(`#search`)],v.prototype,`searchInput`,void 0),e.t([(0,c.query)(`luzmo-overlay`)],v.prototype,`overlayElement`,void 0),e.t([(0,c.property)({type:String,reflect:!0})],v.prototype,`placement`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],v.prototype,`quiet`,void 0),e.t([(0,c.property)({type:Array,hasChanged(e,t){return JSON.stringify(e??[])!==JSON.stringify(t??[])},converter:{fromAttribute:e=>{if(!e||e===``)return[];try{return JSON.parse(e)}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],v.prototype,`value`,void 0),e.t([(0,c.property)({type:Array,hasChanged(e,t){return JSON.stringify(e??[])!==JSON.stringify(t??[])}})],v.prototype,`options`,void 0),e.t([(0,c.property)({attribute:!1})],v.prototype,`optionIconRenderer`,void 0),e.t([(0,c.property)({type:String,reflect:!0})],v.prototype,`selects`,void 0),customElements.get(`luzmo-select`)||customElements.define(`luzmo-select`,v),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return v}});
@@ -1,21 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2026 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
- require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./language-resolution-CSjktYg5.cjs");let r=require("lit"),i=require("lit/decorators.js");var a=`:host{font-family:var(--luzmo-status-light-font-family,var(--luzmo-font-family));color:var(--highcontrast-status-light-content-color,var(--luzmo-status-light-content-color,var(--status-light-content-color)));min-block-size:var(--luzmo-status-light-height,var(--status-light-height));box-sizing:border-box;vertical-align:bottom;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--luzmo-status-light-gap,var(--status-light-gap));outline:none;display:inline-flex;position:relative}.dot{block-size:var(--luzmo-status-light-dot-size,var(--status-light-dot-size));inline-size:var(--luzmo-status-light-dot-size,var(--status-light-dot-size));background-color:var(--highcontrast-status-light-dot-color,var(--luzmo-status-light-dot-color,var(--status-light-dot-color)));border-radius:50%;flex-shrink:0}.label{box-sizing:border-box;line-height:1;font-weight:var(--luzmo-status-light-font-weight,var(--status-light-font-weight));font-size:var(--luzmo-status-light-font-size,var(--status-light-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}:host([data-luzmo-language-script=Latn]) .label{text-box:trim-both cap alphabetic;margin-block:-.35em;padding-block:.35em}:host([disabled]){opacity:var(--luzmo-status-light-disabled-opacity,.4);pointer-events:none;cursor:default}@media (forced-colors:active){:host{--highcontrast-status-light-content-color:ButtonText;forced-color-adjust:none}.dot{--highcontrast-status-light-dot-color:Highlight}:host([disabled]){--highcontrast-status-light-content-color:GrayText}:host([disabled]) .dot{--highcontrast-status-light-dot-color:GrayText}}:host{--status-light-content-color:var(--luzmo-font-color);--status-light-font-weight:var(--luzmo-font-weight);--status-light-dot-color:var(--luzmo-border-color-full)}:host([size=xs]){--status-light-height:var(--luzmo-component-height-xxs);--status-light-font-size:var(--luzmo-font-size-xs);--status-light-dot-size:6px;--status-light-gap:var(--luzmo-spacing-3)}:host([size=s]){--status-light-height:var(--luzmo-component-height-xs);--status-light-font-size:var(--luzmo-font-size-s);--status-light-dot-size:8px;--status-light-gap:var(--luzmo-spacing-3)}:host{--status-light-height:var(--luzmo-component-height-s);--status-light-font-size:var(--luzmo-font-size);--status-light-dot-size:10px;--status-light-gap:var(--luzmo-spacing-3)}:host([size=l]){--status-light-height:var(--luzmo-component-height);--status-light-font-size:var(--luzmo-font-size);--status-light-dot-size:12px;--status-light-gap:var(--luzmo-spacing-4)}:host([size=xl]){--status-light-height:var(--luzmo-component-height-l);--status-light-font-size:var(--luzmo-font-size-l);--status-light-dot-size:14px;--status-light-gap:var(--luzmo-spacing-4)}:host([variant=neutral]){--status-light-dot-color:var(--luzmo-selected-color-hard)}:host([variant=informative]){--status-light-dot-color:var(--luzmo-informative-color)}:host([variant=positive]){--status-light-dot-color:var(--luzmo-positive-color)}:host([variant=negative]){--status-light-dot-color:var(--luzmo-negative-color)}:host([variant=notice]){--status-light-dot-color:var(--luzmo-notice-color)}:host([variant=seafoam]){--status-light-dot-color:var(--luzmo-seafoam-color)}:host([variant=indigo]){--status-light-dot-color:var(--luzmo-indigo-color)}:host([variant=purple]){--status-light-dot-color:var(--luzmo-purple-color)}:host([variant=fuchsia]){--status-light-dot-color:var(--luzmo-fuchsia-color)}:host([variant=magenta]){--status-light-dot-color:var(--luzmo-magenta-color)}:host([variant=yellow]){--status-light-dot-color:var(--luzmo-yellow-color)}:host([variant=gray]){--status-light-dot-color:var(--luzmo-gray-color)}:host([variant=red]){--status-light-dot-color:var(--luzmo-red-color)}:host([variant=orange]){--status-light-dot-color:var(--luzmo-orange-color)}:host([variant=chartreuse]){--status-light-dot-color:var(--luzmo-chartreuse-color)}:host([variant=celery]){--status-light-dot-color:var(--luzmo-celery-color)}:host([variant=green]){--status-light-dot-color:var(--luzmo-green-color)}:host([variant=cyan]){--status-light-dot-color:var(--luzmo-cyan-color)}:host([variant=blue]){--status-light-dot-color:var(--luzmo-blue-color)}`,o=[`neutral`,`informative`,`positive`,`negative`,`notice`,`seafoam`,`indigo`,`purple`,`fuchsia`,`magenta`,`yellow`,`gray`,`red`,`orange`,`chartreuse`,`celery`,`green`,`cyan`,`blue`],s=class extends t.n(e.n,{validSizes:[`xs`,`s`,`m`,`l`,`xl`],noDefaultSize:!0}){constructor(...e){super(...e),this._languageScript=new n.n(this),this._variant=`neutral`,this.disabled=!1}static get styles(){return[(0,r.unsafeCSS)(a)]}get variant(){return this._variant}set variant(e){e!==this._variant&&(o.includes(e)?(this._variant=e,this.setAttribute(`variant`,e)):(this._variant=`neutral`,this.setAttribute(`variant`,`neutral`)))}render(){return r.html`
19
- <span class="dot"></span>
20
- <span class="label"><slot></slot></span>
21
- `}updated(e){super.updated(e),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`))}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`role`)||this.setAttribute(`role`,`status`),this.hasAttribute(`variant`)||this.setAttribute(`variant`,this.variant)}};e.t([(0,i.property)({reflect:!0})],s.prototype,`variant`,null),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),customElements.get(`luzmo-status-light`)||customElements.define(`luzmo-status-light`,s),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
@@ -1,18 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2026 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
- const e=require("./platform-BAjeJp2W.cjs");var t=`(max-width: 743px) and (hover: none) and (pointer: coarse)`,n=`(hover: none) and (pointer: coarse)`,r=class{constructor(e,t){this.key=Symbol(`match-media-key`),this.matches=!1,this.host=e,this.host.addController(this),typeof window>`u`?this.matches=!1:(this.media=window.matchMedia(t),this.matches=this.media.matches),this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){this.media?.addEventListener(`change`,this.onChange)}hostDisconnected(){this.media?.removeEventListener(`change`,this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}},i=function(e){return e[e.desktop=0]=`desktop`,e[e.mobile=1]=`mobile`,e}({}),a=`remove-focus-ring-safari-hack`,o=class{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}Promise.resolve().then(()=>require("./overlay/index.cjs")).then(()=>{this.overlay=document.createElement(`luzmo-overlay`),this.host.open=!0,this.host.requestUpdate()})}}get overlay(){return this._overlay}set overlay(e){e&&this.overlay!==e&&(this._overlay=e,this.initOverlay())}constructor(e,t){this.target=e,this.host=t,this.listenersBound=!1,this.preventNextToggle=`no`,this.pointerdownState=!1,this.enterKeydownOn=null,this._open=!1,this.target=e,this.host=t,this.host.addController(this),this.init()}releaseDescription(){}handleBeforetoggle(e){e.composedPath()[0]===e.target&&(e.newState===`closed`&&(this.preventNextToggle===`no`?this.open=!1:this.pointerdownState||this.overlay?.manuallyKeepOpen()),this.open||(this.host.optionsMenu.updateSelectedItemIndex(),typeof this.host.optionsMenu?.closeDescendentOverlays==`function`&&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(){this.releaseDescription(),this.abortController?.abort(),this.listenersBound=!1}hostConnected(){this.init()}hostDisconnected(){this.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)}},s={desktop:class extends o{constructor(...e){super(...e),this.type=i.desktop}handlePointerdown(e){if(e.target.closest(`.clear-icon`)||e.button!==0||e.pointerType===`touch`)return;this.pointerdownState=this.open,this.preventNextToggle=`maybe`;let t=0,n=()=>{cancelAnimationFrame(t),t=requestAnimationFrame(()=>{document.removeEventListener(`pointerup`,n),document.removeEventListener(`pointercancel`,n),this.target.removeEventListener(`click`,n),requestAnimationFrame(()=>{this.preventNextToggle=`no`})})};document.addEventListener(`pointerup`,n),document.addEventListener(`pointercancel`,n),this.target.addEventListener(`click`,n),this.handleActivate()}handleActivate(e){this.enterKeydownOn&&this.enterKeydownOn!==this.target||this.preventNextToggle!==`yes`&&(e?.type===`click`&&this.open!==this.pointerdownState||this.host.toggle())}init(){if(this.listenersBound)return;this.abortController=new AbortController;let{signal:e}=this.abortController;this.target.addEventListener(`click`,e=>this.handleActivate(e),{signal:e}),this.target.addEventListener(`pointerdown`,e=>this.handlePointerdown(e),{signal:e}),this.target.addEventListener(`focus`,e=>this.handleButtonFocus(e),{signal:e}),this.listenersBound=!0}},mobile:class extends o{constructor(...e){super(...e),this.type=i.mobile}handleClick(e){e.target.closest(`.clear-button`)&&(this.preventNextToggle===`no`&&(this.open=!this.open),this.preventNextToggle=`no`)}handlePointerdown(t){t.target.closest(`.clear-button`)&&(this.preventNextToggle=this.open?`yes`:`no`,e.u()&&this.target.classList.add(a))}handleFocusOut(){this.host.open||e.u()&&this.target.classList.contains(`remove-focus-ring-safari-hack`)&&this.target.classList.remove(a)}init(){if(this.listenersBound)return;this.abortController=new AbortController;let{signal:e}=this.abortController;this.target.addEventListener(`click`,e=>this.handleClick(e),{signal:e}),this.target.addEventListener(`pointerdown`,e=>this.handlePointerdown(e),{signal:e}),this.target.addEventListener(`focusout`,()=>this.handleFocusOut(),{signal:e}),this.listenersBound=!0}}};Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
@@ -1,208 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2026 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 "./tokens.js";
19
- import { n as e, t } from "./decorate-CkCg3wfh.js";
20
- import { n } from "./sized-mixin-DzQTebN-.js";
21
- import { t as r } from "./focus-visible-Bt2uDmuM.js";
22
- import { t as i } from "./roving-tabindex-pomAn3z-.js";
23
- import { n as a } from "./language-resolution-BaKYDD1a.js";
24
- import "./tooltip-xTa9Q5JW.js";
25
- import "./button-DIV_j_U3.js";
26
- import { html as o, nothing as s, unsafeCSS as c } from "lit";
27
- import { property as l, queryAssignedNodes as u, state as d } from "lit/decorators.js";
28
- //#region src/components/tags/tag.module.scss?inline
29
- var f = ":host{font-family:var(--luzmo-font-family);background-color:var(--highcontrast-tag-background-color,var(--luzmo-tag-background-color,var(--tag-background-color)));color:var(--highcontrast-tag-content-color,var(--luzmo-tag-content-color,var(--tag-content-color)));border-radius:var(--luzmo-tag-border-radius,var(--tag-border-radius));block-size:var(--luzmo-tag-height,var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:var(--luzmo-tag-max-inline-size,var(--tag-max-inline-size));-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out, color var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out, box-shadow var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out, background-color var(--luzmo-tag-animation-duration,var(--tag-animation-duration)) ease-in-out;outline:none;justify-content:center;align-items:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start,var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width,var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative;border-color:var(--highcontrast-tag-border-color,var(--luzmo-tag-border-color,var(--tag-border-color)))!important;border-width:var(--luzmo-tag-border-width,var(--tag-border-width))!important;border-style:solid!important}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size,var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size,var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end,var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end,var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width:fit-content;--clearbutton-fill-size:fit-content;--clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start,var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end,var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end,var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width,var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color,var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size,var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size,var(--clearbutton-fill-size))}.label{box-sizing:border-box;block-size:100%;min-inline-size:0;line-height:var(--luzmo-tag-label-line-height,var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight,var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size,var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end,var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width,var(--tag-border-width)));display:flex;overflow:hidden}.label-text{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-inline-size:0;display:block;overflow:hidden}.label-text slot{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}:host([data-luzmo-language-script=Latn]) .label-text{padding-block:var(--tag-label-glyph-overhang);margin-block:calc(var(--tag-label-glyph-overhang) * -1)}:host([data-luzmo-language-script=Latn]) .label-text slot{text-box:trim-both cap alphabetic;padding-block:var(--tag-label-glyph-overhang);margin-block:calc(var(--tag-label-glyph-overhang) * -1)}:host(:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-active,var(--luzmo-tag-background-color-active,var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--luzmo-tag-content-color-active,var(--tag-content-color-active)));border-color:var(--highcontrast-tag-border-color-active,var(--luzmo-tag-border-color-active,var(--tag-border-color-active)))!important}:host([focused]),:host(:focus-visible){background-color:var(--highcontrast-tag-background-color-focus,var(--luzmo-tag-background-color-focus,var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--luzmo-tag-content-color-focus,var(--tag-content-color-focus)));border-color:var(--highcontrast-tag-border-color-focus,var(--luzmo-tag-border-color-focus,var(--tag-border-color-focus)))!important}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-radius:calc(var(--luzmo-tag-border-radius,var(--tag-border-radius)) + var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width,var(--tag-border-width)));pointer-events:none;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap,var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width,var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness)));border-color:var(--highcontrast-tag-focus-ring-color,var(--luzmo-tag-focus-ring-color,var(--tag-focus-ring-color)))!important;border-width:var(--luzmo-tag-focus-ring-thickness,var(--tag-focus-ring-thickness))!important;border-style:solid!important}:host([selected]){background-color:var(--highcontrast-tag-background-color-selected,var(--luzmo-tag-background-color-selected,var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--luzmo-tag-content-color-selected,var(--tag-content-color-selected)));border-color:var(--highcontrast-tag-border-color-selected,var(--luzmo-tag-border-color-selected,var(--tag-border-color-selected)))!important}:host([selected]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-selected-active,var(--luzmo-tag-background-color-selected-active,var(--tag-background-color-selected-active)));border-color:var(--highcontrast-tag-border-color-selected-active,var(--luzmo-tag-border-color-selected-active,var(--tag-border-color-selected-active)))!important}:host([selected][focused]),:host([selected]:focus-visible){background-color:var(--highcontrast-tag-background-color-selected-focus,var(--luzmo-tag-background-color-selected-focus,var(--tag-background-color-selected-focus)));border-color:var(--highcontrast-tag-border-color-selected-focus,var(--luzmo-tag-border-color-selected-focus,var(--tag-border-color-selected-focus)))!important}:host([invalid]){color:var(--highcontrast-tag-content-color-invalid,var(--luzmo-tag-content-color-invalid,var(--tag-content-color-invalid)));border-color:var(--highcontrast-tag-border-color-invalid,var(--luzmo-tag-border-color-invalid,var(--tag-border-color-invalid)))!important}:host([invalid]:is(:active,[active])){color:var(--highcontrast-tag-content-color-invalid-active,var(--luzmo-tag-content-color-invalid-active,var(--tag-content-color-invalid-active)));border-color:var(--highcontrast-tag-border-color-invalid-active,var(--luzmo-tag-border-color-invalid-active,var(--tag-border-color-invalid-active)))!important}:host([invalid][focused]),:host([invalid]:focus-visible){color:var(--highcontrast-tag-content-color-invalid-focus,var(--luzmo-tag-content-color-invalid-focus,var(--tag-content-color-invalid-focus)));border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--luzmo-tag-border-color-invalid-focus,var(--tag-border-color-invalid-focus)))!important}:host([invalid][selected]){background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--luzmo-tag-background-color-invalid-selected,var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--luzmo-tag-content-color-invalid-selected,var(--tag-content-color-invalid-selected)));border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--luzmo-tag-border-color-invalid-selected,var(--tag-border-color-invalid-selected)))!important}:host([invalid][selected]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--luzmo-tag-background-color-invalid-selected-active,var(--tag-background-color-invalid-selected-active)));border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--luzmo-tag-border-color-invalid-selected-active,var(--tag-border-color-invalid-selected-active)))!important}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--luzmo-tag-background-color-invalid-selected-focus,var(--tag-background-color-invalid-selected-focus)));border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--luzmo-tag-border-color-invalid-selected-focus,var(--tag-border-color-invalid-selected-focus)))!important}:host([emphasized]){background-color:var(--highcontrast-tag-background-color-emphasized,var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--luzmo-tag-content-color-emphasized,var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover:var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized));--luzmo-clear-button-background-color-focus:var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized));--luzmo-clear-button-background-color-down:var(--luzmo-tag-background-color-emphasized,var(--tag-background-color-emphasized));border-color:var(--highcontrast-tag-border-color-emphasized,var(--luzmo-tag-border-color-emphasized,var(--tag-border-color-emphasized)))!important}@media (hover:hover){:host(:hover){background-color:var(--highcontrast-tag-background-color-hover,var(--luzmo-tag-background-color-hover,var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--luzmo-tag-content-color-hover,var(--tag-content-color-hover)));border-color:var(--highcontrast-tag-border-color-hover,var(--luzmo-tag-border-color-hover,var(--tag-border-color-hover)))!important}:host([selected]:hover){background-color:var(--highcontrast-tag-background-color-selected-hover,var(--luzmo-tag-background-color-selected-hover,var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--luzmo-tag-content-color-selected,var(--tag-content-color-selected)));border-color:var(--highcontrast-tag-border-color-selected-hover,var(--luzmo-tag-border-color-selected-hover,var(--tag-border-color-selected-hover)))!important}:host([invalid]:hover){color:var(--highcontrast-tag-content-color-invalid-hover,var(--luzmo-tag-content-color-invalid-hover,var(--tag-content-color-invalid-hover)));border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--luzmo-tag-border-color-invalid-hover,var(--tag-border-color-invalid-hover)))!important}:host([invalid][selected]:hover){background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--luzmo-tag-background-color-invalid-selected-hover,var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--luzmo-tag-content-color-invalid-selected,var(--tag-content-color-invalid-selected)));border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--luzmo-tag-border-color-invalid-selected-hover,var(--tag-border-color-invalid-selected-hover)))!important}:host([emphasized]:hover){background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--luzmo-tag-background-color-emphasized-hover,var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--luzmo-tag-content-color-emphasized,var(--tag-content-color-emphasized)));border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--luzmo-tag-border-color-emphasized-hover,var(--tag-border-color-emphasized-hover)))!important}}:host([emphasized]:is(:active,[active])){background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--luzmo-tag-background-color-emphasized-active,var(--tag-background-color-emphasized-active)));border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--luzmo-tag-border-color-emphasized-active,var(--tag-border-color-emphasized-active)))!important}:host([emphasized][focused]),:host([emphasized]:focus-visible){background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--luzmo-tag-background-color-emphasized-focus,var(--tag-background-color-emphasized-focus)));border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--luzmo-tag-border-color-emphasized-focus,var(--tag-border-color-emphasized-focus)))!important}:host([disabled]){background-color:var(--highcontrast-tag-background-color-disabled,var(--luzmo-tag-background-color-disabled,var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--luzmo-tag-content-color-disabled,var(--tag-content-color-disabled)));pointer-events:none;border-color:var(--highcontrast-tag-border-color-disabled,var(--luzmo-tag-border-color-disabled,var(--tag-border-color-disabled)))!important}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled,var(--avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}:host([variant][treatment=fill]){--highcontrast-tag-border-color:Highlight;--highcontrast-tag-border-color-hover:Highlight;--highcontrast-tag-border-color-active:Highlight;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:Highlight;--highcontrast-tag-background-color-hover:Highlight;--highcontrast-tag-background-color-active:Highlight;--highcontrast-tag-background-color-focus:Highlight;--highcontrast-tag-content-color:HighlightText;--highcontrast-tag-content-color-hover:HighlightText;--highcontrast-tag-content-color-active:HighlightText;--highcontrast-tag-content-color-focus:HighlightText}}:host{--tag-border-color:var(--luzmo-border-color);--tag-border-color-hover:var(--luzmo-border-color-hover);--tag-border-color-active:var(--luzmo-border-color-active);--tag-border-color-focus:var(--luzmo-border-color-focus);--tag-size-small-border-radius:var(--luzmo-border-radius-s);--tag-size-medium-border-radius:var(--luzmo-border-radius);--tag-size-large-border-radius:var(--luzmo-border-radius);--tag-background-color:var(--luzmo-background-color);--tag-background-color-hover:var(--luzmo-background-color-hover);--tag-background-color-active:var(--luzmo-background-color-active);--tag-background-color-focus:var(--luzmo-background-color-focus);--tag-content-color:var(--luzmo-font-color);--tag-content-color-hover:var(--luzmo-font-color-hover);--tag-content-color-active:var(--luzmo-font-color-active);--tag-content-color-focus:var(--luzmo-font-color-focus);--tag-border-color-selected:var(--luzmo-border-color-down);--tag-border-color-selected-hover:var(--luzmo-border-color-down);--tag-border-color-selected-active:var(--luzmo-border-color-down);--tag-border-color-selected-focus:var(--luzmo-border-color-down);--tag-border-color-disabled:var(--luzmo-border-color-disabled);--tag-background-color-disabled:var(--luzmo-background-color-disabled);--avatar-opacity-disabled:.3;--tag-animation-duration:var(--luzmo-animation-duration);--tag-border-width:var(--luzmo-border-width);--tag-focus-ring-thickness:var(--luzmo-indicator-width);--tag-focus-ring-gap:var(--luzmo-indicator-gap);--tag-focus-ring-color:var(--luzmo-indicator-color);--tag-label-line-height:var(--luzmo-line-height);--tag-label-font-weight:var(--luzmo-font-weight);--tag-label-glyph-overhang:.35em;--tag-variant-color-hover:color-mix(in oklch, var(--tag-variant-color), black 8%);--tag-variant-color-down:color-mix(in oklch, var(--tag-variant-color), black 20%);--tag-variant-color-focus:var(--tag-variant-color-hover);--tag-variant-fill-color-hover:var(--tag-variant-color-hover);--tag-variant-fill-color-down:var(--tag-variant-color-down);--tag-variant-fill-color-focus:var(--tag-variant-color-focus);--tag-content-color-selected:var(--luzmo-font-color-down);--tag-background-color-selected:var(--luzmo-background-color-down);--tag-background-color-selected-hover:var(--luzmo-background-color-down);--tag-background-color-selected-active:var(--luzmo-background-color-down);--tag-background-color-selected-focus:var(--luzmo-background-color-down);--tag-border-color-invalid:var(--luzmo-negative-color);--tag-border-color-invalid-hover:var(--luzmo-negative-color-hover);--tag-border-color-invalid-active:var(--luzmo-negative-color-down);--tag-border-color-invalid-focus:var(--luzmo-negative-color-focus);--tag-content-color-invalid:var(--luzmo-negative-color);--tag-content-color-invalid-hover:var(--luzmo-negative-color-hover);--tag-content-color-invalid-active:var(--luzmo-negative-color-down);--tag-content-color-invalid-focus:var(--luzmo-negative-color-focus);--tag-border-color-invalid-selected:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-hover:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-focus:var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-active:var(--luzmo-negative-color-down);--tag-background-color-invalid-selected:var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover:var(--luzmo-background-color-down);--tag-background-color-invalid-selected-active:var(--luzmo-background-color-down);--tag-background-color-invalid-selected-focus:var(--luzmo-background-color-down);--tag-content-color-invalid-selected:var(--luzmo-negative-color-down);--tag-border-color-emphasized:var(--luzmo-primary);--tag-border-color-emphasized-hover:var(--luzmo-primary-hover);--tag-border-color-emphasized-active:var(--luzmo-primary-down);--tag-border-color-emphasized-focus:var(--luzmo-primary-focus);--tag-background-color-emphasized:var(--luzmo-primary);--tag-background-color-emphasized-hover:var(--luzmo-primary-hover);--tag-background-color-emphasized-active:var(--luzmo-primary-down);--tag-background-color-emphasized-focus:var(--luzmo-primary-focus);--tag-content-color-emphasized:white;--tag-content-color-disabled:var(--luzmo-disabled-color);--tag-icon-spacing-inline-end:var(--luzmo-spacing-3);--tag-icon-size:var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end:var(--luzmo-spacing-3);--tag-font-size:var(--luzmo-font-size);--tag-max-inline-size:100%;--tag-subtle-background-opacity:10%;--tag-subtle-interaction-background-opacity:20%;--tag-subtle-content-mix:57%}:host([size=s]){--tag-height:var(--luzmo-component-height-xs);--tag-font-size:var(--luzmo-font-size-s);--tag-icon-size:var(--luzmo-icon-size-s);--tag-icon-spacing-inline-end:var(--luzmo-spacing-2);--tag-clear-button-spacing-inline-start:var(--luzmo-spacing-2);--tag-border-radius:var(--luzmo-border-radius);--tag-spacing-inline-start:var(--luzmo-spacing-3);--tag-label-spacing-inline-end:var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host{--tag-height:var(--luzmo-component-height-s);--tag-font-size:var(--luzmo-font-size);--tag-icon-size:var(--luzmo-icon-size-m);--tag-clear-button-spacing-inline-start:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--tag-border-radius:var(--luzmo-border-radius);--tag-spacing-inline-start:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-label-spacing-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-clear-button-spacing-inline-end:var(--luzmo-spacing-3)}:host([size=l]){--tag-height:var(--luzmo-component-height);--tag-font-size:var(--luzmo-font-size);--tag-icon-size:var(--luzmo-icon-size-l);--tag-icon-spacing-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-clear-button-spacing-inline-start:var(--luzmo-spacing-3);--tag-border-radius:var(--luzmo-border-radius);--tag-spacing-inline-start:var(--luzmo-spacing-4);--tag-label-spacing-inline-end:var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]){--tag-height:var(--luzmo-component-height-l);--tag-font-size:var(--luzmo-font-size-l);--tag-icon-size:var(--luzmo-icon-size-xl);--tag-icon-spacing-inline-end:var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-start:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--tag-border-radius:var(--luzmo-border-radius-l);--tag-spacing-inline-start:var(--luzmo-spacing-5);--tag-label-spacing-inline-end:var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end:var(--luzmo-spacing-4)}:host([variant=accent]){--tag-variant-color:var(--luzmo-primary);--tag-variant-color-hover:var(--luzmo-primary-hover);--tag-variant-color-down:var(--luzmo-primary-down);--tag-variant-color-focus:var(--luzmo-primary-focus);--tag-variant-fill-content-color:var(--luzmo-primary-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-accent-on-subtle-color)}:host([variant=neutral]){--tag-variant-color:var(--luzmo-selected-color-hard);--tag-variant-color-hover:var(--luzmo-selected-color-hard-hover);--tag-variant-color-down:var(--luzmo-selected-color-hard-down);--tag-variant-color-focus:var(--luzmo-selected-color-hard-focus);--tag-variant-fill-content-color:var(--luzmo-background-color);--tag-variant-subtle-content-color:var(--luzmo-neutral-on-subtle-color)}:host([variant=informative]){--tag-variant-color:var(--luzmo-informative-color);--tag-variant-color-hover:var(--luzmo-informative-color-hover);--tag-variant-color-down:var(--luzmo-informative-color-down);--tag-variant-color-focus:var(--luzmo-informative-color-focus);--tag-variant-fill-content-color:var(--luzmo-informative-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-informative-on-subtle-color)}:host([variant=positive]){--tag-variant-color:var(--luzmo-positive-color);--tag-variant-color-hover:var(--luzmo-positive-color-hover);--tag-variant-color-down:var(--luzmo-positive-color-down);--tag-variant-color-focus:var(--luzmo-positive-color-focus);--tag-variant-fill-content-color:var(--luzmo-positive-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-positive-on-subtle-color)}:host([variant=negative]){--tag-variant-color:var(--luzmo-negative-color);--tag-variant-color-hover:var(--luzmo-negative-color-hover);--tag-variant-color-down:var(--luzmo-negative-color-down);--tag-variant-color-focus:var(--luzmo-negative-color-focus);--tag-variant-fill-content-color:var(--luzmo-negative-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-negative-on-subtle-color)}:host([variant=notice]){--tag-variant-color:var(--luzmo-notice-color);--tag-variant-color-hover:var(--luzmo-notice-color-hover);--tag-variant-color-down:var(--luzmo-notice-color-down);--tag-variant-color-focus:var(--luzmo-notice-color-focus);--tag-variant-fill-color-hover:color-mix(in oklch, var(--luzmo-notice-color), white 12%);--tag-variant-fill-color-down:color-mix(in oklch, var(--luzmo-notice-color), white 24%);--tag-variant-fill-color-focus:var(--tag-variant-fill-color-hover);--tag-variant-fill-content-color:var(--luzmo-notice-inverse-color);--tag-variant-subtle-content-color:var(--luzmo-notice-on-subtle-color)}:host([variant=seafoam]){--tag-variant-color:var(--luzmo-seafoam-color);--tag-variant-fill-content-color:white}:host([variant=indigo]){--tag-variant-color:var(--luzmo-indigo-color);--tag-variant-fill-content-color:white}:host([variant=purple]){--tag-variant-color:var(--luzmo-purple-color);--tag-variant-fill-content-color:white}:host([variant=fuchsia]){--tag-variant-color:var(--luzmo-fuchsia-color);--tag-variant-fill-content-color:white}:host([variant=magenta]){--tag-variant-color:var(--luzmo-magenta-color);--tag-variant-fill-content-color:white}:host([variant=yellow]){--tag-variant-color:var(--luzmo-yellow-color);--tag-variant-fill-content-color:black}:host([variant=gray]){--tag-variant-color:var(--luzmo-gray-color);--tag-variant-fill-content-color:white}:host([variant=red]){--tag-variant-color:var(--luzmo-red-color);--tag-variant-fill-content-color:white}:host([variant=orange]){--tag-variant-color:var(--luzmo-orange-color);--tag-variant-fill-content-color:black}:host([variant=chartreuse]){--tag-variant-color:var(--luzmo-chartreuse-color);--tag-variant-fill-content-color:white}:host([variant=celery]){--tag-variant-color:var(--luzmo-celery-color);--tag-variant-fill-content-color:black}:host([variant=green]){--tag-variant-color:var(--luzmo-green-color);--tag-variant-fill-content-color:white}:host([variant=cyan]){--tag-variant-color:var(--luzmo-cyan-color);--tag-variant-fill-content-color:white}:host([variant=blue]){--tag-variant-color:var(--luzmo-blue-color);--tag-variant-fill-content-color:white}:host([variant]:not([treatment=fill])){--tag-border-color:var(--tag-variant-color);--tag-border-color-hover:var(--tag-variant-color-hover);--tag-border-color-active:var(--tag-variant-color-down);--tag-border-color-focus:var(--tag-variant-color-focus);--tag-content-color:var(--tag-variant-color);--tag-content-color-hover:var(--tag-variant-color-hover);--tag-content-color-active:var(--tag-variant-color-down);--tag-content-color-focus:var(--tag-variant-color-focus);--tag-background-color:transparent;--tag-background-color-hover:color-mix(in oklch, var(--tag-variant-color), transparent 90%);--tag-background-color-active:color-mix(in oklch, var(--tag-variant-color), transparent 82%);--tag-background-color-focus:color-mix(in oklch, var(--tag-variant-color), transparent 90%);--tag-border-color-selected:var(--tag-variant-color-down);--tag-border-color-selected-hover:var(--tag-variant-color-down);--tag-border-color-selected-active:var(--tag-variant-color-down);--tag-border-color-selected-focus:var(--tag-variant-color-down);--tag-content-color-selected:var(--tag-variant-color-down);--tag-background-color-selected:color-mix(in oklch, var(--tag-variant-color), transparent 80%);--tag-background-color-selected-hover:color-mix(in oklch, var(--tag-variant-color), transparent 72%);--tag-background-color-selected-active:color-mix(in oklch, var(--tag-variant-color), transparent 72%);--tag-background-color-selected-focus:color-mix(in oklch, var(--tag-variant-color), transparent 72%)}:host([variant][treatment=subtle]){--tag-subtle-background-color:color-mix(in srgb, var(--tag-variant-color) var(--tag-subtle-background-opacity), var(--luzmo-background-color));--tag-subtle-interaction-background-color:color-mix(in srgb, var(--tag-variant-color) var(--tag-subtle-interaction-background-opacity), var(--luzmo-background-color));--tag-subtle-content-color:var(--tag-variant-subtle-content-color,color-mix(in oklch, var(--tag-variant-color), var(--luzmo-font-color) var(--tag-subtle-content-mix)));--tag-subtle-interaction-content-color:color-mix(in oklch, var(--tag-variant-color), var(--luzmo-font-color) var(--tag-subtle-content-mix));--tag-background-color:var(--tag-subtle-background-color);--tag-background-color-hover:var(--tag-subtle-interaction-background-color);--tag-background-color-active:var(--tag-subtle-background-color);--tag-background-color-focus:var(--tag-subtle-interaction-background-color);--tag-background-color-selected:var(--tag-subtle-background-color);--tag-background-color-selected-hover:var(--tag-subtle-background-color);--tag-background-color-selected-active:var(--tag-subtle-background-color);--tag-background-color-selected-focus:var(--tag-subtle-background-color);--tag-content-color:var(--tag-subtle-content-color);--tag-content-color-hover:var(--tag-subtle-interaction-content-color);--tag-content-color-active:var(--tag-subtle-content-color);--tag-content-color-focus:var(--tag-subtle-interaction-content-color);--tag-content-color-selected:var(--tag-subtle-content-color);--luzmo-clear-button-background-color-hover:var(--tag-subtle-interaction-background-color);--luzmo-clear-button-background-color-focus:var(--tag-subtle-interaction-background-color);--luzmo-clear-button-background-color-down:var(--tag-subtle-background-color)}:host([variant][treatment=fill]){--tag-background-color:var(--tag-variant-color);--tag-background-color-hover:var(--tag-variant-fill-color-hover);--tag-background-color-active:var(--tag-variant-fill-color-down);--tag-background-color-focus:var(--tag-variant-fill-color-focus);--tag-content-color:var(--tag-variant-fill-content-color);--tag-content-color-hover:var(--tag-variant-fill-content-color);--tag-content-color-active:var(--tag-variant-fill-content-color);--tag-content-color-focus:var(--tag-variant-fill-content-color);--tag-border-color:transparent;--tag-border-color-hover:transparent;--tag-border-color-active:transparent;--tag-border-color-focus:transparent;--tag-background-color-selected:var(--tag-variant-fill-color-down);--tag-background-color-selected-hover:var(--tag-variant-fill-color-down);--tag-background-color-selected-active:var(--tag-variant-fill-color-down);--tag-background-color-selected-focus:var(--tag-variant-fill-color-down);--tag-content-color-selected:var(--tag-variant-fill-content-color);--tag-border-color-selected:transparent;--tag-border-color-selected-hover:transparent;--tag-border-color-selected-active:transparent;--tag-border-color-selected-focus:transparent;--luzmo-clear-button-background-color-hover:var(--tag-variant-fill-color-hover);--luzmo-clear-button-background-color-focus:var(--tag-variant-fill-color-focus);--luzmo-clear-button-background-color-down:var(--tag-variant-fill-color-down)}:host([variant]:is([treatment=subtle],[treatment=fill])[invalid]){--tag-background-color:var(--luzmo-background-color);--tag-background-color-hover:var(--luzmo-background-color-hover);--tag-background-color-active:var(--luzmo-background-color-down);--tag-background-color-focus:var(--luzmo-background-color-focus);--tag-content-color:var(--luzmo-negative-color);--tag-content-color-hover:var(--luzmo-negative-color-hover);--tag-content-color-active:var(--luzmo-negative-color-down);--tag-content-color-focus:var(--luzmo-negative-color-focus)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color:var(--tag-icon-color-error-key-focus,var(--red-600));--clearbutton-medium-icon-color-hover:var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down:var(--tag-deletable-icon-color-error-down,var(--red-700))}:host([invalid]):hover .clear-button,:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color:var(--tag-icon-color-error-hover,var(--red-600));--clearbutton-medium-icon-color-hover:var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down:var(--tag-deletable-icon-color-error-down,var(--red-700))}:host([size=xs]){--icon-size:var(--workflow-icon-size-50)}:host([size=s]){--icon-size:var(--workflow-icon-size-75)}:host([size=m]){--icon-size:var(--workflow-icon-size)}:host([size=l]){--icon-size:var(--workflow-icon-size-200)}:host([size=xl]){--icon-size:var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size:var(--workflow-icon-size-400)}", p = [
30
- "accent",
31
- "neutral",
32
- "informative",
33
- "positive",
34
- "negative",
35
- "notice",
36
- "seafoam",
37
- "indigo",
38
- "purple",
39
- "fuchsia",
40
- "magenta",
41
- "yellow",
42
- "gray",
43
- "red",
44
- "orange",
45
- "chartreuse",
46
- "celery",
47
- "green",
48
- "cyan",
49
- "blue"
50
- ], m = class extends n(e, {
51
- validSizes: [
52
- "s",
53
- "m",
54
- "l",
55
- "xl"
56
- ],
57
- noDefaultSize: !0
58
- }) {
59
- static get styles() {
60
- return [c(f)];
61
- }
62
- get variant() {
63
- return this._variant;
64
- }
65
- set variant(e) {
66
- if (e === this._variant) return;
67
- let t = this._variant;
68
- e && p.includes(e) ? (this._variant = e, this.setAttribute("variant", e)) : (this._variant = void 0, this.removeAttribute("variant")), this.requestUpdate("variant", t);
69
- }
70
- constructor() {
71
- super(), this._languageScript = new a(this), this.treatment = "outline", this.deletable = !1, this.disabled = !1, this.readonly = !1, this._labelText = "", this.handleFocusin = () => {
72
- this.addEventListener("focusout", this.handleFocusout), this.addEventListener("keydown", this.handleKeydown);
73
- }, this.handleFocusout = () => {
74
- this.removeEventListener("keydown", this.handleKeydown), this.removeEventListener("focusout", this.handleFocusout);
75
- }, this.handleKeydown = (e) => {
76
- if (!this.deletable || this.disabled) return;
77
- let { code: t } = e;
78
- switch (t) {
79
- case "Backspace":
80
- case "Space":
81
- case "Delete":
82
- e.preventDefault(), e.stopPropagation(), this.delete();
83
- break;
84
- default: return;
85
- }
86
- }, this.addEventListener("focusin", this.handleFocusin);
87
- }
88
- handleIconSlotChange(e) {
89
- e.target.assignedElements().forEach((e) => {
90
- e.tagName.toLowerCase() === "luzmo-icon" && e.setAttribute("block", "");
91
- });
92
- }
93
- handleLabelSlotChange(e) {
94
- let t = e.target.assignedNodes({ flatten: !0 });
95
- this._labelText = t.map((e) => e.textContent).join("").trim();
96
- }
97
- delete() {
98
- this.readonly || this.dispatchEvent(new Event("delete", {
99
- bubbles: !0,
100
- cancelable: !0,
101
- composed: !0
102
- })) && (this.blur(), this.remove());
103
- }
104
- render() {
105
- return o`
106
- <slot name="avatar"></slot>
107
- <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
108
- <span class="label" focusable>
109
- <span class="label-text">
110
- <slot @slotchange=${this.handleLabelSlotChange}></slot>
111
- </span>
112
- ${this._labelText ? o`
113
- <luzmo-tooltip
114
- self-managed
115
- show-only-if-truncated
116
- truncated-element-selector="slot"
117
- placement="top"
118
- >
119
- ${this._labelText}
120
- </luzmo-tooltip>
121
- ` : s}
122
- </span>
123
- ${this.deletable ? o`
124
- <luzmo-clear-button
125
- class="clear-button"
126
- ?disabled=${this.disabled}
127
- label="Remove"
128
- .size=${this.size}
129
- tabindex="-1"
130
- aria-hidden="true"
131
- @click=${this.delete}
132
- ></luzmo-clear-button>
133
- ` : s}
134
- `;
135
- }
136
- firstUpdated(e) {
137
- super.firstUpdated(e), this.hasAttribute("role") || this.setAttribute("role", "listitem"), this.hasAttribute("treatment") || this.setAttribute("treatment", this.treatment), this.deletable && this.setAttribute("tabindex", "0");
138
- }
139
- updated(e) {
140
- super.updated(e), e.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
141
- }
142
- };
143
- t([l({ reflect: !0 })], m.prototype, "variant", null), t([l({ reflect: !0 })], m.prototype, "treatment", void 0), t([l({
144
- type: Boolean,
145
- reflect: !0
146
- })], m.prototype, "deletable", void 0), t([l({
147
- type: Boolean,
148
- reflect: !0
149
- })], m.prototype, "disabled", void 0), t([l({
150
- type: Boolean,
151
- reflect: !0
152
- })], m.prototype, "readonly", void 0), t([d()], m.prototype, "_labelText", void 0);
153
- //#endregion
154
- //#region src/components/tags/tags.module.scss?inline
155
- var h = ":host{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--luzmo-tag-group-item-margin-block,var(--tag-group-item-margin-block));margin-inline:var(--luzmo-tag-group-item-margin-inline,var(--tag-group-item-margin-inline))}::slotted(:first-child){margin-inline-start:0}::slotted(:last-child){margin-inline-end:0}:host{--luzmo-tag-group-item-margin-block:var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline:var(--luzmo-spacing-2);--luzmo-clear-button-width:fit-content;margin:0;padding:0;list-style:none;display:inline-flex}:host([size=s]){--luzmo-tag-group-item-margin-block:var(--luzmo-spacing-2);--luzmo-tag-group-item-margin-inline:var(--luzmo-spacing-2)}:host([size=l]){--luzmo-tag-group-item-margin-block:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--luzmo-tag-group-item-margin-inline:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=xl]){--luzmo-tag-group-item-margin-block:var(--luzmo-spacing-3);--luzmo-tag-group-item-margin-inline:var(--luzmo-spacing-3)}:host{--clear-button-width:fit-content;margin:0;padding:0;list-style:none;display:inline-flex}", g = class extends r(n(e)) {
156
- static get styles() {
157
- return [c(h)];
158
- }
159
- get tags() {
160
- return this.defaultNodes.filter((e) => e instanceof m);
161
- }
162
- constructor() {
163
- super(), this.rovingTabindexController = new i(this, {
164
- focusInIndex: (e) => e.findIndex((e) => !e.disabled && e.deletable),
165
- elements: () => this.tags,
166
- isFocusableElement: (e) => !e.disabled && e.deletable
167
- }), this.handleFocusin = () => {
168
- this.addEventListener("focusout", this.handleFocusout), this.addEventListener("keydown", this.handleKeydown);
169
- }, this.handleKeydown = (e) => {
170
- let { code: t } = e;
171
- if (t !== "PageUp" && t !== "PageDown") return;
172
- let n = (e, t) => e[(e.length + t) % e.length], r = [...this.getRootNode().querySelectorAll("luzmo-tags")];
173
- if (r.length < 2) return;
174
- e.preventDefault();
175
- let i = r.indexOf(this), a = t === "PageUp" ? -1 : 1, o = i + a, s = n(r, o), c = 0;
176
- for (; s.tags.length === 0;) {
177
- if (++c >= r.length) return;
178
- o += a, s = n(r, o);
179
- }
180
- s.focus();
181
- }, this.handleFocusout = () => {
182
- this.removeEventListener("keydown", this.handleKeydown), this.removeEventListener("focusout", this.handleFocusout);
183
- }, this.addEventListener("focusin", this.handleFocusin);
184
- }
185
- focus() {
186
- this.rovingTabindexController.focus();
187
- }
188
- handleSlotchange() {
189
- this.rovingTabindexController.clearElementCache(), this.updateTagSizes();
190
- }
191
- updateTagSizes() {
192
- this.tags.forEach((e) => {
193
- e.size = this.size;
194
- });
195
- }
196
- render() {
197
- return o` <slot @slotchange=${this.handleSlotchange}></slot> `;
198
- }
199
- firstUpdated() {
200
- this.hasAttribute("role") || this.setAttribute("role", "list"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Tags");
201
- }
202
- updated(e) {
203
- super.updated(e), e.has("size") && this.updateTagSizes();
204
- }
205
- };
206
- t([u()], g.prototype, "defaultNodes", void 0), customElements.get("luzmo-tag") || customElements.define("luzmo-tag", m), customElements.get("luzmo-tags") || customElements.define("luzmo-tags", g);
207
- //#endregion
208
- export { m as n, g as t };