@helixui/library 1.1.2-next.4 → 1.1.2-next.6

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 (40) hide show
  1. package/custom-elements.json +691 -755
  2. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts +8 -0
  3. package/dist/components/hx-patient-banner/hx-patient-banner.d.ts.map +1 -1
  4. package/dist/components/hx-patient-banner/hx-patient-banner.styles.d.ts.map +1 -1
  5. package/dist/components/hx-patient-banner/index.js +1 -1
  6. package/dist/components/hx-phi-field/hx-phi-field.d.ts +27 -2
  7. package/dist/components/hx-phi-field/hx-phi-field.d.ts.map +1 -1
  8. package/dist/components/hx-phi-field/hx-phi-field.styles.d.ts.map +1 -1
  9. package/dist/components/hx-phi-field/index.js +1 -1
  10. package/dist/components/hx-select/hx-select.d.ts +1 -0
  11. package/dist/components/hx-select/hx-select.d.ts.map +1 -1
  12. package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
  13. package/dist/components/hx-select/index.js +1 -1
  14. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts +17 -1
  15. package/dist/components/hx-status-indicator/hx-status-indicator.d.ts.map +1 -1
  16. package/dist/components/hx-status-indicator/hx-status-indicator.styles.d.ts.map +1 -1
  17. package/dist/components/hx-status-indicator/index.js +1 -1
  18. package/dist/css/helix-all.css +144 -48
  19. package/dist/css/helix-feedback.css +33 -4
  20. package/dist/css/helix-forms.css +68 -41
  21. package/dist/css/hx-patient-banner.css +31 -3
  22. package/dist/css/hx-phi-field.css +12 -0
  23. package/dist/css/hx-select.css +68 -41
  24. package/dist/css/hx-status-indicator.css +33 -4
  25. package/dist/css/index.css +1 -1
  26. package/dist/css/manifest.json +11 -5
  27. package/dist/index.js +4 -4
  28. package/dist/shared/{hx-patient-banner-BoJHddAL.js → hx-patient-banner-wk4qWmsH.js} +88 -47
  29. package/dist/shared/hx-patient-banner-wk4qWmsH.js.map +1 -0
  30. package/dist/shared/{hx-phi-field-EDWna59z.js → hx-phi-field-DX9z3nu0.js} +67 -33
  31. package/dist/shared/hx-phi-field-DX9z3nu0.js.map +1 -0
  32. package/dist/shared/{hx-select-4-nHL0vd.js → hx-select-BWzxWZs_.js} +82 -55
  33. package/dist/shared/hx-select-BWzxWZs_.js.map +1 -0
  34. package/dist/shared/{hx-status-indicator-4ClvA5mU.js → hx-status-indicator-Dl3Y34mc.js} +76 -35
  35. package/dist/shared/hx-status-indicator-Dl3Y34mc.js.map +1 -0
  36. package/package.json +2 -2
  37. package/dist/shared/hx-patient-banner-BoJHddAL.js.map +0 -1
  38. package/dist/shared/hx-phi-field-EDWna59z.js.map +0 -1
  39. package/dist/shared/hx-select-4-nHL0vd.js.map +0 -1
  40. package/dist/shared/hx-status-indicator-4ClvA5mU.js.map +0 -1
@@ -1,14 +1,51 @@
1
1
  import { css as g, html as h, nothing as n } from "lit";
2
- import { property as d, state as _, query as x, customElement as m } from "lit/decorators.js";
3
- import { classMap as u } from "lit/directives/class-map.js";
2
+ import { property as d, state as u, query as x, customElement as m } from "lit/decorators.js";
3
+ import { classMap as _ } from "lit/directives/class-map.js";
4
4
  import { ifDefined as c } from "lit/directives/if-defined.js";
5
5
  import { repeat as y } from "lit/directives/repeat.js";
6
6
  import { tokenStyles as $ } from "@helixui/tokens/lit";
7
7
  import { d as I } from "./dev-warn-YlwPHjtX.js";
8
8
  import { H as w, c as O } from "./id-counter-JhvVCnjh.js";
9
9
  const k = g`
10
+ /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
10
11
  :host {
11
12
  display: block;
13
+
14
+ /* Background & foreground */
15
+ --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
16
+ --_color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
17
+ --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
18
+
19
+ /* Label */
20
+ --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));
21
+
22
+ /* Border */
23
+ --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
24
+ --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
25
+
26
+ /* Focus ring */
27
+ --_focus-ring-color: var(
28
+ --hx-select-focus-ring-color,
29
+ var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
30
+ );
31
+
32
+ /* Error */
33
+ --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
34
+
35
+ /* Chevron */
36
+ --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
37
+ --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
38
+
39
+ /* Listbox */
40
+ --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
41
+ --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
42
+ --_option-selected-bg: var(
43
+ --hx-select-option-selected-bg,
44
+ var(--hx-color-primary-100, #dbeafe)
45
+ );
46
+
47
+ /* Typography */
48
+ --_font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));
12
49
  }
13
50
 
14
51
  :host([disabled]) {
@@ -24,7 +61,7 @@ const k = g`
24
61
  display: flex;
25
62
  flex-direction: column;
26
63
  gap: var(--hx-space-1, 0.25rem);
27
- font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));
64
+ font-family: var(--_font-family);
28
65
  position: relative;
29
66
  }
30
67
 
@@ -34,7 +71,7 @@ const k = g`
34
71
  gap: var(--hx-space-1, 0.25rem);
35
72
  font-size: var(--hx-font-size-sm, 0.875rem);
36
73
  font-weight: var(--hx-font-weight-medium, 500);
37
- color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));
74
+ color: var(--_label-color);
38
75
  line-height: var(--hx-line-height-normal, 1.5);
39
76
  }
40
77
 
@@ -55,11 +92,10 @@ const k = g`
55
92
  gap: var(--hx-space-2, 0.5rem);
56
93
  width: 100%;
57
94
  min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
58
- border: var(--hx-border-width-thin, 1px) solid
59
- var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
60
- border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
61
- background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
62
- color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
95
+ border: var(--hx-border-width-thin, 1px) solid var(--_border-color);
96
+ border-radius: var(--_border-radius);
97
+ background-color: var(--_bg);
98
+ color: var(--_color);
63
99
  font-family: inherit;
64
100
  font-size: var(--hx-font-size-md, 1rem);
65
101
  line-height: var(--hx-line-height-normal, 1.5);
@@ -74,18 +110,11 @@ const k = g`
74
110
 
75
111
  .field__trigger:focus,
76
112
  .field__trigger:focus-visible {
77
- border-color: var(
78
- --hx-select-focus-ring-color,
79
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
80
- );
113
+ border-color: var(--_focus-ring-color);
81
114
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
82
115
  color-mix(
83
116
  in srgb,
84
- var(
85
- --hx-select-focus-ring-color,
86
- var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
87
- )
88
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
117
+ var(--_focus-ring-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
89
118
  transparent
90
119
  );
91
120
  }
@@ -115,15 +144,15 @@ const k = g`
115
144
  }
116
145
 
117
146
  .field__trigger--placeholder .field__trigger-value {
118
- color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
147
+ color: var(--_placeholder-color);
119
148
  }
120
149
 
121
150
  .field__chevron {
122
151
  flex-shrink: 0;
123
- width: 12px;
124
- height: 8px;
152
+ width: calc(var(--_chevron-size) * 1.5);
153
+ height: var(--_chevron-size);
125
154
  position: relative;
126
- color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
155
+ color: var(--_chevron-color);
127
156
  pointer-events: none;
128
157
  transition: transform var(--hx-transition-fast, 150ms ease);
129
158
  }
@@ -132,11 +161,11 @@ const k = g`
132
161
  content: '';
133
162
  position: absolute;
134
163
  top: 0;
135
- left: 2px;
136
- width: 7px;
137
- height: 7px;
138
- border-inline-end: 1.5px solid currentColor;
139
- border-bottom: 1.5px solid currentColor;
164
+ left: var(--hx-space-px, 2px);
165
+ width: var(--_chevron-size);
166
+ height: var(--_chevron-size);
167
+ border-inline-end: var(--hx-border-width-thin, 1.5px) solid currentColor;
168
+ border-bottom: var(--hx-border-width-thin, 1.5px) solid currentColor;
140
169
  transform: rotate(45deg);
141
170
  }
142
171
 
@@ -145,17 +174,16 @@ const k = g`
145
174
  }
146
175
 
147
176
  .field--error .field__trigger {
148
- border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
177
+ border-color: var(--_error-color);
149
178
  }
150
179
 
151
180
  .field--error .field__trigger:focus,
152
181
  .field--error .field__trigger:focus-visible {
153
- border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
182
+ border-color: var(--_error-color);
154
183
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
155
184
  color-mix(
156
185
  in srgb,
157
- var(--hx-select-error-color, var(--hx-color-error-500, #dc3545))
158
- calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
186
+ var(--_error-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
159
187
  transparent
160
188
  );
161
189
  }
@@ -166,10 +194,9 @@ const k = g`
166
194
  left: 0;
167
195
  right: 0;
168
196
  z-index: var(--hx-z-index-dropdown, 1000);
169
- background-color: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
170
- border: var(--hx-border-width-thin, 1px) solid
171
- var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
172
- border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
197
+ background-color: var(--_listbox-bg);
198
+ border: var(--hx-border-width-thin, 1px) solid var(--_border-color);
199
+ border-radius: var(--_border-radius);
173
200
  box-shadow: var(
174
201
  --hx-select-listbox-shadow,
175
202
  0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))
@@ -196,7 +223,7 @@ const k = g`
196
223
  gap: var(--hx-space-2, 0.5rem);
197
224
  padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
198
225
  font-size: var(--hx-font-size-md, 1rem);
199
- color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
226
+ color: var(--_color);
200
227
  cursor: pointer;
201
228
  user-select: none;
202
229
  -webkit-user-select: none;
@@ -204,23 +231,23 @@ const k = g`
204
231
  }
205
232
 
206
233
  .field__option:hover {
207
- background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
234
+ background-color: var(--_option-hover-bg);
208
235
  }
209
236
 
210
237
  .field__option--selected {
211
- background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
238
+ background-color: var(--_option-selected-bg);
212
239
  font-weight: var(--hx-font-weight-medium, 500);
213
240
  }
214
241
 
215
242
  .field__option--focused {
216
- background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
243
+ background-color: var(--_option-hover-bg);
217
244
  outline: var(--hx-focus-ring-width, 2px) solid
218
- var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
245
+ var(--_focus-ring-color, var(--hx-color-primary-500));
219
246
  outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
220
247
  }
221
248
 
222
249
  .field__option--focused.field__option--selected {
223
- background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
250
+ background-color: var(--_option-selected-bg);
224
251
  }
225
252
 
226
253
  .field__option--disabled {
@@ -239,7 +266,7 @@ const k = g`
239
266
  .field__no-options {
240
267
  padding: var(--hx-space-3, 0.75rem);
241
268
  text-align: center;
242
- color: var(--hx-color-neutral-400, #adb5bd);
269
+ color: var(--_placeholder-color);
243
270
  font-size: var(--hx-font-size-sm, 0.875rem);
244
271
  }
245
272
 
@@ -275,15 +302,15 @@ const k = g`
275
302
  }
276
303
  }
277
304
  `;
278
- var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (e, t, a, i) => {
279
- for (var r = i > 1 ? void 0 : i ? S(t, a) : t, l = e.length - 1, f; l >= 0; l--)
305
+ var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (e, t, a, i) => {
306
+ for (var r = i > 1 ? void 0 : i ? C(t, a) : t, l = e.length - 1, f; l >= 0; l--)
280
307
  (f = e[l]) && (r = (i ? f(t, a, r) : f(r)) || r);
281
- return i && r && C(t, a, r), r;
308
+ return i && r && z(t, a, r), r;
282
309
  };
283
- const z = O("hx-select");
310
+ const S = O("hx-select");
284
311
  let o = class extends w {
285
312
  constructor() {
286
- super(...arguments), this._selectId = z(), this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.ariaLabel = null, this.open = !1, this.labelRequired = "Please select an option.", this.labelNoOptions = "No options found", this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
313
+ super(...arguments), this._selectId = S(), this._listboxId = `${this._selectId}-listbox`, this._labelId = `${this._selectId}-label`, this._helpTextId = `${this._selectId}-help`, this._errorId = `${this._selectId}-error`, this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.name = "", this.error = "", this.helpText = "", this.size = "md", this.ariaLabel = null, this.open = !1, this.labelRequired = "Please select an option.", this.labelNoOptions = "No options found", this._options = [], this._hasErrorSlot = !1, this._focusedOptionIndex = -1, this._handleOutsideClick = (e) => {
287
314
  this.open && !e.composedPath().includes(this) && (this.open = !1);
288
315
  };
289
316
  }
@@ -516,7 +543,7 @@ let o = class extends w {
516
543
  id=${this._optionId(t)}
517
544
  part="option"
518
545
  role="option"
519
- class=${u({
546
+ class=${_({
520
547
  field__option: !0,
521
548
  "field__option--selected": a,
522
549
  "field__option--focused": i,
@@ -552,7 +579,7 @@ let o = class extends w {
552
579
  this.helpText ? this._helpTextId : null
553
580
  ].filter(Boolean).join(" ") || void 0;
554
581
  return h`
555
- <div part="field" class=${u(t)}>
582
+ <div part="field" class=${_(t)}>
556
583
  <!-- Label -->
557
584
  <slot name="label">
558
585
  ${this.label ? h`<label
@@ -572,7 +599,7 @@ let o = class extends w {
572
599
  <div
573
600
  part="trigger"
574
601
  id=${this._selectId}
575
- class=${u(a)}
602
+ class=${_(a)}
576
603
  role="combobox"
577
604
  tabindex=${this.disabled ? "-1" : "0"}
578
605
  aria-expanded=${this.open ? "true" : "false"}
@@ -609,7 +636,7 @@ let o = class extends w {
609
636
  <!-- Hidden native select (form participation + test compat) -->
610
637
  <select
611
638
  part="select"
612
- class=${u(i)}
639
+ class=${_(i)}
613
640
  tabindex="-1"
614
641
  aria-hidden="true"
615
642
  ?required=${this.required}
@@ -687,13 +714,13 @@ s([
687
714
  d({ attribute: "label-no-options" })
688
715
  ], o.prototype, "labelNoOptions", 2);
689
716
  s([
690
- _()
717
+ u()
691
718
  ], o.prototype, "_options", 2);
692
719
  s([
693
- _()
720
+ u()
694
721
  ], o.prototype, "_hasErrorSlot", 2);
695
722
  s([
696
- _()
723
+ u()
697
724
  ], o.prototype, "_focusedOptionIndex", 2);
698
725
  s([
699
726
  x(".field__select")
@@ -707,4 +734,4 @@ o = s([
707
734
  export {
708
735
  o as H
709
736
  };
710
- //# sourceMappingURL=hx-select-4-nHL0vd.js.map
737
+ //# sourceMappingURL=hx-select-BWzxWZs_.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hx-select-BWzxWZs_.js","sources":["../../src/components/hx-select/hx-select.styles.ts","../../src/components/hx-select/hx-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSelectStyles = css`\n /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */\n :host {\n display: block;\n\n /* Background & foreground */\n --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));\n --_color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));\n --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));\n\n /* Label */\n --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));\n\n /* Border */\n --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));\n --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));\n\n /* Focus ring */\n --_focus-ring-color: var(\n --hx-select-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n\n /* Error */\n --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));\n\n /* Chevron */\n --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));\n --_chevron-size: var(--hx-select-chevron-size, 0.5rem);\n\n /* Listbox */\n --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));\n --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n --_option-selected-bg: var(\n --hx-select-option-selected-bg,\n var(--hx-color-primary-100, #dbeafe)\n );\n\n /* Typography */\n --_font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--_font-family);\n position: relative;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--_label-color);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n .field__select-wrapper {\n position: relative;\n display: block;\n }\n\n .field__trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--hx-space-2, 0.5rem);\n width: 100%;\n min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\n border: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n border-radius: var(--_border-radius);\n background-color: var(--_bg);\n color: var(--_color);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n cursor: pointer;\n text-align: start;\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n outline: none;\n }\n\n .field__trigger:focus,\n .field__trigger:focus-visible {\n border-color: var(--_focus-ring-color);\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--_focus-ring-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n .field__trigger[aria-disabled='true'] {\n cursor: not-allowed;\n }\n\n .field__trigger--sm {\n min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));\n font-size: var(--hx-font-size-sm, 0.875rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n }\n\n .field__trigger--lg {\n min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));\n font-size: var(--hx-font-size-lg, 1.125rem);\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n }\n\n .field__trigger-value {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .field__trigger--placeholder .field__trigger-value {\n color: var(--_placeholder-color);\n }\n\n .field__chevron {\n flex-shrink: 0;\n width: calc(var(--_chevron-size) * 1.5);\n height: var(--_chevron-size);\n position: relative;\n color: var(--_chevron-color);\n pointer-events: none;\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n .field__chevron::after {\n content: '';\n position: absolute;\n top: 0;\n left: var(--hx-space-px, 2px);\n width: var(--_chevron-size);\n height: var(--_chevron-size);\n border-inline-end: var(--hx-border-width-thin, 1.5px) solid currentColor;\n border-bottom: var(--hx-border-width-thin, 1.5px) solid currentColor;\n transform: rotate(45deg);\n }\n\n .field--open .field__chevron {\n transform: rotate(180deg);\n }\n\n .field--error .field__trigger {\n border-color: var(--_error-color);\n }\n\n .field--error .field__trigger:focus,\n .field--error .field__trigger:focus-visible {\n border-color: var(--_error-color);\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--_error-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n .field__listbox {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n left: 0;\n right: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n background-color: var(--_listbox-bg);\n border: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n border-radius: var(--_border-radius);\n box-shadow: var(\n --hx-select-listbox-shadow,\n 0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))\n );\n max-height: var(--hx-select-listbox-max-height, 16rem);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .field__listbox[hidden] {\n display: none;\n }\n\n .field__options {\n overflow-y: auto;\n flex: 1;\n padding: var(--hx-space-1, 0.25rem) 0;\n }\n\n .field__option {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--_color);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n .field__option:hover {\n background-color: var(--_option-hover-bg);\n }\n\n .field__option--selected {\n background-color: var(--_option-selected-bg);\n font-weight: var(--hx-font-weight-medium, 500);\n }\n\n .field__option--focused {\n background-color: var(--_option-hover-bg);\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--_focus-ring-color, var(--hx-color-primary-500));\n outline-offset: var(--hx-select-option-focus-ring-offset, -2px);\n }\n\n .field__option--focused.field__option--selected {\n background-color: var(--_option-selected-bg);\n }\n\n .field__option--disabled {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .field__option-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .field__no-options {\n padding: var(--hx-space-3, 0.75rem);\n text-align: center;\n color: var(--_placeholder-color);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .field__select {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n clip: rect(0, 0, 0, 0);\n }\n\n .field__help-text,\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__help-text {\n color: var(--hx-color-neutral-500, #6c757d);\n }\n\n .field__error {\n color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));\n }\n\n @media (prefers-reduced-motion: reduce) {\n .field__trigger,\n .field__chevron,\n .field__option {\n transition: none;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixSelectStyles } from './hx-select.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nconst _nextSelectId = createIdCounter('hx-select');\n\n// ─── Internal option model ───\n\ninterface SelectOption {\n value: string;\n label: string;\n disabled: boolean;\n}\n\n/**\n * A form-associated select component with custom styling, label, error, and\n * help text. Options are provided via slotted `<option>` (and `<optgroup>`)\n * elements in the light DOM. The component wraps a hidden native `<select>`\n * for form participation and provides a combobox trigger for consistent\n * cross-browser styling.\n *\n * @remarks Multi-select is intentionally not supported. This component\n * implements a single-value select (combobox) pattern only. For multi-value\n * selection use a separate multi-select component.\n *\n * @remarks The listbox panel uses `position: absolute` and may be clipped by\n * ancestor elements with `overflow: hidden` or `overflow: auto`. This is a\n * known limitation when embedding the component inside cards, tables, or\n * dialogs. Use the CSS custom property `--hx-select-listbox-shadow` or\n * restructure the containing layout to avoid clipping.\n *\n * @summary Form-associated custom select with label, error, and help text.\n *\n * @tag hx-select\n *\n * @slot - Default slot for `<option>` and `<optgroup>` elements.\n * @slot label - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the selected option changes.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart select-wrapper - The wrapper containing the trigger and listbox.\n * @csspart select - The hidden native select element (kept for form participation).\n * @csspart trigger - The button that opens/closes the dropdown.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart option - Individual option items in the listbox.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-select-bg=var(--hx-color-neutral-0)] - Select background color.\n * @cssprop [--hx-select-color=var(--hx-color-neutral-800)] - Select text color.\n * @cssprop [--hx-select-border-color=var(--hx-color-neutral-300)] - Select border color.\n * @cssprop [--hx-select-border-radius=var(--hx-border-radius-md)] - Select border radius.\n * @cssprop [--hx-select-font-family=var(--hx-font-family-sans)] - Select font family.\n * @cssprop [--hx-select-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-select-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-select-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-select-chevron-color=var(--hx-color-neutral-500)] - Chevron indicator color.\n * @cssprop [--hx-select-chevron-size=0.5rem] - Chevron indicator size (width/height base unit).\n * @cssprop [--hx-select-listbox-bg=var(--hx-color-neutral-0)] - Listbox panel background color.\n * @cssprop [--hx-select-option-hover-bg=var(--hx-color-primary-50)] - Option hover background color.\n * @cssprop [--hx-select-option-selected-bg=var(--hx-color-primary-100)] - Selected option background color.\n * @cssprop [--hx-select-placeholder-color=var(--hx-color-neutral-400)] - Placeholder text color.\n */\n@customElement('hx-select')\nexport class HelixSelect extends HelixElement {\n static override styles = [tokenStyles, helixSelectStyles];\n\n // ─── Form Association ───\n\n /** Marks this element as form-associated for ElementInternals support. @internal */\n static override formAssociated = true;\n\n // ─── Stable IDs ───\n\n /** @internal */\n private _selectId = _nextSelectId();\n /** @internal */\n private _listboxId = `${this._selectId}-listbox`;\n /** @internal */\n private _labelId = `${this._selectId}-label`;\n /** @internal */\n private _helpTextId = `${this._selectId}-help`;\n /** @internal */\n private _errorId = `${this._selectId}-error`;\n\n // ─── Public Properties ───\n\n /**\n * The visible label text for the select.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Placeholder text shown in the trigger when no option is selected.\n * @attr placeholder\n */\n @property({ type: String })\n placeholder = '';\n\n /**\n * The current value of the select.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '';\n\n /**\n * Whether the select is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the select is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The name used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the select for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Size variant of the select trigger.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Accessible name for screen readers, if different from the visible label.\n * @attr aria-label\n */\n @property({ type: String, attribute: 'aria-label' })\n override ariaLabel: string | null = null;\n\n /**\n * Controls whether the dropdown listbox is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Validation message when no option is selected. Override for i18n.\n * @attr label-required\n */\n @property({ attribute: 'label-required' }) labelRequired = 'Please select an option.';\n\n /**\n * Label shown when no options are available. Override for i18n.\n * @attr label-no-options\n */\n @property({ attribute: 'label-no-options' }) labelNoOptions = 'No options found';\n\n // ─── Internal State ───\n\n /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n @state() private _options: SelectOption[] = [];\n /** Whether the named error slot contains projected content. @internal */\n @state() private _hasErrorSlot = false;\n /** Zero-based index of the keyboard-focused option in the listbox; -1 means none. @internal */\n @state() private _focusedOptionIndex = -1;\n\n // ─── Queries ───\n\n /** Reference to the hidden native select element used for form participation. @internal */\n @query('.field__select')\n private _select: HTMLSelectElement | undefined;\n\n /** Reference to the visible combobox trigger element that receives keyboard focus. @internal */\n @query('.field__trigger')\n private _trigger: HTMLElement | undefined;\n\n // ─── Computed helpers ───\n\n /** @internal */\n private get _displayValue(): string {\n if (!this.value) return '';\n const opt = this._options.find((o) => o.value === this.value);\n return opt ? opt.label : this.value;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n // Safety net: remove listener if component is removed while dropdown is open\n document.removeEventListener('click', this._handleOutsideClick);\n // Reset open state to prevent persisted open state on reconnect\n if (this.open) {\n this.open = false;\n this._focusedOptionIndex = -1;\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('open')) {\n if (this.open) {\n document.addEventListener('click', this._handleOutsideClick);\n } else {\n document.removeEventListener('click', this._handleOutsideClick);\n }\n }\n if (changedProperties.has('value')) {\n this._syncNativeSelect();\n this._updateFormValue();\n this._updateValidity();\n }\n if (changedProperties.has('size')) {\n const validSizes: string[] = ['sm', 'md', 'lg'];\n if (!validSizes.includes(this.size)) {\n devWarn(\n 'hx-select',\n `Invalid size \"${this.size}\". Expected one of: ${validSizes.join(', ')}.`,\n );\n }\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the select satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _updateFormValue(): void {\n this._internals.setFormValue(this.value || null);\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || this.labelRequired,\n this._trigger ?? this._select,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n // ─── Form Lifecycle Hooks ───\n\n protected override _onFormReset(): void {\n this.value = '';\n this._internals.setFormValue(null);\n }\n\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Native Select Sync ───\n\n /** @internal */\n private _syncNativeSelect(): void {\n if (!this._select) return;\n if (this.value) {\n this._select.value = this.value;\n }\n }\n\n // ─── Option Syncing from Slot ───\n\n /** @internal */\n private _parseOption(el: HTMLOptionElement): SelectOption {\n return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n }\n\n /**\n * Single-pass slot handler: reads options into _options for the custom\n * listbox AND clones them into the native <select> for form participation.\n * Handles both top-level <option> and <optgroup> children.\n */\n /** @internal */\n private _handleSlotChange(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const parsed: SelectOption[] = [];\n\n // Remove previously cloned options from native select\n if (this._select) {\n this._select.querySelectorAll('option[data-cloned]').forEach((opt) => opt.remove());\n }\n\n const cloneIntoSelect = (optEl: HTMLOptionElement): void => {\n if (!this._select) return;\n const clone = optEl.cloneNode(true) as HTMLOptionElement;\n clone.setAttribute('data-cloned', '');\n this._select.appendChild(clone);\n };\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (el instanceof HTMLOptionElement) {\n parsed.push(this._parseOption(el));\n cloneIntoSelect(el);\n } else if (el instanceof HTMLOptGroupElement) {\n for (const child of Array.from(el.children)) {\n if (child instanceof HTMLOptionElement) {\n parsed.push(this._parseOption(child));\n cloneIntoSelect(child);\n }\n }\n }\n }\n\n this._options = parsed;\n\n if (parsed.length === 0) {\n devWarn(\n 'hx-select',\n 'hx-select has no options — add <option> or <optgroup> elements as children.',\n );\n }\n\n if (this._select) {\n if (this.value) {\n this._select.value = this.value;\n } else if (!this.placeholder && parsed.length > 0) {\n this.value = this._select.value;\n this._updateFormValue();\n }\n }\n }\n\n // ─── Slot Change Handlers ───\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Dropdown Control ───\n\n /** @internal */\n private _toggleDropdown(): void {\n if (!this.disabled) {\n this.open = !this.open;\n if (this.open) {\n // Pre-focus the currently selected option (or first enabled) when opening\n const selectedIndex = this._options.findIndex((o) => o.value === this.value);\n this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n } else {\n this._focusedOptionIndex = -1;\n }\n }\n }\n\n // ─── Keyboard Navigation ───\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.disabled) return;\n\n const enabledIndices = this._options\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled)\n .map(({ i }) => i);\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n break;\n }\n const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n this._focusedOptionIndex =\n nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n const lastEnabled = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n break;\n }\n const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex =\n prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n break;\n }\n case 'Home': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n }\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n break;\n }\n case 'End': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n }\n const lastEnabled = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n break;\n }\n case 'Enter':\n case ' ': {\n e.preventDefault();\n if (!this.open) {\n this.open = true;\n const selIdx = this._options.findIndex((o) => o.value === this.value);\n this._focusedOptionIndex = selIdx >= 0 ? selIdx : (enabledIndices[0] ?? 0);\n break;\n }\n if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {\n const opt = this._options[this._focusedOptionIndex];\n if (opt) this._selectOption(opt);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n this.open = false;\n this._focusedOptionIndex = -1;\n this._trigger?.focus();\n break;\n }\n case 'Tab': {\n // Close the dropdown but allow Tab to move focus naturally\n if (this.open) {\n this.open = false;\n this._focusedOptionIndex = -1;\n }\n break;\n }\n default: {\n // Typeahead: single printable character jumps to first matching option\n if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {\n const char = e.key.toLowerCase();\n const startIndex = this.open ? this._focusedOptionIndex + 1 : 0;\n const matching = this._options\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled && o.label.toLowerCase().startsWith(char));\n const afterCurrent = matching.find(({ i }) => i >= startIndex);\n const target = afterCurrent ?? matching[0];\n if (target) {\n if (!this.open) {\n this.open = true;\n }\n this._focusedOptionIndex = target.i;\n e.preventDefault();\n }\n }\n break;\n }\n }\n }\n\n // ─── Selection ───\n\n /** @internal */\n private _selectOption(option: SelectOption): void {\n if (option.disabled) return;\n this.value = option.value; // triggers updated() → sync + formValue + validity\n this._dispatchChange();\n this.open = false;\n this._focusedOptionIndex = -1;\n }\n\n // ─── Event Dispatchers ───\n\n /** @internal */\n private _dispatchChange(): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n /** @internal */\n private _handleNativeChange(e: Event): void {\n this.value = (e.target as HTMLSelectElement).value; // triggers updated()\n this._dispatchChange();\n }\n\n // ─── Outside Click Handler ───\n\n /** @internal */\n private _handleOutsideClick = (e: MouseEvent): void => {\n if (this.open && !e.composedPath().includes(this)) {\n this.open = false;\n }\n };\n\n // ─── Public Methods ───\n\n /** Moves focus to the visible trigger button. */\n override focus(options?: FocusOptions): void {\n this._trigger?.focus(options);\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _optionId(index: number): string {\n return `hx-select-option-${this._selectId}-${index}`;\n }\n\n /** @internal */\n private _renderOptions() {\n if (this._options.length === 0) {\n return html`<div class=\"field__no-options\">${this.labelNoOptions}</div>`;\n }\n\n return repeat(\n this._options,\n (opt) => opt.value,\n (opt, index) => {\n const isSelected = opt.value === this.value;\n const isFocused = index === this._focusedOptionIndex;\n\n return html`\n <div\n id=${this._optionId(index)}\n part=\"option\"\n role=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--focused': isFocused,\n 'field__option--disabled': opt.disabled,\n })}\n aria-selected=${isSelected ? 'true' : nothing}\n aria-disabled=${opt.disabled ? 'true' : nothing}\n @click=${() => this._selectOption(opt)}\n >\n <span class=\"field__option-label\">${opt.label}</span>\n </div>\n `;\n },\n );\n }\n\n // ─── Main Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--open': this.open,\n };\n\n const triggerClasses = {\n field__trigger: true,\n [`field__trigger--${this.size}`]: true,\n 'field__trigger--placeholder': !this.value,\n };\n\n const selectClasses = {\n field__select: true,\n [`field__select--${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError || this._hasErrorSlot ? this._errorId : null,\n this.helpText ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <slot name=\"label\">\n ${this.label\n ? html`<label\n part=\"label\"\n class=\"field__label\"\n id=${this._labelId}\n for=${this._selectId}\n >\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>`\n : nothing}\n </slot>\n\n <!-- Select Wrapper: trigger + listbox -->\n <div part=\"select-wrapper\" class=\"field__select-wrapper\">\n <!-- Custom Trigger (combobox — div to avoid native role conflicts per APG) -->\n <div\n part=\"trigger\"\n id=${this._selectId}\n class=${classMap(triggerClasses)}\n role=\"combobox\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-controls=${this._listboxId}\n aria-activedescendant=${this.open && this._focusedOptionIndex >= 0\n ? this._optionId(this._focusedOptionIndex)\n : nothing}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n @click=${this._toggleDropdown}\n @keydown=${this._handleKeydown}\n >\n <span class=\"field__trigger-value\"\n >${this._displayValue || this.placeholder || nothing}</span\n >\n <span class=\"field__chevron\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Custom Listbox Panel -->\n <div\n part=\"listbox\"\n role=\"listbox\"\n id=${this._listboxId}\n class=\"field__listbox\"\n aria-label=${ifDefined(this.label || this.ariaLabel || undefined)}\n ?hidden=${!this.open}\n >\n <div class=\"field__options\">${this._renderOptions()}</div>\n </div>\n\n <!-- Hidden native select (form participation + test compat) -->\n <select\n part=\"select\"\n class=${classMap(selectClasses)}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n name=${ifDefined(this.name || undefined)}\n aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n @change=${this._handleNativeChange}\n >\n ${this.placeholder\n ? html`<option value=\"\" disabled selected>${this.placeholder}</option>`\n : nothing}\n </select>\n </div>\n\n <!-- Hidden slot (options are read from here) -->\n <slot @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n <!-- Error -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n <!-- Help Text -->\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-select': HelixSelect;\n }\n}\n\nexport type { HelixSelect as HxSelect };\n/** @deprecated Use HxSelect instead */\nexport type { HelixSelect as WcSelect };\n"],"names":["helixSelectStyles","css","_nextSelectId","createIdCounter","HelixSelect","HelixElement","opt","o","changedProperties","validSizes","devWarn","state","_mode","disabled","el","_a","slot","parsed","cloneIntoSelect","optEl","clone","child","selectedIndex","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","selIdx","char","startIndex","matching","target","option","options","index","html","repeat","isSelected","isFocused","classMap","nothing","hasError","fieldClasses","triggerClasses","selectClasses","describedBy","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}
@@ -1,14 +1,17 @@
1
- import { css as u, LitElement as d, html as h } from "lit";
2
- import { property as r, customElement as p } from "lit/decorators.js";
3
- import { tokenStyles as v } from "@helixui/tokens/lit";
4
- const x = u`
1
+ import { css as d, LitElement as p, nothing as v, html as u } from "lit";
2
+ import { property as s, customElement as x } from "lit/decorators.js";
3
+ import { tokenStyles as b } from "@helixui/tokens/lit";
4
+ const _ = d`
5
5
  :host {
6
6
  display: inline-flex;
7
7
  align-items: center;
8
8
  justify-content: center;
9
+ gap: var(--hx-space-2, 0.5rem);
9
10
  position: relative;
10
11
  flex-shrink: 0;
11
12
  --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));
13
+ /* Default size (md) — always defined so .indicator never collapses to 0x0 */
14
+ --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
12
15
  }
13
16
 
14
17
  .indicator {
@@ -63,18 +66,44 @@ const x = u`
63
66
  }
64
67
  }
65
68
 
69
+ /* ─── Visible label (part="label") ─── */
70
+
71
+ .indicator__label {
72
+ font-size: var(
73
+ --hx-status-indicator-label-font-size,
74
+ var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
75
+ );
76
+ color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #374151));
77
+ line-height: 1;
78
+ white-space: nowrap;
79
+ }
80
+
81
+ /* ─── aria-live announcement region (visually hidden) ─── */
82
+
83
+ .indicator__live-region {
84
+ position: absolute;
85
+ width: 1px;
86
+ height: 1px;
87
+ padding: 0;
88
+ margin: -1px;
89
+ overflow: hidden;
90
+ clip: rect(0, 0, 0, 0);
91
+ white-space: nowrap;
92
+ border: 0;
93
+ }
94
+
66
95
  /* ─── Size Variants ─── */
67
96
 
68
- :host([size='sm']) {
97
+ :host([hx-size='sm']) {
69
98
  --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-space-2, 0.5rem));
70
99
  }
71
100
 
72
- :host([size='md']) {
101
+ :host([hx-size='md']) {
73
102
  --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
74
103
  }
75
104
 
76
- :host([size='lg']) {
77
- --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-size-4));
105
+ :host([hx-size='lg']) {
106
+ --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-space-4, 1rem));
78
107
  }
79
108
 
80
109
  /* ─── Status Colors ─── */
@@ -99,25 +128,29 @@ const x = u`
99
128
  --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
100
129
  }
101
130
  `;
102
- var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (t, o, n, a) => {
103
- for (var s = a > 1 ? void 0 : a ? y(o, n) : o, l = t.length - 1, c; l >= 0; l--)
104
- (c = t[l]) && (s = (a ? c(o, n, s) : c(s)) || s);
105
- return a && s && f(o, n, s), s;
131
+ var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, r, n, o) => {
132
+ for (var a = o > 1 ? void 0 : o ? y(r, n) : r, l = t.length - 1, c; l >= 0; l--)
133
+ (c = t[l]) && (a = (o ? c(r, n, a) : c(a)) || a);
134
+ return o && a && f(r, n, a), a;
106
135
  };
107
- const _ = {
136
+ const h = {
108
137
  online: "Online",
109
138
  offline: "Offline",
110
139
  away: "Away",
111
140
  busy: "Busy",
112
141
  unknown: "Unknown"
113
142
  };
114
- let i = class extends d {
143
+ let e = class extends p {
115
144
  constructor() {
116
- super(...arguments), this.status = "unknown", this.size = "md", this.pulse = !1, this.label = "";
145
+ super(...arguments), this.status = "unknown", this.size = "md", this.pulse = !1, this.label = "", this.showLabel = !1;
117
146
  }
118
147
  /** @internal */
119
148
  _getLabel() {
120
- return this.label ? this.label : `Status: ${_[this.status] ?? "Unknown"}`;
149
+ return this.label ? this.label : `Status: ${h[this.status] ?? "Unknown"}`;
150
+ }
151
+ /** @internal */
152
+ _getStatusText() {
153
+ return h[this.status] ?? "Unknown";
121
154
  }
122
155
  // ─── Lifecycle ───
123
156
  connectedCallback() {
@@ -129,31 +162,39 @@ let i = class extends d {
129
162
  super.updated(t), (t.has("status") || t.has("label")) && this.setAttribute("aria-label", this._getLabel());
130
163
  }
131
164
  render() {
132
- return h`
165
+ return u`
133
166
  <div class="indicator">
134
167
  <div class="indicator__pulse-ring" part="pulse-ring"></div>
135
168
  <div class="indicator__dot" part="base"></div>
136
169
  </div>
170
+ ${this.showLabel ? u`<span class="indicator__label" part="label">${this._getStatusText()}</span>` : v}
171
+ <!-- aria-live region announces dynamic status changes to screen readers -->
172
+ <span class="indicator__live-region" aria-live="polite" aria-atomic="true"
173
+ >${this._getLabel()}</span
174
+ >
137
175
  `;
138
176
  }
139
177
  };
140
- i.styles = [v, x];
141
- e([
142
- r({ type: String, reflect: !0 })
143
- ], i.prototype, "status", 2);
144
- e([
145
- r({ type: String, reflect: !0, attribute: "hx-size" })
146
- ], i.prototype, "size", 2);
147
- e([
148
- r({ type: Boolean, reflect: !0 })
149
- ], i.prototype, "pulse", 2);
150
- e([
151
- r({ type: String })
152
- ], i.prototype, "label", 2);
153
- i = e([
154
- p("hx-status-indicator")
155
- ], i);
178
+ e.styles = [b, _];
179
+ i([
180
+ s({ type: String, reflect: !0 })
181
+ ], e.prototype, "status", 2);
182
+ i([
183
+ s({ type: String, reflect: !0, attribute: "hx-size" })
184
+ ], e.prototype, "size", 2);
185
+ i([
186
+ s({ type: Boolean, reflect: !0 })
187
+ ], e.prototype, "pulse", 2);
188
+ i([
189
+ s({ type: String })
190
+ ], e.prototype, "label", 2);
191
+ i([
192
+ s({ type: Boolean, reflect: !0, attribute: "show-label" })
193
+ ], e.prototype, "showLabel", 2);
194
+ e = i([
195
+ x("hx-status-indicator")
196
+ ], e);
156
197
  export {
157
- i as H
198
+ e as H
158
199
  };
159
- //# sourceMappingURL=hx-status-indicator-4ClvA5mU.js.map
200
+ //# sourceMappingURL=hx-status-indicator-Dl3Y34mc.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hx-status-indicator-Dl3Y34mc.js","sources":["../../src/components/hx-status-indicator/hx-status-indicator.styles.ts","../../src/components/hx-status-indicator/hx-status-indicator.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStatusIndicatorStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n position: relative;\n flex-shrink: 0;\n --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));\n /* Default size (md) — always defined so .indicator never collapses to 0x0 */\n --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));\n }\n\n .indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n flex-shrink: 0;\n }\n\n .indicator__dot {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: var(--_dot-color);\n position: relative;\n z-index: 1; /* dot above pulse ring within shadow root */\n }\n\n .indicator__pulse-ring {\n display: none;\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background-color: var(--hx-status-indicator-pulse-color, var(--_dot-color));\n opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */\n animation: hx-status-pulse var(--hx-status-indicator-pulse-duration, 1.5s) ease-out infinite;\n z-index: 0; /* pulse ring beneath dot within shadow root */\n }\n\n :host([pulse]) .indicator__pulse-ring {\n display: block;\n }\n\n @keyframes hx-status-pulse {\n 0% {\n transform: scale(1);\n opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */\n }\n 100% {\n transform: scale(var(--hx-status-indicator-pulse-scale, 2.5));\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([pulse]) .indicator__pulse-ring {\n animation: none;\n display: none;\n }\n }\n\n /* ─── Visible label (part=\"label\") ─── */\n\n .indicator__label {\n font-size: var(\n --hx-status-indicator-label-font-size,\n var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))\n );\n color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #374151));\n line-height: 1;\n white-space: nowrap;\n }\n\n /* ─── aria-live announcement region (visually hidden) ─── */\n\n .indicator__live-region {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Size Variants ─── */\n\n :host([hx-size='sm']) {\n --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-space-2, 0.5rem));\n }\n\n :host([hx-size='md']) {\n --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));\n }\n\n :host([hx-size='lg']) {\n --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-space-4, 1rem));\n }\n\n /* ─── Status Colors ─── */\n\n :host([status='online']) {\n --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));\n }\n\n :host([status='offline']) {\n --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));\n }\n\n :host([status='away']) {\n --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));\n }\n\n :host([status='busy']) {\n --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));\n }\n\n :host([status='unknown']) {\n --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { helixStatusIndicatorStyles } from './hx-status-indicator.styles.js';\n\nexport type StatusIndicatorStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown';\nexport type StatusIndicatorSize = 'sm' | 'md' | 'lg';\n\nconst STATUS_LABELS: Record<StatusIndicatorStatus, string> = {\n online: 'Online',\n offline: 'Offline',\n away: 'Away',\n busy: 'Busy',\n unknown: 'Unknown',\n};\n\n/**\n * A colored dot/badge indicating system or entity health status.\n * Supports an animated pulse ring and an optional visible text label.\n *\n * Status is conveyed through color AND an `aria-label` on the host element.\n * When `show-label` is set, a visible text label is rendered inside the component,\n * ensuring status is not communicated by color alone (WCAG 1.4.1 — Use of Color).\n *\n * Uses `role=\"img\"` with an auto-generated `aria-label` (e.g. \"Status: Online\").\n * When used decoratively alongside visible text that conveys the same status information\n * (e.g. \"Provider is available\"), set `aria-hidden=\"true\"` on the host element to prevent\n * duplicate announcements to screen reader users. This is the recommended composition\n * pattern in healthcare dashboards.\n *\n * @remarks\n * The status vocabulary (`online`, `offline`, `away`, `busy`, `unknown`) is the intentional\n * implementation canonical form for this component. Although a prior spec draft used\n * `active/inactive/error/warning`, the current vocabulary was approved as a deliberate\n * design decision for flexibility and UX clarity in healthcare dashboard contexts.\n *\n * @summary Status indicator dot component.\n *\n * @tag hx-status-indicator\n *\n * @csspart base - The dot element.\n * @csspart pulse-ring - The animated pulse ring element.\n * @csspart label - The visible status label text element (visible when show-label is set).\n *\n * @cssprop [--hx-status-indicator-color-online] - Override color for the \"online\" status dot.\n * @cssprop [--hx-status-indicator-color-offline] - Override color for the \"offline\" status dot.\n * @cssprop [--hx-status-indicator-color-away] - Override color for the \"away\" status dot.\n * @cssprop [--hx-status-indicator-color-busy] - Override color for the \"busy\" status dot.\n * @cssprop [--hx-status-indicator-color-unknown] - Override color for the \"unknown\" status dot.\n * @cssprop [--hx-status-indicator-size-sm] - Override size for the \"sm\" variant.\n * @cssprop [--hx-status-indicator-size-md] - Override size for the \"md\" variant.\n * @cssprop [--hx-status-indicator-size-lg] - Override size for the \"lg\" variant.\n * @cssprop [--hx-status-indicator-pulse-duration] - Override pulse animation duration.\n * @cssprop [--hx-status-indicator-pulse-scale] - Override pulse animation max scale.\n * @cssprop [--hx-status-indicator-pulse-color] - Override pulse ring color independently from dot color.\n * @cssprop [--hx-status-indicator-label-color] - Override label text color.\n * @cssprop [--hx-status-indicator-label-font-size] - Override label font size.\n */\n@customElement('hx-status-indicator')\nexport class HelixStatusIndicator extends LitElement {\n static override styles = [tokenStyles, helixStatusIndicatorStyles];\n\n /**\n * The status to display.\n * @attr status\n */\n @property({ type: String, reflect: true })\n status: 'online' | 'offline' | 'away' | 'busy' | 'unknown' = 'unknown';\n\n /**\n * Size of the indicator dot.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether to show an animated pulse ring around the dot.\n * Animation is suppressed when prefers-reduced-motion is active.\n * @attr pulse\n * @remarks\n * In Twig (Drupal) templates, render as a bare attribute: `pulse` — NOT `pulse=\"true\"`.\n * The value is ignored; only attribute presence matters.\n */\n @property({ type: Boolean, reflect: true })\n pulse = false;\n\n /**\n * Accessible label for the indicator. Defaults to \"Status: {Status}\".\n * Set aria-hidden=\"true\" on the host when status is conveyed by adjacent text.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * When true, renders a visible text label next to the dot conveying the status.\n * Use this to satisfy WCAG 1.4.1 (Use of Color) when the indicator is not\n * accompanied by other visible text that conveys the same status information.\n * @attr show-label\n */\n @property({ type: Boolean, reflect: true, attribute: 'show-label' })\n showLabel = false;\n\n /** @internal */\n private _getLabel(): string {\n if (this.label) return this.label;\n const statusText = STATUS_LABELS[this.status] ?? 'Unknown';\n return `Status: ${statusText}`;\n }\n\n /** @internal */\n private _getStatusText(): string {\n return STATUS_LABELS[this.status] ?? 'Unknown';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-status-indicator', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as StatusIndicatorSize;\n }\n // T3-01-4: Place role=\"img\" on the host element for robust AT traversal.\n // Some screen reader + browser combinations skip shadow children; host-level\n // ARIA attributes are more reliable across the flat accessibility tree.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'img');\n }\n this.setAttribute('aria-label', this._getLabel());\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n // Keep host aria-label in sync when status or label properties change.\n if (changedProperties.has('status') || changedProperties.has('label')) {\n this.setAttribute('aria-label', this._getLabel());\n }\n }\n\n override render() {\n return html`\n <div class=\"indicator\">\n <div class=\"indicator__pulse-ring\" part=\"pulse-ring\"></div>\n <div class=\"indicator__dot\" part=\"base\"></div>\n </div>\n ${this.showLabel\n ? html`<span class=\"indicator__label\" part=\"label\">${this._getStatusText()}</span>`\n : nothing}\n <!-- aria-live region announces dynamic status changes to screen readers -->\n <span class=\"indicator__live-region\" aria-live=\"polite\" aria-atomic=\"true\"\n >${this._getLabel()}</span\n >\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-status-indicator': HelixStatusIndicator;\n }\n}\n"],"names":["helixStatusIndicatorStyles","css","STATUS_LABELS","HelixStatusIndicator","LitElement","legacySize","changedProperties","html","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helixui/library",
3
- "version": "1.1.2-next.4",
3
+ "version": "1.1.2-next.6",
4
4
  "description": "Enterprise Web Component Library built with Lit 3.x",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -43,7 +43,7 @@
43
43
  "customElements": "custom-elements.json",
44
44
  "dependencies": {
45
45
  "lit": "^3.3.2",
46
- "@helixui/tokens": "0.3.4-next.4"
46
+ "@helixui/tokens": "0.3.4-next.6"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "@floating-ui/dom": "^1.7.6"