@salt-ds/core 1.27.0 → 1.28.0

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 (79) hide show
  1. package/css/salt-core.css +85 -46
  2. package/dist-cjs/button/Button.css.js +1 -1
  3. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  4. package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
  5. package/dist-cjs/combo-box/ComboBox.js +9 -4
  6. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  7. package/dist-cjs/dialog/Dialog.css.js +1 -1
  8. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  9. package/dist-cjs/form-field/FormField.js +0 -2
  10. package/dist-cjs/form-field/FormField.js.map +1 -1
  11. package/dist-cjs/index.js +4 -0
  12. package/dist-cjs/index.js.map +1 -1
  13. package/dist-cjs/input/Input.css.js +1 -1
  14. package/dist-cjs/link/Link.js +2 -0
  15. package/dist-cjs/link/Link.js.map +1 -1
  16. package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
  17. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  18. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  19. package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
  20. package/dist-cjs/salt-provider/SaltProvider.js +34 -10
  21. package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
  22. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
  23. package/dist-cjs/status-adornment/StatusAdornment.css.js +1 -1
  24. package/dist-cjs/status-indicator/StatusIndicator.css.js +1 -1
  25. package/dist-cjs/text/Text.css.js +1 -1
  26. package/dist-cjs/text/Text.js +7 -4
  27. package/dist-cjs/text/Text.js.map +1 -1
  28. package/dist-cjs/theme/Accent.js +8 -0
  29. package/dist-cjs/theme/Accent.js.map +1 -0
  30. package/dist-cjs/theme/HeadingFont.js +8 -0
  31. package/dist-cjs/theme/HeadingFont.js.map +1 -0
  32. package/dist-cjs/toast/Toast.css.js +1 -1
  33. package/dist-cjs/toast/Toast.js +7 -3
  34. package/dist-cjs/toast/Toast.js.map +1 -1
  35. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  36. package/dist-cjs/tooltip/Tooltip.js +1 -1
  37. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  38. package/dist-es/button/Button.css.js +1 -1
  39. package/dist-es/checkbox/Checkbox.css.js +1 -1
  40. package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
  41. package/dist-es/combo-box/ComboBox.js +9 -4
  42. package/dist-es/combo-box/ComboBox.js.map +1 -1
  43. package/dist-es/dialog/Dialog.css.js +1 -1
  44. package/dist-es/dialog/DialogContent.css.js +1 -1
  45. package/dist-es/form-field/FormField.js +0 -2
  46. package/dist-es/form-field/FormField.js.map +1 -1
  47. package/dist-es/index.js +2 -0
  48. package/dist-es/index.js.map +1 -1
  49. package/dist-es/input/Input.css.js +1 -1
  50. package/dist-es/link/Link.js +2 -0
  51. package/dist-es/link/Link.js.map +1 -1
  52. package/dist-es/multiline-input/MultilineInput.css.js +1 -1
  53. package/dist-es/pill-input/PillInput.css.js +1 -1
  54. package/dist-es/radio-button/RadioButton.css.js +1 -1
  55. package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
  56. package/dist-es/salt-provider/SaltProvider.js +34 -10
  57. package/dist-es/salt-provider/SaltProvider.js.map +1 -1
  58. package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
  59. package/dist-es/status-adornment/StatusAdornment.css.js +1 -1
  60. package/dist-es/status-indicator/StatusIndicator.css.js +1 -1
  61. package/dist-es/text/Text.css.js +1 -1
  62. package/dist-es/text/Text.js +7 -4
  63. package/dist-es/text/Text.js.map +1 -1
  64. package/dist-es/theme/Accent.js +4 -0
  65. package/dist-es/theme/Accent.js.map +1 -0
  66. package/dist-es/theme/HeadingFont.js +4 -0
  67. package/dist-es/theme/HeadingFont.js.map +1 -0
  68. package/dist-es/toast/Toast.css.js +1 -1
  69. package/dist-es/toast/Toast.js +7 -3
  70. package/dist-es/toast/Toast.js.map +1 -1
  71. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  72. package/dist-es/tooltip/Tooltip.js +1 -1
  73. package/dist-es/tooltip/Tooltip.js.map +1 -1
  74. package/dist-types/salt-provider/SaltProvider.d.ts +6 -0
  75. package/dist-types/text/Text.d.ts +3 -0
  76. package/dist-types/theme/Accent.d.ts +2 -0
  77. package/dist-types/theme/HeadingFont.d.ts +2 -0
  78. package/dist-types/theme/index.d.ts +2 -0
  79. package/package.json +1 -1
package/css/salt-core.css CHANGED
@@ -260,6 +260,10 @@
260
260
  --button-text-color-active: var(--salt-actionable-cta-foreground-active);
261
261
  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);
262
262
  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);
263
+ --button-borderColor: var(--salt-actionable-cta-borderColor);
264
+ --button-borderColor-hover: var(--salt-actionable-cta-borderColor-hover);
265
+ --button-borderColor-active: var(--salt-actionable-cta-borderColor-active);
266
+ --button-borderColor-disabled: var(--salt-actionable-cta-borderColor-disabled);
263
267
  }
264
268
  .saltButton-primary {
265
269
  --button-background: var(--salt-actionable-primary-background);
@@ -270,6 +274,10 @@
270
274
  --button-text-color-active: var(--salt-actionable-primary-foreground-active);
271
275
  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);
272
276
  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);
277
+ --button-borderColor: var(--salt-actionable-primary-borderColor);
278
+ --button-borderColor-hover: var(--salt-actionable-primary-borderColor-hover);
279
+ --button-borderColor-active: var(--salt-actionable-primary-borderColor-active);
280
+ --button-borderColor-disabled: var(--salt-actionable-primary-borderColor-disabled);
273
281
  }
274
282
  .saltButton-secondary {
275
283
  --button-background: var(--salt-actionable-secondary-background);
@@ -280,14 +288,18 @@
280
288
  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);
281
289
  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);
282
290
  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);
291
+ --button-borderColor: var(--salt-actionable-secondary-borderColor);
292
+ --button-borderColor-hover: var(--salt-actionable-secondary-borderColor-hover);
293
+ --button-borderColor-active: var(--salt-actionable-secondary-borderColor-active);
294
+ --button-borderColor-disabled: var(--salt-actionable-secondary-borderColor-disabled);
283
295
  }
284
296
  .saltButton {
285
297
  align-items: var(--saltButton-alignItems, center);
286
298
  appearance: none;
287
299
  background: var(--saltButton-background, var(--button-background));
288
- border-color: var(--saltButton-borderColor, transparent);
300
+ border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));
289
301
  border-style: var(--saltButton-borderStyle, solid);
290
- border-width: var(--saltButton-borderWidth, 0);
302
+ border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));
291
303
  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));
292
304
  color: var(--saltButton-text-color, var(--button-text-color));
293
305
  cursor: var(--saltButton-cursor, pointer);
@@ -299,7 +311,7 @@
299
311
  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));
300
312
  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));
301
313
  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));
302
- padding: 0 var(--saltButton-padding, var(--salt-spacing-100));
314
+ padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));
303
315
  margin: var(--saltButton-margin, 0);
304
316
  height: var(--saltButton-height, var(--salt-size-base));
305
317
  min-width: var(--saltButton-minWidth, unset);
@@ -319,25 +331,30 @@
319
331
  outline-offset: var(--salt-focused-outlineOffset);
320
332
  background: var(--saltButton-background-hover, var(--button-background-hover));
321
333
  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));
334
+ border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
322
335
  }
323
336
  .saltButton.saltButton-active:focus-visible,
324
337
  .saltButton:focus-visible(:active) {
325
338
  background: var(--saltButton-background-active-hover, var(--button-background));
326
339
  color: var(--saltButton-text-color-active-hover, var(--button-text-color));
340
+ border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
327
341
  }
328
342
  .saltButton:hover {
329
343
  background: var(--saltButton-background-hover, var(--button-background-hover));
330
344
  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));
345
+ border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
331
346
  }
332
347
  .saltButton:active,
333
348
  .saltButton.saltButton-active {
334
349
  background: var(--saltButton-background-active, var(--button-background-active));
335
350
  color: var(--saltButton-text-color-active, var(--button-text-color-active));
351
+ border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));
336
352
  }
337
353
  .saltButton[aria-expanded=true][aria-haspopup=menu],
338
354
  .saltButton[aria-expanded=true][aria-haspopup=dialog] {
339
355
  background: var(--saltButton-background-active, var(--button-background-active));
340
356
  color: var(--saltButton-text-color-active, var(--button-text-color-active));
357
+ border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));
341
358
  }
342
359
  .saltButton:disabled,
343
360
  .saltButton-disabled,
@@ -347,6 +364,7 @@
347
364
  background: var(--saltButton-background-disabled, var(--button-background-disabled));
348
365
  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));
349
366
  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));
367
+ border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));
350
368
  }
351
369
 
352
370
  /* src/card/Card.css */
@@ -438,7 +456,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
438
456
 
439
457
  /* src/checkbox/Checkbox.css */
440
458
  .saltCheckbox {
441
- display: flex;
459
+ display: inline-flex;
442
460
  gap: var(--salt-spacing-100);
443
461
  position: relative;
444
462
  cursor: var(--salt-selectable-cursor-hover);
@@ -474,14 +492,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
474
492
  color: var(--salt-selectable-foreground-selected);
475
493
  }
476
494
  .saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
477
- outline-color: var(--salt-status-error-foreground);
478
- border-color: var(--salt-status-error-foreground);
479
- color: var(--salt-status-error-foreground);
495
+ outline-color: var(--salt-status-error-foreground-decorative);
496
+ border-color: var(--salt-status-error-borderColor);
497
+ color: var(--salt-status-error-foreground-decorative);
480
498
  }
481
499
  .saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
482
- outline-color: var(--salt-status-warning-foreground);
483
- border-color: var(--salt-status-warning-foreground);
484
- color: var(--salt-status-warning-foreground);
500
+ outline-color: var(--salt-status-warning-foreground-decorative);
501
+ border-color: var(--salt-status-warning-borderColor);
502
+ color: var(--salt-status-warning-foreground-decorative);
485
503
  }
486
504
  .saltCheckbox-input {
487
505
  cursor: inherit;
@@ -571,15 +589,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
571
589
  }
572
590
  .saltCheckboxIcon-error,
573
591
  .saltCheckbox:hover .saltCheckboxIcon-error {
574
- color: var(--salt-status-error-foreground);
592
+ color: var(--salt-status-error-foreground-decorative);
575
593
  border-color: var(--salt-status-error-borderColor);
576
- outline-color: var(--salt-status-error-foreground);
594
+ outline-color: var(--salt-status-error-foreground-decorative);
577
595
  }
578
596
  .saltCheckboxIcon-warning,
579
597
  .saltCheckbox:hover .saltCheckboxIcon-warning {
580
- color: var(--salt-status-warning-foreground);
598
+ color: var(--salt-status-warning-foreground-decorative);
581
599
  border-color: var(--salt-status-warning-borderColor);
582
- outline-color: var(--salt-status-warning-foreground);
600
+ outline-color: var(--salt-status-warning-foreground-decorative);
583
601
  }
584
602
  .saltCheckboxIcon-readOnly,
585
603
  .saltCheckbox:hover .saltCheckboxIcon-readOnly {
@@ -609,7 +627,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
609
627
  overflow-y: auto;
610
628
  z-index: var(--salt-zIndex-drawer);
611
629
  height: min-content;
612
- border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
630
+ border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);
613
631
  box-sizing: border-box;
614
632
  border-radius: var(--salt-palette-corner, 0);
615
633
  }
@@ -714,13 +732,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
714
732
  min-height: var(--salt-text-lineHeight);
715
733
  overflow-y: auto;
716
734
  background: var(--salt-container-primary-background);
717
- padding-bottom: var(--salt-spacing-50);
718
735
  margin-left: var(--salt-spacing-200);
719
736
  margin-right: var(--salt-spacing-300);
720
- padding-right: var(--salt-spacing-300);
721
737
  padding-left: var(--salt-spacing-100);
722
738
  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
723
739
  box-shadow: none;
740
+ flex: 1;
724
741
  }
725
742
  .saltDialogContent-scroll {
726
743
  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
@@ -1345,7 +1362,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1345
1362
  }
1346
1363
  .saltInput-startAdornmentContainer > .saltButton,
1347
1364
  .saltInput-endAdornmentContainer > .saltButton {
1348
- --saltButton-padding: var(--salt-spacing-50);
1365
+ --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
1349
1366
  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
1350
1367
  }
1351
1368
 
@@ -1878,7 +1895,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1878
1895
  }
1879
1896
  .saltMultilineInput-startAdornmentContainer > .saltButton,
1880
1897
  .saltMultilineInput-endAdornmentContainer > .saltButton {
1881
- --saltButton-padding: var(--salt-spacing-50);
1898
+ --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
1882
1899
  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
1883
1900
  }
1884
1901
 
@@ -2484,7 +2501,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2484
2501
  }
2485
2502
  .saltPillInput-startAdornmentContainer > .saltButton,
2486
2503
  .saltPillInput-endAdornmentContainer > .saltButton {
2487
- --saltButton-padding: var(--salt-spacing-50);
2504
+ --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
2488
2505
  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
2489
2506
  }
2490
2507
  .saltPillInput-inputWrapper {
@@ -2527,7 +2544,7 @@ div[role=listitem] {
2527
2544
 
2528
2545
  /* src/radio-button/RadioButton.css */
2529
2546
  .saltRadioButton {
2530
- display: flex;
2547
+ display: inline-flex;
2531
2548
  gap: var(--salt-spacing-100);
2532
2549
  cursor: var(--salt-selectable-cursor-hover);
2533
2550
  position: relative;
@@ -2574,14 +2591,14 @@ div[role=listitem] {
2574
2591
  color: var(--salt-selectable-foreground-selected);
2575
2592
  }
2576
2593
  .saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
2577
- outline-color: var(--salt-status-error-foreground);
2578
- border-color: var(--salt-status-error-foreground);
2579
- color: var(--salt-status-error-foreground);
2594
+ outline-color: var(--salt-status-error-foreground-decorative);
2595
+ border-color: var(--salt-status-error-borderColor);
2596
+ color: var(--salt-status-error-foreground-decorative);
2580
2597
  }
2581
2598
  .saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
2582
- outline-color: var(--salt-status-warning-foreground);
2583
- border-color: var(--salt-status-warning-foreground);
2584
- color: var(--salt-status-warning-foreground);
2599
+ outline-color: var(--salt-status-warning-foreground-decorative);
2600
+ border-color: var(--salt-status-warning-borderColor);
2601
+ color: var(--salt-status-warning-foreground-decorative);
2585
2602
  }
2586
2603
 
2587
2604
  /* src/radio-button/RadioButtonGroup.css */
@@ -2648,15 +2665,15 @@ div[role=listitem] {
2648
2665
  }
2649
2666
  .saltRadioButtonIcon-error,
2650
2667
  .saltRadioButton:hover .saltRadioButtonIcon-error {
2651
- color: var(--salt-status-error-foreground);
2668
+ color: var(--salt-status-error-foreground-decorative);
2652
2669
  border-color: var(--salt-status-error-borderColor);
2653
- outline-color: var(--salt-status-error-foreground);
2670
+ outline-color: var(--salt-status-error-foreground-decorative);
2654
2671
  }
2655
2672
  .saltRadioButtonIcon-warning,
2656
2673
  .saltRadioButton:hover .saltRadioButtonIcon-warning {
2657
- color: var(--salt-status-warning-foreground);
2674
+ color: var(--salt-status-warning-foreground-decorative);
2658
2675
  border-color: var(--salt-status-warning-borderColor);
2659
- outline-color: var(--salt-status-warning-foreground);
2676
+ outline-color: var(--salt-status-warning-foreground-decorative);
2660
2677
  }
2661
2678
  .saltRadioButtonIcon-readOnly,
2662
2679
  .saltRadioButton:hover .saltRadioButtonIcon-readOnly {
@@ -2699,21 +2716,23 @@ div[role=listitem] {
2699
2716
  background: var(--button-background);
2700
2717
  gap: var(--salt-size-border);
2701
2718
  }
2702
- .saltSegmentedButtonGroup > *:not(:last-child)::after {
2719
+ .saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {
2703
2720
  content: "";
2704
2721
  width: var(--salt-size-border);
2705
2722
  position: absolute;
2706
2723
  background: var(--button-background);
2707
- right: calc(var(--salt-size-border) * -1);
2708
- height: 100%;
2724
+ right: calc(var(--salt-size-border) * -2);
2725
+ top: calc(var(--salt-size-border) * -1);
2726
+ bottom: calc(var(--salt-size-border) * -1);
2709
2727
  }
2710
- .saltSegmentedButtonGroup > *:not(:first-child)::before {
2728
+ .saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before {
2711
2729
  content: "";
2712
2730
  width: var(--salt-size-border);
2713
2731
  position: absolute;
2714
2732
  background: var(--salt-separable-primary-borderColor);
2715
- left: calc(var(--salt-size-border) * -1);
2716
- height: 100%;
2733
+ left: calc(var(--salt-size-border) * -2);
2734
+ top: calc(var(--salt-size-border) * -1);
2735
+ bottom: calc(var(--salt-size-border) * -1);
2717
2736
  }
2718
2737
 
2719
2738
  /* src/spinner/Spinner.css */
@@ -2806,21 +2825,21 @@ div[role=listitem] {
2806
2825
  position: relative;
2807
2826
  }
2808
2827
  .saltStatusAdornment-error {
2809
- --statusAdornment-color: var(--salt-status-error-foreground);
2828
+ --statusAdornment-color: var(--salt-status-error-foreground-decorative);
2810
2829
  }
2811
2830
  .saltStatusAdornment-warning {
2812
- --statusAdornment-color: var(--salt-status-warning-foreground);
2831
+ --statusAdornment-color: var(--salt-status-warning-foreground-decorative);
2813
2832
  }
2814
2833
  .saltStatusAdornment-success {
2815
- --statusAdornment-color: var(--salt-status-success-foreground);
2834
+ --statusAdornment-color: var(--salt-status-success-foreground-decorative);
2816
2835
  }
2817
2836
 
2818
2837
  /* src/status-indicator/StatusIndicator.css */
2819
2838
  .saltStatusIndicator {
2820
- --statusIndicator-warning-color: var(--salt-status-warning-foreground);
2821
- --statusIndicator-info-color: var(--salt-status-info-foreground);
2822
- --statusIndicator-success-color: var(--salt-status-success-foreground);
2823
- --statusIndicator-error-color: var(--salt-status-error-foreground);
2839
+ --statusIndicator-warning-color: var(--salt-status-warning-foreground-decorative);
2840
+ --statusIndicator-info-color: var(--salt-status-info-foreground-decorative);
2841
+ --statusIndicator-success-color: var(--salt-status-success-foreground-decorative);
2842
+ --statusIndicator-error-color: var(--salt-status-error-foreground-decorative);
2824
2843
  color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));
2825
2844
  }
2826
2845
  .saltStatusIndicator-error {
@@ -2947,6 +2966,9 @@ div[role=listitem] {
2947
2966
  }
2948
2967
 
2949
2968
  /* src/text/Text.css */
2969
+ .saltText {
2970
+ --text-color: currentColor;
2971
+ }
2950
2972
  .saltText {
2951
2973
  color: var(--saltText-color, var(--text-color));
2952
2974
  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));
@@ -2976,6 +2998,18 @@ div[role=listitem] {
2976
2998
  .saltText-secondary.saltText-disabled {
2977
2999
  --text-color: var(--salt-content-secondary-foreground-disabled);
2978
3000
  }
3001
+ .saltText-info {
3002
+ --text-color: var(--salt-status-info-foreground-informative);
3003
+ }
3004
+ .saltText-error {
3005
+ --text-color: var(--salt-status-error-foreground-informative);
3006
+ }
3007
+ .saltText-warning {
3008
+ --text-color: var(--salt-status-warning-foreground-informative);
3009
+ }
3010
+ .saltText-success {
3011
+ --text-color: var(--salt-status-success-foreground-informative);
3012
+ }
2979
3013
  .saltText strong {
2980
3014
  font-weight: var(--salt-text-fontWeight-strong);
2981
3015
  }
@@ -3108,6 +3142,7 @@ label.saltText small,
3108
3142
  /* src/toast/Toast.css */
3109
3143
  .saltToast {
3110
3144
  --toast-background: var(--salt-container-primary-background);
3145
+ --toast-borderColor: var(--salt-container-primary-borderColor);
3111
3146
  background: var(--saltToast-background, var(--toast-background));
3112
3147
  border-color: var(--saltToast-borderColor, var(--toast-borderColor));
3113
3148
  border-width: var(--saltToast-borderWidth, var(--salt-size-border));
@@ -3161,7 +3196,9 @@ label.saltText small,
3161
3196
  -webkit-appearance: none;
3162
3197
  display: inline-flex;
3163
3198
  background: var(--salt-actionable-secondary-background);
3164
- border: 0 solid transparent;
3199
+ border-color: var(--salt-actionable-secondary-borderColor, transparent);
3200
+ border-style: solid;
3201
+ border-width: var(--salt-actionable-borderWidth, 0);
3165
3202
  border-radius: var(--salt-palette-corner-weaker, 0);
3166
3203
  height: var(--salt-size-base);
3167
3204
  color: var(--salt-actionable-secondary-foreground);
@@ -3192,12 +3229,14 @@ label.saltText small,
3192
3229
  background: var(--salt-actionable-secondary-background-active);
3193
3230
  color: var(--salt-actionable-secondary-foreground-active);
3194
3231
  cursor: var(--salt-actionable-cursor-active);
3232
+ border-color: var(--salt-actionable-secondary-borderColor-active, transparent);
3195
3233
  }
3196
3234
  .saltToggleButton[aria-checked=true],
3197
3235
  .saltToggleButton[aria-pressed=true] {
3198
3236
  background: var(--salt-actionable-secondary-background-active);
3199
3237
  color: var(--salt-actionable-secondary-foreground-active);
3200
3238
  cursor: var(--salt-actionable-cursor-active);
3239
+ border-color: var(--salt-actionable-secondary-borderColor-active, transparent);
3201
3240
  }
3202
3241
  .saltToggleButton:disabled {
3203
3242
  background: var(--salt-actionable-secondary-background-disabled);
@@ -3433,4 +3472,4 @@ label.saltText small,
3433
3472
  padding-left: var(--salt-spacing-100);
3434
3473
  }
3435
3474
 
3436
- /* src/e2abeace-e86b-427a-9b4a-09c1310706ff.css */
3475
+ /* src/471db648-8a76-4b36-8082-6bf9f2e7ee51.css */
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, transparent);\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, 0);\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, var(--salt-spacing-100));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n";
3
+ var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n --button-borderColor: var(--salt-actionable-cta-borderColor);\n --button-borderColor-hover: var(--salt-actionable-cta-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-cta-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-cta-borderColor-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n --button-borderColor: var(--salt-actionable-primary-borderColor);\n --button-borderColor-hover: var(--salt-actionable-primary-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-primary-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-primary-borderColor-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n --button-borderColor: var(--salt-actionable-secondary-borderColor);\n --button-borderColor-hover: var(--salt-actionable-secondary-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-secondary-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-secondary-borderColor-disabled);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Button.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n box-sizing: border-box;\n}\n\n.saltCheckboxIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
3
+ var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: inline-flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n box-sizing: border-box;\n}\n\n.saltCheckboxIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Checkbox.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n border-radius: var(--salt-palette-corner-weaker, 0);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
3
+ var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n border-radius: var(--salt-palette-corner-weaker, 0);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=CheckboxIcon.css.js.map
@@ -304,16 +304,21 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
304
304
  setFocusedState(true);
305
305
  onFocus == null ? void 0 : onFocus(event);
306
306
  };
307
+ const handleBlur = (event) => {
308
+ event.persist();
309
+ onBlur == null ? void 0 : onBlur(event);
310
+ };
307
311
  const handleChange = (event) => {
312
+ const value2 = event.target.value;
308
313
  if (!openState) {
309
314
  setOpen(true, "input");
310
315
  }
311
- if (event.target.value === "" && !multiselect) {
316
+ if (value2 === "" && !multiselect) {
312
317
  clear(event);
313
318
  }
314
- setValueState(event.target.value);
319
+ setValueState(value2);
315
320
  queueMicrotask(() => {
316
- if (event.target.value !== "") {
321
+ if (value2 != "") {
317
322
  const newOption = getOptionAtIndex(0);
318
323
  if (newOption) {
319
324
  setActive(newOption);
@@ -424,7 +429,7 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
424
429
  value: valueState,
425
430
  ref: handleRef,
426
431
  ...getReferenceProps({
427
- onBlur,
432
+ onBlur: handleBlur,
428
433
  onFocus: handleFocus,
429
434
  ...rest
430
435
  }),
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n ChangeEvent,\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n SyntheticEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n flip,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport {\n makePrefixer,\n useFloatingUI,\n UseFloatingUIProps,\n useForkRef,\n useId,\n} from \"../utils\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { useComboBox, UseComboBoxProps } from \"./useComboBox\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, PillInputProps } from \"../pill-input\";\nimport comboBoxCss from \"./ComboBox.css\";\n\nexport type ComboBoxProps<Item = string> = {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n} & UseComboBoxProps<Item> &\n PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n props: ComboBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const {\n children,\n className,\n disabled: disabledProp,\n endAdornment,\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n onOpenChange,\n onChange,\n open,\n inputProps: inputPropsProp,\n variant = \"primary\",\n onKeyDown,\n onFocus,\n onBlur,\n value,\n defaultValue,\n valueToString = defaultValueToString,\n truncate,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box\",\n css: comboBoxCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const inputRef = useRef<HTMLInputElement>(null);\n\n const listControl = useComboBox<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n value,\n defaultValue,\n disabled,\n readOnly,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n options,\n selectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n valueState,\n setValueState,\n removePill,\n } = listControl;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (reason == \"focus\") {\n setFocusedState(newOpen);\n }\n\n if (reason == \"focus\" && !newOpen) {\n setFocusVisibleState(false);\n }\n\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n\n if (newOpen) {\n inputRef.current?.focus();\n }\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && children != undefined,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!readOnly) {\n event.stopPropagation();\n setFocusVisibleState(false);\n setOpen(!openState, \"manual\");\n }\n };\n\n const handleButtonFocus = () => {\n inputRef.current?.focus();\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n const count = options.length - 1;\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n let newActive;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n break;\n case \"ArrowUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n break;\n case \"Home\":\n newActive = getOptionAtIndex(0);\n break;\n case \"End\":\n newActive = getOptionAtIndex(count);\n break;\n case \"PageUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n break;\n case \"PageDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n break;\n case \"Enter\":\n if (openState && activeState?.disabled) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n select(event, activeState);\n\n if (!multiselect) {\n event.preventDefault();\n }\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive) {\n setFocusVisibleState(true);\n }\n\n if (newActive && newActive?.id != activeState?.id) {\n event.preventDefault();\n setActive(newActive);\n }\n\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n if (event.target.value === \"\" && !multiselect) {\n clear(event);\n }\n\n setValueState(event.target.value);\n\n // Wait for the filter to happen\n queueMicrotask(() => {\n if (event.target.value !== \"\") {\n const newOption = getOptionAtIndex(0);\n if (newOption) {\n setActive(newOption);\n }\n } else {\n setActive(undefined);\n }\n });\n onChange?.(event);\n };\n\n const handlePillRemove = (event: SyntheticEvent, index: number) => {\n event.stopPropagation();\n const removed = selectedState[index];\n removePill(event, removed);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleListMouseLeave = () => {\n setActive(undefined);\n };\n\n const handleFocusInput = () => {\n inputRef.current?.focus();\n };\n\n useEffect(() => {\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > -1) {\n return;\n }\n\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0]\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getOptionAtIndex(0);\n setFocusVisibleState(true);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getOptionAtIndex(options.length - 1);\n setFocusVisibleState(true);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive);\n /* eslint-disable-next-line react-hooks/exhaustive-deps -- We only want this to run when the list's openState or the displayed options change */\n }, [openState, children]);\n\n const buttonId = useId();\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <PillInput\n tabIndex={-1}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: focusedState,\n [withBaseName(\"focusVisible\")]: focusVisibleState,\n },\n className\n )}\n endAdornment={\n <>\n {endAdornment}\n {!readOnly ? (\n <Button\n aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n aria-label=\"Show options\"\n aria-expanded={openState}\n aria-controls={openState ? listId : undefined}\n aria-haspopup=\"listbox\"\n disabled={disabled}\n variant=\"secondary\"\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n tabIndex={-1}\n >\n {openState ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </Button>\n ) : undefined}\n </>\n }\n onChange={handleChange}\n role=\"combobox\"\n disabled={disabled}\n readOnly={readOnly}\n inputProps={{\n role: \"combobox\",\n \"aria-expanded\": openState,\n \"aria-multiselectable\": multiselect,\n \"aria-controls\": openState ? listId : undefined,\n onKeyDown: handleKeyDown,\n ...inputPropsProp,\n }}\n aria-activedescendant={activeState?.id}\n variant={variant}\n inputRef={inputRef}\n value={valueState}\n ref={handleRef}\n {...getReferenceProps({\n onBlur,\n onFocus: handleFocus,\n ...rest,\n })}\n pills={\n multiselect ? selectedState.map((item) => valueToString(item)) : []\n }\n truncate={truncate && !focusedState && !openState}\n onPillRemove={handlePillRemove}\n hidePillClose={!focusedState || readOnly}\n emptyReadOnlyMarker={\n readOnly && selectedState.length > 0 ? \"\" : undefined\n }\n />\n <OptionList\n open={(openState || focusedState) && !readOnly && children != undefined}\n collapsed={!openState}\n ref={handleListRef}\n id={listId}\n tabIndex={-1}\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusInput,\n onClick: handleFocusInput,\n onMouseLeave: handleListMouseLeave,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ComboBox","defaultValueToString","useWindow","useComponentCssInjection","comboBoxCss","useFormFieldProps","useRef","useComboBox","_a","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useForkRef","useEffect","useId","jsxs","ListControlContext","jsx","PillInput","clsx","Fragment","Button","ChevronUpIcon","ChevronDownIcon","OptionList"],"mappings":"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"}
1
+ {"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n ChangeEvent,\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n SyntheticEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n flip,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport {\n makePrefixer,\n useFloatingUI,\n UseFloatingUIProps,\n useForkRef,\n useId,\n} from \"../utils\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { useComboBox, UseComboBoxProps } from \"./useComboBox\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, PillInputProps } from \"../pill-input\";\nimport comboBoxCss from \"./ComboBox.css\";\n\nexport type ComboBoxProps<Item = string> = {\n /**\n * The options to display in the combo box.\n */\n children?: ReactNode;\n} & UseComboBoxProps<Item> &\n PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n props: ComboBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const {\n children,\n className,\n disabled: disabledProp,\n endAdornment,\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n onOpenChange,\n onChange,\n open,\n inputProps: inputPropsProp,\n variant = \"primary\",\n onKeyDown,\n onFocus,\n onBlur,\n value,\n defaultValue,\n valueToString = defaultValueToString,\n truncate,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box\",\n css: comboBoxCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const inputRef = useRef<HTMLInputElement>(null);\n\n const listControl = useComboBox<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n value,\n defaultValue,\n disabled,\n readOnly,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n options,\n selectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n valueState,\n setValueState,\n removePill,\n } = listControl;\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (reason == \"focus\") {\n setFocusedState(newOpen);\n }\n\n if (reason == \"focus\" && !newOpen) {\n setFocusVisibleState(false);\n }\n\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n\n if (newOpen) {\n inputRef.current?.focus();\n }\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && children != undefined,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!readOnly) {\n event.stopPropagation();\n setFocusVisibleState(false);\n setOpen(!openState, \"manual\");\n }\n };\n\n const handleButtonFocus = () => {\n inputRef.current?.focus();\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n const count = options.length - 1;\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n let newActive;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n break;\n case \"ArrowUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n break;\n case \"Home\":\n newActive = getOptionAtIndex(0);\n break;\n case \"End\":\n newActive = getOptionAtIndex(count);\n break;\n case \"PageUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n break;\n case \"PageDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n break;\n case \"Enter\":\n if (openState && activeState?.disabled) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n select(event, activeState);\n\n if (!multiselect) {\n event.preventDefault();\n }\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive) {\n setFocusVisibleState(true);\n }\n\n if (newActive && newActive?.id != activeState?.id) {\n event.preventDefault();\n setActive(newActive);\n }\n\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n event.persist();\n onBlur?.(event);\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n if (value === \"\" && !multiselect) {\n clear(event);\n }\n\n setValueState(value);\n\n // Wait for the filter to happen\n queueMicrotask(() => {\n if (value != \"\") {\n const newOption = getOptionAtIndex(0);\n if (newOption) {\n setActive(newOption);\n }\n } else {\n setActive(undefined);\n }\n });\n\n onChange?.(event);\n };\n\n const handlePillRemove = (event: SyntheticEvent, index: number) => {\n event.stopPropagation();\n const removed = selectedState[index];\n removePill(event, removed);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleListMouseLeave = () => {\n setActive(undefined);\n };\n\n const handleFocusInput = () => {\n inputRef.current?.focus();\n };\n\n useEffect(() => {\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > -1) {\n return;\n }\n\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0]\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getOptionAtIndex(0);\n setFocusVisibleState(true);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getOptionAtIndex(options.length - 1);\n setFocusVisibleState(true);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive);\n /* eslint-disable-next-line react-hooks/exhaustive-deps -- We only want this to run when the list's openState or the displayed options change */\n }, [openState, children]);\n\n const buttonId = useId();\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <PillInput\n tabIndex={-1}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: focusedState,\n [withBaseName(\"focusVisible\")]: focusVisibleState,\n },\n className\n )}\n endAdornment={\n <>\n {endAdornment}\n {!readOnly ? (\n <Button\n aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n aria-label=\"Show options\"\n aria-expanded={openState}\n aria-controls={openState ? listId : undefined}\n aria-haspopup=\"listbox\"\n disabled={disabled}\n variant=\"secondary\"\n onClick={handleButtonClick}\n onFocus={handleButtonFocus}\n tabIndex={-1}\n >\n {openState ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </Button>\n ) : undefined}\n </>\n }\n onChange={handleChange}\n role=\"combobox\"\n disabled={disabled}\n readOnly={readOnly}\n inputProps={{\n role: \"combobox\",\n \"aria-expanded\": openState,\n \"aria-multiselectable\": multiselect,\n \"aria-controls\": openState ? listId : undefined,\n onKeyDown: handleKeyDown,\n ...inputPropsProp,\n }}\n aria-activedescendant={activeState?.id}\n variant={variant}\n inputRef={inputRef}\n value={valueState}\n ref={handleRef}\n {...getReferenceProps({\n onBlur: handleBlur,\n onFocus: handleFocus,\n ...rest,\n })}\n pills={\n multiselect ? selectedState.map((item) => valueToString(item)) : []\n }\n truncate={truncate && !focusedState && !openState}\n onPillRemove={handlePillRemove}\n hidePillClose={!focusedState || readOnly}\n emptyReadOnlyMarker={\n readOnly && selectedState.length > 0 ? \"\" : undefined\n }\n />\n <OptionList\n open={(openState || focusedState) && !readOnly && children != undefined}\n collapsed={!openState}\n ref={handleListRef}\n id={listId}\n tabIndex={-1}\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusInput,\n onClick: handleFocusInput,\n onMouseLeave: handleListMouseLeave,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ComboBox","defaultValueToString","useWindow","useComponentCssInjection","comboBoxCss","useFormFieldProps","useRef","useComboBox","_a","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useForkRef","value","useEffect","useId","jsxs","ListControlContext","jsx","PillInput","clsx","Fragment","Button","ChevronUpIcon","ChevronDownIcon","OptionList"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-spacing-300);\n padding-bottom: var(--salt-spacing-300);\n background: var(--salt-container-primary-background);\n box-shadow: var(--salt-overlayable-shadow-modal);\n overflow-y: auto;\n z-index: var(--salt-zIndex-drawer);\n height: min-content;\n border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner, 0);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths */\n.saltDialog-small-xs {\n width: 100%;\n max-height: 48%;\n}\n\n.saltDialog-small-sm {\n width: 56%;\n max-height: 48%;\n}\n\n.saltDialog-small-md {\n width: 36%;\n max-height: 48%;\n}\n\n.saltDialog-small-lg {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-small-xl {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n width: 100%;\n max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n width: 84%;\n max-height: 72%;\n}\n\n.saltDialog-medium-md {\n width: 68%;\n max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-large-xs {\n width: 100%;\n max-height: 84%;\n}\n\n.saltDialog-large-sm {\n width: 96%;\n max-height: 84%;\n}\n\n.saltDialog-large-md {\n width: 84%;\n max-height: 84%;\n}\n\n.saltDialog-large-lg {\n width: 72%;\n max-height: 84%;\n}\n\n.saltDialog-large-xl {\n width: 72%;\n max-height: 84%;\n}\n";
3
+ var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-spacing-300);\n padding-bottom: var(--salt-spacing-300);\n background: var(--salt-container-primary-background);\n box-shadow: var(--salt-overlayable-shadow-modal);\n overflow-y: auto;\n z-index: var(--salt-zIndex-drawer);\n height: min-content;\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner, 0);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths */\n.saltDialog-small-xs {\n width: 100%;\n max-height: 48%;\n}\n\n.saltDialog-small-sm {\n width: 56%;\n max-height: 48%;\n}\n\n.saltDialog-small-md {\n width: 36%;\n max-height: 48%;\n}\n\n.saltDialog-small-lg {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-small-xl {\n width: 24%;\n max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n width: 100%;\n max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n width: 84%;\n max-height: 72%;\n}\n\n.saltDialog-medium-md {\n width: 68%;\n max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n width: 48%;\n max-height: 72%;\n}\n\n.saltDialog-large-xs {\n width: 100%;\n max-height: 84%;\n}\n\n.saltDialog-large-sm {\n width: 96%;\n max-height: 84%;\n}\n\n.saltDialog-large-md {\n width: 84%;\n max-height: 84%;\n}\n\n.saltDialog-large-lg {\n width: 72%;\n max-height: 84%;\n}\n\n.saltDialog-large-xl {\n width: 72%;\n max-height: 84%;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Dialog.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltDialogContent {\n color: var(--salt-content-primary-foreground);\n min-height: var(--salt-text-lineHeight);\n overflow-y: auto;\n background: var(--salt-container-primary-background);\n padding-bottom: var(--salt-spacing-50);\n\n margin-left: var(--salt-spacing-200);\n margin-right: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-100);\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n box-shadow: none;\n}\n\n.saltDialogContent-scroll {\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
3
+ var css_248z = ".saltDialogContent {\n color: var(--salt-content-primary-foreground);\n min-height: var(--salt-text-lineHeight);\n overflow-y: auto;\n background: var(--salt-container-primary-background);\n\n margin-left: var(--salt-spacing-200);\n margin-right: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-100);\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n box-shadow: none;\n flex: 1;\n}\n\n.saltDialogContent-scroll {\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=DialogContent.css.js.map
@@ -116,8 +116,6 @@ const FormField = React.forwardRef(
116
116
  id: idProp,
117
117
  labelPlacement = "top",
118
118
  necessity,
119
- onBlur,
120
- onFocus,
121
119
  readOnly = false,
122
120
  validationStatus,
123
121
  ...restProps