@salt-ds/core 1.38.0 → 1.40.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 (86) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/css/salt-core.css +154 -4
  3. package/dist-cjs/button/Button.css.js +1 -1
  4. package/dist-cjs/button/Button.js +11 -2
  5. package/dist-cjs/button/Button.js.map +1 -1
  6. package/dist-cjs/button/useButton.js +3 -1
  7. package/dist-cjs/button/useButton.js.map +1 -1
  8. package/dist-cjs/checkbox/Checkbox.js +4 -1
  9. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  10. package/dist-cjs/flex-item/FlexItem.css.js +1 -1
  11. package/dist-cjs/flex-item/FlexItem.js +12 -0
  12. package/dist-cjs/flex-item/FlexItem.js.map +1 -1
  13. package/dist-cjs/flex-layout/FlexLayout.css.js +1 -1
  14. package/dist-cjs/flex-layout/FlexLayout.js +9 -3
  15. package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
  16. package/dist-cjs/flow-layout/FlowLayout.js.map +1 -1
  17. package/dist-cjs/index.js +2 -0
  18. package/dist-cjs/index.js.map +1 -1
  19. package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
  20. package/dist-cjs/link/Link.js +2 -1
  21. package/dist-cjs/link/Link.js.map +1 -1
  22. package/dist-cjs/link/LinkAction.js +18 -0
  23. package/dist-cjs/link/LinkAction.js.map +1 -0
  24. package/dist-cjs/radio-button/RadioButton.js +2 -0
  25. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  26. package/dist-cjs/skip-link/SkipLink.css.js +6 -0
  27. package/dist-cjs/skip-link/SkipLink.css.js.map +1 -0
  28. package/dist-cjs/skip-link/SkipLink.js +57 -0
  29. package/dist-cjs/skip-link/SkipLink.js.map +1 -0
  30. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +76 -0
  31. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -0
  32. package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
  33. package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
  34. package/dist-cjs/toast/Toast.css.js +1 -1
  35. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  36. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +1 -1
  37. package/dist-es/button/Button.css.js +1 -1
  38. package/dist-es/button/Button.js +12 -3
  39. package/dist-es/button/Button.js.map +1 -1
  40. package/dist-es/button/useButton.js +3 -1
  41. package/dist-es/button/useButton.js.map +1 -1
  42. package/dist-es/checkbox/Checkbox.js +4 -1
  43. package/dist-es/checkbox/Checkbox.js.map +1 -1
  44. package/dist-es/flex-item/FlexItem.css.js +1 -1
  45. package/dist-es/flex-item/FlexItem.js +12 -0
  46. package/dist-es/flex-item/FlexItem.js.map +1 -1
  47. package/dist-es/flex-layout/FlexLayout.css.js +1 -1
  48. package/dist-es/flex-layout/FlexLayout.js +9 -3
  49. package/dist-es/flex-layout/FlexLayout.js.map +1 -1
  50. package/dist-es/flow-layout/FlowLayout.js.map +1 -1
  51. package/dist-es/index.js +1 -0
  52. package/dist-es/index.js.map +1 -1
  53. package/dist-es/interactable-card/InteractableCard.css.js +1 -1
  54. package/dist-es/link/Link.js +2 -1
  55. package/dist-es/link/Link.js.map +1 -1
  56. package/dist-es/link/LinkAction.js +16 -0
  57. package/dist-es/link/LinkAction.js.map +1 -0
  58. package/dist-es/radio-button/RadioButton.js +2 -0
  59. package/dist-es/radio-button/RadioButton.js.map +1 -1
  60. package/dist-es/skip-link/SkipLink.css.js +4 -0
  61. package/dist-es/skip-link/SkipLink.css.js.map +1 -0
  62. package/dist-es/skip-link/SkipLink.js +55 -0
  63. package/dist-es/skip-link/SkipLink.js.map +1 -0
  64. package/dist-es/skip-link/internal/useManageFocusOnTarget.js +74 -0
  65. package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -0
  66. package/dist-es/split-layout/SplitLayout.js.map +1 -1
  67. package/dist-es/stack-layout/StackLayout.js.map +1 -1
  68. package/dist-es/toast/Toast.css.js +1 -1
  69. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  70. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +1 -1
  71. package/dist-types/button/Button.d.ts +12 -0
  72. package/dist-types/button/useButton.d.ts +3 -1
  73. package/dist-types/checkbox/Checkbox.d.ts +5 -1
  74. package/dist-types/flex-item/FlexItem.d.ts +10 -2
  75. package/dist-types/flex-layout/FlexLayout.d.ts +8 -0
  76. package/dist-types/flow-layout/FlowLayout.d.ts +8 -0
  77. package/dist-types/index.d.ts +1 -0
  78. package/dist-types/link/Link.d.ts +8 -3
  79. package/dist-types/link/LinkAction.d.ts +5 -0
  80. package/dist-types/radio-button/RadioButton.d.ts +5 -1
  81. package/dist-types/skip-link/SkipLink.d.ts +10 -0
  82. package/dist-types/skip-link/index.d.ts +1 -0
  83. package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +15 -0
  84. package/dist-types/split-layout/SplitLayout.d.ts +8 -0
  85. package/dist-types/stack-layout/StackLayout.d.ts +8 -0
  86. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,57 @@
1
1
  # @salt-ds/core
2
2
 
3
+ ## 1.40.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6a0db8d: Added `loading` prop/functionality to the Button component. This prop will display a spinner to indicate that the action is in progress. This is useful for actions that take some time to process, such as submitting a form or loading data.
8
+
9
+ Added `loadingAnnouncement` prop/functionality to the Button component. This prop will announce a message to screen readers. Meant to be used in conjunction with the `loading` prop.
10
+
11
+ - 1436b36: Add `padding` and `margin` to `FlexLayout`, `FlexItem`, `FlowLayout`, `StackLayout` and `SplitLayout`
12
+
13
+ ```tsx
14
+ <FlexLayout padding={1} margin={1}>
15
+ <FlexItem padding={2} margin={2}>
16
+ Item
17
+ </FlexItem>
18
+ </FlexLayout>
19
+ ```
20
+
21
+ - efb37a0: Add `inputRef` prop to `Checkbox` and `RadioButton`. The `inputRef` can be used to access the hidden `<input>` element.
22
+
23
+ ### Patch Changes
24
+
25
+ - 3b1c265: Fixed standalone ToggleButton's corner radius not aligning to Button.
26
+ - 39bd967: Fixed secondary and tertiary InteractableCards having incorrect disabled styling.
27
+
28
+ ## 1.39.0
29
+
30
+ ### Minor Changes
31
+
32
+ - 373717d: Added `SkipLink`.
33
+
34
+ ```tsx
35
+ <body>
36
+ <header>
37
+ <SkipLink targetId="main">Skip to main content</SkipLink>
38
+ <nav>
39
+ {{...}}
40
+ </nav>
41
+ </header>
42
+ <main>
43
+ <h1 id="main">Main Content</h1>
44
+ </main>
45
+ </body>
46
+
47
+ ```
48
+
49
+ - 225a61b: Added `render` prop to `Link`. The `render` prop enables the substitution of the default anchor tag with an alternate link, such as React Router, facilitating integration with routing libraries.
50
+
51
+ ### Patch Changes
52
+
53
+ - c5d61e2: Fixed Toast icon alignment.
54
+
3
55
  ## 1.38.0
4
56
 
5
57
  ### Minor Changes
package/css/salt-core.css CHANGED
@@ -386,6 +386,21 @@
386
386
  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);
387
387
  --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);
388
388
  }
389
+ .saltButton-accented.saltButton-loading {
390
+ --button-text-color: var(--salt-actionable-accented-background);
391
+ --button-text-color-hover: var(--salt-actionable-accented-background);
392
+ --button-text-color-active: var(--salt-actionable-accented-background);
393
+ --button-text-color-disabled: var(--salt-actionable-accented-background);
394
+ --button-background: var(--salt-actionable-accented-background);
395
+ --button-background-hover: var(--salt-actionable-accented-background);
396
+ --button-background-active: var(--salt-actionable-accented-background);
397
+ --button-background-disabled: var(--salt-actionable-accented-background);
398
+ --button-borderColor: var(--salt-actionable-accented-borderColor);
399
+ --button-borderColor-hover: var(--salt-actionable-accented-borderColor);
400
+ --button-borderColor-active: var(--salt-actionable-accented-borderColor);
401
+ --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);
402
+ cursor: progress;
403
+ }
389
404
  .saltButton-neutral.saltButton-solid {
390
405
  --button-text-color: var(--salt-actionable-bold-foreground);
391
406
  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);
@@ -428,6 +443,21 @@
428
443
  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
429
444
  --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
430
445
  }
446
+ .saltButton-neutral.saltButton-loading {
447
+ --button-text-color: var(--salt-actionable-background);
448
+ --button-text-color-hover: var(--salt-actionable-background);
449
+ --button-text-color-active: var(--salt-actionable-background);
450
+ --button-text-color-disabled: var(--salt-actionable-background);
451
+ --button-background: var(--salt-actionable-background);
452
+ --button-background-hover: var(--salt-actionable-background);
453
+ --button-background-active: var(--salt-actionable-background);
454
+ --button-background-disabled: var(--salt-actionable-background);
455
+ --button-borderColor: var(--salt-actionable-borderColor);
456
+ --button-borderColor-hover: var(--salt-actionable-borderColor);
457
+ --button-borderColor-active: var(--salt-actionable-borderColor);
458
+ --button-borderColor-disabled: var(--salt-actionable-borderColor);
459
+ cursor: progress;
460
+ }
431
461
  .saltButton-negative.saltButton-solid {
432
462
  --button-text-color: var(--salt-actionable-negative-bold-foreground);
433
463
  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);
@@ -470,6 +500,21 @@
470
500
  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);
471
501
  --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);
472
502
  }
503
+ .saltButton-negative.saltButton-loading {
504
+ --button-text-color: var(--salt-actionable-negative-background);
505
+ --button-text-color-hover: var(--salt-actionable-negative-background);
506
+ --button-text-color-active: var(--salt-actionable-negative-background);
507
+ --button-text-color-disabled: var(--salt-actionable-negative-background);
508
+ --button-background: var(--salt-actionable-negative-background);
509
+ --button-background-hover: var(--salt-actionable-negative-background);
510
+ --button-background-active: var(--salt-actionable-negative-background);
511
+ --button-background-disabled: var(--salt-actionable-negative-background);
512
+ --button-borderColor: var(--salt-actionable-negative-borderColor);
513
+ --button-borderColor-hover: var(--salt-actionable-negative-borderColor);
514
+ --button-borderColor-active: var(--salt-actionable-negative-borderColor);
515
+ --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);
516
+ cursor: progress;
517
+ }
473
518
  .saltButton-positive.saltButton-solid {
474
519
  --button-text-color: var(--salt-actionable-positive-bold-foreground);
475
520
  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);
@@ -512,6 +557,21 @@
512
557
  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);
513
558
  --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);
514
559
  }
560
+ .saltButton-positive.saltButton-loading {
561
+ --button-text-color: var(--salt-actionable-positive-background);
562
+ --button-text-color-hover: var(--salt-actionable-positive-background);
563
+ --button-text-color-active: var(--salt-actionable-positive-background);
564
+ --button-text-color-disabled: var(--salt-actionable-positive-background);
565
+ --button-background: var(--salt-actionable-positive-background);
566
+ --button-background-hover: var(--salt-actionable-positive-background);
567
+ --button-background-active: var(--salt-actionable-positive-background);
568
+ --button-background-disabled: var(--salt-actionable-positive-background);
569
+ --button-borderColor: var(--salt-actionable-positive-borderColor);
570
+ --button-borderColor-hover: var(--salt-actionable-positive-borderColor);
571
+ --button-borderColor-active: var(--salt-actionable-positive-borderColor);
572
+ --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);
573
+ cursor: progress;
574
+ }
515
575
  .saltButton-caution.saltButton-solid {
516
576
  --button-text-color: var(--salt-actionable-caution-bold-foreground);
517
577
  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);
@@ -554,6 +614,34 @@
554
614
  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);
555
615
  --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);
556
616
  }
617
+ .saltButton-caution.saltButton-loading {
618
+ --button-text-color: var(--salt-actionable-caution-background);
619
+ --button-text-color-hover: var(--salt-actionable-caution-background);
620
+ --button-text-color-active: var(--salt-actionable-caution-background);
621
+ --button-text-color-disabled: var(--salt-actionable-caution-background);
622
+ --button-background: var(--salt-actionable-caution-background);
623
+ --button-background-hover: var(--salt-actionable-caution-background);
624
+ --button-background-active: var(--salt-actionable-caution-background);
625
+ --button-background-disabled: var(--salt-actionable-caution-background);
626
+ --button-borderColor: var(--salt-actionable-caution-borderColor);
627
+ --button-borderColor-hover: var(--salt-actionable-caution-borderColor);
628
+ --button-borderColor-active: var(--salt-actionable-caution-borderColor);
629
+ --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);
630
+ cursor: progress;
631
+ }
632
+ .saltButton-spinner {
633
+ position: absolute;
634
+ inset: 0;
635
+ display: flex;
636
+ align-items: center;
637
+ justify-content: center;
638
+ }
639
+ .saltButton-sr-only {
640
+ position: fixed;
641
+ top: 0;
642
+ left: 0;
643
+ transform: translate(-100%, -100%);
644
+ }
557
645
 
558
646
  /* src/card/Card.css */
559
647
  .saltCard {
@@ -1299,6 +1387,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
1299
1387
  }
1300
1388
  .saltFlexItem {
1301
1389
  position: relative;
1390
+ margin: var(--flexItem-margin);
1391
+ padding: var(--flexItem-padding);
1302
1392
  align-self: var(--saltFlexItem-alignment);
1303
1393
  flex-grow: var(--saltFlexItem-grow);
1304
1394
  flex-shrink: var(--saltFlexItem-shrink);
@@ -1319,6 +1409,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
1319
1409
  }
1320
1410
  .saltFlexLayout {
1321
1411
  gap: var(--flexLayout-gap);
1412
+ margin: var(--flexLayout-margin);
1413
+ padding: var(--flexLayout-padding);
1322
1414
  display: var(--flexLayout-layout-display);
1323
1415
  flex-direction: var(--flexLayout-direction);
1324
1416
  flex-wrap: var(--flexLayout-wrap);
@@ -1808,9 +1900,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
1808
1900
  .saltInteractableCard-secondary.saltInteractableCard-disabled,
1809
1901
  .saltInteractableCard-secondary.saltInteractableCard-disabled:focus,
1810
1902
  .saltInteractableCard-secondary.saltInteractableCard-disabled:active {
1811
- background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));
1903
+ background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background-disabled));
1812
1904
  border-color: var(--salt-container-secondary-borderColor-disabled);
1813
1905
  }
1906
+ .saltInteractableCard-tertiary.saltInteractableCard-disabled,
1907
+ .saltInteractableCard-tertiary.saltInteractableCard-disabled:focus,
1908
+ .saltInteractableCard-tertiary.saltInteractableCard-disabled:active {
1909
+ background: var(--salt-container-tertiary-background-disabled);
1910
+ border-color: var(--salt-container-tertiary-borderColor-disabled);
1911
+ }
1814
1912
  .saltInteractableCard-selected.saltInteractableCard-disabled,
1815
1913
  .saltInteractableCard-selected.saltInteractableCard-disabled:focus,
1816
1914
  .saltInteractableCard-selected.saltInteractableCard-disabled:hover,
@@ -3225,6 +3323,55 @@ a:focus .saltCard-interactable.saltCard-disabled {
3225
3323
  border-top-right-radius: 0;
3226
3324
  }
3227
3325
 
3326
+ /* src/skip-link/SkipLink.css */
3327
+ .saltSkipLink {
3328
+ top: 0;
3329
+ left: 0;
3330
+ opacity: 0;
3331
+ width: 1px;
3332
+ height: 1px;
3333
+ margin: 0;
3334
+ padding: 0;
3335
+ overflow: hidden;
3336
+ position: absolute;
3337
+ display: flex;
3338
+ align-items: center;
3339
+ box-sizing: border-box;
3340
+ color: var(--salt-content-primary-foreground);
3341
+ letter-spacing: var(--salt-text-letterSpacing);
3342
+ text-decoration: var(--salt-navigable-textDecoration);
3343
+ font-family: var(--salt-text-fontFamily);
3344
+ white-space: nowrap;
3345
+ background: var(--saltSkipLink-background, var(--salt-container-primary-background));
3346
+ z-index: calc(var(--salt-zIndex-appHeader) + 1);
3347
+ }
3348
+ .saltSkipLink:focus {
3349
+ opacity: 1;
3350
+ width: auto;
3351
+ height: calc(var(--salt-size-base) + var(--salt-spacing-200));
3352
+ padding: var(--salt-spacing-100) var(--salt-spacing-300);
3353
+ outline: var(--salt-focused-outline);
3354
+ outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
3355
+ box-shadow: var(--salt-overlayable-shadow);
3356
+ }
3357
+ @keyframes fade-out-back-outline {
3358
+ 0% {
3359
+ outline-color: var(--salt-focused-outlineColor);
3360
+ }
3361
+ 100% {
3362
+ outline-color: transparent;
3363
+ }
3364
+ }
3365
+ .saltSkipLink-target {
3366
+ animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;
3367
+ outline: var(--salt-focused-outline);
3368
+ }
3369
+ @media (prefers-reduced-motion: reduce) {
3370
+ .saltSkipLink-target {
3371
+ animation: none;
3372
+ }
3373
+ }
3374
+
3228
3375
  /* src/spinner/Spinner.css */
3229
3376
  .saltSpinner {
3230
3377
  position: relative;
@@ -3867,7 +4014,7 @@ label.saltText small,
3867
4014
  margin-bottom: var(--salt-spacing-200);
3868
4015
  }
3869
4016
  .saltToast-iconContainer > .saltIcon {
3870
- margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;
4017
+ margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));
3871
4018
  color: var(--toast-iconColor);
3872
4019
  }
3873
4020
  .saltToast-info {
@@ -3901,7 +4048,7 @@ label.saltText small,
3901
4048
  border-color: var(--toggleButton-borderColor, transparent);
3902
4049
  border-style: solid;
3903
4050
  border-width: var(--salt-size-border, 0);
3904
- border-radius: var(--salt-palette-corner-weaker, 0);
4051
+ border-radius: var(--salt-palette-corner-weak, 0);
3905
4052
  color: var(--toggleButton-text-color);
3906
4053
  cursor: pointer;
3907
4054
  display: inline-flex;
@@ -3978,6 +4125,9 @@ label.saltText small,
3978
4125
  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
3979
4126
  flex-direction: row;
3980
4127
  }
4128
+ .saltToggleButtonGroup .saltToggleButton {
4129
+ border-radius: var(--salt-palette-corner-weaker, 0);
4130
+ }
3981
4131
  .saltToggleButtonGroup-horizontal .saltToggleButton {
3982
4132
  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
3983
4133
  }
@@ -4217,4 +4367,4 @@ label.saltText small,
4217
4367
  }
4218
4368
  }
4219
4369
 
4220
- /* src/d886e14a-8f08-4a73-a878-4669e39f01c3.css */
4370
+ /* src/01290561-3655-4333-9891-20d24ed36bf9.css */
package/dist-cjs/button/Button.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".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-action-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.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\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\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-background-disabled: var(--salt-actionable-background-disabled);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n";
3
+ var css_248z = ".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-action-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.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\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\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-text-color-disabled: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-background-disabled: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);\n cursor: progress;\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-background-disabled: var(--salt-actionable-background-disabled);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-text-color-disabled: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-background-disabled: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-borderColor);\n cursor: progress;\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-text-color-disabled: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-background-disabled: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);\n cursor: progress;\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-text-color-disabled: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-background-disabled: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);\n cursor: progress;\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-text-color-disabled: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-background-disabled: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);\n cursor: progress;\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Button.css.js.map
package/dist-cjs/button/Button.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
+ var core = require('@salt-ds/core');
4
5
  var styles = require('@salt-ds/styles');
5
6
  var window = require('@salt-ds/window');
6
7
  var clsx = require('clsx');
@@ -47,6 +48,8 @@ const Button = React.forwardRef(
47
48
  onKeyDown,
48
49
  onBlur,
49
50
  onClick,
51
+ loading,
52
+ loadingAnnouncement,
50
53
  appearance: appearanceProp,
51
54
  sentiment: sentimentProp,
52
55
  type = "button",
@@ -54,6 +57,7 @@ const Button = React.forwardRef(
54
57
  ...restProps
55
58
  }, ref) {
56
59
  const { active, buttonProps } = useButton.useButton({
60
+ loading,
57
61
  disabled,
58
62
  focusableWhenDisabled,
59
63
  onKeyUp,
@@ -71,7 +75,7 @@ const Button = React.forwardRef(
71
75
  const appearance = appearanceProp ?? mapped.appearance ?? "solid";
72
76
  const sentiment = sentimentProp ?? mapped.sentiment ?? "neutral";
73
77
  const { tabIndex, ...restButtonProps } = buttonProps;
74
- return /* @__PURE__ */ jsxRuntime.jsx(
78
+ return /* @__PURE__ */ jsxRuntime.jsxs(
75
79
  "button",
76
80
  {
77
81
  ...restButtonProps,
@@ -79,6 +83,7 @@ const Button = React.forwardRef(
79
83
  withBaseName(),
80
84
  withBaseName(variant),
81
85
  {
86
+ [withBaseName("loading")]: loading,
82
87
  [withBaseName("disabled")]: disabled,
83
88
  [withBaseName("active")]: active,
84
89
  [withBaseName(appearance)]: appearance,
@@ -89,7 +94,11 @@ const Button = React.forwardRef(
89
94
  ...restProps,
90
95
  ref,
91
96
  type,
92
- children
97
+ children: [
98
+ loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("spinner"), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(core.Spinner, { size: "small", "aria-hidden": true, disableAnnouncer: true }) }),
99
+ typeof loadingAnnouncement === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", className: withBaseName("sr-only"), children: loadingAnnouncement }),
100
+ children
101
+ ]
93
102
  }
94
103
  );
95
104
  }
package/dist-cjs/button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactElement,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport const ButtonAppearanceValues = [\n \"solid\",\n \"bordered\",\n \"transparent\",\n] as const;\nexport const ButtonSentimentValues = [\n \"accented\",\n \"neutral\",\n \"positive\",\n \"negative\",\n \"caution\",\n] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\nexport type ButtonAppearance = (typeof ButtonAppearanceValues)[number];\nexport type ButtonSentiment = (typeof ButtonSentimentValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n *\n * @deprecated Use `appearance` and `sentiment` instead.\n *\n * | variant | appearance | sentiment |\n * | ----------- | ------------- | ----------- |\n * | `cta` | `solid` | `accented` |\n * | `primary` | `solid` | `neutral` |\n * | `secondary` | `transparent` | `neutral` |\n */\n variant?: ButtonVariant;\n /**\n * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n * 'solid' is the default value.\n *\n * @since 1.36.0.\n */\n appearance?: ButtonAppearance;\n /**\n * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n * 'neutral' is the default value.\n *\n * @since 1.36.0.\n */\n sentiment?: ButtonSentiment;\n}\n\nfunction variantToAppearanceAndColor(\n variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n switch (variant) {\n case \"primary\":\n return { appearance: \"solid\", sentiment: \"neutral\" };\n case \"secondary\":\n return { appearance: \"transparent\", sentiment: \"neutral\" };\n case \"cta\":\n return { appearance: \"solid\", sentiment: \"accented\" };\n }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n appearance: appearanceProp,\n sentiment: sentimentProp,\n type = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?,\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n const mapped = variantToAppearanceAndColor(variant);\n const appearance: ButtonAppearance =\n appearanceProp ?? mapped.appearance ?? \"solid\";\n const sentiment: ButtonSentiment =\n sentimentProp ?? mapped.sentiment ?? \"neutral\";\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n [withBaseName(appearance)]: appearance,\n [withBaseName(sentiment)]: sentiment,\n },\n className,\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK;AAC1D,MAAM,sBAAyB,GAAA;AAAA,EACpC,OAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF;AACO,MAAM,qBAAwB,GAAA;AAAA,EACnC,UAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF;AA2CA,SAAS,4BACP,OAC+C,EAAA;AAC/C,EAAA,QAAQ,OAAS;AAAA,IACf,KAAK,SAAA;AACH,MAAA,OAAO,EAAE,UAAA,EAAY,OAAS,EAAA,SAAA,EAAW,SAAU,EAAA;AAAA,IACrD,KAAK,WAAA;AACH,MAAA,OAAO,EAAE,UAAA,EAAY,aAAe,EAAA,SAAA,EAAW,SAAU,EAAA;AAAA,IAC3D,KAAK,KAAA;AACH,MAAA,OAAO,EAAE,UAAA,EAAY,OAAS,EAAA,SAAA,EAAW,UAAW,EAAA;AAAA;AAE1D;AAEO,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,SAAW,EAAA,aAAA;AAAA,IACX,IAAO,GAAA,QAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAC2B,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAIC,mBAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,4BAA4B,OAAO,CAAA;AAClD,IAAM,MAAA,UAAA,GACJ,cAAkB,IAAA,MAAA,CAAO,UAAc,IAAA,OAAA;AACzC,IAAM,MAAA,SAAA,GACJ,aAAiB,IAAA,MAAA,CAAO,SAAa,IAAA,SAAA;AAIvC,IAAA,MAAM,EAAE,QAAA,EAAU,GAAG,eAAA,EAAoB,GAAA,WAAA;AACzC,IACE,uBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA;AAGN;;;;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { Spinner } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactElement,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport const ButtonAppearanceValues = [\n \"solid\",\n \"bordered\",\n \"transparent\",\n] as const;\nexport const ButtonSentimentValues = [\n \"accented\",\n \"neutral\",\n \"positive\",\n \"negative\",\n \"caution\",\n] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\nexport type ButtonAppearance = (typeof ButtonAppearanceValues)[number];\nexport type ButtonSentiment = (typeof ButtonSentimentValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n *\n * @deprecated Use `appearance` and `sentiment` instead.\n *\n * | variant | appearance | sentiment |\n * | ----------- | ------------- | ----------- |\n * | `cta` | `solid` | `accented` |\n * | `primary` | `solid` | `neutral` |\n * | `secondary` | `transparent` | `neutral` |\n */\n variant?: ButtonVariant;\n /**\n * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n * 'solid' is the default value.\n *\n * @since 1.36.0.\n */\n appearance?: ButtonAppearance;\n /**\n * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n * 'neutral' is the default value.\n *\n * @since 1.36.0.\n */\n sentiment?: ButtonSentiment;\n\n /**\n * If `true`, the button will be in a loading state. This allows a spinner to be nested inside the button.\n *\n * @since 1.38.0.\n */\n loading?: boolean;\n\n /**\n * Text to be announced by screen readers, intended to be used in conjunction with the `loading` prop.\n *\n * @since 1.38.0.\n */\n loadingAnnouncement?: string;\n}\n\nfunction variantToAppearanceAndColor(\n variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n switch (variant) {\n case \"primary\":\n return { appearance: \"solid\", sentiment: \"neutral\" };\n case \"secondary\":\n return { appearance: \"transparent\", sentiment: \"neutral\" };\n case \"cta\":\n return { appearance: \"solid\", sentiment: \"accented\" };\n }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n loading,\n loadingAnnouncement,\n appearance: appearanceProp,\n sentiment: sentimentProp,\n type = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?,\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n const mapped = variantToAppearanceAndColor(variant);\n const appearance: ButtonAppearance =\n appearanceProp ?? mapped.appearance ?? \"solid\";\n\n const sentiment: ButtonSentiment =\n sentimentProp ?? mapped.sentiment ?? \"neutral\";\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"loading\")]: loading,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n [withBaseName(appearance)]: appearance,\n [withBaseName(sentiment)]: sentiment,\n },\n className,\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {loading && (\n <div className={withBaseName(\"spinner\")} aria-hidden>\n <Spinner size=\"small\" aria-hidden disableAnnouncer />\n </div>\n )}\n {typeof loadingAnnouncement === \"string\" && (\n <span role=\"status\" className={withBaseName(\"sr-only\")}>\n {loadingAnnouncement}\n </span>\n )}\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsxs","clsx","jsx","Spinner"],"mappings":"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"}
package/dist-cjs/button/useButton.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var React = require('react');
4
4
 
5
5
  const useButton = ({
6
+ loading,
6
7
  disabled,
7
8
  focusableWhenDisabled,
8
9
  onKeyUp,
@@ -46,10 +47,11 @@ const useButton = ({
46
47
  };
47
48
  const buttonProps = {
48
49
  "aria-disabled": disabled && focusableWhenDisabled ? true : void 0,
50
+ "data-loading": loading,
49
51
  disabled: disabled && !focusableWhenDisabled,
50
52
  tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,
51
53
  onBlur: handleBlur,
52
- onClick: !disabled ? handleClick : void 0,
54
+ onClick: !loading && !disabled ? handleClick : void 0,
53
55
  onKeyDown: handleKeyDown,
54
56
  onKeyUp: handleKeyUp
55
57
  };
package/dist-cjs/button/useButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useButton.js","sources":["../src/button/useButton.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface ButtonHookProps<T extends Element> {\n disabled?: boolean;\n focusableWhenDisabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface ButtonHookResult<T extends Element> {\n active: boolean;\n buttonProps: {\n \"aria-disabled\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useButton = <T extends Element>({\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: ButtonHookProps<T>): ButtonHookResult<T> => {\n const [keyIsDown, setkeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setkeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setkeyIsDown(event.key);\n setActive(true);\n }\n\n onKeyDown?.(event);\n };\n\n const buttonProps = {\n \"aria-disabled\": disabled && focusableWhenDisabled ? true : undefined,\n disabled: disabled && !focusableWhenDisabled,\n tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n buttonProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AA8BO,MAAM,YAAY,CAAoB;AAAA,EAC3C,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAI,IAAA,SAAA,KAAc,KAAS,IAAA,SAAA,KAAc,KAAO,EAAA;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,OACC,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAGhB,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,eAAA,EAAiB,QAAY,IAAA,qBAAA,GAAwB,IAAO,GAAA,KAAA,CAAA;AAAA,IAC5D,QAAA,EAAU,YAAY,CAAC,qBAAA;AAAA,IACvB,QAAU,EAAA,QAAA,IAAY,CAAC,qBAAA,GAAwB,CAAK,CAAA,GAAA,CAAA;AAAA,IACpD,MAAQ,EAAA,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,KAAA,CAAA;AAAA,IACnC,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA;AAAA,GACX;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
1
+ {"version":3,"file":"useButton.js","sources":["../src/button/useButton.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface ButtonHookProps<T extends Element> {\n loading?: boolean;\n disabled?: boolean;\n focusableWhenDisabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface ButtonHookResult<T extends Element> {\n active: boolean;\n buttonProps: {\n \"aria-disabled\"?: boolean;\n \"data-loading\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useButton = <T extends Element>({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: ButtonHookProps<T>): ButtonHookResult<T> => {\n const [keyIsDown, setkeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setkeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setkeyIsDown(event.key);\n setActive(true);\n }\n\n onKeyDown?.(event);\n };\n\n const buttonProps = {\n \"aria-disabled\": disabled && focusableWhenDisabled ? true : undefined,\n \"data-loading\": loading,\n disabled: disabled && !focusableWhenDisabled,\n tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !loading && !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n buttonProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAgCO,MAAM,YAAY,CAAoB;AAAA,EAC3C,OAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAI,IAAA,SAAA,KAAc,KAAS,IAAA,SAAA,KAAc,KAAO,EAAA;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,OACC,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAGhB,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,eAAA,EAAiB,QAAY,IAAA,qBAAA,GAAwB,IAAO,GAAA,KAAA,CAAA;AAAA,IAC5D,cAAgB,EAAA,OAAA;AAAA,IAChB,QAAA,EAAU,YAAY,CAAC,qBAAA;AAAA,IACvB,QAAU,EAAA,QAAA,IAAY,CAAC,qBAAA,GAAwB,CAAK,CAAA,GAAA,CAAA;AAAA,IACpD,MAAQ,EAAA,UAAA;AAAA,IACR,OAAS,EAAA,CAAC,OAAW,IAAA,CAAC,WAAW,WAAc,GAAA,KAAA,CAAA;AAAA,IAC/C,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA;AAAA,GACX;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
package/dist-cjs/checkbox/Checkbox.js CHANGED
@@ -10,6 +10,7 @@ var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
10
10
  var makePrefixer = require('../utils/makePrefixer.js');
11
11
  var useControlled = require('../utils/useControlled.js');
12
12
  require('../utils/useFloatingUI/useFloatingUI.js');
13
+ var useForkRef = require('../utils/useForkRef.js');
13
14
  require('../utils/useId.js');
14
15
  var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
15
16
  require('../salt-provider/SaltProvider.js');
@@ -28,6 +29,7 @@ const Checkbox = React.forwardRef(
28
29
  error,
29
30
  indeterminate,
30
31
  inputProps = {},
32
+ inputRef: inputRefProp,
31
33
  label,
32
34
  name,
33
35
  onBlur,
@@ -69,6 +71,7 @@ const Checkbox = React.forwardRef(
69
71
  const readOnly = (checkboxGroup == null ? void 0 : checkboxGroup.readOnly) || formFieldReadOnly || readOnlyProp;
70
72
  const validationStatus = !disabled ? (checkboxGroup == null ? void 0 : checkboxGroup.validationStatus) ?? formFieldValidationStatus ?? validationStatusProp : void 0;
71
73
  const inputRef = React.useRef(null);
74
+ const handleInputRef = useForkRef.useForkRef(inputRefProp, inputRef);
72
75
  const handleChange = (event) => {
73
76
  var _a;
74
77
  if (event.nativeEvent.defaultPrevented || readOnly) {
@@ -125,7 +128,7 @@ const Checkbox = React.forwardRef(
125
128
  onChange: handleChange,
126
129
  onFocus,
127
130
  type: "checkbox",
128
- ref: inputRef,
131
+ ref: handleInputRef,
129
132
  ...restInputProps
130
133
  }
131
134
  ),
package/dist-cjs/checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n type InputHTMLAttributes,\n type ReactNode,\n forwardRef,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkedProp ??\n (checkboxGroup?.checkedValues && value\n ? checkboxGroup.checkedValues.includes(value)\n : checkedProp);\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly =\n checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? (checkboxGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp)\n : undefined;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n checkboxGroup?.onChange?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current != null) {\n inputRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n ref={inputRef}\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n forwardRef,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Used to access the hidden `<input>` element.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n inputRef: inputRefProp,\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkedProp ??\n (checkboxGroup?.checkedValues && value\n ? checkboxGroup.checkedValues.includes(value)\n : checkedProp);\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly =\n checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? (checkboxGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp)\n : undefined;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n checkboxGroup?.onChange?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current != null) {\n inputRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n ref={handleInputRef}\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","useForkRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}