@salt-ds/core 1.44.1 → 1.46.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @salt-ds/core
 
+## 1.46.0
+
+### Minor Changes
+
+- ec1736e: Added `defaultSelected` prop to `ToggleButton` to control default selected state. Updated `ToggleButton` `appearance` JSDoc to be more clear around selected state.
+
+### Patch Changes
+
+- 8b4cbfb: Fixed Step component not working with Tooltip due to missing `forwardRef`.
+- bbdf4a6: Removed `onPillRemove` callback from the ComboBox's type definitions. `onPillRemove` has never been supported nor is it intended to be supported. `onSelectionChange` can be used instead to detect the removed pill.
+
+## 1.45.0
+
+### Minor Changes
+
+- c664e97: - Moved `SteppedTracker` component from labs to core, renamed as `Stepper`.
+
+  - `Stepper` visually communicates a user’s progress through a linear process. It gives the user context about where they are, which steps have they completed, how many steps are left and if any errors or warnings have occurred.
+
+  ```tsx
+  import { Stepper, Step } from "@salt-ds/core";
+
+  function Example() {
+    return (
+      <Stepper orientation="horizontal">
+        <Step label="Step 1" stage="completed" />
+        <Step label="Step 2" stage="active" />
+        <Step label="Step 3" stage="pending" />
+      </Stepper>
+    );
+  }
+  ```
+
+- 06232b0: Added `sentiment`, `appearance` and `readOnly` props to `ToggleButton` and `ToggleButtonGroup`.
+
+  ```tsx
+  <ToggleButton sentiment="positive" appearance="bordered">
+    Home
+  </ToggleButton>
+  ```
+
+  ```tsx
+  <ToggleButtonGroup sentiment="accented" appearance="bordered">
+    <ToggleButton> Home</ToggleButton>
+  </ToggleButtonGroup>
+  ```
+
+  ```tsx
+  <ToggleButtonGroup readOnly={true}>
+    <ToggleButton> Home</ToggleButton>
+  </ToggleButtonGroup>
+  ```
+
+  Added support for visually indicating the selected toggle button within a disabled toggle button group.
+
 ## 1.44.1
 
 ### Patch Changes

package/css/salt-core.css

@@ -3675,6 +3675,82 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --statusIndicator-Color: var(--statusIndicator-info-color);
 }
 
+/* src/stepper/Step.css */
+.saltStep {
+  --step-icon-base-size: var(--salt-size-icon, 12px);
+  --step-icon-size-multiplier: var(--saltIcon-size-multiplier, 1.5);
+  --step-icon-size: calc(var(--step-icon-base-size) * var(--step-icon-size-multiplier));
+  --step-depth: var(--saltStep-depth, 0);
+}
+.saltStepper-horizontal .saltStep {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(3, min-content);
+  grid-template-areas: "icon" "label" "description";
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  flex: 1;
+  padding: 0 var(--salt-spacing-25);
+}
+.saltStepper-vertical .saltStep {
+  display: grid;
+  grid-template-columns: var(--step-icon-size) 1fr min-content;
+  grid-template-areas: "icon            label           expand" "connector       description     ." "stepper         stepper         stepper";
+  justify-items: start;
+  align-items: start;
+  gap: 0 var(--salt-spacing-100);
+  width: 100%;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  transition-property: grid-template-rows;
+}
+.saltStepper-vertical .saltStep-terminal {
+  grid-template-areas: "icon            label           label" "connector       description     description" "stepper         stepper         stepper";
+}
+.saltStepper-vertical > .saltStep.saltStep-expanded {
+  grid-template-rows: var(--salt-size-base) min-content 1fr;
+}
+.saltStepper-vertical > .saltStep.saltStep-collapsed {
+  grid-template-rows: var(--salt-size-base) min-content 0fr;
+}
+
+/* src/stepper/Stepper.css */
+.saltStepper {
+  grid-area: stepper;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  transition-duration: var(--salt-duration-perceptible);
+  transition-timing-function: ease-in-out;
+  transition-property: opacity, visibility;
+}
+@media (prefers-reduced-motion) {
+  .saltStepper {
+    transition-duration: var(--salt-duration-instant);
+  }
+}
+.saltStepper-horizontal {
+  display: flex;
+  flex-direction: row;
+}
+.saltStepper-vertical {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.saltStepper-vertical > .saltStep.saltStep-expanded > .saltStepper {
+  opacity: 1;
+  visibility: visible;
+}
+.saltStepper-vertical > .saltStep.saltStep-collapsed > .saltStepper {
+  opacity: 0;
+  visibility: hidden;
+}
+
 /* src/switch/Switch.css */
 .saltSwitch {
   display: flex;
@@ -4239,20 +4315,21 @@ label.saltText small,
   border-style: solid;
   border-width: var(--salt-size-border, 0);
   border-radius: var(--salt-palette-corner-weak, 0);
+  box-sizing: border-box;
   color: var(--toggleButton-text-color);
   cursor: pointer;
   display: inline-flex;
   gap: var(--salt-spacing-50);
+  height: var(--salt-size-base);
   justify-content: center;
+  line-height: var(--salt-text-lineHeight);
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-action-fontWeight);
   font-family: var(--salt-text-action-fontFamily);
-  line-height: var(--salt-text-lineHeight);
   letter-spacing: var(--salt-text-action-letterSpacing);
   text-transform: var(--salt-text-action-textTransform);
   padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));
   margin: 0;
-  height: var(--salt-size-base);
   min-width: unset;
   position: relative;
   text-align: var(--salt-text-action-textAlign);
@@ -4278,30 +4355,264 @@ label.saltText small,
 }
 .saltToggleButton[aria-checked=true],
 .saltToggleButton[aria-pressed=true] {
-  background: var(--toggleButton-background-active);
-  color: var(--toggleButton-text-color-active);
+  background: var(--toggleButton-background-selected);
+  color: var(--toggleButton-text-color-selected);
   cursor: var(--salt-actionable-cursor-active);
-  border-color: var(--toggleButton-borderColor-active);
+  border-color: var(--toggleButton-borderColor-selected);
 }
-.saltToggleButton:disabled {
+.saltToggleButton[aria-disabled=true] {
   background: var(--toggleButton-background-disabled);
   color: var(--toggleButton-text-color-disabled);
   cursor: var(--salt-actionable-cursor-disabled);
   border-color: var(--toggleButton-borderColor-disabled);
 }
-.saltToggleButton {
+.saltToggleButton[aria-checked=true].saltToggleButton[aria-disabled=true],
+.saltToggleButton[aria-pressed=true].saltToggleButton[aria-disabled=true] {
+  background: var(--toggleButton-background-disabled-selected);
+  color: var(--toggleButton-text-color-disabled-selected);
+  border-color: var(--toggleButton-borderColor-disabled-selected);
+}
+.saltToggleButton.saltToggleButton-readOnly {
+  background: var(--toggleButton-background-readonly);
+  color: var(--toggleButton-text-color-readonly);
+  cursor: var(--salt-actionable-cursor-disabled);
+  border-color: var(--toggleButton-borderColor-readonly);
+}
+.saltToggleButton[aria-checked=true].saltToggleButton-readOnly,
+.saltToggleButton[aria-pressed=true].saltToggleButton-readOnly {
+  background: var(--toggleButton-background-readonly-selected);
+  color: var(--toggleButton-text-color-readonly-selected);
+  border-color: var(--toggleButton-borderColor-readonly-selected);
+}
+.saltToggleButton-neutral.saltToggleButton-solid {
   --toggleButton-text-color: var(--salt-actionable-subtle-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);
+  --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);
   --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);
   --toggleButton-background: var(--salt-actionable-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-subtle-background-active);
+  --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);
   --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);
   --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);
   --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
-  --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
+  --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);
+}
+.saltToggleButton-accented.saltToggleButton-solid {
+  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);
+  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);
+  --toggleButton-background: var(--salt-actionable-accented-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);
+  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);
+  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);
+  --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);
+}
+.saltToggleButton-positive.saltToggleButton-solid {
+  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);
+  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);
+  --toggleButton-background: var(--salt-actionable-positive-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);
+  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);
+  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);
+  --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);
+}
+.saltToggleButton-negative.saltToggleButton-solid {
+  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);
+  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);
+  --toggleButton-background: var(--salt-actionable-negative-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);
+  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);
+  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);
+  --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);
+}
+.saltToggleButton-caution.saltToggleButton-solid {
+  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);
+  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);
+  --toggleButton-background: var(--salt-actionable-caution-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);
+  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);
+  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);
+  --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);
+}
+.saltToggleButton-neutral.saltToggleButton-bordered {
+  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-foreground);
+  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);
+  --toggleButton-background: var(--salt-actionable-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-background);
+  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-background);
+  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);
+  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);
   --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);
+}
+.saltToggleButton-accented.saltToggleButton-bordered {
+  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);
+  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);
+  --toggleButton-background: var(--salt-actionable-accented-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-accented-background);
+  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);
+  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);
+  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);
+}
+.saltToggleButton-positive.saltToggleButton-bordered {
+  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);
+  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);
+  --toggleButton-background: var(--salt-actionable-positive-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-positive-background);
+  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);
+  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);
+  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);
+}
+.saltToggleButton-negative.saltToggleButton-bordered {
+  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);
+  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);
+  --toggleButton-background: var(--salt-actionable-negative-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-negative-background);
+  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);
+  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);
+  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);
+}
+.saltToggleButton-caution.saltToggleButton-bordered {
+  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);
+  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);
+  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);
+  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);
+  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);
+  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);
+  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);
+  --toggleButton-background: var(--salt-actionable-caution-subtle-background);
+  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);
+  --toggleButton-background-selected: var(--salt-actionable-caution-background);
+  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);
+  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);
+  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);
+  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);
+  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);
+  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);
+  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);
+  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);
+  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);
+  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);
 }
 
 /* src/toggle-button-group/ToggleButtonGroup.css */
@@ -4315,6 +4626,16 @@ label.saltText small,
   padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
   flex-direction: row;
 }
+.saltToggleButtonGroup-disabled {
+  background: var(--salt-container-primary-background-disabled);
+  border-color: var(--salt-container-primary-borderColor-disabled);
+  cursor: var(--salt-actionable-cursor-disabled);
+}
+.saltToggleButtonGroup-readOnly {
+  background: var(--salt-container-primary-background);
+  border-color: var(--salt-container-primary-borderColor);
+  cursor: var(--salt-actionable-cursor-disabled);
+}
 .saltToggleButtonGroup .saltToggleButton {
   border-radius: var(--salt-palette-corner-weaker, 0);
 }
@@ -4812,4 +5133,121 @@ label.saltText small,
   top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);
 }
 
-/* src/f36a0096-0ea1-484d-8d21-cc0465aa9951.css */
+/* src/stepper/internal/StepConnector.css */
+.saltStepConnector {
+  grid-area: connector;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  transition-property: opacity, min-height;
+}
+.saltStepper-horizontal .saltStepConnector {
+  position: absolute;
+  transform: translateY(-100%);
+  top: calc(var(--step-icon-size) / 2);
+  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
+  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
+  border-top-width: var(--salt-size-border-strong);
+  border-top-style: var(--salt-track-borderStyle-incomplete);
+  border-top-color: var(--salt-track-borderColor);
+}
+.saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,
+.saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {
+  border-top-style: var(--salt-track-borderStyle-complete);
+}
+.saltStepper-vertical .saltStepConnector {
+  min-height: var(--salt-size-base);
+  align-self: stretch;
+  justify-self: center;
+  border-left-width: var(--salt-size-border-strong);
+  border-left-style: var(--salt-track-borderStyle-incomplete);
+  border-left-color: var(--salt-track-borderColor);
+}
+.saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,
+.saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {
+  border-left-style: var(--salt-track-borderStyle-complete);
+}
+.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {
+  opacity: 0;
+  min-height: 0;
+}
+.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {
+  opacity: 0;
+  min-height: 0;
+}
+
+/* src/stepper/internal/StepExpandTrigger.css */
+.saltStepExpandTrigger {
+  grid-area: expand;
+}
+.saltButton.saltStepExpandTrigger:focus-visible {
+  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
+}
+
+/* src/stepper/internal/StepIcon.css */
+.saltStepIcon {
+  grid-area: icon;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-self: center;
+}
+.saltStepper-vertical .saltStepIcon {
+  height: var(--salt-size-base);
+}
+.saltStep-stage-pending > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-static-foreground);
+}
+.saltStep-stage-locked > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-static-foreground);
+}
+.saltStep-stage-inprogress > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-info-foreground-decorative);
+}
+.saltStep-stage-active > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-info-foreground-decorative);
+}
+.saltStep-stage-completed > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-success-foreground-decorative);
+}
+.saltStep-status-warning > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-warning-foreground-decorative);
+}
+.saltStep-status-error > .saltStepIcon {
+  --saltIcon-color: var(--salt-status-error-foreground-decorative);
+}
+
+/* src/stepper/internal/StepScreenReaderOnly.css */
+
+/* src/stepper/internal/StepText.css */
+.saltStepText-label {
+  grid-area: label;
+}
+.saltStepper-horizontal .saltStepText-label {
+  margin-top: var(--salt-spacing-50);
+}
+.saltStepper-vertical .saltStepText-label {
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
+  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
+  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
+}
+.saltStep-depth-0 > .saltText.saltStepText-label {
+  font-weight: var(--salt-text-fontWeight-strong);
+}
+.saltStep-depth-0 > .saltText.saltStepText-label {
+  font-weight: var(--salt-text-fontWeight-strong);
+}
+.saltStepText-description {
+  grid-area: description;
+}
+.saltStepper-vertical .saltStepText-description {
+  padding-bottom: var(--salt-spacing-300);
+  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
+}
+.saltStep-status-warning > .saltStepText-description {
+  color: var(--salt-status-warning-foreground-informative);
+}
+.saltStep-status-error > .saltStepText-description {
+  color: var(--salt-status-error-foreground-informative);
+}
+
+/* src/ede06708-6fa3-455c-adcb-4f41bff7af69.css */

package/dist-cjs/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      indicatorSide = \"left\",\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const [headerId, setHeaderId] = useState(`${id}-header`);\n    const [panelId, setPanelId] = useState(`${id}-panel`);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          indicatorSide,\n          disabled: Boolean(disabled),\n          headerId,\n          setHeaderId,\n          panelId,\n          setPanelId,\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(status ?? \"\")]: status,\n              [withBaseName(\"disabled\")]: disabled,\n            },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAgB,GAAA,MAAA;AAAA,MAChB,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIC,cAAS,CAAA,CAAA,EAAG,EAAE,CAAS,OAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,IAAIA,cAAS,CAAA,CAAA,EAAG,EAAE,CAAQ,MAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,KACb;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,iCAAiB,CAAA,QAAA;AAAA,MAAjB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,UAC1B,QAAA;AAAA,UACA,WAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,SAAW,EAAAE,SAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb;AAAA,gBACE,CAAC,YAAA,CAAa,MAAU,IAAA,EAAE,CAAC,GAAG,MAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,eAC9B;AAAA,cACA;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA;AACN;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      indicatorSide = \"left\",\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const [headerId, setHeaderId] = useState(`${id}-header`);\n    const [panelId, setPanelId] = useState(`${id}-panel`);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          indicatorSide,\n          disabled: Boolean(disabled),\n          headerId,\n          setHeaderId,\n          panelId,\n          setPanelId,\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(status ?? \"\")]: status,\n              [withBaseName(\"disabled\")]: disabled,\n            },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAgB,GAAA,MAAA;AAAA,MAChB,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIC,cAAS,CAAA,CAAA,EAAG,EAAE,CAAS,OAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,IAAIA,cAAS,CAAA,CAAA,EAAG,EAAE,CAAQ,MAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,KACb;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,iCAAiB,CAAA,QAAA;AAAA,MAAjB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,UAC1B,QAAA;AAAA,UACA,WAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,SAAW,EAAAE,SAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb;AAAA,gBACE,CAAC,YAAA,CAAa,MAAU,IAAA,EAAE,CAAC,GAAG,MAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,eAC9B;AAAA,cACA;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA;AACN;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  headerId: string;\n  setHeaderId: (id: string) => void;\n  panelId: string;\n  setPanelId: (id: string) => void;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    headerId: \"\",\n    setHeaderId: () => undefined,\n    panelId: \"\",\n    setPanelId: () => undefined,\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAgBO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,OAAS,EAAA,EAAA;AAAA,IACT,YAAY,MAAM,KAAA;AAAA;AAEtB;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  headerId: string;\n  setHeaderId: (id: string) => void;\n  panelId: string;\n  setPanelId: (id: string) => void;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    headerId: \"\",\n    setHeaderId: () => undefined,\n    panelId: \"\",\n    setPanelId: () => undefined,\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAgBO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,MAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,aAAa,MAAM,MAAA;AAAA,IACnB,OAAS,EAAA,EAAA;AAAA,IACT,YAAY,MAAM;AAAA;AAEtB;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}

package/dist-cjs/accordion/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The content of the Accordion Header\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  if (expanded) {\n    return <CollapseIcon aria-hidden className={withBaseName(\"icon\")} />;\n  }\n\n  return <ExpandIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, id, ...rest } = props;\n  const {\n    value,\n    expanded,\n    toggle,\n    indicatorSide,\n    disabled,\n    headerId,\n    panelId,\n    setHeaderId,\n    status,\n  } = useAccordion();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion-header\",\n    css: accordionHeaderCss,\n    window: targetWindow,\n  });\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    toggle(event);\n    onClick?.(event);\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (id) {\n      setHeaderId(id);\n    }\n  }, [id, setHeaderId]);\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(status ?? \"\")]: status },\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={headerId}\n      aria-controls={panelId}\n      value={value}\n      type=\"button\"\n      {...rest}\n    >\n      {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n      <span className={withBaseName(\"content\")}>{children}</span>\n      {status && !disabled && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n      {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n    </button>\n  );\n});\n"],"names":["makePrefixer","useIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAmC,EAAA;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA;AAC7C,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,sCAAQ,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA;AAGpE,EAAA,sCAAQ,UAAW,EAAA,EAAA,aAAA,EAAW,MAAC,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAClE;AAEO,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAS,EAAI,EAAA,GAAG,MAAS,GAAA,KAAA;AACtD,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACEC,6BAAa,EAAA;AAEjB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA;AAChB,GACC,EAAA,CAAC,EAAI,EAAA,WAAW,CAAC,CAAA;AAEpB,EACE,uBAAAC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,QACvC;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,eAAe,EAAA,QAAA;AAAA,MACf,EAAI,EAAA,QAAA;AAAA,MACJ,eAAe,EAAA,OAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAkB,aAAA,KAAA,MAAA,oBAAWC,cAAA,CAAA,aAAA,EAAA,EAAc,QAAoB,EAAA,CAAA;AAAA,uCAC/D,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,SAAS,GAAI,QAAS,EAAA,CAAA;AAAA,QACnD,MAAA,IAAU,CAAC,QACV,oBAAAA,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC;AAAA;AAAA,SACF;AAAA,QAED,aAAkB,KAAA,OAAA,oBAAYD,cAAA,CAAA,aAAA,EAAA,EAAc,QAAoB,EAAA;AAAA;AAAA;AAAA,GACnE;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The content of the Accordion Header\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  if (expanded) {\n    return <CollapseIcon aria-hidden className={withBaseName(\"icon\")} />;\n  }\n\n  return <ExpandIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, id, ...rest } = props;\n  const {\n    value,\n    expanded,\n    toggle,\n    indicatorSide,\n    disabled,\n    headerId,\n    panelId,\n    setHeaderId,\n    status,\n  } = useAccordion();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion-header\",\n    css: accordionHeaderCss,\n    window: targetWindow,\n  });\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    toggle(event);\n    onClick?.(event);\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (id) {\n      setHeaderId(id);\n    }\n  }, [id, setHeaderId]);\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(status ?? \"\")]: status },\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={headerId}\n      aria-controls={panelId}\n      value={value}\n      type=\"button\"\n      {...rest}\n    >\n      {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n      <span className={withBaseName(\"content\")}>{children}</span>\n      {status && !disabled && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n      {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n    </button>\n  );\n});\n"],"names":["makePrefixer","useIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAmC,EAAA;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA;AAC7C,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,sCAAQ,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA;AAGpE,EAAA,sCAAQ,UAAW,EAAA,EAAA,aAAA,EAAW,MAAC,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAClE;AAEO,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAS,EAAI,EAAA,GAAG,MAAS,GAAA,KAAA;AACtD,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACEC,6BAAa,EAAA;AAEjB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA;AAChB,GACC,EAAA,CAAC,EAAI,EAAA,WAAW,CAAC,CAAA;AAEpB,EACE,uBAAAC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,QACvC;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,eAAe,EAAA,QAAA;AAAA,MACf,EAAI,EAAA,QAAA;AAAA,MACJ,eAAe,EAAA,OAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAkB,aAAA,KAAA,MAAA,oBAAWC,cAAA,CAAA,aAAA,EAAA,EAAc,QAAoB,EAAA,CAAA;AAAA,uCAC/D,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,SAAS,GAAI,QAAS,EAAA,CAAA;AAAA,QACnD,MAAA,IAAU,CAAC,QACV,oBAAAA,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC;AAAA;AAAA,SACF;AAAA,QAED,aAAkB,KAAA,OAAA,oBAAYD,cAAA,CAAA,aAAA,EAAA,EAAc,QAAoB,EAAA;AAAA;AAAA;AAAA,GACnE;AAEJ,CAAC;;;;"}