@helixui/library 3.2.0-next.98 → 3.3.0-next.111

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 (146) hide show
  1. package/custom-elements.json +30 -18
  2. package/dist/components/hx-alert/hx-alert.styles.d.ts.map +1 -1
  3. package/dist/components/hx-alert/index.js +1 -1
  4. package/dist/components/hx-banner/hx-banner.styles.d.ts.map +1 -1
  5. package/dist/components/hx-banner/index.js +1 -1
  6. package/dist/components/hx-button/hx-button.d.ts +8 -6
  7. package/dist/components/hx-button/hx-button.d.ts.map +1 -1
  8. package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
  9. package/dist/components/hx-button/index.js +1 -1
  10. package/dist/components/hx-checkbox/hx-checkbox.styles.d.ts.map +1 -1
  11. package/dist/components/hx-checkbox/index.js +1 -1
  12. package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
  13. package/dist/components/hx-code-snippet/index.js +1 -1
  14. package/dist/components/hx-combobox/hx-combobox.styles.d.ts.map +1 -1
  15. package/dist/components/hx-combobox/index.js +1 -1
  16. package/dist/components/hx-date-picker/hx-date-picker.styles.d.ts.map +1 -1
  17. package/dist/components/hx-date-picker/index.js +1 -1
  18. package/dist/components/hx-link/hx-link.styles.d.ts.map +1 -1
  19. package/dist/components/hx-link/index.js +1 -1
  20. package/dist/components/hx-list/hx-list-item.styles.d.ts.map +1 -1
  21. package/dist/components/hx-list/index.js +1 -1
  22. package/dist/components/hx-radio-group/hx-radio.styles.d.ts.map +1 -1
  23. package/dist/components/hx-radio-group/index.js +1 -1
  24. package/dist/components/hx-rating/hx-rating.styles.d.ts.map +1 -1
  25. package/dist/components/hx-rating/index.js +1 -1
  26. package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
  27. package/dist/components/hx-select/index.js +1 -1
  28. package/dist/components/hx-side-nav/hx-side-nav.d.ts +4 -3
  29. package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
  30. package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
  31. package/dist/components/hx-side-nav/index.js +1 -1
  32. package/dist/components/hx-slider/hx-slider.styles.d.ts.map +1 -1
  33. package/dist/components/hx-slider/index.js +1 -1
  34. package/dist/components/hx-split-button/hx-split-button.styles.d.ts.map +1 -1
  35. package/dist/components/hx-split-button/index.js +1 -1
  36. package/dist/components/hx-switch/hx-switch.styles.d.ts.map +1 -1
  37. package/dist/components/hx-switch/index.js +1 -1
  38. package/dist/components/hx-tabs/hx-tab-panel.styles.d.ts.map +1 -1
  39. package/dist/components/hx-tabs/hx-tab.styles.d.ts.map +1 -1
  40. package/dist/components/hx-tabs/index.js +1 -1
  41. package/dist/components/hx-text-input/hx-text-input.styles.d.ts.map +1 -1
  42. package/dist/components/hx-text-input/index.js +1 -1
  43. package/dist/components/hx-textarea/hx-textarea.styles.d.ts.map +1 -1
  44. package/dist/components/hx-textarea/index.js +1 -1
  45. package/dist/components/hx-theme/hx-theme.d.ts +14 -2
  46. package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
  47. package/dist/components/hx-theme/index.js +1 -1
  48. package/dist/components/hx-toggle-button/hx-toggle-button.styles.d.ts.map +1 -1
  49. package/dist/components/hx-toggle-button/index.js +1 -1
  50. package/dist/components/hx-tree-view/hx-tree-view.styles.d.ts.map +1 -1
  51. package/dist/components/hx-tree-view/index.js +1 -1
  52. package/dist/css/helix-all.css +122 -120
  53. package/dist/css/helix-core.css +53 -23
  54. package/dist/css/helix-data.css +20 -6
  55. package/dist/css/helix-feedback.css +3 -12
  56. package/dist/css/helix-forms.css +16 -63
  57. package/dist/css/helix-navigation.css +28 -8
  58. package/dist/css/helix-tokens.css +8 -8
  59. package/dist/css/helix-utility.css +2 -8
  60. package/dist/css/hx-alert.css +1 -4
  61. package/dist/css/hx-banner.css +2 -8
  62. package/dist/css/hx-button.css +52 -19
  63. package/dist/css/hx-checkbox.css +1 -4
  64. package/dist/css/hx-code-snippet.css +20 -6
  65. package/dist/css/hx-combobox.css +2 -8
  66. package/dist/css/hx-date-picker.css +5 -21
  67. package/dist/css/hx-link.css +1 -4
  68. package/dist/css/hx-rating.css +1 -2
  69. package/dist/css/hx-select.css +1 -4
  70. package/dist/css/hx-side-nav.css +27 -6
  71. package/dist/css/hx-slider.css +1 -4
  72. package/dist/css/hx-split-button.css +2 -8
  73. package/dist/css/hx-switch.css +1 -4
  74. package/dist/css/hx-text-input.css +2 -8
  75. package/dist/css/hx-textarea.css +1 -4
  76. package/dist/css/hx-toggle-button.css +1 -4
  77. package/dist/css/hx-tree-view.css +1 -2
  78. package/dist/css/index.css +1 -1
  79. package/dist/css/manifest.json +20 -18
  80. package/dist/index.js +22 -22
  81. package/dist/shared/{hx-alert-C597yHpD.js → hx-alert-CLn7CstP.js} +2 -5
  82. package/dist/shared/hx-alert-CLn7CstP.js.map +1 -0
  83. package/dist/shared/{hx-banner-Cxd7eFUP.js → hx-banner-D3DzpfcP.js} +7 -13
  84. package/dist/shared/hx-banner-D3DzpfcP.js.map +1 -0
  85. package/dist/shared/{hx-button-9OUjJnk7.js → hx-button-DPY6SPVT.js} +58 -25
  86. package/dist/shared/hx-button-DPY6SPVT.js.map +1 -0
  87. package/dist/shared/{hx-checkbox-DBD-gMoz.js → hx-checkbox-D7xma9YH.js} +6 -9
  88. package/dist/shared/hx-checkbox-D7xma9YH.js.map +1 -0
  89. package/dist/shared/{hx-code-snippet-CJrFeyz0.js → hx-code-snippet-fVV3Z2DZ.js} +55 -41
  90. package/dist/shared/hx-code-snippet-fVV3Z2DZ.js.map +1 -0
  91. package/dist/shared/{hx-combobox-ClhNRAS5.js → hx-combobox-DDzqNKEW.js} +6 -12
  92. package/dist/shared/hx-combobox-DDzqNKEW.js.map +1 -0
  93. package/dist/shared/{hx-date-picker-BJm7Yrda.js → hx-date-picker-2iRG1p74.js} +12 -28
  94. package/dist/shared/hx-date-picker-2iRG1p74.js.map +1 -0
  95. package/dist/shared/{hx-link-9Ig2DW6L.js → hx-link-C-O6vq0Q.js} +2 -5
  96. package/dist/shared/hx-link-C-O6vq0Q.js.map +1 -0
  97. package/dist/shared/{hx-list-CkphGi9T.js → hx-list-MyEhh8c7.js} +3 -5
  98. package/dist/shared/hx-list-MyEhh8c7.js.map +1 -0
  99. package/dist/shared/{hx-nav-item-DH2tXcj1.js → hx-nav-item-xqRPOCWX.js} +58 -37
  100. package/dist/shared/hx-nav-item-xqRPOCWX.js.map +1 -0
  101. package/dist/shared/{hx-radio-dFjUAost.js → hx-radio-CJvNU2yP.js} +2 -5
  102. package/dist/shared/{hx-radio-dFjUAost.js.map → hx-radio-CJvNU2yP.js.map} +1 -1
  103. package/dist/shared/{hx-rating-CGtsejNf.js → hx-rating-C3QP53k9.js} +2 -3
  104. package/dist/shared/hx-rating-C3QP53k9.js.map +1 -0
  105. package/dist/shared/{hx-select-Bf4usFts.js → hx-select-C8fEHQhC.js} +2 -5
  106. package/dist/shared/hx-select-C8fEHQhC.js.map +1 -0
  107. package/dist/shared/{hx-slider-m0aEClH1.js → hx-slider-Blmv_rwS.js} +23 -26
  108. package/dist/shared/hx-slider-Blmv_rwS.js.map +1 -0
  109. package/dist/shared/{hx-split-button-BxDFfx4D.js → hx-split-button-Djnc5Aeg.js} +3 -9
  110. package/dist/shared/hx-split-button-Djnc5Aeg.js.map +1 -0
  111. package/dist/shared/{hx-switch-DvAW4YY-.js → hx-switch-BrZFaRue.js} +6 -9
  112. package/dist/shared/hx-switch-BrZFaRue.js.map +1 -0
  113. package/dist/shared/{hx-tab-panel-SWOEHuJc.js → hx-tab-panel-DspCrKqo.js} +3 -9
  114. package/dist/shared/{hx-tab-panel-SWOEHuJc.js.map → hx-tab-panel-DspCrKqo.js.map} +1 -1
  115. package/dist/shared/{hx-text-input-Bn7Gn8CI.js → hx-text-input-D6FlOZM-.js} +3 -9
  116. package/dist/shared/hx-text-input-D6FlOZM-.js.map +1 -0
  117. package/dist/shared/{hx-textarea-Jx1xnhgv.js → hx-textarea-CNG590KY.js} +6 -9
  118. package/dist/shared/hx-textarea-CNG590KY.js.map +1 -0
  119. package/dist/shared/{hx-theme-BiyQ7UUK.js → hx-theme-BsefFWTO.js} +83 -113
  120. package/dist/shared/hx-theme-BsefFWTO.js.map +1 -0
  121. package/dist/shared/{hx-toggle-button-DPAIh_Xo.js → hx-toggle-button-iLiYrMbD.js} +2 -5
  122. package/dist/shared/hx-toggle-button-iLiYrMbD.js.map +1 -0
  123. package/dist/shared/{hx-tree-item-Dt0Ozqyr.js → hx-tree-item-C2CiWuDE.js} +2 -3
  124. package/dist/shared/hx-tree-item-C2CiWuDE.js.map +1 -0
  125. package/figma-inventory.json +34 -19
  126. package/package.json +2 -2
  127. package/dist/shared/hx-alert-C597yHpD.js.map +0 -1
  128. package/dist/shared/hx-banner-Cxd7eFUP.js.map +0 -1
  129. package/dist/shared/hx-button-9OUjJnk7.js.map +0 -1
  130. package/dist/shared/hx-checkbox-DBD-gMoz.js.map +0 -1
  131. package/dist/shared/hx-code-snippet-CJrFeyz0.js.map +0 -1
  132. package/dist/shared/hx-combobox-ClhNRAS5.js.map +0 -1
  133. package/dist/shared/hx-date-picker-BJm7Yrda.js.map +0 -1
  134. package/dist/shared/hx-link-9Ig2DW6L.js.map +0 -1
  135. package/dist/shared/hx-list-CkphGi9T.js.map +0 -1
  136. package/dist/shared/hx-nav-item-DH2tXcj1.js.map +0 -1
  137. package/dist/shared/hx-rating-CGtsejNf.js.map +0 -1
  138. package/dist/shared/hx-select-Bf4usFts.js.map +0 -1
  139. package/dist/shared/hx-slider-m0aEClH1.js.map +0 -1
  140. package/dist/shared/hx-split-button-BxDFfx4D.js.map +0 -1
  141. package/dist/shared/hx-switch-DvAW4YY-.js.map +0 -1
  142. package/dist/shared/hx-text-input-Bn7Gn8CI.js.map +0 -1
  143. package/dist/shared/hx-textarea-Jx1xnhgv.js.map +0 -1
  144. package/dist/shared/hx-theme-BiyQ7UUK.js.map +0 -1
  145. package/dist/shared/hx-toggle-button-DPAIh_Xo.js.map +0 -1
  146. package/dist/shared/hx-tree-item-Dt0Ozqyr.js.map +0 -1
@@ -42,17 +42,11 @@
42
42
  box-shadow var(--hx-transition-fast, 150ms ease);
43
43
  }
44
44
  .field__input-wrapper:focus-within {
45
- border-color: var(
46
- --hx-combobox-focus-ring-color,
47
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
48
- );
45
+ border-color: var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
49
46
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
50
47
  color-mix(
51
48
  in srgb,
52
- var(
53
- --hx-combobox-focus-ring-color,
54
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
55
- )
49
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
56
50
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
57
51
  transparent
58
52
  );
@@ -66,17 +66,11 @@
66
66
  }
67
67
 
68
68
  .field__input-wrapper:focus-within {
69
- border-color: var(
70
- --hx-date-picker-focus-ring-color,
71
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
72
- );
69
+ border-color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
73
70
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
74
71
  color-mix(
75
72
  in srgb,
76
- var(
77
- --hx-date-picker-focus-ring-color,
78
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
79
- )
73
+ var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
80
74
  calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
81
75
  transparent
82
76
  );
@@ -145,17 +139,10 @@
145
139
  }
146
140
 
147
141
  .field__trigger:focus-visible {
148
- color: var(
149
- --hx-date-picker-focus-ring-color,
150
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
151
- );
142
+ color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
152
143
  background-color: color-mix(
153
144
  in srgb,
154
- var(
155
- --hx-date-picker-focus-ring-color,
156
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
157
- )
158
- 8%,
145
+ var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 8%,
159
146
  transparent
160
147
  );
161
148
  }
@@ -252,10 +239,7 @@
252
239
 
253
240
  :is(.calendar__nav-btn, .calendar__day):focus-visible {
254
241
  box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
255
- var(
256
- --hx-date-picker-focus-ring-color,
257
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
258
- );
242
+ var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
259
243
  z-index: 1;
260
244
  }
261
245
 
@@ -37,10 +37,7 @@
37
37
 
38
38
  .link:focus-visible {
39
39
  outline: var(--hx-focus-ring-width, 2px) solid
40
- var(
41
- --hx-link-focus-ring-color,
42
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
43
- );
40
+ var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
44
41
  outline-offset: var(--hx-focus-ring-offset, 2px);
45
42
  border-radius: var(--hx-border-radius-sm, 0.25rem);
46
43
  }
@@ -41,8 +41,7 @@
41
41
  }
42
42
 
43
43
  .symbol:focus-visible {
44
- outline: var(--hx-focus-ring-width, 2px) solid
45
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
44
+ outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
46
45
  outline-offset: var(--hx-focus-ring-offset, 2px);
47
46
  border-radius: var(--hx-border-radius-sm, 0.25rem);
48
47
  }
@@ -19,10 +19,7 @@
19
19
  --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
20
20
 
21
21
  /* Focus ring */
22
- --_focus-ring-color: var(
23
- --hx-select-focus-ring-color,
24
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
25
- );
22
+ --_focus-ring-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
26
23
 
27
24
  /* Error */
28
25
  --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #e5493e));
@@ -27,7 +27,10 @@
27
27
  transition: width var(--hx-transition-normal, 300ms) ease;
28
28
  overflow: hidden;
29
29
  border-inline-end: var(--hx-border-width-thin, 1px) solid
30
- var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
30
+ var(
31
+ --hx-side-nav-border-color,
32
+ var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
33
+ );
31
34
  }
32
35
 
33
36
  /* ─── Collapsed State ─── */
@@ -45,7 +48,10 @@
45
48
  flex-shrink: 0;
46
49
  min-height: var(--hx-space-14, 3.5rem);
47
50
  border-bottom: var(--hx-border-width-thin, 1px) solid
48
- var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
51
+ var(
52
+ --hx-side-nav-border-color,
53
+ var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
54
+ );
49
55
  overflow: hidden;
50
56
  }
51
57
 
@@ -72,7 +78,10 @@
72
78
  flex-shrink: 0;
73
79
  min-height: var(--hx-space-14, 3.5rem);
74
80
  border-top: var(--hx-border-width-thin, 1px) solid
75
- var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
81
+ var(
82
+ --hx-side-nav-border-color,
83
+ var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
84
+ );
76
85
  overflow: hidden;
77
86
  }
78
87
 
@@ -103,16 +112,28 @@
103
112
  }
104
113
 
105
114
  .side-nav__toggle:hover {
115
+ /* Read both deprecated --hx-color-border-on-dark-subtle (3.2.0/3.2.1 API)
116
+ and canonical --hx-color-surface-on-dark-overlay-subtle so consumer
117
+ overrides on either name reach paint. Deprecated removal: 4.0.0.
118
+ Hex fallback for browsers without color-mix(). */
106
119
  background-color: var(
107
120
  --hx-color-border-on-dark-subtle,
108
- rgba(255, 255, 255, 0.1)
109
- ); /* fallback for browsers without color-mix() */
121
+ var(--hx-color-surface-on-dark-overlay-subtle, rgba(255, 255, 255, 0.1))
122
+ );
110
123
  color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));
111
124
  }
112
125
 
113
126
  @supports (color: color-mix(in srgb, red 50%, blue)) {
127
+ /* Fold color-mix() into the same deprecated-first chain so consumer
128
+ overrides on either token reach paint on the modern path too. */
114
129
  .side-nav__toggle:hover {
115
- background-color: color-mix(in srgb, currentColor 15%, transparent);
130
+ background-color: var(
131
+ --hx-color-border-on-dark-subtle,
132
+ var(
133
+ --hx-color-surface-on-dark-overlay-subtle,
134
+ color-mix(in srgb, currentColor 15%, transparent)
135
+ )
136
+ );
116
137
  }
117
138
  }
118
139
 
@@ -199,10 +199,7 @@
199
199
  .slider__input:focus-visible ~ .slider__thumb-visual {
200
200
  box-shadow:
201
201
  0 0 0 var(--hx-focus-ring-width, 2px)
202
- var(
203
- --hx-slider-focus-ring-color,
204
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
205
- ),
202
+ var(--hx-slider-focus-ring-color, var(--hx-focus-ring-color, #0f7078)),
206
203
  var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
207
204
  }
208
205
 
@@ -48,10 +48,7 @@
48
48
 
49
49
  .split-button__primary:focus-visible {
50
50
  outline: var(--hx-focus-ring-width, 2px) solid
51
- var(
52
- --hx-split-button-focus-ring-color,
53
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
54
- );
51
+ var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
55
52
  outline-offset: var(--hx-focus-ring-offset, 2px);
56
53
  z-index: 1;
57
54
  position: relative;
@@ -93,10 +90,7 @@
93
90
 
94
91
  .split-button__trigger:focus-visible {
95
92
  outline: var(--hx-focus-ring-width, 2px) solid
96
- var(
97
- --hx-split-button-focus-ring-color,
98
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
99
- );
93
+ var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
100
94
  outline-offset: var(--hx-focus-ring-offset, 2px);
101
95
  z-index: 1;
102
96
  position: relative;
@@ -51,10 +51,7 @@
51
51
 
52
52
  .switch__track:focus-visible {
53
53
  outline: var(--hx-focus-ring-width, 2px) solid
54
- var(
55
- --hx-switch-focus-ring-color,
56
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
57
- );
54
+ var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
58
55
  outline-offset: var(--hx-focus-ring-offset, 2px);
59
56
  }
60
57
 
@@ -29,10 +29,7 @@
29
29
  );
30
30
  --_text-input-border-color-focus: var(
31
31
  --hx-text-input-border-color-focus,
32
- var(
33
- --hx-input-focus-ring-color,
34
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
35
- )
32
+ var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
36
33
  );
37
34
  --_text-input-border-color-invalid: var(
38
35
  --hx-text-input-border-color-invalid,
@@ -58,10 +55,7 @@
58
55
  /* Focus ring */
59
56
  --_text-input-focus-ring-color: var(
60
57
  --hx-text-input-focus-ring-color,
61
- var(
62
- --hx-input-focus-ring-color,
63
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
64
- )
58
+ var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
65
59
  );
66
60
  --_text-input-focus-ring-width: var(
67
61
  --hx-text-input-focus-ring-width,
@@ -17,10 +17,7 @@
17
17
  );
18
18
  --_textarea-border-color-focus: var(
19
19
  --hx-textarea-border-color-focus,
20
- var(
21
- --hx-input-focus-ring-color,
22
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
23
- )
20
+ var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
24
21
  );
25
22
  --_textarea-border-color-invalid: var(
26
23
  --hx-textarea-border-color-invalid,
@@ -36,10 +36,7 @@
36
36
 
37
37
  .button:focus-visible {
38
38
  outline: var(--hx-focus-ring-width, 2px) solid
39
- var(
40
- --hx-toggle-button-focus-ring-color,
41
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
42
- );
39
+ var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
43
40
  outline-offset: var(--hx-focus-ring-offset, 2px);
44
41
  }
45
42
 
@@ -15,8 +15,7 @@
15
15
  }
16
16
 
17
17
  .tree:focus-visible {
18
- outline: var(--hx-focus-ring-width, 2px) solid
19
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
18
+ outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
20
19
  outline-offset: var(--hx-focus-ring-offset, 2px);
21
20
  border-radius: var(--hx-border-radius-sm, 0.25rem);
22
21
  }
@@ -1,4 +1,4 @@
1
- /* index.css — generated 2026-04-26T10:37:40.401Z */
1
+ /* index.css — generated 2026-04-27T12:03:27.258Z */
2
2
  /* Imports all per-component CSS files for Drupal asset pipeline */
3
3
 
4
4
  @import './hx-accordion.css';
@@ -1,5 +1,5 @@
1
1
  {
2
- "generated": "2026-04-26T10:37:40.400Z",
2
+ "generated": "2026-04-27T12:03:27.258Z",
3
3
  "components": [
4
4
  {
5
5
  "name": "hx-accordion",
@@ -46,6 +46,7 @@
46
46
  "--hx-alert-border-color",
47
47
  "--hx-alert-border-radius",
48
48
  "--hx-alert-border-width",
49
+ "--hx-alert-close-btn-focus-ring-color",
49
50
  "--hx-alert-color",
50
51
  "--hx-alert-font-family",
51
52
  "--hx-alert-gap",
@@ -62,7 +63,6 @@
62
63
  "--hx-color-info-50",
63
64
  "--hx-color-info-500",
64
65
  "--hx-color-info-800",
65
- "--hx-color-primary-600",
66
66
  "--hx-color-success-200",
67
67
  "--hx-color-success-50",
68
68
  "--hx-color-success-500",
@@ -189,9 +189,11 @@
189
189
  "file": "hx-banner.css",
190
190
  "tokens": [
191
191
  "--hx-banner-action-color",
192
+ "--hx-banner-action-focus-ring-color",
192
193
  "--hx-banner-bg",
193
194
  "--hx-banner-border-color",
194
195
  "--hx-banner-border-width",
196
+ "--hx-banner-close-btn-focus-ring-color",
195
197
  "--hx-banner-color",
196
198
  "--hx-banner-font-family",
197
199
  "--hx-banner-gap",
@@ -209,7 +211,6 @@
209
211
  "--hx-color-info-50",
210
212
  "--hx-color-info-500",
211
213
  "--hx-color-info-800",
212
- "--hx-color-primary-600",
213
214
  "--hx-color-success-200",
214
215
  "--hx-color-success-50",
215
216
  "--hx-color-success-500",
@@ -275,12 +276,12 @@
275
276
  "--hx-color-action-secondary-bg-hover",
276
277
  "--hx-color-action-secondary-border",
277
278
  "--hx-color-action-secondary-fg",
278
- "--hx-color-border-on-dark-default",
279
279
  "--hx-color-border-on-dark-strong",
280
- "--hx-color-border-on-dark-subtle",
281
280
  "--hx-color-border-strong",
282
281
  "--hx-color-neutral-0",
283
282
  "--hx-color-primary-500",
283
+ "--hx-color-surface-on-dark-overlay-default",
284
+ "--hx-color-surface-on-dark-overlay-subtle",
284
285
  "--hx-color-surface-raised",
285
286
  "--hx-color-surface-sunken",
286
287
  "--hx-color-text-inverse",
@@ -425,6 +426,7 @@
425
426
  "--hx-checkbox-checked-border-color",
426
427
  "--hx-checkbox-checkmark-color",
427
428
  "--hx-checkbox-error-color",
429
+ "--hx-checkbox-focus-ring-color",
428
430
  "--hx-checkbox-focus-ring-offset",
429
431
  "--hx-checkbox-focus-ring-width",
430
432
  "--hx-checkbox-font-family",
@@ -435,7 +437,6 @@
435
437
  "--hx-color-error-500",
436
438
  "--hx-color-error-text",
437
439
  "--hx-color-primary-500",
438
- "--hx-color-primary-600",
439
440
  "--hx-color-surface-default",
440
441
  "--hx-color-text-muted",
441
442
  "--hx-color-text-on-primary",
@@ -560,8 +561,8 @@
560
561
  "--hx-code-snippet-padding",
561
562
  "--hx-code-snippet-tab-size",
562
563
  "--hx-color-border-default",
563
- "--hx-color-border-strong",
564
- "--hx-color-primary-600",
564
+ "--hx-color-border-on-dark-strong",
565
+ "--hx-color-primary-400",
565
566
  "--hx-color-surface-inverse",
566
567
  "--hx-color-surface-sunken",
567
568
  "--hx-color-text-inverse",
@@ -569,7 +570,6 @@
569
570
  "--hx-color-text-primary",
570
571
  "--hx-filter-brightness-active",
571
572
  "--hx-filter-brightness-hover",
572
- "--hx-focus-ring-color",
573
573
  "--hx-focus-ring-offset",
574
574
  "--hx-focus-ring-width",
575
575
  "--hx-font-family-mono",
@@ -644,7 +644,6 @@
644
644
  "--hx-color-primary-100",
645
645
  "--hx-color-primary-200",
646
646
  "--hx-color-primary-50",
647
- "--hx-color-primary-600",
648
647
  "--hx-color-primary-800",
649
648
  "--hx-color-surface-default",
650
649
  "--hx-color-text-muted",
@@ -848,6 +847,7 @@
848
847
  "--hx-date-picker-color",
849
848
  "--hx-date-picker-day-hover-bg",
850
849
  "--hx-date-picker-error-color",
850
+ "--hx-date-picker-focus-ring-color",
851
851
  "--hx-date-picker-font-family",
852
852
  "--hx-date-picker-label-color",
853
853
  "--hx-date-picker-selected-bg",
@@ -1243,6 +1243,7 @@
1243
1243
  "--hx-link-color-disabled",
1244
1244
  "--hx-link-color-hover",
1245
1245
  "--hx-link-color-subtle",
1246
+ "--hx-link-focus-ring-color",
1246
1247
  "--hx-link-font-family",
1247
1248
  "--hx-link-text-decoration",
1248
1249
  "--hx-link-text-decoration-hover",
@@ -1688,7 +1689,6 @@
1688
1689
  "tokens": [
1689
1690
  "--hx-border-radius-sm",
1690
1691
  "--hx-color-border-strong",
1691
- "--hx-color-primary-600",
1692
1692
  "--hx-color-warning-300",
1693
1693
  "--hx-color-warning-400",
1694
1694
  "--hx-focus-ring-color",
@@ -1717,7 +1717,6 @@
1717
1717
  "--hx-color-error-text",
1718
1718
  "--hx-color-primary-100",
1719
1719
  "--hx-color-primary-50",
1720
- "--hx-color-primary-600",
1721
1720
  "--hx-color-surface-default",
1722
1721
  "--hx-color-text-muted",
1723
1722
  "--hx-color-text-placeholder",
@@ -1745,6 +1744,7 @@
1745
1744
  "--hx-select-chevron-size",
1746
1745
  "--hx-select-color",
1747
1746
  "--hx-select-error-color",
1747
+ "--hx-select-focus-ring-color",
1748
1748
  "--hx-select-font-family",
1749
1749
  "--hx-select-label-color",
1750
1750
  "--hx-select-listbox-bg",
@@ -1769,14 +1769,14 @@
1769
1769
  "tokens": [
1770
1770
  "--hx-border-radius-sm",
1771
1771
  "--hx-border-width-thin",
1772
- "--hx-color-border-strong",
1772
+ "--hx-color-border-on-dark-strong",
1773
1773
  "--hx-color-surface-inverse",
1774
+ "--hx-color-surface-on-dark-overlay-subtle",
1774
1775
  "--hx-color-text-inverse",
1775
1776
  "--hx-focus-ring-color",
1776
1777
  "--hx-focus-ring-offset",
1777
1778
  "--hx-focus-ring-width",
1778
1779
  "--hx-side-nav-bg",
1779
- "--hx-side-nav-border-color",
1780
1780
  "--hx-side-nav-collapsed-width",
1781
1781
  "--hx-side-nav-color",
1782
1782
  "--hx-side-nav-focus-ring-color",
@@ -1823,7 +1823,6 @@
1823
1823
  "--hx-color-border-default",
1824
1824
  "--hx-color-border-strong",
1825
1825
  "--hx-color-primary-500",
1826
- "--hx-color-primary-600",
1827
1826
  "--hx-color-surface-default",
1828
1827
  "--hx-color-text-muted",
1829
1828
  "--hx-color-text-secondary",
@@ -1845,6 +1844,7 @@
1845
1844
  "--hx-size-8",
1846
1845
  "--hx-slider-disabled-fill-bg",
1847
1846
  "--hx-slider-fill-bg",
1847
+ "--hx-slider-focus-ring-color",
1848
1848
  "--hx-slider-font-family",
1849
1849
  "--hx-slider-help-text-color",
1850
1850
  "--hx-slider-input-padding-block",
@@ -1939,6 +1939,7 @@
1939
1939
  "--hx-split-button-border-radius",
1940
1940
  "--hx-split-button-color",
1941
1941
  "--hx-split-button-divider-color",
1942
+ "--hx-split-button-focus-ring-color",
1942
1943
  "--hx-split-button-font-family",
1943
1944
  "--hx-split-button-font-weight",
1944
1945
  "--hx-split-button-menu-bg",
@@ -2138,6 +2139,7 @@
2138
2139
  "--hx-space-1",
2139
2140
  "--hx-space-2",
2140
2141
  "--hx-switch-error-color",
2142
+ "--hx-switch-focus-ring-color",
2141
2143
  "--hx-switch-font-family",
2142
2144
  "--hx-switch-help-text-color",
2143
2145
  "--hx-switch-label-color",
@@ -2315,7 +2317,6 @@
2315
2317
  "--hx-color-border-strong",
2316
2318
  "--hx-color-error-600",
2317
2319
  "--hx-color-error-text",
2318
- "--hx-color-primary-600",
2319
2320
  "--hx-color-surface-default",
2320
2321
  "--hx-color-surface-sunken",
2321
2322
  "--hx-color-text-disabled",
@@ -2337,6 +2338,7 @@
2337
2338
  "--hx-input-border-radius",
2338
2339
  "--hx-input-color",
2339
2340
  "--hx-input-error-color",
2341
+ "--hx-input-focus-ring-color",
2340
2342
  "--hx-input-font-family",
2341
2343
  "--hx-input-label-color",
2342
2344
  "--hx-input-lg-font-size",
@@ -2368,7 +2370,6 @@
2368
2370
  "--hx-color-border-strong",
2369
2371
  "--hx-color-error-600",
2370
2372
  "--hx-color-error-text",
2371
- "--hx-color-primary-600",
2372
2373
  "--hx-color-surface-default",
2373
2374
  "--hx-color-text-muted",
2374
2375
  "--hx-color-text-placeholder",
@@ -2387,6 +2388,7 @@
2387
2388
  "--hx-input-border-radius",
2388
2389
  "--hx-input-color",
2389
2390
  "--hx-input-error-color",
2391
+ "--hx-input-focus-ring-color",
2390
2392
  "--hx-input-font-family",
2391
2393
  "--hx-input-label-color",
2392
2394
  "--hx-line-height-normal",
@@ -2542,6 +2544,7 @@
2542
2544
  "--hx-toggle-button-border-color",
2543
2545
  "--hx-toggle-button-border-radius",
2544
2546
  "--hx-toggle-button-color",
2547
+ "--hx-toggle-button-focus-ring-color",
2545
2548
  "--hx-toggle-button-font-family",
2546
2549
  "--hx-toggle-button-font-weight",
2547
2550
  "--hx-toggle-button-pressed-bg",
@@ -2616,7 +2619,6 @@
2616
2619
  "file": "hx-tree-view.css",
2617
2620
  "tokens": [
2618
2621
  "--hx-border-radius-sm",
2619
- "--hx-color-primary-600",
2620
2622
  "--hx-focus-ring-color",
2621
2623
  "--hx-focus-ring-offset",
2622
2624
  "--hx-focus-ring-width",
package/dist/index.js CHANGED
@@ -1,26 +1,26 @@
1
1
  import { lightTokenCss as p } from "@helixui/tokens";
2
2
  import { H as S, a as y } from "./shared/hx-accordion-ZVzgDzTG.js";
3
3
  import { H as b } from "./shared/hx-action-bar-CitgcpGv.js";
4
- import { H as g } from "./shared/hx-alert-C597yHpD.js";
4
+ import { H as g } from "./shared/hx-alert-CLn7CstP.js";
5
5
  import { H as v } from "./shared/hx-avatar-C9hOmlAb.js";
6
6
  import { H as E } from "./shared/hx-badge-CQXgOXJM.js";
7
- import { H as k } from "./shared/hx-banner-Cxd7eFUP.js";
7
+ import { H as k } from "./shared/hx-banner-D3DzpfcP.js";
8
8
  import { H as B, a as P } from "./shared/hx-breadcrumb-item-3tKppF9h.js";
9
- import { H as M } from "./shared/hx-button-9OUjJnk7.js";
9
+ import { H as M } from "./shared/hx-button-DPY6SPVT.js";
10
10
  import { H as N } from "./shared/hx-button-group-BI-QBqmO.js";
11
11
  import { H as A } from "./shared/hx-card-qNAM2QNV.js";
12
12
  import { H as G, a as U } from "./shared/hx-carousel-item-z1Lc24op.js";
13
- import { H as O } from "./shared/hx-checkbox-DBD-gMoz.js";
13
+ import { H as O } from "./shared/hx-checkbox-D7xma9YH.js";
14
14
  import { H as K } from "./shared/hx-checkbox-group-C9n315Ju.js";
15
15
  import { H as Y } from "./shared/hx-clinical-status-D3XQIOqX.js";
16
- import { H as q } from "./shared/hx-code-snippet-CJrFeyz0.js";
16
+ import { H as q } from "./shared/hx-code-snippet-fVV3Z2DZ.js";
17
17
  import { H as J } from "./shared/hx-color-picker-uRc865FJ.js";
18
- import { H as Z } from "./shared/hx-combobox-ClhNRAS5.js";
18
+ import { H as Z } from "./shared/hx-combobox-DDzqNKEW.js";
19
19
  import { H as oe } from "./shared/hx-container-DVI7sxfX.js";
20
20
  import { H as re } from "./shared/hx-copy-button-sUVuikyH.js";
21
21
  import { H as ie } from "./shared/hx-counter-0zYapFhf.js";
22
22
  import { H as xe } from "./shared/hx-data-table-CLqVqdxr.js";
23
- import { H as le } from "./shared/hx-date-picker-BJm7Yrda.js";
23
+ import { H as le } from "./shared/hx-date-picker-2iRG1p74.js";
24
24
  import { H as pe } from "./shared/hx-dialog-DRN_1-Y-.js";
25
25
  import { H as fe } from "./shared/hx-divider-CYfcUjcr.js";
26
26
  import { H as de } from "./shared/hx-drawer-Y1Ui2IWJ.js";
@@ -35,8 +35,8 @@ import { H as Pe } from "./shared/hx-help-text-Xb2Yr8x2.js";
35
35
  import { H as Me } from "./shared/hx-icon-fuVm4-bk.js";
36
36
  import { H as Ne } from "./shared/hx-icon-button-CGNdQSFM.js";
37
37
  import { H as Ae } from "./shared/hx-image-Ben_4yM5.js";
38
- import { H as Ge } from "./shared/hx-link-9Ig2DW6L.js";
39
- import { H as Ve, a as Oe } from "./shared/hx-list-CkphGi9T.js";
38
+ import { H as Ge } from "./shared/hx-link-C-O6vq0Q.js";
39
+ import { H as Ve, a as Oe } from "./shared/hx-list-MyEhh8c7.js";
40
40
  import { H as Ke, a as We, b as Ye } from "./shared/hx-menu-divider-C2omnPtj.js";
41
41
  import { H as qe } from "./shared/hx-meter-BPscsw5t.js";
42
42
  import { H as Je } from "./shared/hx-nav-ldFM3Fle.js";
@@ -50,14 +50,14 @@ import { H as po } from "./shared/hx-popup-COUXXZ9X.js";
50
50
  import { H as fo } from "./shared/hx-progress-bar-Bn3JEPUf.js";
51
51
  import { H as ho } from "./shared/hx-progress-ring-TwHyXeEp.js";
52
52
  import { H as So } from "./shared/hx-prose-BThYcASV.js";
53
- import { H as To, a as bo } from "./shared/hx-radio-dFjUAost.js";
54
- import { H as go } from "./shared/hx-rating-CGtsejNf.js";
55
- import { H as vo } from "./shared/hx-select-Bf4usFts.js";
56
- import { H as Eo, a as Do } from "./shared/hx-nav-item-DH2tXcj1.js";
53
+ import { H as To, a as bo } from "./shared/hx-radio-CJvNU2yP.js";
54
+ import { H as go } from "./shared/hx-rating-C3QP53k9.js";
55
+ import { H as vo } from "./shared/hx-select-C8fEHQhC.js";
56
+ import { H as Eo, a as Do } from "./shared/hx-nav-item-xqRPOCWX.js";
57
57
  import { H as wo } from "./shared/hx-skeleton-Cnieh5Uc.js";
58
- import { H as Po } from "./shared/hx-slider-m0aEClH1.js";
58
+ import { H as Po } from "./shared/hx-slider-Blmv_rwS.js";
59
59
  import { H as Mo } from "./shared/hx-spinner-DL5AYr16.js";
60
- import { H as No } from "./shared/hx-split-button-BxDFfx4D.js";
60
+ import { H as No } from "./shared/hx-split-button-Djnc5Aeg.js";
61
61
  import { H as Ao } from "./shared/hx-split-panel-B-u0Z3mm.js";
62
62
  import { H as Go } from "./shared/hx-stack-DGfcOfWJ.js";
63
63
  import { H as Vo } from "./shared/hx-stat-WOcNV1Ry.js";
@@ -65,20 +65,20 @@ import { H as Xo } from "./shared/hx-status-indicator-BlQyen43.js";
65
65
  import { H as Wo, a as Yo } from "./shared/hx-step-R2rjp1fT.js";
66
66
  import { H as qo, a as zo } from "./shared/hx-structured-list-m_-dMJbC.js";
67
67
  import { H as Qo } from "./shared/hx-style-scope-TDnR8H4O.js";
68
- import { H as et } from "./shared/hx-switch-DvAW4YY-.js";
68
+ import { H as et } from "./shared/hx-switch-BrZFaRue.js";
69
69
  import { H as tt, a as rt, b as at, c as it, d as st, e as xt, f as Ht } from "./shared/hx-td-DnnEMIuA.js";
70
- import { H as nt, a as pt, b as mt } from "./shared/hx-tab-panel-SWOEHuJc.js";
70
+ import { H as nt, a as pt, b as mt } from "./shared/hx-tab-panel-DspCrKqo.js";
71
71
  import { H as ct } from "./shared/hx-tag-CNSmdyaK.js";
72
72
  import { H as ht } from "./shared/hx-text-Bz_9fJ3J.js";
73
- import { F as St, H as yt } from "./shared/hx-text-input-Bn7Gn8CI.js";
74
- import { H as bt } from "./shared/hx-textarea-Jx1xnhgv.js";
75
- import { H as gt } from "./shared/hx-theme-BiyQ7UUK.js";
73
+ import { F as St, H as yt } from "./shared/hx-text-input-D6FlOZM-.js";
74
+ import { H as bt } from "./shared/hx-textarea-CNG590KY.js";
75
+ import { H as gt } from "./shared/hx-theme-BsefFWTO.js";
76
76
  import { H as vt } from "./shared/hx-time-picker-BoEIZwzv.js";
77
77
  import { H as Et, a as Dt, t as kt } from "./shared/toast-factory-YSznocIV.js";
78
- import { H as Bt } from "./shared/hx-toggle-button-DPAIh_Xo.js";
78
+ import { H as Bt } from "./shared/hx-toggle-button-iLiYrMbD.js";
79
79
  import { H as Ft } from "./shared/hx-tooltip-nYOv9OLu.js";
80
80
  import { H as Lt } from "./shared/hx-top-nav-DP6OFS8C.js";
81
- import { H as Rt, a as At } from "./shared/hx-tree-item-Dt0Ozqyr.js";
81
+ import { H as Rt, a as At } from "./shared/hx-tree-item-C2CiWuDE.js";
82
82
  import { H as Gt } from "./shared/hx-visually-hidden-0bZKOWgT.js";
83
83
  import { F as Vt } from "./shared/FormMixin-B8PXk5RQ.js";
84
84
  import { H as Xt } from "./shared/helix-element-BNEYeiys.js";
@@ -163,10 +163,7 @@ const g = u`
163
163
 
164
164
  .alert__close-button:focus-visible {
165
165
  outline: var(--hx-focus-ring-width, 2px) solid
166
- var(
167
- --hx-alert-close-btn-focus-ring-color,
168
- var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
169
- );
166
+ var(--hx-alert-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
170
167
  outline-offset: var(--hx-focus-ring-offset, 2px);
171
168
  opacity: 1;
172
169
  }
@@ -479,4 +476,4 @@ r = o([
479
476
  export {
480
477
  r as H
481
478
  };
482
- //# sourceMappingURL=hx-alert-C597yHpD.js.map
479
+ //# sourceMappingURL=hx-alert-CLn7CstP.js.map