@salt-ds/core 1.44.1 → 1.45.0

package/dist-cjs/toggle-button/ToggleButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButton {\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--salt-size-border, 0);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--toggleButton-text-color);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: center;\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));\n  margin: 0;\n  height: var(--salt-size-base);\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton: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(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-active);\n  color: var(--toggleButton-text-color-active);\n  cursor: var(--salt-actionable-cursor-active);\n  border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--toggleButton-background-disabled);\n  color: var(--toggleButton-text-color-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n";
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--salt-size-border, 0);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton: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(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-actionable-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled);\n  color: var(--toggleButton-text-color-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled-selected);\n  color: var(--toggleButton-text-color-disabled-selected);\n  border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly);\n  color: var(--toggleButton-text-color-readonly);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly-selected);\n  color: var(--toggleButton-text-color-readonly-selected);\n  border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-background);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-cjs/toggle-button/ToggleButton.js

@@ -20,6 +20,7 @@ const withBaseName = makePrefixer.makePrefixer("saltToggleButton");
 const ToggleButton = React.forwardRef(
   function ToggleButton2(props, ref) {
     const {
+      appearance: appearanceProp,
       children,
       className,
       disabled: disabledProp,
@@ -27,7 +28,9 @@ const ToggleButton = React.forwardRef(
       onClick,
       onFocus,
       onChange,
+      readOnly: readOnlyProp,
       selected: selectedProp,
+      sentiment: sentimenentProp,
       ...rest
     } = props;
     const targetWindow = window.useWindow();
@@ -41,7 +44,10 @@ const ToggleButton = React.forwardRef(
     const toggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup();
     const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
     const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
+    const sentiment = sentimenentProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.sentiment) || "neutral";
+    const appearance = appearanceProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.appearance) || "solid";
     const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
+    const readOnly = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.readOnly) || readOnlyProp;
     const [selected, setSelected] = useControlled.useControlled({
       controlled: toggleButtonGroupSelected,
       default: Boolean(selectedProp),
@@ -49,6 +55,9 @@ const ToggleButton = React.forwardRef(
       state: "selected"
     });
     const handleClick = (event) => {
+      if (disabled || readOnly) {
+        return;
+      }
       toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
       setSelected(!selected);
       onChange == null ? void 0 : onChange(event);
@@ -58,25 +67,29 @@ const ToggleButton = React.forwardRef(
       toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
       onFocus == null ? void 0 : onFocus(event);
     };
-    const ariaChecked = selected && !disabled;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        "aria-pressed": !toggleButtonGroup ? ariaChecked : void 0,
-        "aria-checked": toggleButtonGroup ? ariaChecked : void 0,
-        role: toggleButtonGroup ? "radio" : void 0,
-        className: clsx.clsx(withBaseName(), className),
-        disabled,
-        ref: handleRef,
-        onClick: handleClick,
-        onFocus: handleFocus,
-        tabIndex: focusable && !disabled ? 0 : -1,
-        value,
-        type: "button",
-        ...rest,
-        children
-      }
-    );
+    const toggleButtonProps = {
+      "aria-readonly": readOnlyProp,
+      "aria-pressed": !toggleButtonGroup ? selected : void 0,
+      "aria-checked": toggleButtonGroup ? selected : void 0,
+      "aria-disabled": disabled,
+      role: toggleButtonGroup ? "radio" : void 0,
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(sentiment),
+        withBaseName(appearance),
+        readOnly && withBaseName("readOnly"),
+        className
+      ),
+      onClick: handleClick,
+      onFocus: handleFocus,
+      tabIndex: focusable ? 0 : -1,
+      value,
+      type: "button",
+      disabled,
+      readOnly: readOnlyProp,
+      ...rest
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { ref: handleRef, ...toggleButtonProps, children });
   }
 );
 

package/dist-cjs/toggle-button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  selected?: boolean;\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      selected: selectedProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(selectedProp),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const ariaChecked = selected && !disabled;\n\n    return (\n      <button\n        aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n        aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n        role={toggleButtonGroup ? \"radio\" : undefined}\n        className={clsx(withBaseName(), className)}\n        disabled={disabled}\n        ref={handleRef}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        tabIndex={focusable && !disabled ? 0 : -1}\n        value={value}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The appearance of the toggle button.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      appearance: appearanceProp,\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      sentiment: sentimenentProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(selectedProp),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ToggleButtonProps = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      readOnly: readOnlyProp,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","clsx"],"mappings":"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"}

package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-cjs/toggle-button-group/ToggleButtonGroup.js

@@ -18,6 +18,7 @@ var ToggleButtonGroupContext = require('./ToggleButtonGroupContext.js');
 const withBaseName = makePrefixer.makePrefixer("saltToggleButtonGroup");
 const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, ref) {
   const {
+    appearance,
     children,
     className,
     value: valueProp,
@@ -26,6 +27,8 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
     onChange,
     onKeyDown,
     orientation = "horizontal",
+    readOnly,
+    sentiment,
     ...rest
   } = props;
   const targetWindow = window.useWindow();
@@ -70,14 +73,27 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
   );
   const contextValue = React.useMemo(
     () => ({
-      select,
-      isSelected,
+      appearance,
+      disabled,
       focus,
       isFocused,
-      disabled,
-      orientation
+      isSelected,
+      orientation,
+      readOnly,
+      select,
+      sentiment
     }),
-    [select, isSelected, isFocused, disabled, orientation, focus]
+    [
+      appearance,
+      disabled,
+      focus,
+      isFocused,
+      isSelected,
+      orientation,
+      readOnly,
+      select,
+      sentiment
+    ]
   );
   const handleKeyDown = (event) => {
     var _a, _b, _c;
@@ -102,7 +118,15 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
   return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: clsx.clsx(withBaseName(), withBaseName(orientation), className),
+      "aria-disabled": disabled,
+      "aria-readonly": readOnly,
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(orientation),
+        disabled && withBaseName("disabled"),
+        readOnly && withBaseName("readOnly"),
+        className
+      ),
       role: "radiogroup",
       ref: handleRef,
       onKeyDown: handleKeyDown,

package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      focus,\n      isFocused,\n      disabled,\n      orientation,\n    }),\n    [select, isSelected, isFocused, disabled, orientation, focus],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), withBaseName(orientation), className)}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The appearance of all the toggle buttons within the group.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Value of the toggle button group, to be used when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button group will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The visual sentimenent of all the toggle buttons within the group.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    appearance,\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    readOnly,\n    sentiment,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    }),\n    [\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    ],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        aria-disabled={disabled}\n        aria-readonly={readOnly}\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          disabled && withBaseName(\"disabled\"),\n          readOnly && withBaseName(\"readOnly\"),\n          className,\n        )}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}

package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (id: Value) => boolean;\n  focus: (id: Value) => void;\n  isFocused: (id: Value) => boolean;\n  orientation: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAca,MAAA,wBAAA,GAA2BA,2BAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA;AAC5C;;;;;"}
+{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  disabled?: boolean;\n  focus: (id: Value) => void;\n  isFocused: (id: Value) => boolean;\n  isSelected: (id: Value) => boolean;\n  orientation: \"horizontal\" | \"vertical\";\n  readOnly?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  sentiment?: ButtonSentiment;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAkBa,MAAA,wBAAA,GAA2BA,2BAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA;AAC5C;;;;;"}

package/dist-es/index.js

@@ -90,6 +90,8 @@ export { StackLayout } from './stack-layout/StackLayout.js';
 export { StatusAdornment } from './status-adornment/StatusAdornment.js';
 export { StatusIndicator } from './status-indicator/StatusIndicator.js';
 export { VALIDATION_NAMED_STATUS } from './status-indicator/ValidationStatus.js';
+export { Stepper } from './stepper/Stepper.js';
+export { Step } from './stepper/Step.js';
 export { Text } from './text/Text.js';
 export { Code } from './text/Code.js';
 export { Display1, Display2, Display3, Display4 } from './text/Display.js';

package/dist-es/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-es/stepper/Step.css.js

@@ -0,0 +1,4 @@
+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";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.css.js.map

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

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

package/dist-es/stepper/Step.js

@@ -0,0 +1,164 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { useContext, useEffect } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './Step.css.js';
+import { Stepper } from './Stepper.js';
+import { StepConnector } from './internal/StepConnector.js';
+import { StepExpandTrigger } from './internal/StepExpandTrigger.js';
+import { StepIcon } from './internal/StepIcon.js';
+import { StepScreenReaderOnly } from './internal/StepScreenReaderOnly.js';
+import { StepText } from './internal/StepText.js';
+import { StepDepthContext, StepperOrientationContext } from './internal/StepperProvider.js';
+
+const withBaseName = makePrefixer("saltStep");
+function Step({
+  id: idProp,
+  label,
+  description,
+  status,
+  stage = "pending",
+  expanded: expandedProp,
+  defaultExpanded,
+  onToggle,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const id = useId(idProp);
+  const targetWindow = useWindow();
+  const depth = useContext(StepDepthContext);
+  const orientation = useContext(StepperOrientationContext);
+  const hasNestedSteps = !!children;
+  const [expanded, setExpanded] = useControlled({
+    name: "Step",
+    state: "expanded",
+    controlled: expandedProp,
+    default: Boolean(defaultExpanded)
+  });
+  useComponentCssInjection({
+    testId: "salt-step",
+    css: css_248z,
+    window: targetWindow
+  });
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production") {
+      if (depth === -1) {
+        console.warn("<Step /> should be used within a <Stepper /> component!");
+      }
+      if (depth > 2) {
+        console.warn("<Step /> should not be nested more than 2 levels deep!");
+      }
+      if (orientation === "horizontal" && hasNestedSteps) {
+        console.warn(
+          "<Stepper /> does not support nested steps in horizontal orientation!"
+        );
+      }
+    }
+  }, [depth, orientation]);
+  const ariaCurrent = stage === "active" ? "step" : void 0;
+  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;
+  const stageText = stage === "inprogress" ? "in progress" : stage;
+  const state = status || stageText;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const expandTriggerId = `${id}-expand-trigger`;
+  const nestedStepperId = `${id}-nested-stepper`;
+  const screenReaderOnly = {
+    stateId: `${id}-sr-only-state`,
+    stateText: state !== "active" ? state : "",
+    substepsId: `${id}-sr-only-substeps`,
+    substepsText: "substeps",
+    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,
+    toggleSubstepsText: "toggle substeps"
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id,
+      "aria-current": ariaCurrent,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`stage-${stage}`),
+        withBaseName(`depth-${depth}`),
+        status && withBaseName(`status-${status}`),
+        !hasNestedSteps && withBaseName("terminal"),
+        hasNestedSteps && expanded && withBaseName("expanded"),
+        hasNestedSteps && !expanded && withBaseName("collapsed"),
+        className
+      ),
+      style: {
+        "--saltStep-depth": depth,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(StepScreenReaderOnly, { children: `${label} ${description !== void 0 ? description : ""} ${screenReaderOnly.stateText}` }),
+        hasNestedSteps && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            StepScreenReaderOnly,
+            {
+              id: screenReaderOnly.toggleSubstepsId,
+              "aria-hidden": true,
+              children: screenReaderOnly.toggleSubstepsText
+            }
+          ),
+          /* @__PURE__ */ jsx(StepScreenReaderOnly, { id: screenReaderOnly.substepsId, "aria-hidden": true, children: screenReaderOnly.substepsText }),
+          /* @__PURE__ */ jsx(StepScreenReaderOnly, { id: screenReaderOnly.stateId, "aria-hidden": true, children: screenReaderOnly.stateText })
+        ] }),
+        /* @__PURE__ */ jsx(StepConnector, {}),
+        /* @__PURE__ */ jsx(
+          StepIcon,
+          {
+            stage,
+            status,
+            sizeMultiplier: iconSizeMultiplier,
+            "aria-hidden": true
+          }
+        ),
+        label && /* @__PURE__ */ jsx(StepText, { id: labelId, purpose: "label", "aria-hidden": true, children: label }),
+        description && /* @__PURE__ */ jsx(StepText, { id: descriptionId, purpose: "description", "aria-hidden": true, children: description }),
+        hasNestedSteps && orientation === "vertical" && /* @__PURE__ */ jsx(
+          StepExpandTrigger,
+          {
+            id: expandTriggerId,
+            "aria-expanded": expanded,
+            "aria-controls": nestedStepperId,
+            "aria-labelledby": [
+              labelId,
+              descriptionId,
+              screenReaderOnly.stateId,
+              screenReaderOnly.toggleSubstepsId
+            ].join(" "),
+            expanded,
+            onClick: (event) => {
+              onToggle == null ? void 0 : onToggle(event);
+              setExpanded(!expanded);
+            }
+          }
+        ),
+        hasNestedSteps && orientation === "vertical" && /* @__PURE__ */ jsx(
+          Stepper,
+          {
+            id: nestedStepperId,
+            "aria-labelledby": [labelId, screenReaderOnly.substepsId].join(" "),
+            "aria-hidden": !expanded,
+            hidden: !expanded,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Step };
+//# sourceMappingURL=Step.js.map

package/dist-es/stepper/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\n\nimport type { ButtonProps } from \"../button\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport {\n  StepDepthContext,\n  StepperOrientationContext,\n} from \"./internal/StepperProvider\";\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  /**\n   * The label of the step\n   */\n  label?: ReactNode;\n  /**\n   * Description text is displayed just below the label\n   **/\n  description?: ReactNode;\n  /**\n   * Optional string to determine the status of the step.\n   */\n  status?: StepStatus;\n  /**\n   * The stage of the step\n   */\n  stage?: StepStage;\n  /**\n   * Whether the step item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Initial expanded state of the step.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the step is toggled.\n   */\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n  | \"pending\"\n  | \"locked\"\n  | \"completed\"\n  | \"inprogress\"\n  | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  label?: ReactNode;\n  description?: ReactNode;\n  status?: StepStatus;\n  stage?: StepStage;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport function Step({\n  id: idProp,\n  label,\n  description,\n  status,\n  stage = \"pending\",\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n  className,\n  style,\n  children,\n  ...rest\n}: StepProps) {\n  const id = useId(idProp);\n  const targetWindow = useWindow();\n  const depth = useContext(StepDepthContext);\n  const orientation = useContext(StepperOrientationContext);\n\n  const hasNestedSteps = !!children;\n\n  const [expanded, setExpanded] = useControlled({\n    name: \"Step\",\n    state: \"expanded\",\n    controlled: expandedProp,\n    default: Boolean(defaultExpanded),\n  });\n\n  useComponentCssInjection({\n    testId: \"salt-step\",\n    css: stepCSS,\n    window: targetWindow,\n  });\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (depth === -1) {\n        console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n      }\n      if (depth > 2) {\n        console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n      }\n      if (orientation === \"horizontal\" && hasNestedSteps) {\n        console.warn(\n          \"<Stepper /> does not support nested steps in horizontal orientation!\",\n        );\n      }\n    }\n  }, [depth, orientation]);\n\n  const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n  const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n  const state = status || stageText;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const expandTriggerId = `${id}-expand-trigger`;\n  const nestedStepperId = `${id}-nested-stepper`;\n\n  const screenReaderOnly = {\n    stateId: `${id}-sr-only-state`,\n    stateText: state !== \"active\" ? state : \"\",\n    substepsId: `${id}-sr-only-substeps`,\n    substepsText: \"substeps\",\n    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n    toggleSubstepsText: \"toggle substeps\",\n  };\n\n  return (\n    <li\n      id={id}\n      aria-current={ariaCurrent}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`stage-${stage}`),\n        withBaseName(`depth-${depth}`),\n        status && withBaseName(`status-${status}`),\n        !hasNestedSteps && withBaseName(\"terminal\"),\n        hasNestedSteps && expanded && withBaseName(\"expanded\"),\n        hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n        className,\n      )}\n      style={\n        {\n          \"--saltStep-depth\": depth,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n    >\n      <StepScreenReaderOnly>\n        {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n      </StepScreenReaderOnly>\n      {hasNestedSteps && (\n        <>\n          <StepScreenReaderOnly\n            id={screenReaderOnly.toggleSubstepsId}\n            aria-hidden\n          >\n            {screenReaderOnly.toggleSubstepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n            {screenReaderOnly.substepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n            {screenReaderOnly.stateText}\n          </StepScreenReaderOnly>\n        </>\n      )}\n      <StepConnector />\n      <StepIcon\n        stage={stage}\n        status={status}\n        sizeMultiplier={iconSizeMultiplier}\n        aria-hidden\n      />\n      {label && (\n        <StepText id={labelId} purpose=\"label\" aria-hidden>\n          {label}\n        </StepText>\n      )}\n      {description && (\n        <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n          {description}\n        </StepText>\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <StepExpandTrigger\n          id={expandTriggerId}\n          aria-expanded={expanded}\n          aria-controls={nestedStepperId}\n          aria-labelledby={[\n            labelId,\n            descriptionId,\n            screenReaderOnly.stateId,\n            screenReaderOnly.toggleSubstepsId,\n          ].join(\" \")}\n          expanded={expanded}\n          onClick={(event) => {\n            onToggle?.(event);\n            setExpanded(!expanded);\n          }}\n        />\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <Stepper\n          id={nestedStepperId}\n          aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n          aria-hidden={!expanded}\n          hidden={!expanded}\n        >\n          {children}\n        </Stepper>\n      )}\n    </li>\n  );\n}\n"],"names":["stepCSS"],"mappings":"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"}

package/dist-es/stepper/Stepper.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepper {\n  grid-area: stepper;\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  transition-duration: var(--salt-duration-perceptible);\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, visibility;\n}\n\n@media (prefers-reduced-motion) {\n  .saltStepper {\n    transition-duration: var(--salt-duration-instant);\n  }\n}\n\n.saltStepper-horizontal {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltStepper-vertical {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.saltStepper-vertical > .saltStep.saltStep-expanded > .saltStepper {\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltStepper-vertical > .saltStep.saltStep-collapsed > .saltStepper {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Stepper.css.js.map

package/dist-es/stepper/Stepper.css.js.map

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

package/dist-es/stepper/Stepper.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './Stepper.css.js';
+import { StepperOrientationContext, StepperProvider } from './internal/StepperProvider.js';
+
+const withBaseName = makePrefixer("saltStepper");
+const Stepper = forwardRef(
+  function Stepper2({ orientation: orientationProp, children, className, ...props }, ref) {
+    const targetWindow = useWindow();
+    const orientationContext = useContext(StepperOrientationContext);
+    const orientation = orientationProp || orientationContext;
+    useComponentCssInjection({
+      testId: "salt-Stepper",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(StepperProvider, { orientation, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: clsx(withBaseName(), withBaseName(orientation), className),
+        ref,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+
+export { Stepper };
+//# sourceMappingURL=Stepper.js.map

package/dist-es/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport StepperCSS from \"./Stepper.css\";\nimport {\n  StepperOrientationContext,\n  StepperProvider,\n} from \"./internal/StepperProvider\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * The orientation of the stepper: defaults to horizontal.\n   */\n  orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n  function Stepper(\n    { orientation: orientationProp, children, className, ...props },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const orientationContext = useContext(StepperOrientationContext);\n    const orientation = orientationProp || orientationContext;\n\n    useComponentCssInjection({\n      testId: \"salt-Stepper\",\n      css: StepperCSS,\n      window: targetWindow,\n    });\n\n    return (\n      <StepperProvider orientation={orientation}>\n        <ol\n          className={clsx(withBaseName(), withBaseName(orientation), className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </ol>\n      </StepperProvider>\n    );\n  },\n);\n"],"names":["Stepper","StepperCSS"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAWxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QACP,CAAA,EAAE,WAAa,EAAA,eAAA,EAAiB,UAAU,SAAW,EAAA,GAAG,KAAM,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAM,MAAA,kBAAA,GAAqB,WAAW,yBAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAmB,IAAA,kBAAA;AAEvC,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA,CAAC,mBAAgB,WACf,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/stepper/internal/StepConnector.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltStepper-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-border-strong);\n  border-top-style: var(--salt-track-borderStyle-incomplete);\n  border-top-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStepper-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-border-strong);\n  border-left-style: var(--salt-track-borderStyle-incomplete);\n  border-left-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StepConnector.css.js.map

package/dist-es/stepper/internal/StepConnector.css.js.map

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