@helixui/library 3.2.0-next.94 → 3.2.0-next.98

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 (36) hide show
  1. package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
  2. package/dist/components/hx-button/index.js +1 -1
  3. package/dist/components/hx-carousel/index.js +1 -1
  4. package/dist/components/hx-combobox/index.js +1 -1
  5. package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map +1 -1
  6. package/dist/components/hx-file-upload/index.js +1 -1
  7. package/dist/components/hx-select/hx-select.styles.d.ts.map +1 -1
  8. package/dist/components/hx-select/index.js +1 -1
  9. package/dist/css/helix-all.css +20 -20
  10. package/dist/css/helix-core.css +10 -0
  11. package/dist/css/helix-forms.css +7 -17
  12. package/dist/css/helix-media.css +3 -3
  13. package/dist/css/hx-button.css +10 -0
  14. package/dist/css/hx-carousel.css +3 -3
  15. package/dist/css/hx-combobox.css +3 -3
  16. package/dist/css/hx-file-upload.css +3 -12
  17. package/dist/css/hx-select.css +1 -2
  18. package/dist/css/index.css +1 -1
  19. package/dist/css/manifest.json +2 -4
  20. package/dist/index.js +5 -5
  21. package/dist/shared/{hx-button-D3gC-OJb.js → hx-button-9OUjJnk7.js} +13 -3
  22. package/dist/shared/hx-button-9OUjJnk7.js.map +1 -0
  23. package/dist/shared/{hx-carousel-item-BaE4hpLl.js → hx-carousel-item-z1Lc24op.js} +4 -4
  24. package/dist/shared/hx-carousel-item-z1Lc24op.js.map +1 -0
  25. package/dist/shared/{hx-combobox-M1yregCS.js → hx-combobox-ClhNRAS5.js} +4 -4
  26. package/dist/shared/hx-combobox-ClhNRAS5.js.map +1 -0
  27. package/dist/shared/{hx-file-upload-B4L_Nkm-.js → hx-file-upload-D3rKROK5.js} +8 -17
  28. package/dist/shared/hx-file-upload-D3rKROK5.js.map +1 -0
  29. package/dist/shared/{hx-select-zfIRr9qM.js → hx-select-Bf4usFts.js} +2 -3
  30. package/dist/shared/hx-select-Bf4usFts.js.map +1 -0
  31. package/package.json +2 -2
  32. package/dist/shared/hx-button-D3gC-OJb.js.map +0 -1
  33. package/dist/shared/hx-carousel-item-BaE4hpLl.js.map +0 -1
  34. package/dist/shared/hx-combobox-M1yregCS.js.map +0 -1
  35. package/dist/shared/hx-file-upload-B4L_Nkm-.js.map +0 -1
  36. package/dist/shared/hx-select-zfIRr9qM.js.map +0 -1
package/dist/components/hx-button/hx-button.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hx-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAsZ7B,CAAC"}
1
+ {"version":3,"file":"hx-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-button/hx-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAga7B,CAAC"}
package/dist/components/hx-button/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { H as e } from "../../shared/hx-button-D3gC-OJb.js";
1
+ import { H as e } from "../../shared/hx-button-9OUjJnk7.js";
2
2
  export {
3
3
  e as HelixButton
4
4
  };
package/dist/components/hx-carousel/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { H as l, a as o } from "../../shared/hx-carousel-item-BaE4hpLl.js";
1
+ import { H as l, a as o } from "../../shared/hx-carousel-item-z1Lc24op.js";
2
2
  export {
3
3
  l as HelixCarousel,
4
4
  o as HelixCarouselItem
package/dist/components/hx-combobox/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { H as b } from "../../shared/hx-combobox-M1yregCS.js";
1
+ import { H as b } from "../../shared/hx-combobox-ClhNRAS5.js";
2
2
  export {
3
3
  b as HelixCombobox
4
4
  };
package/dist/components/hx-file-upload/hx-file-upload.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hx-file-upload.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-file-upload/hx-file-upload.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAiSjC,CAAC"}
1
+ {"version":3,"file":"hx-file-upload.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-file-upload/hx-file-upload.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAwRjC,CAAC"}
package/dist/components/hx-file-upload/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { H as o } from "../../shared/hx-file-upload-B4L_Nkm-.js";
1
+ import { H as o } from "../../shared/hx-file-upload-D3rKROK5.js";
2
2
  export {
3
3
  o as HelixFileUpload
4
4
  };
package/dist/components/hx-select/hx-select.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hx-select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-select/hx-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA0X7B,CAAC"}
1
+ {"version":3,"file":"hx-select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/hx-select/hx-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAyX7B,CAAC"}
package/dist/components/hx-select/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { H as o } from "../../shared/hx-select-zfIRr9qM.js";
1
+ import { H as o } from "../../shared/hx-select-Bf4usFts.js";
2
2
  export {
3
3
  o as HelixSelect
4
4
  };
package/dist/css/helix-all.css CHANGED
@@ -1255,6 +1255,16 @@
1255
1255
 
1256
1256
  /* ─── Inverted Mode ─── */
1257
1257
 
1258
+ /* Inline-fallback contract for --hx-color-border-on-dark-* in this section:
1259
+ the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last
1260
+ resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects
1261
+ dark.color.border.on-dark-* as overlay-black-* so dark-mode inverted
1262
+ buttons stay visible on the now-light surface.inverse (#EBEEE9). The
1263
+ inline white overlays would render invisible (≈1.1:1) on a light surface,
1264
+ but they never paint when the theme is mounted. If a future change moves
1265
+ these into a context where hx-theme is not guaranteed, replace with
1266
+ mode-aware tokens. */
1267
+
1258
1268
  /* Override text color and filter-based hover/active for all variants */
1259
1269
  :host([inverted]) .button {
1260
1270
  color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));
@@ -1799,7 +1809,7 @@
1799
1809
 
1800
1810
  .nav-btn:focus-visible {
1801
1811
  outline: var(--hx-focus-ring-width, 2px) solid
1802
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
1812
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
1803
1813
  outline-offset: var(--hx-focus-ring-offset, 2px);
1804
1814
  }
1805
1815
 
@@ -1841,7 +1851,7 @@
1841
1851
 
1842
1852
  .play-pause-btn:focus-visible {
1843
1853
  outline: var(--hx-focus-ring-width, 2px) solid
1844
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
1854
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
1845
1855
  outline-offset: var(--hx-focus-ring-offset, 2px);
1846
1856
  }
1847
1857
 
@@ -1913,7 +1923,7 @@
1913
1923
 
1914
1924
  .pagination-item:focus-visible {
1915
1925
  outline: var(--hx-focus-ring-width, 2px) solid
1916
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
1926
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
1917
1927
  outline-offset: var(--hx-focus-ring-offset, 2px);
1918
1928
  border-radius: var(--hx-border-radius-full, 9999px);
1919
1929
  }
@@ -3258,7 +3268,7 @@
3258
3268
  }
3259
3269
  .field__clear-button:focus-visible {
3260
3270
  outline: var(--hx-focus-ring-width, 2px) solid
3261
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
3271
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
3262
3272
  outline-offset: var(--hx-focus-ring-offset, 2px);
3263
3273
  }
3264
3274
  .field__loading-indicator {
@@ -3332,7 +3342,7 @@
3332
3342
  .field__option--focused {
3333
3343
  background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
3334
3344
  outline: var(--hx-focus-ring-width, 2px) solid
3335
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
3345
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
3336
3346
  outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
3337
3347
  }
3338
3348
  .field__option--focused.field__option--selected {
@@ -3516,7 +3526,7 @@
3516
3526
  }
3517
3527
  .field__chip-remove:focus-visible {
3518
3528
  outline: var(--hx-focus-ring-width, 2px) solid
3519
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
3529
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
3520
3530
  outline-offset: var(--hx-focus-ring-offset, 2px);
3521
3531
  opacity: 1;
3522
3532
  }
@@ -5405,15 +5415,9 @@
5405
5415
 
5406
5416
  .dropzone:focus-visible {
5407
5417
  outline: var(--hx-focus-ring-width, 2px) solid
5408
- var(
5409
- --hx-file-upload-focus-ring-color,
5410
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
5411
- );
5418
+ var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
5412
5419
  outline-offset: var(--hx-focus-ring-offset, 2px);
5413
- border-color: var(
5414
- --hx-file-upload-focus-ring-color,
5415
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
5416
- );
5420
+ border-color: var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
5417
5421
  }
5418
5422
 
5419
5423
  .dropzone--drag-over {
@@ -5528,10 +5532,7 @@
5528
5532
 
5529
5533
  .file-item__remove:focus-visible {
5530
5534
  outline: var(--hx-focus-ring-width, 2px) solid
5531
- var(
5532
- --hx-file-upload-focus-ring-color,
5533
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
5534
- );
5535
+ var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
5535
5536
  outline-offset: var(--hx-focus-ring-offset, 2px);
5536
5537
  }
5537
5538
 
@@ -8520,8 +8521,7 @@ export const helixGridItemStyles = css`
8520
8521
 
8521
8522
  .field__option--focused {
8522
8523
  background-color: var(--_option-hover-bg);
8523
- outline: var(--hx-focus-ring-width, 2px) solid
8524
- var(--_focus-ring-color, var(--hx-color-primary-500));
8524
+ outline: var(--hx-focus-ring-width, 2px) solid var(--_focus-ring-color);
8525
8525
  outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
8526
8526
  }
8527
8527
 
package/dist/css/helix-core.css CHANGED
@@ -578,6 +578,16 @@
578
578
 
579
579
  /* ─── Inverted Mode ─── */
580
580
 
581
+ /* Inline-fallback contract for --hx-color-border-on-dark-* in this section:
582
+ the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last
583
+ resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects
584
+ dark.color.border.on-dark-* as overlay-black-* so dark-mode inverted
585
+ buttons stay visible on the now-light surface.inverse (#EBEEE9). The
586
+ inline white overlays would render invisible (≈1.1:1) on a light surface,
587
+ but they never paint when the theme is mounted. If a future change moves
588
+ these into a context where hx-theme is not guaranteed, replace with
589
+ mode-aware tokens. */
590
+
581
591
  /* Override text color and filter-based hover/active for all variants */
582
592
  :host([inverted]) .button {
583
593
  color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));
package/dist/css/helix-forms.css CHANGED
@@ -808,7 +808,7 @@
808
808
  }
809
809
  .field__clear-button:focus-visible {
810
810
  outline: var(--hx-focus-ring-width, 2px) solid
811
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
811
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
812
812
  outline-offset: var(--hx-focus-ring-offset, 2px);
813
813
  }
814
814
  .field__loading-indicator {
@@ -882,7 +882,7 @@
882
882
  .field__option--focused {
883
883
  background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
884
884
  outline: var(--hx-focus-ring-width, 2px) solid
885
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
885
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
886
886
  outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
887
887
  }
888
888
  .field__option--focused.field__option--selected {
@@ -1066,7 +1066,7 @@
1066
1066
  }
1067
1067
  .field__chip-remove:focus-visible {
1068
1068
  outline: var(--hx-focus-ring-width, 2px) solid
1069
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
1069
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
1070
1070
  outline-offset: var(--hx-focus-ring-offset, 2px);
1071
1071
  opacity: 1;
1072
1072
  }
@@ -1777,15 +1777,9 @@
1777
1777
 
1778
1778
  .dropzone:focus-visible {
1779
1779
  outline: var(--hx-focus-ring-width, 2px) solid
1780
- var(
1781
- --hx-file-upload-focus-ring-color,
1782
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
1783
- );
1780
+ var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
1784
1781
  outline-offset: var(--hx-focus-ring-offset, 2px);
1785
- border-color: var(
1786
- --hx-file-upload-focus-ring-color,
1787
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
1788
- );
1782
+ border-color: var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
1789
1783
  }
1790
1784
 
1791
1785
  .dropzone--drag-over {
@@ -1900,10 +1894,7 @@
1900
1894
 
1901
1895
  .file-item__remove:focus-visible {
1902
1896
  outline: var(--hx-focus-ring-width, 2px) solid
1903
- var(
1904
- --hx-file-upload-focus-ring-color,
1905
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
1906
- );
1897
+ var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
1907
1898
  outline-offset: var(--hx-focus-ring-offset, 2px);
1908
1899
  }
1909
1900
 
@@ -2882,8 +2873,7 @@
2882
2873
 
2883
2874
  .field__option--focused {
2884
2875
  background-color: var(--_option-hover-bg);
2885
- outline: var(--hx-focus-ring-width, 2px) solid
2886
- var(--_focus-ring-color, var(--hx-color-primary-500));
2876
+ outline: var(--hx-focus-ring-width, 2px) solid var(--_focus-ring-color);
2887
2877
  outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
2888
2878
  }
2889
2879
 
package/dist/css/helix-media.css CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  .nav-btn:focus-visible {
66
66
  outline: var(--hx-focus-ring-width, 2px) solid
67
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
67
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
68
68
  outline-offset: var(--hx-focus-ring-offset, 2px);
69
69
  }
70
70
 
@@ -106,7 +106,7 @@
106
106
 
107
107
  .play-pause-btn:focus-visible {
108
108
  outline: var(--hx-focus-ring-width, 2px) solid
109
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
109
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
110
110
  outline-offset: var(--hx-focus-ring-offset, 2px);
111
111
  }
112
112
 
@@ -178,7 +178,7 @@
178
178
 
179
179
  .pagination-item:focus-visible {
180
180
  outline: var(--hx-focus-ring-width, 2px) solid
181
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
181
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
182
182
  outline-offset: var(--hx-focus-ring-offset, 2px);
183
183
  border-radius: var(--hx-border-radius-full, 9999px);
184
184
  }
package/dist/css/hx-button.css CHANGED
@@ -229,6 +229,16 @@
229
229
 
230
230
  /* ─── Inverted Mode ─── */
231
231
 
232
+ /* Inline-fallback contract for --hx-color-border-on-dark-* in this section:
233
+ the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last
234
+ resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects
235
+ dark.color.border.on-dark-* as overlay-black-* so dark-mode inverted
236
+ buttons stay visible on the now-light surface.inverse (#EBEEE9). The
237
+ inline white overlays would render invisible (≈1.1:1) on a light surface,
238
+ but they never paint when the theme is mounted. If a future change moves
239
+ these into a context where hx-theme is not guaranteed, replace with
240
+ mode-aware tokens. */
241
+
232
242
  /* Override text color and filter-based hover/active for all variants */
233
243
  :host([inverted]) .button {
234
244
  color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));
package/dist/css/hx-carousel.css CHANGED
@@ -62,7 +62,7 @@
62
62
 
63
63
  .nav-btn:focus-visible {
64
64
  outline: var(--hx-focus-ring-width, 2px) solid
65
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
65
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
66
66
  outline-offset: var(--hx-focus-ring-offset, 2px);
67
67
  }
68
68
 
@@ -104,7 +104,7 @@
104
104
 
105
105
  .play-pause-btn:focus-visible {
106
106
  outline: var(--hx-focus-ring-width, 2px) solid
107
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
107
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
108
108
  outline-offset: var(--hx-focus-ring-offset, 2px);
109
109
  }
110
110
 
@@ -176,7 +176,7 @@
176
176
 
177
177
  .pagination-item:focus-visible {
178
178
  outline: var(--hx-focus-ring-width, 2px) solid
179
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
179
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
180
180
  outline-offset: var(--hx-focus-ring-offset, 2px);
181
181
  border-radius: var(--hx-border-radius-full, 9999px);
182
182
  }
package/dist/css/hx-combobox.css CHANGED
@@ -128,7 +128,7 @@
128
128
  }
129
129
  .field__clear-button:focus-visible {
130
130
  outline: var(--hx-focus-ring-width, 2px) solid
131
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
131
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
132
132
  outline-offset: var(--hx-focus-ring-offset, 2px);
133
133
  }
134
134
  .field__loading-indicator {
@@ -202,7 +202,7 @@
202
202
  .field__option--focused {
203
203
  background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
204
204
  outline: var(--hx-focus-ring-width, 2px) solid
205
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
205
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
206
206
  outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
207
207
  }
208
208
  .field__option--focused.field__option--selected {
@@ -386,7 +386,7 @@
386
386
  }
387
387
  .field__chip-remove:focus-visible {
388
388
  outline: var(--hx-focus-ring-width, 2px) solid
389
- var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
389
+ var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
390
390
  outline-offset: var(--hx-focus-ring-offset, 2px);
391
391
  opacity: 1;
392
392
  }
package/dist/css/hx-file-upload.css CHANGED
@@ -58,15 +58,9 @@
58
58
 
59
59
  .dropzone:focus-visible {
60
60
  outline: var(--hx-focus-ring-width, 2px) solid
61
- var(
62
- --hx-file-upload-focus-ring-color,
63
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
64
- );
61
+ var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
65
62
  outline-offset: var(--hx-focus-ring-offset, 2px);
66
- border-color: var(
67
- --hx-file-upload-focus-ring-color,
68
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
69
- );
63
+ border-color: var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
70
64
  }
71
65
 
72
66
  .dropzone--drag-over {
@@ -181,10 +175,7 @@
181
175
 
182
176
  .file-item__remove:focus-visible {
183
177
  outline: var(--hx-focus-ring-width, 2px) solid
184
- var(
185
- --hx-file-upload-focus-ring-color,
186
- var(--hx-focus-ring-color, var(--hx-color-primary-500))
187
- );
178
+ var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
188
179
  outline-offset: var(--hx-focus-ring-offset, 2px);
189
180
  }
190
181
 
package/dist/css/hx-select.css CHANGED
@@ -234,8 +234,7 @@
234
234
 
235
235
  .field__option--focused {
236
236
  background-color: var(--_option-hover-bg);
237
- outline: var(--hx-focus-ring-width, 2px) solid
238
- var(--_focus-ring-color, var(--hx-color-primary-500));
237
+ outline: var(--hx-focus-ring-width, 2px) solid var(--_focus-ring-color);
239
238
  outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
240
239
  }
241
240
 
package/dist/css/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* index.css — generated 2026-04-26T08:10:08.629Z */
1
+ /* index.css — generated 2026-04-26T10:37:40.401Z */
2
2
  /* Imports all per-component CSS files for Drupal asset pipeline */
3
3
 
4
4
  @import './hx-accordion.css';
package/dist/css/manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "generated": "2026-04-26T08:10:08.628Z",
2
+ "generated": "2026-04-26T10:37:40.400Z",
3
3
  "components": [
4
4
  {
5
5
  "name": "hx-accordion",
@@ -398,7 +398,6 @@
398
398
  "--hx-color-neutral-50",
399
399
  "--hx-color-neutral-500",
400
400
  "--hx-color-neutral-700",
401
- "--hx-color-primary-500",
402
401
  "--hx-color-primary-600",
403
402
  "--hx-focus-ring-color",
404
403
  "--hx-focus-ring-offset",
@@ -645,7 +644,6 @@
645
644
  "--hx-color-primary-100",
646
645
  "--hx-color-primary-200",
647
646
  "--hx-color-primary-50",
648
- "--hx-color-primary-500",
649
647
  "--hx-color-primary-600",
650
648
  "--hx-color-primary-800",
651
649
  "--hx-color-surface-default",
@@ -1092,6 +1090,7 @@
1092
1090
  "--hx-file-upload-dropzone-border-color",
1093
1091
  "--hx-file-upload-dropzone-border-radius",
1094
1092
  "--hx-file-upload-error-color",
1093
+ "--hx-file-upload-focus-ring-color",
1095
1094
  "--hx-file-upload-font-family",
1096
1095
  "--hx-file-upload-progress-color",
1097
1096
  "--hx-file-upload-progress-height",
@@ -1718,7 +1717,6 @@
1718
1717
  "--hx-color-error-text",
1719
1718
  "--hx-color-primary-100",
1720
1719
  "--hx-color-primary-50",
1721
- "--hx-color-primary-500",
1722
1720
  "--hx-color-primary-600",
1723
1721
  "--hx-color-surface-default",
1724
1722
  "--hx-color-text-muted",
package/dist/index.js CHANGED
@@ -6,16 +6,16 @@ import { H as v } from "./shared/hx-avatar-C9hOmlAb.js";
6
6
  import { H as E } from "./shared/hx-badge-CQXgOXJM.js";
7
7
  import { H as k } from "./shared/hx-banner-Cxd7eFUP.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-D3gC-OJb.js";
9
+ import { H as M } from "./shared/hx-button-9OUjJnk7.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
- import { H as G, a as U } from "./shared/hx-carousel-item-BaE4hpLl.js";
12
+ import { H as G, a as U } from "./shared/hx-carousel-item-z1Lc24op.js";
13
13
  import { H as O } from "./shared/hx-checkbox-DBD-gMoz.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
16
  import { H as q } from "./shared/hx-code-snippet-CJrFeyz0.js";
17
17
  import { H as J } from "./shared/hx-color-picker-uRc865FJ.js";
18
- import { H as Z } from "./shared/hx-combobox-M1yregCS.js";
18
+ import { H as Z } from "./shared/hx-combobox-ClhNRAS5.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";
@@ -27,7 +27,7 @@ import { H as de } from "./shared/hx-drawer-Y1Ui2IWJ.js";
27
27
  import { H as ue } from "./shared/hx-dropdown-LyaRc8Rf.js";
28
28
  import { H as ye } from "./shared/hx-field-B3Qo8OLS.js";
29
29
  import { H as be } from "./shared/hx-field-label-BVRyyKeh.js";
30
- import { H as ge } from "./shared/hx-file-upload-B4L_Nkm-.js";
30
+ import { H as ge } from "./shared/hx-file-upload-D3rKROK5.js";
31
31
  import { H as ve } from "./shared/hx-form-CkChEATa.js";
32
32
  import { H as Ee } from "./shared/hx-format-date-CKnlQOmV.js";
33
33
  import { H as ke, a as we } from "./shared/hx-grid-CXZf3jeK.js";
@@ -52,7 +52,7 @@ import { H as ho } from "./shared/hx-progress-ring-TwHyXeEp.js";
52
52
  import { H as So } from "./shared/hx-prose-BThYcASV.js";
53
53
  import { H as To, a as bo } from "./shared/hx-radio-dFjUAost.js";
54
54
  import { H as go } from "./shared/hx-rating-CGtsejNf.js";
55
- import { H as vo } from "./shared/hx-select-zfIRr9qM.js";
55
+ import { H as vo } from "./shared/hx-select-Bf4usFts.js";
56
56
  import { H as Eo, a as Do } from "./shared/hx-nav-item-DH2tXcj1.js";
57
57
  import { H as wo } from "./shared/hx-skeleton-Cnieh5Uc.js";
58
58
  import { H as Po } from "./shared/hx-slider-m0aEClH1.js";
package/dist/shared/{hx-button-D3gC-OJb.js → hx-button-9OUjJnk7.js} RENAMED
@@ -236,6 +236,16 @@ const m = v`
236
236
 
237
237
  /* ─── Inverted Mode ─── */
238
238
 
239
+ /* Inline-fallback contract for --hx-color-border-on-dark-* in this section:
240
+ the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last
241
+ resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects
242
+ dark.color.border.on-dark-* as overlay-black-* so dark-mode inverted
243
+ buttons stay visible on the now-light surface.inverse (#EBEEE9). The
244
+ inline white overlays would render invisible (≈1.1:1) on a light surface,
245
+ but they never paint when the theme is mounted. If a future change moves
246
+ these into a context where hx-theme is not guaranteed, replace with
247
+ mode-aware tokens. */
248
+
239
249
  /* Override text color and filter-based hover/active for all variants */
240
250
  :host([inverted]) .button {
241
251
  color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));
@@ -412,8 +422,8 @@ const m = v`
412
422
  }
413
423
  }
414
424
  `;
415
- var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (t, r, h, i) => {
416
- for (var o = i > 1 ? void 0 : i ? _(r, h) : r, l = t.length - 1, b; l >= 0; l--)
425
+ var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, r, h, i) => {
426
+ for (var o = i > 1 ? void 0 : i ? k(r, h) : r, l = t.length - 1, b; l >= 0; l--)
417
427
  (b = t[l]) && (o = (i ? b(r, h, o) : b(o)) || o);
418
428
  return i && o && y(r, h, o), o;
419
429
  };
@@ -622,4 +632,4 @@ e = n([
622
632
  export {
623
633
  e as H
624
634
  };
625
- //# sourceMappingURL=hx-button-D3gC-OJb.js.map
635
+ //# sourceMappingURL=hx-button-9OUjJnk7.js.map
package/dist/shared/hx-button-9OUjJnk7.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hx-button-9OUjJnk7.js","sources":["../../src/components/hx-button/hx-button.styles.ts","../../src/components/hx-button/hx-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n :host([full]) {\n display: block;\n width: 100%;\n }\n\n :host([full]) .button {\n width: 100%;\n justify-content: center;\n }\n\n /* ─── Base Button ─── */\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);\n border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-button-bg, var(--hx-color-primary-500, #429797));\n color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .button:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── */\n\n /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.\n min-height uses --hx-touch-target-min to guarantee the interactive area\n meets the threshold even though the visual size token is smaller. */\n .button--sm {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n }\n\n .button--md {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-size: var(--hx-font-size-md, 1rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .button--lg {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-button-bg: var(--hx-color-action-primary-bg, #429797);\n /* Inline #0d1825 matches text.on-primary's resolved primitive (neutral-900);\n cold-start without the semantic still paints AA-tuned dark-on-primary\n rather than white-on-primary (3.43:1 fail). */\n --hx-button-color: var(--hx-color-text-on-primary, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n .button--secondary {\n --hx-button-bg: transparent;\n /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n --hx-button-color: var(--hx-color-action-secondary-fg, #0f7078);\n --hx-button-border-color: var(--hx-color-action-secondary-border, #0f7078);\n }\n\n .button--secondary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-secondary-bg-hover, #ebf8f8));\n }\n\n .button--tertiary {\n --hx-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n --hx-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n }\n\n .button--danger {\n --hx-button-bg: var(--hx-color-action-danger-bg, #e5493e);\n /* Inline #0d1825 matches text.on-error's resolved primitive (neutral-900);\n cold-start without the semantic still paints AA-tuned dark-on-error\n rather than white-on-error (3.92:1 fail). */\n --hx-button-color: var(--hx-color-text-on-error, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).\n error-600 (#C92A2A) drops that to 3.28:1 — AA fail. text.on-error-strong\n resolves to neutral-0 across modes (no dark flip) so the darker hover fill\n stays legible. Mirrors hx-toast precedent (commit 300e21ab0); routed\n through the semantic tier in 3.2.1 token-cascade remediation. */\n .button--danger:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-hover, #c92a2a));\n --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n }\n\n /* Pressed state binds explicitly to action.danger.bg-active (error-700,\n #A21312) + text.on-error-strong (neutral-0) = 7.96:1 AA. Base\n .button:active filter:brightness(0.8) would compound on top of bg-hover\n (#C92A2A) and produce ~3.3:1 sub-AA on the bound colors. Override the\n filter to none. HC override on action.danger.bg-active flips to HC\n error-500 so the on-error-strong (HC = #000) pair is AA in HC too. */\n .button--danger:active {\n --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-danger-bg-active, #a21312));\n --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n filter: none;\n }\n\n .button--ghost {\n --hx-button-bg: transparent;\n /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n --hx-button-color: var(--hx-color-action-ghost-fg, #0f7078);\n --hx-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-ghost-bg-hover, #ebf8f8));\n }\n\n .button--outline {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-button-border-color: var(--hx-color-border-strong, #66787b);\n }\n\n .button--outline:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n }\n\n /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.\n primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. text.on-primary-strong\n resolves to neutral-0 across modes (no dark flip) for the darker hover fill.\n Mirrors hx-toast precedent (commit 300e21ab0); routed through the semantic\n tier in 3.2.1 token-cascade remediation. */\n .button--primary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-hover, #0f7078));\n --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n }\n\n /* Pressed state binds explicitly to action.primary.bg-active (primary-700,\n #0F6363) + text.on-primary-strong (neutral-0) = 7.03:1 AA. The base\n .button:active filter:brightness(0.8) would compound on top of bg-hover\n (#0F7078) and produce ~3.7:1 sub-AA on the bound colors. Override the\n filter to none so the action.*.bg-active token is what actually paints. */\n .button--primary:active {\n --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-primary-bg-active, #0f6363));\n --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n filter: none;\n }\n\n /* ─── Disabled ─── */\n\n /* Note: opacity is applied on :host([disabled]) above — do NOT add opacity here.\n Stacking opacity on both :host and .button[disabled] would multiply to 0.25. */\n .button[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Loading State ─── */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button__spinner {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;\n }\n\n @keyframes hx-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n\n .button__spinner {\n animation: none;\n opacity: var(--hx-opacity-muted, 0.6);\n }\n }\n\n /* ─── Inverted Mode ─── */\n\n /* Inline-fallback contract for --hx-color-border-on-dark-* in this section:\n the literal rgba(255, 255, 255, 0.X) arms are a LIGHT-MODE-only last\n resort (cold-start, CSS-not-loaded). At runtime, hx-theme injects\n dark.color.border.on-dark-* as overlay-black-* so dark-mode inverted\n buttons stay visible on the now-light surface.inverse (#EBEEE9). The\n inline white overlays would render invisible (≈1.1:1) on a light surface,\n but they never paint when the theme is mounted. If a future change moves\n these into a context where hx-theme is not guaranteed, replace with\n mode-aware tokens. */\n\n /* Override text color and filter-based hover/active for all variants */\n :host([inverted]) .button {\n color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));\n filter: none;\n }\n\n :host([inverted]) .button:hover {\n filter: none;\n }\n\n :host([inverted]) .button:active {\n filter: none;\n }\n\n :host([inverted]) .button:focus-visible {\n /* WCAG 1.4.11: focus indicator needs ≥3:1 against adjacent colors.\n border-on-dark-default (overlay-white-30) ≈ 2.7:1 on neutral-900 — fails.\n border-on-dark-strong (overlay-white-70) ≈ 5:1 — passes. */\n outline-color: var(\n --hx-button-inverted-focus-ring-color,\n var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))\n );\n }\n\n /* Primary inverted — resting bg routes through action.primary.bg-inverted-rest\n so dark mode can flip the fill to primary-600. surface.inverse becomes light\n (#EBEEE9) in dark mode; primary-500 on #EBEEE9 = 2.94:1 (sub-3:1 UI floor\n fail for the inverted-button boundary). primary-600 on #EBEEE9 = 4.97:1\n (AA pass). Light mode tracks action.primary.bg (primary-500, 5.20:1 on\n dark surface.inverse). */\n :host([inverted]) .button--primary {\n --hx-button-bg: var(--hx-color-action-primary-bg-inverted-rest, #429797);\n }\n\n /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover\n (primary-400, light teal). The base :host([inverted]) .button rule binds\n color to text.inverse, which flips by mode (neutral-0 in light, neutral-900\n in dark). On a permanent light-teal fill, white text drops to 2.4:1 in\n light mode (AA fail). Pin color to text.on-primary (neutral-900, no\n dark-mode flip) for both hover and active so the foreground is dark in\n both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).\n Pressed === hover visually in inverted mode is acceptable UX (the\n transient absence of pointer over the button signals release).\n The fallback chain wraps --hx-button-active-bg (highest precedence) and\n --hx-button-hover-bg so consumer overrides on either prop apply under\n :host([inverted]) — the two share a paint here, so either knob is\n honored, with active-bg winning when both are set. */\n :host([inverted]) .button--primary:hover,\n :host([inverted]) .button--primary:active {\n --hx-button-bg: var(\n --hx-button-active-bg,\n var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))\n );\n color: var(\n --hx-button-inverted-primary-interactive-color,\n var(--hx-color-text-on-primary, #0d1825)\n );\n }\n\n /* Danger inverted — sister to primary. Hover/pressed lift to\n action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground\n contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);\n pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both\n modes. Same active-bg → hover-bg → semantic fallback chain as primary. */\n :host([inverted]) .button--danger:hover,\n :host([inverted]) .button--danger:active {\n --hx-button-bg: var(\n --hx-button-active-bg,\n var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))\n );\n color: var(\n --hx-button-inverted-danger-interactive-color,\n var(--hx-color-text-on-error, #0d1825)\n );\n }\n\n /* Secondary inverted — white border and translucent hover fill */\n :host([inverted]) .button--secondary {\n --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--secondary:hover {\n --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));\n }\n\n /* Tertiary inverted — resting at subtle (10%) lifts to default (30%) on hover\n so the runtime hover delta is visually distinct, not collapsed onto a\n single token. */\n :host([inverted]) .button--tertiary {\n --hx-button-bg: var(--hx-color-border-on-dark-subtle, rgba(255, 255, 255, 0.1));\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--tertiary:hover {\n --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));\n }\n\n /* Ghost inverted — transparent base, translucent hover bg */\n :host([inverted]) .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--ghost:hover {\n --hx-button-bg: var(\n --hx-button-inverted-ghost-hover-bg,\n var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3))\n );\n }\n\n /* Outline inverted — white border */\n :host([inverted]) .button--outline {\n --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--outline:hover {\n --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));\n }\n\n /* ─── Prefix / Suffix / Label ─── */\n\n .button__prefix,\n .button__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .button__label {\n flex: 1 1 auto;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .button {\n /* Ensure button outline is visible in Windows High Contrast mode.\n ButtonText/ButtonFace are system colors recognized by the browser. */\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:hover {\n /* Hover affordance must survive in HC. Highlight/HighlightText is the\n OS-level \"selected\" pair, mirroring the forcedColorsInteractive mixin's\n hover contract — kept inline since this component owns its bespoke HC\n block (XOR rule). */\n background-color: Highlight;\n color: HighlightText;\n border-color: Highlight;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .button--loading .button__spinner {\n /* Ensure spinner is visible in HCM */\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html, nothing, type TemplateResult, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixButtonStyles } from './hx-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Detail for the hx-click event dispatched by hx-button. */\nexport interface HxButtonClickDetail {\n originalEvent: MouseEvent;\n}\n\n/**\n * A production-grade button component for user interaction. Supports multiple\n * visual variants, sizes, loading state, prefix/suffix slots, anchor rendering,\n * and full ElementInternals form association.\n *\n * @summary Primary interactive element for triggering actions and form submission.\n *\n * @tag hx-button\n *\n * @slot - Default slot for button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the button is clicked and is neither disabled nor loading.\n *\n * @csspart button - The native button or anchor element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n * @csspart spinner - The loading spinner SVG element.\n *\n * @cssprop [--hx-button-bg=var(--hx-color-action-primary-bg)] - Button background color (3.2.1 cascade — variant rules route through action.{primary,secondary,ghost,danger}.bg).\n * @cssprop [--hx-button-hover-bg] - Hover background override (primary and danger variants only). Other variants (secondary/outline, ghost) keep their hover fills routed through their semantic action.* tokens and do not consume this hook. Under [inverted] for primary/danger, hover and active share a paint (combined :hover, :active rule), so this override applies to both states unless --hx-button-active-bg also takes precedence.\n * @cssprop [--hx-button-active-bg] - Pressed/active background override (primary and danger variants only, including their inverted modes). Takes precedence over --hx-button-hover-bg in the fallback chain. Standard-mode primary/danger default to action.{primary,danger}.bg-active (with filter:none) for AA-pinned pressed contrast. Inverted-mode primary/danger reuse action.{primary,danger}.bg-inverted-hover (combined :hover, :active rule); setting --hx-button-active-bg under [inverted] therefore overrides the lifted hover fill as well as the pressed fill — the two share a paint in inverted mode. Other variants do not consume this hook.\n * @cssprop [--hx-button-color=var(--hx-color-text-on-primary)] - Button text color (variants route through text.on-{role} / text.on-{role}-strong).\n * @cssprop [--hx-button-border-color=transparent] - Button border color (secondary/outline variants route through action.secondary.border).\n * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @cssprop [--hx-button-inverted-color=var(--hx-color-text-inverse)] - Text color when inverted (resolves to neutral-0).\n * @cssprop [--hx-button-inverted-primary-interactive-color=var(--hx-color-text-on-primary)] - Foreground override for inverted primary hover and pressed (combined :hover, :active rule). Defaults to text.on-primary (neutral-900, no dark-mode flip) so dark text rides the lifted primary-400 fill — text.inverse on light teal collapses to ~2.4:1 in light mode.\n * @cssprop [--hx-button-inverted-danger-interactive-color=var(--hx-color-text-on-error)] - Foreground override for inverted danger hover and pressed (combined :hover, :active rule). Defaults to text.on-error (neutral-900); same rationale as the primary override.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=var(--hx-color-border-on-dark-default)] - Ghost hover bg when inverted (overlay-white-30 ≈ 5:1 vs neutral-900).\n * @cssprop [--hx-button-inverted-focus-ring-color=var(--hx-color-border-on-dark-strong)] - Focus ring color when inverted (overlay-white-70 = ~5:1 vs neutral-900).\n *\n * @cssprop [--hx-color-action-primary-bg] - Primary variant resting fill (3.2.1 semantic action layer).\n * @cssprop [--hx-color-action-primary-bg-hover] - Primary variant hover fill.\n * @cssprop [--hx-color-action-primary-bg-active] - Primary variant active/pressed fill.\n * @cssprop [--hx-color-action-secondary-fg] - Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark). Consumed only by .button--secondary; the actual border/surface paint for outline currently routes through --hx-color-border-strong / --hx-color-surface-raised in styles, with this token reserved for the foreground.\n * @cssprop [--hx-color-action-secondary-border] - Secondary/outline variant border (3.2.1 semantic; outline still routes through --hx-color-border-strong by default).\n * @cssprop [--hx-color-action-secondary-bg-hover] - Secondary/outline variant hover fill (3.2.1 semantic; outline still routes through --hx-color-surface-raised by default).\n * @cssprop [--hx-color-action-ghost-fg] - Ghost variant fg.\n * @cssprop [--hx-color-action-ghost-bg-hover] - Ghost variant hover fill.\n * @cssprop [--hx-color-action-danger-bg] - Danger variant resting fill.\n * @cssprop [--hx-color-action-danger-bg-hover] - Danger variant hover fill.\n * @cssprop [--hx-color-action-danger-bg-active] - Danger variant active fill.\n * @cssprop [--hx-color-action-primary-bg-inverted-hover] - Primary variant hover/pressed fill on dark/inverted surface (resolves to primary-400, 7.27:1 on neutral-900).\n * @cssprop [--hx-color-action-danger-bg-inverted-hover] - Danger variant hover/pressed fill on dark/inverted surface (resolves to error-400, 6.58:1 on neutral-900).\n * @cssprop [--hx-color-text-on-primary] - Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).\n * @cssprop [--hx-color-text-on-primary-strong] - Foreground for primary-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-on-error] - Foreground for danger fill (resolves to neutral-900).\n * @cssprop [--hx-color-text-on-error-strong] - Foreground for danger-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-primary] - Foreground for tertiary variant on surface.sunken.\n * @cssprop [--hx-color-surface-sunken] - Tertiary variant resting fill.\n * @cssprop [--hx-color-surface-raised] - Tertiary variant hover fill.\n * @cssprop [--hx-color-border-on-dark-subtle] - Inverted-tertiary resting border (overlay-white-10).\n * @cssprop [--hx-color-border-on-dark-default] - Inverted-tertiary hover border + inverted-secondary/ghost hover border (overlay-white-30).\n * @cssprop [--hx-color-border-on-dark-strong] - Inverted focus-visible outline (overlay-white-70).\n */\n@customElement('hx-button')\nexport class HelixButton extends mixinDelegatesAria(HelixElement) {\n // 3.2.1: forced-colors deference is owned by the bespoke @media block in\n // hx-button.styles.ts (covers loading/disabled/focus, not just the base).\n // Do NOT also compose forcedColorsInteractive here — the mixin's docstring\n // forbids dual composition (XOR rule) and the dual approach was flagged in\n // the token-cascade campaign findings.\n static override styles = [helixButtonStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n /**\n * Size of the button.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the button is disabled. Prevents all interaction and form actions.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the button is in a loading state. Shows spinner, prevents interaction,\n * and sets aria-busy. Does not set the disabled attribute.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * The type attribute for the underlying button element. Ignored when href is set.\n * @attr type\n */\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * When set, renders an anchor element instead of a button.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Anchor target attribute. Only used when href is set.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Form field name submitted via ElementInternals.setFormValue on submit.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Form field value submitted via ElementInternals.setFormValue on submit.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * When true, the button stretches to fill its container width.\n * Sets the host to `display: block` and the inner element to `width: 100%`.\n * @attr full\n */\n @property({ type: Boolean, reflect: true })\n full = false;\n\n /**\n * When true, flips button colors for placement on dark or gradient backgrounds.\n * Forces text to white and adjusts hover/focus ring colors across all variants.\n *\n * **Mode scope:** `[inverted]` is validated for placement on a dark *region*\n * within a light-mode-active page (hero banners, gradient sections, dark\n * cards). It is NOT validated for use within a dark-mode-active root\n * context: in dark mode, `surface.inverse` flips to a light surface\n * (neutral-100), and the lifted `-400` hover/active fills lose UI-floor\n * contrast against it (primary 2.10:1, danger 2.32:1 vs WCAG 1.4.11's 3:1\n * floor). Mode-aware fill stops + foreground for the dark-mode-inverted\n * combination are tracked as a 3.2.x follow-up.\n *\n * @attr inverted\n */\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n /**\n * Accessible label for icon-only or text-less buttons.\n * Required when the button has no visible text content.\n *\n * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n * `accessible-label` takes precedence when both are set.\n *\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string = '';\n\n /**\n * Returns the effective label for the button, checking accessible-label first,\n * then the aria-label attribute, falling back to empty string.\n * @internal\n */\n private get _effectiveLabel(): string {\n return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n }\n\n // ─── Form API ───\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Lifecycle ───\n\n /** @internal */\n private static readonly _VALID_VARIANTS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'danger',\n 'ghost',\n 'outline',\n ] as const;\n\n // Prevents double-warn on browsers that fire slotchange for empty initial slots.\n private _emptySlotWarnEmitted = false;\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const hasContent = (slot?.assignedNodes({ flatten: true }) ?? []).some(\n (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\n );\n if (!hasContent && !this._effectiveLabel) {\n this._emptySlotWarnEmitted = true;\n devWarn(\n 'hx-button',\n 'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n );\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n const validVariants: string[] = [...HelixButton._VALID_VARIANTS];\n if (!validVariants.includes(this.variant)) {\n devWarn(\n 'hx-button',\n `Invalid variant \"${this.variant}\". Expected one of: ${validVariants.join(', ')}. Clamping to \"primary\".`,\n );\n this.variant = 'primary';\n }\n }\n }\n\n // ─── Slot Handlers ───\n\n /** @internal */\n private _handleDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const hasContent = slot\n .assignedNodes({ flatten: true })\n .some((n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0);\n if (!hasContent && !this._effectiveLabel && !this._emptySlotWarnEmitted) {\n devWarn(\n 'hx-button',\n 'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n );\n }\n // Only reset once content arrives so the guard stays armed for browsers\n // that fire a second slotchange for the same empty initial slot.\n if (hasContent) {\n this._emptySlotWarnEmitted = false;\n }\n }\n\n // ─── Event Handling ───\n\n /**\n * @private\n * @internal\n */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled || this.loading) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /**\n * Dispatched when the button is clicked.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in anchor mode\n if (this.href === undefined && this.type === 'submit' && this._internals.form) {\n if (this.name !== undefined && this.value !== undefined) {\n this._internals.setFormValue(this.value);\n }\n this._internals.form.requestSubmit();\n } else if (this.href === undefined && this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n\n // ─── Render Helpers ───\n\n /**\n * @private\n * @internal\n */\n private _renderSpinner(): TemplateResult {\n return html`\n <svg\n class=\"button__spinner\"\n part=\"spinner\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle\n class=\"button__spinner-track\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n opacity=\"0.3\"\n />\n <path\n class=\"button__spinner-arc\"\n d=\"M12 2a10 10 0 0 1 10 10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n />\n </svg>\n `;\n }\n\n /**\n * @private\n * @internal\n */\n private _renderInner(): TemplateResult {\n return html`\n ${this.loading ? this._renderSpinner() : nothing}\n <span part=\"prefix\" class=\"button__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n 'button--loading': this.loading,\n };\n\n if (this.href !== undefined) {\n return html`\n <a\n part=\"button\"\n class=${classMap(classes)}\n href=${this.disabled || this.loading ? nothing : ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n aria-label=${this._effectiveLabel || nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </a>\n `;\n }\n\n return html`\n <button\n part=\"button\"\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${this._effectiveLabel || nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button': HelixButton;\n }\n interface HTMLElementEventMap {\n 'hx-click': CustomEvent<{ originalEvent: MouseEvent }>;\n }\n}\n"],"names":["helixButtonStyles","css","HelixButton","mixinDelegatesAria","HelixElement","_a","_b","disabled","changedProperties","slot","n","validVariants","devWarn","e","hasContent","html","nothing","classes","classMap","ifDefined","__decorateClass","property","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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"}
package/dist/shared/{hx-carousel-item-BaE4hpLl.js → hx-carousel-item-z1Lc24op.js} RENAMED
@@ -67,7 +67,7 @@ const y = g`
67
67
 
68
68
  .nav-btn:focus-visible {
69
69
  outline: var(--hx-focus-ring-width, 2px) solid
70
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
70
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
71
71
  outline-offset: var(--hx-focus-ring-offset, 2px);
72
72
  }
73
73
 
@@ -109,7 +109,7 @@ const y = g`
109
109
 
110
110
  .play-pause-btn:focus-visible {
111
111
  outline: var(--hx-focus-ring-width, 2px) solid
112
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
112
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
113
113
  outline-offset: var(--hx-focus-ring-offset, 2px);
114
114
  }
115
115
 
@@ -181,7 +181,7 @@ const y = g`
181
181
 
182
182
  .pagination-item:focus-visible {
183
183
  outline: var(--hx-focus-ring-width, 2px) solid
184
- var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
184
+ var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
185
185
  outline-offset: var(--hx-focus-ring-offset, 2px);
186
186
  border-radius: var(--hx-border-radius-full, 9999px);
187
187
  }
@@ -723,4 +723,4 @@ export {
723
723
  o as H,
724
724
  d as a
725
725
  };
726
- //# sourceMappingURL=hx-carousel-item-BaE4hpLl.js.map
726
+ //# sourceMappingURL=hx-carousel-item-z1Lc24op.js.map