@luzmo/lucero 0.0.11 → 0.0.12

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 (171) hide show
  1. package/components/accordion/index.cjs +5 -5
  2. package/components/accordion/index.js +9 -10
  3. package/components/action-bar/index.cjs +4 -4
  4. package/components/action-bar/index.js +10 -10
  5. package/components/action-button/index.cjs +2 -2
  6. package/components/action-button/index.js +4 -4
  7. package/components/action-group/index.cjs +1 -1
  8. package/components/action-group/index.js +1 -1
  9. package/components/action-group-B59CWNnT.cjs +20 -0
  10. package/components/{action-group-Bf28z235.js → action-group-DzT5e9uS.js} +8 -9
  11. package/components/action-menu/index.cjs +9 -9
  12. package/components/action-menu/index.js +8 -9
  13. package/components/avatar/index.cjs +3 -3
  14. package/components/avatar/index.js +6 -7
  15. package/components/base-CCsOyfm4.js +632 -0
  16. package/components/base-CaRKlVkL.cjs +36 -0
  17. package/components/button/index.cjs +2 -2
  18. package/components/button/index.js +7 -7
  19. package/components/{button-base-CDLQV7Vk.js → button-base-BUylwU1F.js} +5 -6
  20. package/components/button-base-D62oiPcu.cjs +25 -0
  21. package/components/button-group/index.cjs +1 -1
  22. package/components/button-group/index.js +6 -6
  23. package/components/checkbox/index.cjs +4 -4
  24. package/components/checkbox/index.js +4 -4
  25. package/components/{checkbox-mixin-DXUIwtea.js → checkbox-mixin-CM4VUJxF.js} +9 -10
  26. package/components/{checkbox-mixin-DaXMsrtV.cjs → checkbox-mixin-CifGmiLR.cjs} +3 -3
  27. package/components/{clear-button-Dh2Mq0cc.js → clear-button-BmUyRVoz.js} +4 -4
  28. package/components/clear-button-Cc5-XUOJ.cjs +18 -0
  29. package/components/{close-button-BsYkXOVh.js → close-button-BekXo6bQ.js} +10 -10
  30. package/components/close-button-Bf8yzpLd.cjs +18 -0
  31. package/components/color-area/index.cjs +6 -6
  32. package/components/color-area/index.js +10 -11
  33. package/components/color-field/index.cjs +2 -2
  34. package/components/color-field/index.js +3 -3
  35. package/components/color-handle/index.cjs +2 -2
  36. package/components/color-handle/index.js +6 -6
  37. package/components/color-loupe/index.cjs +1 -1
  38. package/components/color-loupe/index.js +1 -1
  39. package/components/color-loupe-CLzp2MiI.cjs +56 -0
  40. package/components/{color-loupe-BCfIVFkB.js → color-loupe-DiegGLZu.js} +4 -4
  41. package/components/color-menu/index.cjs +5 -5
  42. package/components/color-menu/index.js +5 -7
  43. package/components/color-picker/index.cjs +4 -4
  44. package/components/color-picker/index.js +11 -13
  45. package/components/color-slider/index.cjs +7 -7
  46. package/components/color-slider/index.js +6 -7
  47. package/components/divider/index.cjs +1 -1
  48. package/components/divider/index.js +6 -6
  49. package/components/field-group/index.cjs +1 -1
  50. package/components/field-group/index.js +1 -1
  51. package/components/{field-group-CwZULltm.js → field-group-BPZvGJi1.js} +6 -6
  52. package/components/field-group-CodR_26L.cjs +23 -0
  53. package/components/field-label/index.cjs +1 -1
  54. package/components/field-label/index.js +1 -1
  55. package/components/{field-label-C3HFlH91.js → field-label-6AaW05kA.js} +7 -8
  56. package/components/field-label-B91K6moC.cjs +25 -0
  57. package/components/focusable-BFdecx5l.cjs +18 -0
  58. package/components/{focusable-zT9NFFYs.js → focusable-CxA_NMK_.js} +2 -1
  59. package/components/icon/index.cjs +1 -1
  60. package/components/icon/index.js +6 -6
  61. package/components/index-Cg_y7WKM.cjs +77 -0
  62. package/components/{index-C2qG2Sm8.js → index-QeYYAZQR.js} +15 -18
  63. package/components/index.cjs +1 -1
  64. package/components/index.js +16 -16
  65. package/components/infield-button/index.cjs +2 -2
  66. package/components/infield-button/index.js +4 -4
  67. package/components/label/index.cjs +1 -1
  68. package/components/label/index.js +5 -5
  69. package/components/{like-anchor-DoJWh4Uu.js → like-anchor-D7tY6am5.js} +21 -21
  70. package/components/like-anchor-b3cNzw52.cjs +32 -0
  71. package/components/{manage-help-text-BzWK2v8i.js → manage-help-text-CmE_nfjl.js} +8 -8
  72. package/components/{manage-help-text-BKlmmlgp.cjs → manage-help-text-CoX77cTJ.cjs} +3 -3
  73. package/components/menu/index.cjs +1 -1
  74. package/components/menu/index.js +1 -1
  75. package/components/multi-language-field/index.cjs +2 -2
  76. package/components/multi-language-field/index.js +7 -7
  77. package/components/number-field/index.cjs +4 -4
  78. package/components/number-field/index.js +16 -17
  79. package/components/observe-slot-text-ByPG1Lqw.cjs +18 -0
  80. package/components/{observe-slot-text-BG0H7bQK.js → observe-slot-text-CugmOzNZ.js} +20 -21
  81. package/components/overlay/index.cjs +7 -7
  82. package/components/overlay/index.js +45 -49
  83. package/components/overlay-BWBJGJN_.cjs +47 -0
  84. package/components/{overlay-D7EbnA6E.js → overlay-CtdbWiFs.js} +71 -74
  85. package/components/{pending-state-DHXuiejX.js → pending-state-B_JeaE62.js} +2 -2
  86. package/components/{pending-state-BHCOneQ7.cjs → pending-state-DWvTsSoS.cjs} +2 -2
  87. package/components/picker/index.cjs +1 -1
  88. package/components/picker/index.js +2 -2
  89. package/components/picker-CaC1rQOK.cjs +123 -0
  90. package/components/{picker-ChtCbFLB.js → picker-DwbcFve2.js} +109 -140
  91. package/components/popover/index.cjs +1 -1
  92. package/components/popover/index.js +1 -1
  93. package/components/popover-C4w3aY8m.cjs +30 -0
  94. package/components/{popover-bg0EQQ8p.js → popover-DLFHilGS.js} +6 -7
  95. package/components/progress-circle/index.cjs +1 -1
  96. package/components/progress-circle/index.js +1 -1
  97. package/components/progress-circle-BXyXtMcs.cjs +33 -0
  98. package/components/{progress-circle-BT2qW7LK.js → progress-circle-CUCJ_Ehs.js} +6 -7
  99. package/components/radio/index.cjs +2 -2
  100. package/components/radio/index.js +9 -10
  101. package/components/search/index.cjs +7 -7
  102. package/components/search/index.js +4 -5
  103. package/components/{base-BjTwmyRF.cjs → sized-mixin-DcvJLFeo.cjs} +1 -5
  104. package/components/{sized-mixin-PyCYpyQq.js → sized-mixin-cJbo3PKR.js} +5 -5
  105. package/components/slider/index.cjs +1 -1
  106. package/components/slider/index.js +6 -6
  107. package/components/{streaming-listener-wjMvsv4N.js → streaming-listener-BgCzt2TI.js} +5 -6
  108. package/components/streaming-listener-C2bsIc4J.cjs +18 -0
  109. package/components/swatch/index.cjs +7 -7
  110. package/components/swatch/index.js +11 -12
  111. package/components/switch/index.cjs +2 -2
  112. package/components/switch/index.js +5 -5
  113. package/components/tags/index.cjs +4 -4
  114. package/components/tags/index.js +12 -13
  115. package/components/text-field/index.cjs +3 -3
  116. package/components/text-field/index.js +8 -8
  117. package/components/text-field-BX_aHXSW.js +288 -0
  118. package/components/text-field-DAr2RyH9.cjs +81 -0
  119. package/components/toast/index.cjs +5 -5
  120. package/components/toast/index.js +5 -5
  121. package/components/tooltip/index.cjs +4 -4
  122. package/components/tooltip/index.js +6 -7
  123. package/components/unit-input/index.cjs +6 -6
  124. package/components/unit-input/index.js +5 -6
  125. package/components/utils.cjs +1 -1
  126. package/components/utils.js +4 -4
  127. package/package.json +1 -1
  128. package/components/action-group-BBoV2VL9.cjs +0 -20
  129. package/components/async-directive-CV2MII86.cjs +0 -22
  130. package/components/async-directive-FGzMycjH.js +0 -82
  131. package/components/base-D76d76ww.js +0 -26
  132. package/components/base-DNrOP9L3.js +0 -391
  133. package/components/base-DzbGOAPo.cjs +0 -30
  134. package/components/button-base-C1ceE1LF.cjs +0 -25
  135. package/components/clear-button-pnT9_M8M.cjs +0 -18
  136. package/components/close-button-CPtjRQ0R.cjs +0 -18
  137. package/components/color-loupe-DIBrhG1Y.cjs +0 -56
  138. package/components/directive-C7oCP5Bh.cjs +0 -22
  139. package/components/directive-helpers-BLDZnGQv.js +0 -28
  140. package/components/directive-helpers-C2vOfhFx.cjs +0 -22
  141. package/components/directive-oAbCiebi.js +0 -44
  142. package/components/field-group-eICRTHzI.cjs +0 -23
  143. package/components/field-label-DOIVL4S4.cjs +0 -25
  144. package/components/focusable-zn6qaMtV.cjs +0 -18
  145. package/components/if-defined-CYpcjGCb.js +0 -27
  146. package/components/if-defined-Cv6xanXh.cjs +0 -22
  147. package/components/index-BYumXRH5.cjs +0 -77
  148. package/components/like-anchor-CmIcmz5k.cjs +0 -32
  149. package/components/lit-html-B3ugcwD9.js +0 -248
  150. package/components/lit-html-p4Oxv2-5.cjs +0 -24
  151. package/components/observe-slot-text-CP_EB97X.cjs +0 -18
  152. package/components/overlay-B1JDPmUJ.cjs +0 -47
  153. package/components/picker-CLKdhX0B.cjs +0 -127
  154. package/components/popover-CdkB6GFb.cjs +0 -30
  155. package/components/progress-circle-DTeqfeun.cjs +0 -33
  156. package/components/query-BL-TJj7K.cjs +0 -22
  157. package/components/query-D_KR_GUc.js +0 -51
  158. package/components/query-assigned-elements-DjfhL1cl.js +0 -36
  159. package/components/query-assigned-elements-DsKsfk7G.cjs +0 -22
  160. package/components/query-assigned-nodes-BcKWmGzy.cjs +0 -22
  161. package/components/query-assigned-nodes-C76XVPWY.js +0 -36
  162. package/components/sized-mixin-BEemErtP.cjs +0 -18
  163. package/components/state-BG4JQVA1.js +0 -29
  164. package/components/state-DHaIxrnQ.cjs +0 -22
  165. package/components/streaming-listener-BQxEN4sL.cjs +0 -18
  166. package/components/style-map-BjBGQ_u3.cjs +0 -22
  167. package/components/style-map-BqvQDFJt.js +0 -53
  168. package/components/text-field-7ITo3Lac.js +0 -315
  169. package/components/text-field-CtUKbEQN.cjs +0 -85
  170. package/components/when-CDK1Tt5Y.js +0 -28
  171. package/components/when-CDZyJPvd.cjs +0 -22
@@ -1,22 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- "use strict";const c=require("./lit-html-p4Oxv2-5.cjs"),o=require("./directive-C7oCP5Bh.cjs");/**
19
- * @license
20
- * Copyright 2018 Google LLC
21
- * SPDX-License-Identifier: BSD-3-Clause
22
- */const l="important",u=" !"+l,d=o.e(class extends o.i{constructor(n){var t;if(super(n),n.type!==o.t.ATTRIBUTE||n.name!=="style"||((t=n.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(n){return Object.keys(n).reduce((t,s)=>{const e=n[s];return e==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`},"")}update(n,[t]){const{style:s}=n.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)t[e]==null&&(this.ft.delete(e),e.includes("-")?s.removeProperty(e):s[e]=null);for(const e in t){const r=t[e];if(r!=null){this.ft.add(e);const i=typeof r=="string"&&r.endsWith(u);e.includes("-")||i?s.setProperty(e,i?r.slice(0,-11):r,i?l:""):s[e]=r}}return c.T}});exports.o=d;
@@ -1,53 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import { T as l } from "./lit-html-B3ugcwD9.js";
19
- import { e as u, i as c, t as d } from "./directive-oAbCiebi.js";
20
- /**
21
- * @license
22
- * Copyright 2018 Google LLC
23
- * SPDX-License-Identifier: BSD-3-Clause
24
- */
25
- const o = "important", f = " !" + o, p = u(class extends c {
26
- constructor(n) {
27
- var e;
28
- if (super(n), n.type !== d.ATTRIBUTE || n.name !== "style" || ((e = n.strings) == null ? void 0 : e.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
29
- }
30
- render(n) {
31
- return Object.keys(n).reduce((e, s) => {
32
- const t = n[s];
33
- return t == null ? e : e + `${s = s.includes("-") ? s : s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${t};`;
34
- }, "");
35
- }
36
- update(n, [e]) {
37
- const { style: s } = n.element;
38
- if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
39
- for (const t of this.ft) e[t] == null && (this.ft.delete(t), t.includes("-") ? s.removeProperty(t) : s[t] = null);
40
- for (const t in e) {
41
- const r = e[t];
42
- if (r != null) {
43
- this.ft.add(t);
44
- const i = typeof r == "string" && r.endsWith(f);
45
- t.includes("-") || i ? s.setProperty(t, i ? r.slice(0, -11) : r, i ? o : "") : s[t] = r;
46
- }
47
- }
48
- return l;
49
- }
50
- });
51
- export {
52
- p as o
53
- };
@@ -1,315 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import { unsafeCSS as m, html as c, nothing as u } from "lit";
19
- import { n as o } from "./base-DNrOP9L3.js";
20
- import { r as x } from "./state-BG4JQVA1.js";
21
- import { e as g } from "./query-D_KR_GUc.js";
22
- import { o as a } from "./if-defined-CYpcjGCb.js";
23
- import { T as h, E as b } from "./lit-html-B3ugcwD9.js";
24
- import { e as z, i as y, t as s } from "./directive-oAbCiebi.js";
25
- import { f as k, m as w } from "./directive-helpers-BLDZnGQv.js";
26
- import { luzmoIcon as v, luzmoAlert as q, luzmoCheck as $ } from "@luzmo/icons";
27
- import { F as T } from "./focusable-zT9NFFYs.js";
28
- import { S as E } from "./sized-mixin-PyCYpyQq.js";
29
- import { M as S } from "./manage-help-text-BzWK2v8i.js";
30
- /**
31
- * @license
32
- * Copyright 2020 Google LLC
33
- * SPDX-License-Identifier: BSD-3-Clause
34
- */
35
- const _ = z(class extends y {
36
- constructor(l) {
37
- if (super(l), l.type !== s.PROPERTY && l.type !== s.ATTRIBUTE && l.type !== s.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
38
- if (!k(l)) throw Error("`live` bindings can only contain a single expression");
39
- }
40
- render(l) {
41
- return l;
42
- }
43
- update(l, [e]) {
44
- if (e === h || e === b) return e;
45
- const r = l.element, n = l.name;
46
- if (l.type === s.PROPERTY) {
47
- if (e === r[n]) return h;
48
- } else if (l.type === s.BOOLEAN_ATTRIBUTE) {
49
- if (!!e === r.hasAttribute(n)) return h;
50
- } else if (l.type === s.ATTRIBUTE && r.getAttribute(n) === e + "") return h;
51
- return w(l), e;
52
- }
53
- }), B = '#text-field{--luzmo-text-field-input-line-height: var( --luzmo-text-field-height, var(--text-field-height) );text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width, 240px);grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width, 2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap, 2px) + var(--luzmo-text-field-focus-indicator-width, 2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0;display:flex;align-items:center;justify-content:center}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid, var(--luzmo-text-field-icon-color-valid, var(--luzmo-color-positive)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid, var(--luzmo-text-field-icon-color-invalid, var(--luzmo-color-negative)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid, 0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid, 0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block, 0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet, var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block, 0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size, var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight, var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block, var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline, 12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet, var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align, start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width, 1.5);block-size:var(--luzmo-text-field-height, var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color, var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color, var(--luzmo-text-field-border-color, var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width, var(--luzmo-border-width));border-radius:var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-text-color-default, var(--luzmo-font-color)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-placeholder-text-color-default, var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus, var(--luzmo-text-field-border-color-focus, var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-text-color-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-placeholder-text-color-focus, var(--luzmo-color-disabled)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus, var(--luzmo-text-field-border-color-keyboard-focus, var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width, 0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)));outline-offset:var(--luzmo-text-field-focus-indicator-gap, 2px);color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-text-color-keyboard-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-placeholder-text-color-keyboard-focus, var(--luzmo-color-disabled)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid, var(--luzmo-text-field-text-color-valid, var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid, var(--luzmo-text-field-text-color-invalid, var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(luzmo-danger-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus, var(--luzmo-text-field-border-color-invalid-focus, var(luzmo-danger-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus, var(--luzmo-text-field-border-color-invalid-keyboard-focus, var(luzmo-danger-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet, 0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet, 0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-color-disabled)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-color-disabled)));background-color:initial}@media (hover: hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover, var(--luzmo-text-field-border-color-hover, rgba(var(--luzmo-primary-rgb), .3)))}.input:hover,#text-field:hover .input{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-text-color-hover, var(--luzmo-font-color-hard)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-placeholder-text-color-hover, var(--luzmo-color-disabled)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover, var(--luzmo-text-field-border-color-focus-hover, var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-text-color-focus-hover, var(--luzmo-font-color-hard)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-placeholder-text-color-focus-hover, var(--luzmo-color-disabled)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover, var(--luzmo-text-field-border-color-invalid-hover, var(luzmo-danger-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover, var(--luzmo-text-field-border-color-invalid-focus-hover, var(luzmo-danger-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label, var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side, var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side, 12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height: normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size, 112px);min-block-size:var(--luzmo-text-area-min-block-size, 56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet, var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors: active){:host{--highcontrast-text-field-border-color-hover: Highlight;--highcontrast-text-field-border-color-focus: Highlight;--highcontrast-text-field-border-color-keyboard-focus: CanvasText;--highcontrast-text-field-focus-indicator-color: Highlight;--highcontrast-text-field-border-color-invalid-default: Highlight;--highcontrast-text-field-border-color-invalid-hover: Highlight;--highcontrast-text-field-border-color-invalid-focus: Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus: Highlight;--highcontrast-text-field-text-color-valid: CanvasText;--highcontrast-text-field-text-color-invalid: CanvasText}#text-field .input{--highcontrast-text-field-text-color-default: CanvasText;--highcontrast-text-field-text-color-hover: CanvasText;--highcontrast-text-field-text-color-keyboard-focus: CanvasText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default: GrayText;--highcontrast-text-field-text-color-hover: GrayText;--highcontrast-text-field-text-color-keyboard-focus: GrayText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}}:host{display:inline-flex;flex-direction:column;inline-size:var(--luzmo-text-field-width, 240px)}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width, 1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{display:inline-grid;--luzmo-text-field-input-line-height: normal}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out,border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{background-color:#0000;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size, var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap, 2px) * 2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){position:absolute;top:0;left:0;height:100%;resize:none;overflow:hidden}:host{--text-field-height: var(--luzmo-component-height);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 14px;--text-field-spacing-inline: 12px;--text-field-icon-size-invalid: 18px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 12px;--text-field-icon-spacing-inline-end-valid: 15px;--text-field-icon-spacing-block-invalid: 7px;--text-field-icon-spacing-block-valid: 4px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-4);--text-field-character-count-font-size: var(--luzmo-font-size-s);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 8px;--text-area-min-block-size-quiet: var(--luzmo-component-height)}:host([size=s]){--text-field-height: var(--luzmo-component-height-s);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 8px;--text-field-placeholder-font-size: 12px;--text-field-spacing-inline: 9px;--text-field-icon-size-invalid: 16px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 9px;--text-field-icon-spacing-inline-end-valid: 11px;--text-field-icon-spacing-block-invalid: 2px;--text-field-icon-spacing-block-valid: -1px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-3);--text-field-character-count-font-size: var(--luzmo-font-size-xs);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 4px;--text-area-min-block-size-quiet: var(--luzmo-component-height-s)}:host([size=l]){--text-field-height: var(--luzmo-component-height-l);--text-field-label-spacing-block-quiet: -12px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 16px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 20px;--text-field-icon-size-valid: 12px;--text-field-icon-spacing-inline-end-invalid: 15px;--text-field-icon-spacing-inline-end-valid: 17px;--text-field-icon-spacing-block-invalid: 10px;--text-field-icon-spacing-block-valid: 8px;--text-field-icon-spacing-inline-start-invalid: 15px;--text-field-icon-spacing-inline-start-valid: 15px;--text-field-character-count-font-size: var(--luzmo-font-size);--text-field-character-count-spacing-block: 9px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 11px;--text-area-min-block-size-quiet: var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height: var(--luzmo-component-height-xl);--text-field-label-spacing-block-quiet: -15px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 18px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 22px;--text-field-icon-size-valid: 14px;--text-field-icon-spacing-inline-end-invalid: 18px;--text-field-icon-spacing-inline-end-valid: 20px;--text-field-icon-spacing-block-invalid: 12px;--text-field-icon-spacing-block-valid: 13px;--text-field-icon-spacing-inline-start-invalid: 18px;--text-field-icon-spacing-inline-start-valid: 18px;--text-field-character-count-font-size: var(--luzmo-font-size-l);--text-field-character-count-spacing-block: 11px;--text-field-character-count-spacing-block-quiet: -4px;--text-field-character-count-spacing-block-side: 14px;--text-area-min-block-size-quiet: var(--luzmo-component-height-xl)}';
54
- var C = Object.defineProperty, L = Object.getOwnPropertyDescriptor, t = (l, e, r, n) => {
55
- for (var d = n > 1 ? void 0 : n ? L(e, r) : e, f = l.length - 1, p; f >= 0; f--)
56
- (p = l[f]) && (d = (n ? p(e, r, d) : p(d)) || d);
57
- return n && d && C(e, r, d), d;
58
- };
59
- const I = ["text", "url", "tel", "email", "password"];
60
- class i extends S(
61
- E(T, {
62
- noDefaultSize: !0
63
- })
64
- ) {
65
- constructor() {
66
- super(...arguments), this.allowedKeys = "", this.focused = !1, this.invalid = !1, this.label = "", this.placeholder = "", this._type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.readonly = !1, this.rows = -1, this.valid = !1, this._value = "", this.quiet = !1, this.required = !1;
67
- }
68
- static get styles() {
69
- return [m(B)];
70
- }
71
- set type(e) {
72
- const r = this._type;
73
- this._type = e, this.requestUpdate("type", r);
74
- }
75
- get type() {
76
- return I.find((e) => e === this._type) ?? "text";
77
- }
78
- set value(e) {
79
- if (e === this.value)
80
- return;
81
- const r = this._value;
82
- this._value = e, this.requestUpdate("value", r);
83
- }
84
- get value() {
85
- return this._value;
86
- }
87
- get focusElement() {
88
- return this.inputElement;
89
- }
90
- /**
91
- * Sets the start and end positions of the current selection.
92
- *
93
- * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the
94
- * element's value is treated as pointing to the end of the value.
95
- * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than
96
- * the length of the element's value is treated as pointing to the end of the value.
97
- * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
98
- * have been performed.
99
- */
100
- setSelectionRange(e, r, n = "none") {
101
- this.inputElement.setSelectionRange(
102
- e,
103
- r,
104
- n
105
- );
106
- }
107
- /**
108
- * Selects all the text.
109
- */
110
- select() {
111
- this.inputElement.select();
112
- }
113
- handleInput(e) {
114
- if (this.allowedKeys && this.inputElement.value && !new RegExp(`^[${this.allowedKeys}]*$`, "u").test(this.inputElement.value)) {
115
- const d = this.inputElement.selectionStart - 1;
116
- this.inputElement.value = this.value.toString(), this.inputElement.setSelectionRange(d, d);
117
- return;
118
- }
119
- this.value = this.inputElement.value;
120
- }
121
- handleChange() {
122
- this.dispatchEvent(
123
- new Event("change", {
124
- bubbles: !0,
125
- composed: !0
126
- })
127
- );
128
- }
129
- onFocus() {
130
- this.focused = !this.readonly && !0;
131
- }
132
- onBlur(e) {
133
- this.focused = !this.readonly && !1;
134
- }
135
- handleInputElementPointerdown() {
136
- }
137
- renderStateIcons() {
138
- return this.invalid ? c`
139
- <div id="invalid" class="icon">${v(q)}</div>
140
- ` : this.valid ? c`
141
- <div id="valid" class="icon">${v($)}</div>
142
- ` : u;
143
- }
144
- get displayValue() {
145
- return this.value.toString();
146
- }
147
- // prettier-ignore
148
- get renderMultiline() {
149
- return c`
150
- ${this.multiline && this.grows && this.rows === -1 ? c`
151
- <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
152
- </div>
153
- ` : u}
154
- <!-- @ts-ignore -->
155
- <textarea
156
- name=${a(this.name || void 0)}
157
- aria-describedby=${this.helpTextId}
158
- aria-label=${this.label || this.appliedLabel || this.placeholder}
159
- aria-invalid=${a(this.invalid || void 0)}
160
- class="input"
161
- maxlength=${a(this.maxlength > -1 ? this.maxlength : void 0)}
162
- minlength=${a(this.minlength > -1 ? this.minlength : void 0)}
163
- title=${this.invalid ? "" : u}
164
- pattern=${a(this.pattern)}
165
- placeholder=${this.placeholder}
166
- .value=${this.displayValue}
167
- @change=${this.handleChange}
168
- @input=${this.handleInput}
169
- @focus=${this.onFocus}
170
- @blur=${this.onBlur}
171
- ?disabled=${this.disabled}
172
- ?required=${this.required}
173
- ?readonly=${this.readonly}
174
- rows=${a(this.rows > -1 ? this.rows : void 0)}
175
- autocomplete=${a(this.autocomplete)}
176
- ></textarea>
177
- `;
178
- }
179
- get renderInput() {
180
- return c`
181
- <!-- @ts-ignore -->
182
- <input
183
- name=${a(this.name || void 0)}
184
- type=${this.type}
185
- aria-describedby=${this.helpTextId}
186
- aria-label=${this.label || this.appliedLabel || this.placeholder}
187
- aria-invalid=${a(this.invalid || void 0)}
188
- class="input"
189
- title=${this.invalid ? "" : u}
190
- maxlength=${a(this.maxlength > -1 ? this.maxlength : void 0)}
191
- minlength=${a(this.minlength > -1 ? this.minlength : void 0)}
192
- pattern=${a(this.pattern)}
193
- placeholder=${this.placeholder}
194
- .value=${_(this.displayValue)}
195
- @change=${this.handleChange}
196
- @input=${this.handleInput}
197
- @pointerdown=${this.handleInputElementPointerdown}
198
- @focus=${this.onFocus}
199
- @blur=${this.onBlur}
200
- ?disabled=${this.disabled}
201
- ?required=${this.required}
202
- ?readonly=${this.readonly}
203
- autocomplete=${a(this.autocomplete)}
204
- />
205
- `;
206
- }
207
- renderField() {
208
- return c`
209
- ${this.renderStateIcons()}
210
- ${this.multiline ? this.renderMultiline : this.renderInput}
211
- `;
212
- }
213
- render() {
214
- return c`
215
- <div id="text-field">${this.renderField()}</div>
216
- ${this.renderHelpText(this.invalid)}
217
- `;
218
- }
219
- update(e) {
220
- (e.has("value") || e.has("required") && this.required) && this.updateComplete.then(() => {
221
- this.checkValidity();
222
- }), super.update(e);
223
- }
224
- checkValidity() {
225
- let e = this.inputElement.checkValidity();
226
- return (this.required || this.value && this.pattern) && ((this.disabled || this.multiline) && this.pattern && (e = new RegExp(`^${this.pattern}$`, "u").test(this.value.toString())), this.minlength !== void 0 && (e = e && this.value.toString().length >= this.minlength), this.valid = e, this.invalid = !e), e;
227
- }
228
- }
229
- t([
230
- x()
231
- ], i.prototype, "appliedLabel", 2);
232
- t([
233
- o({ attribute: "allowed-keys" })
234
- ], i.prototype, "allowedKeys", 2);
235
- t([
236
- o({ type: Boolean, reflect: !0 })
237
- ], i.prototype, "focused", 2);
238
- t([
239
- g(".input:not(#sizer)")
240
- ], i.prototype, "inputElement", 2);
241
- t([
242
- o({ type: Boolean, reflect: !0 })
243
- ], i.prototype, "invalid", 2);
244
- t([
245
- o()
246
- ], i.prototype, "label", 2);
247
- t([
248
- o({ type: String, reflect: !0 })
249
- ], i.prototype, "name", 2);
250
- t([
251
- o()
252
- ], i.prototype, "placeholder", 2);
253
- t([
254
- x()
255
- ], i.prototype, "type", 1);
256
- t([
257
- o({ attribute: "type", reflect: !0 })
258
- ], i.prototype, "_type", 2);
259
- t([
260
- o()
261
- ], i.prototype, "pattern", 2);
262
- t([
263
- o({ type: Boolean, reflect: !0 })
264
- ], i.prototype, "grows", 2);
265
- t([
266
- o({ type: Number })
267
- ], i.prototype, "maxlength", 2);
268
- t([
269
- o({ type: Number })
270
- ], i.prototype, "minlength", 2);
271
- t([
272
- o({ type: Boolean, reflect: !0 })
273
- ], i.prototype, "multiline", 2);
274
- t([
275
- o({ type: Boolean, reflect: !0 })
276
- ], i.prototype, "readonly", 2);
277
- t([
278
- o({ type: Number })
279
- ], i.prototype, "rows", 2);
280
- t([
281
- o({ type: Boolean, reflect: !0 })
282
- ], i.prototype, "valid", 2);
283
- t([
284
- o({ type: String })
285
- ], i.prototype, "value", 1);
286
- t([
287
- o({ type: Boolean, reflect: !0 })
288
- ], i.prototype, "quiet", 2);
289
- t([
290
- o({ type: Boolean, reflect: !0 })
291
- ], i.prototype, "required", 2);
292
- t([
293
- o({ type: String, reflect: !0 })
294
- ], i.prototype, "autocomplete", 2);
295
- class R extends i {
296
- constructor() {
297
- super(...arguments), this._value = "";
298
- }
299
- set value(e) {
300
- if (e === this.value)
301
- return;
302
- const r = this._value;
303
- this._value = e, this.requestUpdate("value", r);
304
- }
305
- get value() {
306
- return this._value;
307
- }
308
- }
309
- t([
310
- o({ type: String })
311
- ], R.prototype, "value", 1);
312
- export {
313
- R as L,
314
- i as a
315
- };
@@ -1,85 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- "use strict";const n=require("lit"),o=require("./base-DzbGOAPo.cjs"),x=require("./state-DHaIxrnQ.cjs"),g=require("./query-BL-TJj7K.cjs"),a=require("./if-defined-Cv6xanXh.cjs"),u=require("./lit-html-p4Oxv2-5.cjs"),s=require("./directive-C7oCP5Bh.cjs"),v=require("./directive-helpers-C2vOfhFx.cjs"),h=require("@luzmo/icons"),b=require("./focusable-zn6qaMtV.cjs"),z=require("./sized-mixin-BEemErtP.cjs"),y=require("./manage-help-text-BKlmmlgp.cjs");/**
19
- * @license
20
- * Copyright 2020 Google LLC
21
- * SPDX-License-Identifier: BSD-3-Clause
22
- */const k=s.e(class extends s.i{constructor(l){if(super(l),l.type!==s.t.PROPERTY&&l.type!==s.t.ATTRIBUTE&&l.type!==s.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!v.f(l))throw Error("`live` bindings can only contain a single expression")}render(l){return l}update(l,[e]){if(e===u.T||e===u.E)return e;const r=l.element,d=l.name;if(l.type===s.t.PROPERTY){if(e===r[d])return u.T}else if(l.type===s.t.BOOLEAN_ATTRIBUTE){if(!!e===r.hasAttribute(d))return u.T}else if(l.type===s.t.ATTRIBUTE&&r.getAttribute(d)===e+"")return u.T;return v.m(l),e}}),w='#text-field{--luzmo-text-field-input-line-height: var( --luzmo-text-field-height, var(--text-field-height) );text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width, 240px);grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width, 2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap, 2px) + var(--luzmo-text-field-focus-indicator-width, 2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0;display:flex;align-items:center;justify-content:center}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid, var(--luzmo-text-field-icon-color-valid, var(--luzmo-color-positive)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid, var(--luzmo-text-field-icon-color-invalid, var(--luzmo-color-negative)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid, 0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid, 0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block, 0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet, var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block, 0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size, var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight, var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block, var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline, 12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet, var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align, start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width, 1.5);block-size:var(--luzmo-text-field-height, var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color, var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color, var(--luzmo-text-field-border-color, var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width, var(--luzmo-border-width));border-radius:var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-text-color-default, var(--luzmo-font-color)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-placeholder-text-color-default, var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus, var(--luzmo-text-field-border-color-focus, var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-text-color-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-placeholder-text-color-focus, var(--luzmo-color-disabled)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus, var(--luzmo-text-field-border-color-keyboard-focus, var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width, 0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)));outline-offset:var(--luzmo-text-field-focus-indicator-gap, 2px);color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-text-color-keyboard-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-placeholder-text-color-keyboard-focus, var(--luzmo-color-disabled)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid, var(--luzmo-text-field-text-color-valid, var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid, var(--luzmo-text-field-text-color-invalid, var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(luzmo-danger-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus, var(--luzmo-text-field-border-color-invalid-focus, var(luzmo-danger-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus, var(--luzmo-text-field-border-color-invalid-keyboard-focus, var(luzmo-danger-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet, 0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet, 0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-color-disabled)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-color-disabled)));background-color:initial}@media (hover: hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover, var(--luzmo-text-field-border-color-hover, rgba(var(--luzmo-primary-rgb), .3)))}.input:hover,#text-field:hover .input{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-text-color-hover, var(--luzmo-font-color-hard)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-placeholder-text-color-hover, var(--luzmo-color-disabled)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover, var(--luzmo-text-field-border-color-focus-hover, var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-text-color-focus-hover, var(--luzmo-font-color-hard)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-placeholder-text-color-focus-hover, var(--luzmo-color-disabled)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover, var(--luzmo-text-field-border-color-invalid-hover, var(luzmo-danger-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover, var(--luzmo-text-field-border-color-invalid-focus-hover, var(luzmo-danger-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label, var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side, var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side, 12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height: normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size, 112px);min-block-size:var(--luzmo-text-area-min-block-size, 56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet, var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors: active){:host{--highcontrast-text-field-border-color-hover: Highlight;--highcontrast-text-field-border-color-focus: Highlight;--highcontrast-text-field-border-color-keyboard-focus: CanvasText;--highcontrast-text-field-focus-indicator-color: Highlight;--highcontrast-text-field-border-color-invalid-default: Highlight;--highcontrast-text-field-border-color-invalid-hover: Highlight;--highcontrast-text-field-border-color-invalid-focus: Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus: Highlight;--highcontrast-text-field-text-color-valid: CanvasText;--highcontrast-text-field-text-color-invalid: CanvasText}#text-field .input{--highcontrast-text-field-text-color-default: CanvasText;--highcontrast-text-field-text-color-hover: CanvasText;--highcontrast-text-field-text-color-keyboard-focus: CanvasText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default: GrayText;--highcontrast-text-field-text-color-hover: GrayText;--highcontrast-text-field-text-color-keyboard-focus: GrayText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}}:host{display:inline-flex;flex-direction:column;inline-size:var(--luzmo-text-field-width, 240px)}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width, 1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{display:inline-grid;--luzmo-text-field-input-line-height: normal}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out,border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{background-color:#0000;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size, var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap, 2px) * 2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){position:absolute;top:0;left:0;height:100%;resize:none;overflow:hidden}:host{--text-field-height: var(--luzmo-component-height);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 14px;--text-field-spacing-inline: 12px;--text-field-icon-size-invalid: 18px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 12px;--text-field-icon-spacing-inline-end-valid: 15px;--text-field-icon-spacing-block-invalid: 7px;--text-field-icon-spacing-block-valid: 4px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-4);--text-field-character-count-font-size: var(--luzmo-font-size-s);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 8px;--text-area-min-block-size-quiet: var(--luzmo-component-height)}:host([size=s]){--text-field-height: var(--luzmo-component-height-s);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 8px;--text-field-placeholder-font-size: 12px;--text-field-spacing-inline: 9px;--text-field-icon-size-invalid: 16px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 9px;--text-field-icon-spacing-inline-end-valid: 11px;--text-field-icon-spacing-block-invalid: 2px;--text-field-icon-spacing-block-valid: -1px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-3);--text-field-character-count-font-size: var(--luzmo-font-size-xs);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 4px;--text-area-min-block-size-quiet: var(--luzmo-component-height-s)}:host([size=l]){--text-field-height: var(--luzmo-component-height-l);--text-field-label-spacing-block-quiet: -12px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 16px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 20px;--text-field-icon-size-valid: 12px;--text-field-icon-spacing-inline-end-invalid: 15px;--text-field-icon-spacing-inline-end-valid: 17px;--text-field-icon-spacing-block-invalid: 10px;--text-field-icon-spacing-block-valid: 8px;--text-field-icon-spacing-inline-start-invalid: 15px;--text-field-icon-spacing-inline-start-valid: 15px;--text-field-character-count-font-size: var(--luzmo-font-size);--text-field-character-count-spacing-block: 9px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 11px;--text-area-min-block-size-quiet: var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height: var(--luzmo-component-height-xl);--text-field-label-spacing-block-quiet: -15px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 18px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 22px;--text-field-icon-size-valid: 14px;--text-field-icon-spacing-inline-end-invalid: 18px;--text-field-icon-spacing-inline-end-valid: 20px;--text-field-icon-spacing-block-invalid: 12px;--text-field-icon-spacing-block-valid: 13px;--text-field-icon-spacing-inline-start-invalid: 18px;--text-field-icon-spacing-inline-start-valid: 18px;--text-field-character-count-font-size: var(--luzmo-font-size-l);--text-field-character-count-spacing-block: 11px;--text-field-character-count-spacing-block-quiet: -4px;--text-field-character-count-spacing-block-side: 14px;--text-area-min-block-size-quiet: var(--luzmo-component-height-xl)}';var q=Object.defineProperty,$=Object.getOwnPropertyDescriptor,i=(l,e,r,d)=>{for(var c=d>1?void 0:d?$(e,r):e,f=l.length-1,p;f>=0;f--)(p=l[f])&&(c=(d?p(e,r,c):p(c))||c);return d&&c&&q(e,r,c),c};const T=["text","url","tel","email","password"];class t extends y.ManageHelpText(z.SizedMixin(b.Focusable,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.focused=!1,this.invalid=!1,this.label="",this.placeholder="",this._type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.readonly=!1,this.rows=-1,this.valid=!1,this._value="",this.quiet=!1,this.required=!1}static get styles(){return[n.unsafeCSS(w)]}set type(e){const r=this._type;this._type=e,this.requestUpdate("type",r)}get type(){return T.find(e=>e===this._type)??"text"}set value(e){if(e===this.value)return;const r=this._value;this._value=e,this.requestUpdate("value",r)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,r,d="none"){this.inputElement.setSelectionRange(e,r,d)}select(){this.inputElement.select()}handleInput(e){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const c=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(c,c);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(e){this.focused=!this.readonly&&!1}handleInputElementPointerdown(){}renderStateIcons(){return this.invalid?n.html`
23
- <div id="invalid" class="icon">${h.luzmoIcon(h.luzmoAlert)}</div>
24
- `:this.valid?n.html`
25
- <div id="valid" class="icon">${h.luzmoIcon(h.luzmoCheck)}</div>
26
- `:n.nothing}get displayValue(){return this.value.toString()}get renderMultiline(){return n.html`
27
- ${this.multiline&&this.grows&&this.rows===-1?n.html`
28
- <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
29
- </div>
30
- `:n.nothing}
31
- <!-- @ts-ignore -->
32
- <textarea
33
- name=${a.o(this.name||void 0)}
34
- aria-describedby=${this.helpTextId}
35
- aria-label=${this.label||this.appliedLabel||this.placeholder}
36
- aria-invalid=${a.o(this.invalid||void 0)}
37
- class="input"
38
- maxlength=${a.o(this.maxlength>-1?this.maxlength:void 0)}
39
- minlength=${a.o(this.minlength>-1?this.minlength:void 0)}
40
- title=${this.invalid?"":n.nothing}
41
- pattern=${a.o(this.pattern)}
42
- placeholder=${this.placeholder}
43
- .value=${this.displayValue}
44
- @change=${this.handleChange}
45
- @input=${this.handleInput}
46
- @focus=${this.onFocus}
47
- @blur=${this.onBlur}
48
- ?disabled=${this.disabled}
49
- ?required=${this.required}
50
- ?readonly=${this.readonly}
51
- rows=${a.o(this.rows>-1?this.rows:void 0)}
52
- autocomplete=${a.o(this.autocomplete)}
53
- ></textarea>
54
- `}get renderInput(){return n.html`
55
- <!-- @ts-ignore -->
56
- <input
57
- name=${a.o(this.name||void 0)}
58
- type=${this.type}
59
- aria-describedby=${this.helpTextId}
60
- aria-label=${this.label||this.appliedLabel||this.placeholder}
61
- aria-invalid=${a.o(this.invalid||void 0)}
62
- class="input"
63
- title=${this.invalid?"":n.nothing}
64
- maxlength=${a.o(this.maxlength>-1?this.maxlength:void 0)}
65
- minlength=${a.o(this.minlength>-1?this.minlength:void 0)}
66
- pattern=${a.o(this.pattern)}
67
- placeholder=${this.placeholder}
68
- .value=${k(this.displayValue)}
69
- @change=${this.handleChange}
70
- @input=${this.handleInput}
71
- @pointerdown=${this.handleInputElementPointerdown}
72
- @focus=${this.onFocus}
73
- @blur=${this.onBlur}
74
- ?disabled=${this.disabled}
75
- ?required=${this.required}
76
- ?readonly=${this.readonly}
77
- autocomplete=${a.o(this.autocomplete)}
78
- />
79
- `}renderField(){return n.html`
80
- ${this.renderStateIcons()}
81
- ${this.multiline?this.renderMultiline:this.renderInput}
82
- `}render(){return n.html`
83
- <div id="text-field">${this.renderField()}</div>
84
- ${this.renderHelpText(this.invalid)}
85
- `}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),this.minlength!==void 0&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}i([x.r()],t.prototype,"appliedLabel",2);i([o.n({attribute:"allowed-keys"})],t.prototype,"allowedKeys",2);i([o.n({type:Boolean,reflect:!0})],t.prototype,"focused",2);i([g.e(".input:not(#sizer)")],t.prototype,"inputElement",2);i([o.n({type:Boolean,reflect:!0})],t.prototype,"invalid",2);i([o.n()],t.prototype,"label",2);i([o.n({type:String,reflect:!0})],t.prototype,"name",2);i([o.n()],t.prototype,"placeholder",2);i([x.r()],t.prototype,"type",1);i([o.n({attribute:"type",reflect:!0})],t.prototype,"_type",2);i([o.n()],t.prototype,"pattern",2);i([o.n({type:Boolean,reflect:!0})],t.prototype,"grows",2);i([o.n({type:Number})],t.prototype,"maxlength",2);i([o.n({type:Number})],t.prototype,"minlength",2);i([o.n({type:Boolean,reflect:!0})],t.prototype,"multiline",2);i([o.n({type:Boolean,reflect:!0})],t.prototype,"readonly",2);i([o.n({type:Number})],t.prototype,"rows",2);i([o.n({type:Boolean,reflect:!0})],t.prototype,"valid",2);i([o.n({type:String})],t.prototype,"value",1);i([o.n({type:Boolean,reflect:!0})],t.prototype,"quiet",2);i([o.n({type:Boolean,reflect:!0})],t.prototype,"required",2);i([o.n({type:String,reflect:!0})],t.prototype,"autocomplete",2);class m extends t{constructor(){super(...arguments),this._value=""}set value(e){if(e===this.value)return;const r=this._value;this._value=e,this.requestUpdate("value",r)}get value(){return this._value}}i([o.n({type:String})],m.prototype,"value",1);exports.LuzmoTextField=m;exports.LuzmoTextFieldBase=t;
@@ -1,28 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- /**
19
- * @license
20
- * Copyright 2021 Google LLC
21
- * SPDX-License-Identifier: BSD-3-Clause
22
- */
23
- function o(r, n, e) {
24
- return r ? n(r) : e == null ? void 0 : e(r);
25
- }
26
- export {
27
- o as n
28
- };
@@ -1,22 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- "use strict";/**
19
- * @license
20
- * Copyright 2021 Google LLC
21
- * SPDX-License-Identifier: BSD-3-Clause
22
- */function c(n,u,r){return n?u(n):r==null?void 0:r(n)}exports.n=c;