@salt-ds/core 1.73.0 → 1.75.0

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # @salt-ds/core
 
+## 1.75.0
+
+### Minor Changes
+
+- eccdb99: Updated `Stepper` styling so the current step and completed progress are easier to pick out:
+
+  - Pending and active steps use `ProgressDraftIcon` and `ProgressActiveIcon`, matching the in-progress icon. These are the default `PendingIcon` and `ActiveIcon` in `SemanticIconProvider`, so `useIcon()` returns them too. To keep the previous icons, pass `iconMap={{ PendingIcon: StepDefaultIcon, ActiveIcon: StepActiveIcon }}`.
+  - Only the active step's label uses the bolder font weight. When the active step is hidden inside a collapsed step, the collapsed step's label uses it instead.
+  - The track after completed and in-progress steps uses the accent color.
+  - Descriptions use the label text style and the secondary text color, so they read as supporting text. Descriptions of steps with a `status` keep their status color.
+  - In a vertical `Stepper`, labels are centered with their icons, and steps are evenly spaced whether or not they have a description.
+
+### Patch Changes
+
+- aa3ce52: Updated `Dialog` border color to use `--salt-container-borderColor` instead of `--salt-separable-tertiary-borderColor`, to align with design.
+
+  The visible change is limited to the Legacy theme. In JPM Brand (Salt Next) and Salt (Interim) both tokens resolve to the same value, so there is no visual difference. In the Legacy theme, the `Dialog` border now uses the solid container border color used by `Card`, instead of the translucent separable border color.
+
+- f68dcb2: Fixed `InteractableCard` not respecting a provided `tabIndex`.
+- 57304f5: Fixed `MegaMenu` returning focus to the trigger in Safari when tabbing out of the last item in the panel. Focus now moves to the next element after the trigger.
+- 57304f5: Fixed `MegaMenu` briefly moving focus to the trigger when tabbing out of the last item in the panel. Focus now moves straight to the next element.
+- 40fb09b: Fixed a disabled tertiary `ComboBox` having a transparent background. It now uses `--salt-editable-tertiary-background-disabled`, like `Input` and `Dropdown`.
+- 57304f5: Fixed leaf `TreeNode`s not being selected when the empty space reserved for the expansion icon is clicked.
+- Updated dependencies [2c3cf5d]
+- Updated dependencies [2c3cf5d]
+  - @salt-ds/icons@1.19.0
+
+## 1.74.0
+
+### Minor Changes
+
+- 3a74bce: Updated `MenuItem` so labels align within a `MenuGroup`. If any item in a group has a leading icon, or a radio or checkbox indicator from a selectable `MenuGroup`, the other items in that group reserve the same space. Items outside a group align with each other, and each submenu aligns its own items.
+
+  When a menu contains a radio or checkbox, leading icons in groups without one sit in a column as wide as a radio or checkbox. Labels after an icon then line up with labels after a radio or checkbox that has no icon beside it.
+
+  Existing menus that mix items with and without icons will now show the labels of items without icons indented to line up with the others in the same group.
+
+- 20db4be: Added resizing to `Drawer`. With `resizable`, users can drag the drawer's edge, click the edge and then click its new position, or use the arrow keys to adjust its size. Set size limits with the `--saltDrawer-minResize` and `--saltDrawer-maxResize` CSS variables, which apply to the width of left and right drawers and the height of top and bottom drawers.
+
+  ```tsx
+  <Drawer resizable style={{ width: 320 }}>
+    <DrawerHeader header="Resizable drawer" />
+    <DrawerContent>Content</DrawerContent>
+  </Drawer>
+  ```
+
+- 3a74bce: Added selection to `Menu`. Set `selectionVariant` on `MenuGroup` to "single" or "multiple" to render its items as radio or checkbox menu items, give each `MenuItem` a `value`, and control the selection with `selected` and `onSelectionChange`. The menu's content unmounts when it closes, so keep the selection in state.
+
+  Clicking a selectable item keeps the menu open. Enter selects the item and closes the menu, and Space selects it and keeps the menu open.
+
+  ```tsx
+  const [sortBy, setSortBy] = useState(["name"]);
+
+  <MenuGroup
+    label="Sort by"
+    selectionVariant="single"
+    selected={sortBy}
+    onSelectionChange={(_event, newSelected) => setSortBy(newSelected)}
+  >
+    <MenuItem value="name">Name</MenuItem>
+    <MenuItem value="size">Size</MenuItem>
+  </MenuGroup>;
+  ```
+
+  Disabled `MenuItem` components can now be focused with the arrow keys so they can be discovered, but they still can't be activated.
+
+  - Fixed a submenu staying open when hovering another item in the parent menu if the submenu's last item was disabled.
+  - Fixed holding Enter on a menu trigger activating the first item once the menu opened.
+
+### Patch Changes
+
+- 20db4be: Fixed `DrawerFooter` clipping its actions when they don't fit on one line. They now wrap onto a new line.
+- 0ac88c9: Fixed `LinkButton` rendering 2px taller than `Button`. It now uses `box-sizing: border-box`, so its border is included in its `--salt-size-base` height.
+- 20db4be: Fixed `DrawerHeader` adding extra space above the header when it has no actions or has a preheader.
+- cdae245: Fixed bordered `ToggleButton` hover and pressed styling. A bordered toggle button now uses the actionable hover border and the actionable active background, border and foreground when pressed, so pressing it shows visible feedback.
+
+  A selected standalone `ToggleButton` now uses the actionable bold hover foreground on hover, and a selected positive solid `ToggleButton` now uses the positive hover background instead of the accented one.
+
+- cdae245: Fixed disabled Tree nodes not matching the design:
+
+  - A disabled selected node now keeps its selected background.
+  - In a multiselect Tree, the checkbox of a disabled node is no longer dimmed twice.
+
 ## 1.73.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -1316,7 +1316,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   z-index: var(--salt-zIndex-modal);
   height: min-content;
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-borderColor);
   box-sizing: border-box;
   border-radius: var(--salt-palette-corner, 0);
 }
@@ -1519,13 +1519,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/drawer/Drawer.css */
 .saltDrawer {
+  --drawer-padding: var(--salt-spacing-300);
   background: var(--drawer-background);
   display: flex;
   flex-direction: column;
   max-height: 100%;
   max-width: 100%;
   overflow: auto;
-  padding: var(--salt-spacing-300);
+  padding: var(--drawer-padding);
   box-shadow: var(--salt-overlayable-shadow-modal);
   z-index: var(--salt-zIndex-drawer);
   position: fixed;
@@ -1533,13 +1534,99 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
 }
 .saltDrawer.saltDrawer-sectioned {
-  padding: 0;
+  --drawer-padding: 0px;
+}
+.saltDrawer-resizing {
+  user-select: none;
 }
 @supports selector(:has(*)) {
-  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {
-    padding: 0;
+  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter),
+  .saltDrawer-inner:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {
+    --drawer-padding: 0px;
   }
 }
+.saltDrawer-resizable {
+  --drawer-resizeHandleSize: var(--salt-size-fixed-600);
+  --drawer-resizeHandleOutset: var(--salt-spacing-150);
+  --drawer-resizeHandleGutter: calc(var(--drawer-resizeHandleSize) + var(--drawer-resizeHandleOutset));
+  --drawer-resizeHandlePadding: var(--salt-spacing-100);
+  overflow: visible;
+  padding: 0;
+}
+.saltDrawer-inner {
+  --drawer-innerResizeHandlePadding: min(var(--drawer-padding), var(--drawer-resizeHandlePadding));
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  padding: var(--drawer-padding);
+  box-sizing: border-box;
+}
+.saltDrawer-resizable.saltDrawer-left {
+  padding-right: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-right {
+  padding-left: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-top {
+  padding-bottom: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-bottom {
+  padding-top: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner {
+  padding-right: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner {
+  padding-left: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner {
+  padding-bottom: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner {
+  padding-top: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {
+  padding-right: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {
+  padding-left: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):last-child {
+  padding-bottom: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):first-child {
+  padding-top: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > .saltDrawerHeader-withAccent:last-child::before {
+  bottom: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > .saltDrawerHeader-withAccent:first-child::before {
+  top: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-left .saltButton-secondary.saltDrawerCloseButton {
+  margin-right: calc(-1 * var(--drawer-innerResizeHandlePadding));
+}
+.saltDrawer-resizable.saltDrawer-bottom .saltButton-secondary.saltDrawerCloseButton {
+  margin-top: calc(-1 * var(--drawer-innerResizeHandlePadding));
+}
+.saltDrawer-resizable {
+  --drawer-resizeLimit: calc(100% - var(--drawer-resizeHandleOutset));
+  --drawer-minResize: min(max(var(--saltDrawer-minResize, 0px), var(--salt-size-base)), var(--drawer-resizeLimit));
+  --drawer-maxResize: min(var(--saltDrawer-maxResize, 100%), var(--drawer-resizeLimit));
+}
+.saltDrawer-resizable.saltDrawer-left,
+.saltDrawer-resizable.saltDrawer-right {
+  min-width: var(--drawer-minResize);
+  max-width: var(--drawer-maxResize);
+}
+.saltDrawer-resizable.saltDrawer-top,
+.saltDrawer-resizable.saltDrawer-bottom {
+  min-height: var(--drawer-minResize);
+  max-height: var(--drawer-maxResize);
+}
 .saltDrawer-primary {
   --drawer-background: var(--salt-container-primary-background);
 }
@@ -1650,6 +1737,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   gap: var(--salt-spacing-100);
   flex-shrink: 0;
   box-sizing: border-box;
+  flex-wrap: wrap;
 }
 
 /* src/drawer/DrawerHeader.css */
@@ -1669,11 +1757,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: flex;
   flex-direction: column;
   gap: var(--salt-spacing-50);
-  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
   align-items: flex-start;
   min-width: 0;
   word-break: break-word;
 }
+.saltDrawerHeader-withCenteredTitle .saltDrawerHeader-container {
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
+}
 .saltDrawerHeader-header > .saltText {
   display: block;
   margin: 0;
@@ -2606,6 +2696,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-style: var(--saltLinkButton-borderStyle, solid);
   border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));
   border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));
+  box-sizing: border-box;
   color: var(--saltLinkButton-text-color, var(--linkButton-text-color));
   display: inline-flex;
   gap: var(--salt-spacing-50);
@@ -3008,6 +3099,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   cursor: var(--salt-cursor-hover);
   box-sizing: border-box;
   flex-shrink: 0;
+  --saltMenuItem-iconColumnWidth: max(var(--salt-size-icon), 12px);
 }
 .saltMenuItem:focus-visible {
   outline: var(--salt-focused-outline);
@@ -3020,7 +3112,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltMenuItem:focus-visible {
   background: var(--salt-selectable-background-hover);
 }
-.saltMenuItem:active {
+.saltMenuItem[role=menuitem]:active {
   background: var(--salt-selectable-background-selected);
   box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
 }
@@ -3040,6 +3132,23 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {
   min-height: var(--salt-text-lineHeight);
 }
+.saltMenuItem .saltMenuItem-selectionIcon {
+  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;
+}
+.saltMenuItem-selectionIconPlaceholder {
+  flex-shrink: 0;
+  width: var(--salt-size-selectable);
+}
+.saltMenuItem-iconPlaceholder {
+  flex-shrink: 0;
+  width: var(--saltMenuItem-iconColumnWidth);
+}
+.saltMenuItem-selectionAlignedIcon {
+  --saltMenuItem-iconColumnWidth: max(var(--salt-size-selectable), var(--salt-size-icon), 12px);
+}
+.saltMenuItem-selectionAlignedIcon > .saltIcon:first-child {
+  margin-inline: max(0px, calc((var(--saltMenuItem-iconColumnWidth) - var(--icon-size)) / 2));
+}
 .saltMenuItem-expandIcon.saltIcon {
   margin-left: auto;
 }
@@ -4286,6 +4395,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPillInput-tertiary {
   --pillInput-background: var(--salt-editable-tertiary-background);
+  --pillInput-background-disabled: var(--salt-editable-tertiary-background-disabled);
   --pillInput-background-readonly: var(--salt-editable-background-readonly);
   --pillInput-borderColor: var(--salt-editable-borderColor);
   --pillInput-borderColor-active: var(--salt-editable-borderColor-active);
@@ -6188,6 +6298,7 @@ label.saltText,
 }
 .saltToggleButton[aria-pressed=true]:hover {
   background: var(--toggleButton-background-selectedHover);
+  color: var(--toggleButton-text-color-selectedHover);
   border-color: var(--toggleButton-borderColor-selectedHover);
 }
 .saltToggleButton[aria-disabled=true] {
@@ -6222,6 +6333,7 @@ label.saltText,
   --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-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-bold-foreground-hover);
   --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);
@@ -6238,6 +6350,7 @@ label.saltText,
   --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-accented-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-accented-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);
@@ -6254,6 +6367,7 @@ label.saltText,
   --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-positive-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-positive-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);
@@ -6263,13 +6377,14 @@ label.saltText,
   --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);
-  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);
 }
 .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-active: var(--salt-actionable-negative-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-negative-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-negative-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);
@@ -6286,6 +6401,7 @@ label.saltText,
   --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-caution-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-caution-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);
@@ -6300,15 +6416,16 @@ label.saltText,
 .saltToggleButton-neutral.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-background);
   --toggleButton-background-hover: var(--salt-actionable-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-background);
+  --toggleButton-background-active: var(--salt-actionable-background-active);
   --toggleButton-background-selected: var(--salt-actionable-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);
@@ -6316,15 +6433,16 @@ label.saltText,
 .saltToggleButton-accented.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-accented-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-accented-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-accented-background);
   --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-accented-background);
+  --toggleButton-background-active: var(--salt-actionable-accented-background-active);
   --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);
@@ -6332,15 +6450,16 @@ label.saltText,
 .saltToggleButton-positive.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-positive-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-positive-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-positive-background);
   --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-positive-background);
+  --toggleButton-background-active: var(--salt-actionable-positive-background-active);
   --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);
@@ -6348,15 +6467,16 @@ label.saltText,
 .saltToggleButton-negative.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-negative-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-negative-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-negative-background);
   --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-negative-background);
+  --toggleButton-background-active: var(--salt-actionable-negative-background-active);
   --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);
@@ -6364,15 +6484,16 @@ label.saltText,
 .saltToggleButton-caution.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-caution-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-caution-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-caution-background);
   --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-caution-background);
+  --toggleButton-background-active: var(--salt-actionable-caution-background-active);
   --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);
@@ -6876,6 +6997,9 @@ label.saltText,
   background: var(--salt-selectable-background);
   color: var(--salt-content-primary-foreground);
 }
+.saltTreeNode-selected.saltTreeNode-disabled > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-selected);
+}
 .saltTreeNodeTrigger > .saltTreeNode-checkbox {
   margin-top: var(--saltTreeNodeTrigger-checkboxOffsetY);
   margin-bottom: 0;
@@ -7044,6 +7168,124 @@ label.saltText,
   font-weight: var(--salt-text-heading-fontWeight-lighter);
 }
 
+/* src/drawer/internal/DrawerResizeGuide.css */
+.saltDrawerResizeGuide {
+  --drawerResizeGuide-borderColor: var(--salt-content-secondary-foreground);
+  --drawerResizeGuide-borderWidth: var(--salt-size-fixed-200);
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--salt-zIndex-drawer) + 1);
+  touch-action: none;
+  user-select: none;
+}
+.saltDrawerResizeGuide::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.saltDrawerResizeGuide-vertical {
+  cursor: var(--salt-cursor-drag-ew);
+}
+.saltDrawerResizeGuide-vertical::before {
+  top: 0;
+  bottom: 0;
+  left: var(--drawerResizeGuide-offset, 0px);
+  width: 0;
+  border-left: var(--drawerResizeGuide-borderWidth) var(--salt-borderStyle-dashed) var(--drawerResizeGuide-borderColor);
+  transform: translateX(-50%);
+}
+.saltDrawerResizeGuide-horizontal {
+  cursor: var(--salt-cursor-drag-ns);
+}
+.saltDrawerResizeGuide-horizontal::before {
+  left: 0;
+  right: 0;
+  top: var(--drawerResizeGuide-offset, 0px);
+  height: 0;
+  border-top: var(--drawerResizeGuide-borderWidth) var(--salt-borderStyle-dashed) var(--drawerResizeGuide-borderColor);
+  transform: translateY(-50%);
+}
+
+/* src/drawer/internal/DrawerResizeHandle.css */
+.saltDrawerResizeHandle {
+  --drawerResizeHandle-thumbSize: max(var(--salt-size-icon, 12px), 12px);
+  --drawerResizeHandle-thumbImage: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M5%2011V9H7V11H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%207L5%205H7L7%207H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%201V3H7V1L5%201Z%22%20%2F%3E%3C%2Fsvg%3E);
+  --drawerResizeHandle-background: transparent;
+  --drawerResizeHandle-background-hover: var(--salt-separable-background-hover);
+  --drawerResizeHandle-background-active: var(--salt-separable-background-active);
+  --drawerResizeHandle-dot-background: var(--salt-separable-foreground);
+  --drawerResizeHandle-dot-background-hover: var(--salt-separable-foreground-hover);
+  --drawerResizeHandle-dot-background-active: var(--salt-separable-foreground-active);
+  --drawerResizeHandle-targetSize: calc(var(--drawer-resizeHandleSize) + 2 * var(--drawer-resizeHandleOutset));
+  position: absolute;
+  z-index: 1;
+  touch-action: none;
+}
+.saltDrawerResizeHandle::before,
+.saltDrawerResizeHandle::after {
+  content: "";
+  position: absolute;
+  inset: var(--drawerResizeHandle-stripInset);
+}
+.saltDrawerResizeHandle::before {
+  background: var(--drawerResizeHandle-background);
+}
+.saltDrawerResizeHandle::after {
+  background: var(--drawerResizeHandle-dot-background);
+  mask-image: var(--drawerResizeHandle-thumbImage);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: var(--drawerResizeHandle-thumbSize);
+  -webkit-mask-image: var(--drawerResizeHandle-thumbImage);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: var(--drawerResizeHandle-thumbSize);
+}
+.saltDrawerResizeHandle-left,
+.saltDrawerResizeHandle-right {
+  --drawerResizeHandle-stripInset: 0 var(--drawer-resizeHandleOutset);
+  top: 0;
+  bottom: 0;
+  width: var(--drawerResizeHandle-targetSize);
+}
+.saltDrawerResizeHandle-left {
+  right: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-right {
+  left: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-top,
+.saltDrawerResizeHandle-bottom {
+  --drawerResizeHandle-thumbImage: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M1%205H3V7H1Z%22%20%2F%3E%3Cpath%20d%3D%22M5%205H7V7H5Z%22%20%2F%3E%3Cpath%20d%3D%22M9%205H11V7H9Z%22%20%2F%3E%3C%2Fsvg%3E);
+  --drawerResizeHandle-stripInset: var(--drawer-resizeHandleOutset) 0;
+  left: 0;
+  right: 0;
+  height: var(--drawerResizeHandle-targetSize);
+}
+.saltDrawerResizeHandle-top {
+  bottom: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-bottom {
+  top: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-hovered {
+  --drawerResizeHandle-background: var(--drawerResizeHandle-background-hover);
+  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-hover);
+}
+.saltDrawerResizeHandle.saltDrawerResizeHandle-resizing {
+  --drawerResizeHandle-background: var(--drawerResizeHandle-background-active);
+  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-active);
+}
+.saltDrawerResizeHandle:focus-visible {
+  outline: none;
+}
+.saltDrawerResizeHandle:focus-visible::before {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-color: var(--salt-focused-outlineColor);
+}
+
 /* src/progress/CircularProgress/CircularProgress.css */
 .saltCircularProgress {
   color: var(--salt-content-primary-foreground);
@@ -7492,9 +7734,10 @@ label.saltText,
 .saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,
 .saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {
   border-top-style: var(--salt-borderStyle-solid);
+  border-top-color: var(--salt-sentiment-accent-background);
 }
 .saltStepper-vertical .saltStepConnector {
-  min-height: var(--salt-size-base);
+  min-height: var(--salt-spacing-300);
   align-self: stretch;
   justify-self: center;
   border-left-width: var(--salt-size-fixed-200);
@@ -7504,6 +7747,7 @@ label.saltText,
 .saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,
 .saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {
   border-left-style: var(--salt-borderStyle-solid);
+  border-left-color: var(--salt-sentiment-accent-background);
 }
 .saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {
   opacity: 0;
@@ -7554,42 +7798,31 @@ label.saltText,
 /* src/stepper/internal/StepText.css */
 .saltStepText-label {
   grid-area: label;
-  font-size: var(--salt-text-fontSize);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
-  color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-text-fontWeight);
 }
 .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-top: var(--salt-spacing-75);
+  padding-bottom: var(--salt-spacing-75);
   padding-left: calc(var(--step-depth) * var(--salt-spacing-100));
 }
-.saltStep-depth-0 > .saltText.saltStepText-label {
+.saltStep-stage-active > .saltText.saltStepText-label,
+.saltStep-collapsed.saltStep-hasActiveStep > .saltText.saltStepText-label {
   font-weight: var(--salt-text-fontWeight-bolder);
 }
+@supports selector(:has(*)) {
+  .saltStep-collapsed:has(.saltStep-stage-active) > .saltText.saltStepText-label {
+    font-weight: var(--salt-text-fontWeight-bolder);
+  }
+}
 .saltStepText-description {
   grid-area: description;
-  color: var(--salt-content-secondary-foreground);
-  font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-bolder);
-  font-family: var(--salt-text-fontFamily);
-  line-height: var(--salt-text-label-lineHeight);
-  letter-spacing: var(--salt-text-letterSpacing);
 }
 .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/tabs/internal/overflow/TabOverflowList.css */
 .saltTabOverflowList {
@@ -7662,4 +7895,4 @@ label.saltText,
   box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
-/* src/b2d72b61-2924-46ba-8d80-fba16b39d5ad.css */
+/* src/d7d4d5de-5c71-4233-bb8d-00bc3ec7d8a7.css */