@salt-ds/core 1.44.1 → 1.45.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @salt-ds/core
 
+## 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/23e6c7a7-6a85-4aa2-93f8-b3667717b2b2.css */

package/dist-cjs/index.js

@@ -92,6 +92,8 @@ var StackLayout = require('./stack-layout/StackLayout.js');
 var StatusAdornment = require('./status-adornment/StatusAdornment.js');
 var StatusIndicator = require('./status-indicator/StatusIndicator.js');
 var ValidationStatus = require('./status-indicator/ValidationStatus.js');
+var Stepper = require('./stepper/Stepper.js');
+var Step = require('./stepper/Step.js');
 var Text = require('./text/Text.js');
 var Code = require('./text/Code.js');
 var Display = require('./text/Display.js');
@@ -252,6 +254,8 @@ exports.StackLayout = StackLayout.StackLayout;
 exports.StatusAdornment = StatusAdornment.StatusAdornment;
 exports.StatusIndicator = StatusIndicator.StatusIndicator;
 exports.VALIDATION_NAMED_STATUS = ValidationStatus.VALIDATION_NAMED_STATUS;
+exports.Stepper = Stepper.Stepper;
+exports.Step = Step.Step;
 exports.Text = Text.Text;
 exports.Code = Code.Code;
 exports.Display1 = Display.Display1;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/stepper/Step.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStep {\n  /* Copy of size calculations of <Icon /> */\n  --step-icon-base-size: var(--salt-size-icon, 12px);\n  --step-icon-size-multiplier: var(--saltIcon-size-multiplier, 1.5);\n  --step-icon-size: calc(var(--step-icon-base-size) * var(--step-icon-size-multiplier));\n  --step-depth: var(--saltStep-depth, 0);\n}\n\n.saltStepper-horizontal .saltStep {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(3, min-content);\n  grid-template-areas:\n    \"icon\"\n    \"label\"\n    \"description\";\n  justify-items: center;\n  align-items: center;\n  text-align: center;\n  flex: 1;\n  padding: 0 var(--salt-spacing-25);\n}\n\n.saltStepper-vertical .saltStep {\n  display: grid;\n  grid-template-columns: var(--step-icon-size) 1fr min-content;\n  grid-template-areas:\n    \"icon            label           expand\"\n    \"connector       description     .\"\n    \"stepper         stepper         stepper\";\n  justify-items: start;\n  align-items: start;\n  gap: 0 var(--salt-spacing-100);\n  width: 100%;\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: grid-template-rows;\n}\n\n.saltStepper-vertical .saltStep-terminal {\n  grid-template-areas:\n    \"icon            label           label\"\n    \"connector       description     description\"\n    \"stepper         stepper         stepper\";\n}\n\n.saltStepper-vertical > .saltStep.saltStep-expanded {\n  grid-template-rows:\n    var(--salt-size-base)\n    min-content\n    1fr;\n}\n\n.saltStepper-vertical > .saltStep.saltStep-collapsed {\n  grid-template-rows:\n    var(--salt-size-base)\n    min-content\n    0fr;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Step.css.js.map

package/dist-cjs/stepper/Step.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}