@salt-ds/core 1.73.0 → 1.74.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @salt-ds/core
 
+## 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

@@ -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;
 }
@@ -6188,6 +6297,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 +6332,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 +6349,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 +6366,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 +6376,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 +6400,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 +6415,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 +6432,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 +6449,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 +6466,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 +6483,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 +6996,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 +7167,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);
@@ -7662,4 +7903,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/92ad5b70-6538-4237-91eb-564c13b73316.css */

package/dist-cjs/drawer/Drawer.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  /* Legacy padding for unsectioned drawers only. */\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawer.saltDrawer-sectioned {\n  padding: 0;\n}\n\n@supports selector(:has(*)) {\n  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {\n    padding: 0;\n  }\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n  --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  --drawer-padding: var(--salt-spacing-300);\n\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  /* Legacy padding for unsectioned drawers only. */\n  padding: var(--drawer-padding);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawer.saltDrawer-sectioned {\n  --drawer-padding: 0px;\n}\n\n.saltDrawer-resizing {\n  user-select: none;\n}\n\n@supports selector(:has(*)) {\n  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter),\n  .saltDrawer-inner:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {\n    --drawer-padding: 0px;\n  }\n}\n\n.saltDrawer-resizable {\n  --drawer-resizeHandleSize: var(--salt-size-fixed-600);\n  --drawer-resizeHandleOutset: var(--salt-spacing-150);\n  --drawer-resizeHandleGutter: calc(var(--drawer-resizeHandleSize) + var(--drawer-resizeHandleOutset));\n  /* With the gutter, approximates spacing-300 beside the handle */\n  --drawer-resizeHandlePadding: var(--salt-spacing-100);\n  overflow: visible;\n  padding: 0;\n}\n\n/* Styles applied to the scrolling inner element of a resizable drawer */\n.saltDrawer-inner {\n  /* min() keeps sectioned drawers at 0, as their sections own the padding */\n  --drawer-innerResizeHandlePadding: min(var(--drawer-padding), var(--drawer-resizeHandlePadding));\n\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n  overflow: auto;\n  padding: var(--drawer-padding);\n  box-sizing: border-box;\n}\n\n/* Reserve the handle's inner hit target */\n.saltDrawer-resizable.saltDrawer-left {\n  padding-right: var(--drawer-resizeHandleGutter);\n}\n\n.saltDrawer-resizable.saltDrawer-right {\n  padding-left: var(--drawer-resizeHandleGutter);\n}\n\n.saltDrawer-resizable.saltDrawer-top {\n  padding-bottom: var(--drawer-resizeHandleGutter);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom {\n  padding-top: var(--drawer-resizeHandleGutter);\n}\n\n/* Reduce the padding beside the handle */\n.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner {\n  padding-right: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner {\n  padding-left: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner {\n  padding-bottom: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner {\n  padding-top: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {\n  padding-right: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {\n  padding-left: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):last-child {\n  padding-bottom: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):first-child {\n  padding-top: var(--drawer-resizeHandlePadding);\n}\n\n/* Keeps the header accent bar level with the header's content */\n.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > .saltDrawerHeader-withAccent:last-child::before {\n  bottom: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > .saltDrawerHeader-withAccent:first-child::before {\n  top: var(--drawer-resizeHandlePadding);\n}\n\n/* Keeps the deprecated close button in the corner, clear of the handle */\n.saltDrawer-resizable.saltDrawer-left .saltButton-secondary.saltDrawerCloseButton {\n  margin-right: calc(-1 * var(--drawer-innerResizeHandlePadding));\n}\n\n.saltDrawer-resizable.saltDrawer-bottom .saltButton-secondary.saltDrawerCloseButton {\n  margin-top: calc(-1 * var(--drawer-innerResizeHandlePadding));\n}\n\n/* Resize limits stay at least --salt-size-base and leave room on screen for the handle's outside target */\n.saltDrawer-resizable {\n  --drawer-resizeLimit: calc(100% - var(--drawer-resizeHandleOutset));\n  --drawer-minResize: min(max(var(--saltDrawer-minResize, 0px), var(--salt-size-base)), var(--drawer-resizeLimit));\n  --drawer-maxResize: min(var(--saltDrawer-maxResize, 100%), var(--drawer-resizeLimit));\n}\n\n.saltDrawer-resizable.saltDrawer-left,\n.saltDrawer-resizable.saltDrawer-right {\n  min-width: var(--drawer-minResize);\n  max-width: var(--drawer-maxResize);\n}\n\n.saltDrawer-resizable.saltDrawer-top,\n.saltDrawer-resizable.saltDrawer-bottom {\n  min-height: var(--drawer-minResize);\n  max-height: var(--drawer-maxResize);\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n  --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Drawer.css.js.map