@salt-ds/lab 1.0.0-alpha.86 → 1.0.0-alpha.88

package/CHANGELOG.md

@@ -1,5 +1,131 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.88
+
+### Patch Changes
+
+- cfc1591: Simplify disabled styling across the system. This affected the following components:
+
+  ## Core
+
+  - Checkbox
+  - Combo box
+  - Dropdown
+  - List box
+  - Radio button
+  - Slider
+  - Switch
+
+  ## Lab
+
+  - Tree
+
+- 89429e2: Updated accent token usage, to align to the recent theme change.
+- Updated dependencies [5c36edc]
+- Updated dependencies [cfc1591]
+- Updated dependencies [89429e2]
+- Updated dependencies [0a08ae0]
+- Updated dependencies [49b3486]
+- Updated dependencies [5c36edc]
+  - @salt-ds/core@1.59.0
+  - @salt-ds/icons@1.18.0
+
+## 1.0.0-alpha.87
+
+### Minor Changes
+
+- 133a519: Removed `Kbd` from lab and promoted to core.
+- 23b5f53: Added tertiary variant support to `DateInputRange` and `DateInputSingle`.
+- b1a3e45: ## Summary
+
+  New `Tree`, `TreeNode`, and `TreeNodeTrigger` components for displaying hierarchical data with expand/collapse, selection, and keyboard navigation.
+
+  **What's included**
+
+  - Single and multi-select modes with optional checkbox variant
+  - Controlled and uncontrolled expanded/selected states
+  - Selection propagation to descendants and ancestors in multiselect mode
+  - Keyboard navigation (arrows, Home, End, Enter, Space, type-ahead)
+  - Disabled state at tree or individual node level
+  - Custom icons per node
+  - `TreeNodeTrigger` for custom row content (e.g. wrapping with `Tooltip`); use inside `TreeNode` when you need more than the default `label`
+
+  ## Examples
+
+  **Basic Tree** — use `TreeNode` with the `label` prop, optionally including an `icon` prop
+
+  ```tsx
+  import {
+    FolderOpenIcon,
+    FolderClosedIcon,
+    DocumentIcon,
+  } from "@salt-ds/icons";
+  import { Tree, TreeNode } from "@salt-ds/lab";
+
+  <Tree aria-label="File browser" defaultExpanded={["documents"]}>
+    <TreeNode value="documents" label="Documents" icon={FolderOpenIcon}>
+      <TreeNode value="reports" label="Reports" icon={FolderClosedIcon}>
+        <TreeNode
+          value="annual-report"
+          label="Annual Report"
+          icon={DocumentIcon}
+        />
+        <TreeNode
+          value="quarterly-report"
+          label="Quarterly Report"
+          icon={DocumentIcon}
+        />
+      </TreeNode>
+      <TreeNode value="invoices" label="Invoices" icon={FolderClosedIcon}>
+        <TreeNode value="invoice-001" label="Invoice 001" icon={DocumentIcon} />
+        <TreeNode value="invoice-002" label="Invoice 002" icon={DocumentIcon} />
+      </TreeNode>
+    </TreeNode>
+    <TreeNode value="downloads" label="Downloads" icon={FolderClosedIcon} />
+  </Tree>;
+  ```
+
+  **Tree with Tooltip** — use `TreeNodeTrigger` and `TreeNodeLabel` inside `TreeNode` when you need to wrap the row (e.g. in a `Tooltip`). Icons can be passed as direct children of `TreeNodeTrigger`.
+
+  ```tsx
+  import { Tooltip } from "@salt-ds/core";
+  import { FolderOpenIcon, FolderClosedIcon } from "@salt-ds/icons";
+  import { Tree, TreeNode, TreeNodeLabel, TreeNodeTrigger } from "@salt-ds/lab";
+
+  <Tree aria-label="File browser" defaultExpanded={["documents"]}>
+    <TreeNode value="documents">
+      <Tooltip content="Contains all document files" placement="right">
+        <TreeNodeTrigger>
+          <FolderOpenIcon aria-hidden />
+          <TreeNodeLabel>Documents</TreeNodeLabel>
+        </TreeNodeTrigger>
+      </Tooltip>
+      <TreeNode value="reports">
+        <Tooltip content="Financial reports folder" placement="right">
+          <TreeNodeTrigger>
+            <FolderClosedIcon aria-hidden />
+            <TreeNodeLabel>Reports</TreeNodeLabel>
+          </TreeNodeTrigger>
+        </Tooltip>
+        <TreeNode value="annual-report" label="Annual Report" />
+        <TreeNode value="quarterly-report" label="Quarterly Report" />
+      </TreeNode>
+    </TreeNode>
+    <TreeNode value="downloads" label="Downloads" />
+  </Tree>;
+  ```
+
+### Patch Changes
+
+- aae0846: Fixed some controls having empty `aria-labelledby` or `aria-describedby` attributes when used outside a FormField.
+- 852256d: Fixed `Rating` not inheriting readOnly and disabled states from form fields.
+- fdb9cfc: Updated Rating to fix alignment issues and improve spacing.
+- Updated dependencies [23b5f53]
+- Updated dependencies [aae0846]
+- Updated dependencies [133a519]
+- Updated dependencies [503c186]
+  - @salt-ds/core@1.58.0
+
 ## 1.0.0-alpha.86
 
 ### Minor Changes

package/css/salt-lab.css

@@ -654,7 +654,7 @@
 .saltContactDetails {
   --contactDetails-color: var(--salt-content-primary-foreground);
   --contactDetails-label-color: var(--salt-content-secondary-foreground);
-  --contactDetails-noAvatar-color: var(--salt-accent-background);
+  --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);
   --contactDetails-noAvatar-indicator-width: 4px;
   --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);
   --contactDetails-favoriteToggle-marginRight: 0px;
@@ -820,7 +820,7 @@
   outline: var(--salt-focused-outline);
 }
 .saltContactFavoriteToggle-deselected {
-  --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);
+  --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);
 }
 .saltContactFavoriteToggle-selecting {
   --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);
@@ -884,7 +884,6 @@
   width: 100%;
 }
 .saltDateInput:hover {
-  background: var(--saltDateInput-background-hover, var(--input-background-hover));
   cursor: var(--salt-cursor-text);
 }
 .saltDateInput-bordered.saltDateInput {
@@ -944,10 +943,8 @@
 }
 .saltDateInput-primary {
   --input-background: var(--salt-editable-primary-background);
-  --input-background-active: var(--salt-editable-primary-background-active);
-  --input-background-hover: var(--salt-editable-primary-background-hover);
   --input-background-disabled: var(--salt-editable-primary-background-disabled);
-  --input-background-readonly: var(--salt-editable-primary-background-readonly);
+  --input-background-readonly: var(--salt-editable-background-readonly);
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderColor-active: var(--salt-editable-borderColor-active);
   --input-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -955,10 +952,16 @@
 }
 .saltDateInput-secondary {
   --input-background: var(--salt-editable-secondary-background);
-  --input-background-active: var(--salt-editable-secondary-background-active);
-  --input-background-hover: var(--salt-editable-secondary-background-active);
   --input-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --input-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --input-background-readonly: var(--salt-editable-background-readonly);
+  --input-borderColor: var(--salt-editable-borderColor);
+  --input-borderColor-active: var(--salt-editable-borderColor-active);
+  --input-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --input-outlineColor: var(--salt-focused-outlineColor);
+}
+.saltDateInput-tertiary {
+  --input-background: var(--salt-editable-tertiary-background);
+  --input-background-readonly: var(--salt-editable-background-readonly);
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderColor-active: var(--salt-editable-borderColor-active);
   --input-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -966,8 +969,6 @@
 }
 .saltDateInput-error {
   --input-background: var(--salt-status-error-background);
-  --input-background-active: var(--salt-status-error-background);
-  --input-background-hover: var(--salt-status-error-background);
   --input-background-readonly: var(--salt-status-error-background);
   --input-borderColor: var(--salt-status-error-borderColor);
   --input-borderColor-active: var(--salt-status-error-borderColor);
@@ -976,8 +977,6 @@
 }
 .saltDateInput-warning {
   --input-background: var(--salt-status-warning-background);
-  --input-background-active: var(--salt-status-warning-background);
-  --input-background-hover: var(--salt-status-warning-background);
   --input-background-readonly: var(--salt-status-warning-background);
   --input-borderColor: var(--salt-status-warning-borderColor);
   --input-borderColor-active: var(--salt-status-warning-borderColor);
@@ -986,8 +985,6 @@
 }
 .saltDateInput-success {
   --input-background: var(--salt-status-success-background);
-  --input-background-active: var(--salt-status-success-background);
-  --input-background-hover: var(--salt-status-success-background);
   --input-background-readonly: var(--salt-status-success-background);
   --input-borderColor: var(--salt-status-success-borderColor);
   --input-borderColor-active: var(--salt-status-success-borderColor);
@@ -996,7 +993,6 @@
 }
 .saltDateInput-focused,
 .saltDateInput-focused:hover {
-  background: var(--saltDateInput-background-active, var(--input-background-active));
   cursor: var(--salt-cursor-text);
   outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
 }
@@ -1771,36 +1767,6 @@
   padding-right: var(--inputLegacy-staticAdornment-padding);
 }
 
-/* src/kbd/Kbd.css */
-.saltKbd-primary {
-  --kbd-background: var(--salt-container-primary-background);
-}
-.saltKbd-secondary {
-  --kbd-background: var(--salt-container-secondary-background);
-}
-.saltKbd-tertiary {
-  --kbd-background: var(--salt-container-tertiary-background);
-}
-.saltKbd {
-  display: inline-flex;
-  box-sizing: border-box;
-  width: fit-content;
-  border-radius: var(--salt-palette-corner-weaker);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
-  background: var(--kbd-background);
-  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);
-  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  align-items: center;
-  padding: 0 var(--salt-spacing-50);
-  text-transform: capitalize;
-  color: var(--salt-content-primary-foreground);
-  font-family: var(--salt-text-code-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-style: normal;
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
-}
-
 /* src/layer-layout/LayerLayout.css */
 .saltLayerLayout {
   --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));
@@ -2472,29 +2438,37 @@
 
 /* src/rating/Rating.css */
 .saltRating {
-  display: flex;
-  gap: calc(2 * var(--salt-spacing-fixed-600));
-  align-items: center;
+  display: inline-flex;
   box-sizing: border-box;
 }
-.saltFormField .saltRating {
+.saltFormField .saltRating-container {
+  height: var(--salt-size-base);
+  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));
+}
+.saltFormField .saltRating-label {
   min-height: var(--salt-size-base);
+  padding-top: var(--salt-spacing-100);
 }
-.saltRating-wrapper-top,
-.saltRating-wrapper-bottom {
+.saltRating-labelTop,
+.saltRating-labelBottom {
   flex-direction: column;
+  align-items: flex-start;
+  gap: var(--salt-spacing-fixed-600);
 }
-.saltRating-wrapper-left,
-.saltRating-wrapper-right {
+.saltRating-labelLeft,
+.saltRating-labelRight {
   flex-direction: row;
+  gap: var(--salt-spacing-fixed-1200);
 }
 .saltRating-container {
   display: flex;
   flex-direction: row;
-  gap: calc(2 * var(--salt-spacing-fixed-600));
+  gap: var(--salt-spacing-fixed-1200);
   flex-wrap: nowrap;
   justify-content: flex-start;
-  align-items: stretch;
+  padding-top: var(--salt-spacing-fixed-100);
+  padding-bottom: var(--salt-spacing-fixed-100);
+  box-sizing: border-box;
 }
 .saltRating-label {
   color: var(--salt-content-primary-foreground);
@@ -2502,10 +2476,7 @@
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
-}
-.saltRating-label.saltRating-label-top,
-.saltRating-label.saltRating-label-bottom {
-  text-align: center;
+  box-sizing: border-box;
 }
 .saltRating-label.saltRating-label-left {
   text-align: right;
@@ -3714,186 +3685,148 @@
 
 /* src/tree/Tree.css */
 .saltTree {
-  --tree-node-collapse: var(--saltTree-node-collapse, var(--list-svg-tree-node-collapse));
-  --tree-node-expand: var(--saltTree-node-expand, var(--list-svg-tree-node-expand));
-  --tree-node-expanded-transform: var(--saltTree-node-expanded-transform, none);
-  --tree-node-indent: 0px;
-  --tree-toggle-width: 12px;
-  --list-background-highlighted: rgba(1, 1, 1, 0.1);
-  --list-item-height: 30px;
-  --list-item-padding: 0 6px;
-  --list-item-header-background: black;
-  --list-item-header-color: white;
-  --list-item-header-fontWeight: bold;
-  --list-item-header-twisty-color: black;
-  --list-item-header-twisty-content: "";
-  --list-item-header-twisty-top: 50%;
-  --list-item-header-twisty-left: -18px;
-  --list-item-header-twisty-right: auto;
-  --list-item-selected-color: white;
+  list-style: none;
   margin: 0;
-  padding: 0 1px;
-  font-size: var(--saltTree-fontSize, 14px);
-  max-height: inherit;
+  padding: 0;
   outline: none;
-  overflow-y: auto;
-  position: relative;
-  user-select: none;
-}
-.saltTree-child-nodes {
   width: 100%;
+  box-sizing: border-box;
 }
-.saltTree-scrollingContentContainer {
-  box-sizing: inherit;
-  list-style: none;
-  margin: 0;
-  position: relative;
+.saltTree-disabled {
+  cursor: var(--salt-cursor-disabled);
 }
 
 /* src/tree/TreeNode.css */
 .saltTreeNode {
-  --tree-item-text-color: var(--salt-content-primary-foreground);
-  --tree-item-background: var(--salt-selectable-background);
-  --tree-item-background-hover: var(--salt-selectable-background-hover);
-  --tree-node-height: var(--saltTree-node-height, var(--salt-size-stackable));
-  --tree-node-icon-size: 12px;
-  --tree-node-icon-transform: none;
-  --tree-node-paddingLeft: 6px;
-  align-items: flex-start;
-  min-height: var(--tree-node-height, auto);
-  line-height: var(--salt-text-lineHeight);
   list-style: none;
   position: relative;
-  text-align: var(--list-item-textAlign);
-}
-.saltTreeNode-highlighted {
-  --tree-item-background: var(--salt-selectable-background-hover);
-}
-.saltTreeNode-item[aria-selected=true] {
-  background: var(--salt-selectable-background-selected);
-  color: var(--salt-content-primary-foreground);
-  --saltIcon-color: var(--salt-content-primary-foreground);
+  cursor: var(--salt-cursor-hover);
 }
-.saltTreeNode[aria-expanded=true] {
-  --tree-node-icon-transform: rotate(45deg) translate(1px, 1px);
+.saltTreeNode:focus {
+  outline: none;
 }
-.saltTreeNode-item {
-  align-items: center;
-  background: var(--tree-item-background);
-  display: flex;
-  height: var(--tree-node-height);
-  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-node-indent));
+.saltTreeNode:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  outline: var(--salt-focused-outline);
   position: relative;
+  z-index: calc(var(--salt-zIndex-default) + 1);
 }
-.saltTreeNode-toggle {
-  display: inline-block;
-  flex: 0 0 18px;
-  height: var(--tree-node-icon-size);
-  transform: var(--tree-node-icon-transform);
-  transition: transform 0.1s ease;
-}
-.saltTreeNode-label {
-  align-items: center;
-  display: inline-flex;
-  height: var(--tree-node-height);
-}
-.saltTreeNode-description {
-  align-items: center;
-  display: inline-flex;
-  height: var(--tree-node-height);
-  padding-left: var(--salt-size-unit);
+.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  outline: var(--salt-focused-outline);
+  z-index: calc(var(--salt-zIndex-default) + 1);
 }
-.saltTreeNode[aria-expanded] > .saltTreeNode-label {
-  --checkbox-borderColor: black;
-  --checkbox-borderWidth: 1px;
-  --checkbox-tick: black;
-  --list-svg-toggle: var(--tree-node-collapse);
-  color: var(--list-item-text-color);
-  flex-wrap: nowrap;
-  line-height: var(--tree-node-height);
-  padding: var(--list-item-padding);
-  position: relative;
-  cursor: default;
+.saltTreeNode-group {
+  list-style: none;
   margin: 0;
-  white-space: nowrap;
-}
-.saltTreeNode:not([aria-expanded]) {
-  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));
-}
-.saltTreeNode[aria-expanded] > .saltTreeNode-label {
-  padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));
+  padding: 0;
 }
-.saltTreeNode[aria-expanded] {
-  flex-direction: column;
+.saltTreeNode-checkbox {
+  flex-shrink: 0;
+  height: var(--salt-size-selectable);
 }
-.saltTreeNode[aria-expanded] {
-  flex-direction: column;
-  height: auto;
+.saltTreeNode-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--salt-size-selectable);
+  min-width: var(--salt-size-selectable);
+  height: var(--salt-size-selectable);
+  flex-shrink: 0;
 }
-.saltTreeNode > *[role=group] {
-  padding-left: 0px;
+.saltTreeNode-icon > * {
+  color: var(--salt-content-primary-foreground);
 }
-[aria-level="2"] {
-  --tree-node-indent: 24px;
+
+/* src/tree/TreeNodeExpansionIcon.css */
+.saltTreeNodeExpansionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--salt-size-selectable);
+  min-width: var(--salt-size-selectable);
+  height: var(--salt-size-selectable);
+  flex-shrink: 0;
+  position: relative;
 }
-[aria-level="3"] {
-  --tree-node-indent: 36px;
+.saltTreeNodeExpansionIcon-icon {
+  color: var(--salt-content-primary-foreground);
 }
-[aria-level="4"] {
-  --tree-node-indent: 48px;
+.saltTreeNodeExpansionIcon::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: var(--salt-size-base);
+  height: var(--salt-size-base);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.saltTreeNode:not(.focusVisible):not([aria-expanded])[data-highlighted],
-.saltTreeNode:not(.focusVisible)[aria-expanded][data-highlighted] > div:first-child {
-  background: var(--list-background-highlighted);
+
+/* src/tree/TreeNodeLabel.css */
+.saltTreeNodeLabel {
+  flex: 1;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  word-break: break-word;
 }
-.saltTree-toggle {
-  cursor: pointer;
+
+/* src/tree/TreeNodeTrigger.css */
+.saltTreeNodeTrigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+  min-height: var(--salt-size-base);
+  padding-top: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);
+  padding-bottom: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);
+  padding-right: var(--salt-spacing-100);
+  --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-100));
+  padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));
+  background: var(--salt-selectable-background);
+  color: var(--salt-content-primary-foreground);
 }
-.saltTreeNode[aria-selected=true] {
-  --list-item-header-twisty-color: var(--list-item-selected-color);
+[aria-multiselectable=true] .saltTreeNodeTrigger {
+  --saltTreeNodeTrigger-indentStep: calc(var(--salt-size-selectable) + var(--salt-spacing-150));
 }
-.saltTreeNode:not(.focusVisible):focus {
-  background: rgba(0, 0, 0, 0.1);
+.saltTreeNodeTrigger:hover {
+  background: var(--salt-selectable-background-hover);
 }
-.saltTreeNode:not([aria-expanded]).focusVisible:before,
-.saltTreeNode[aria-expanded].focusVisible > div:first-child:before {
-  content: "";
-  position: absolute;
-  top: 0px;
-  left: var(--tree-offset-left-focusVisible, 0px);
-  right: 0;
-  bottom: 0px;
-  border: dotted rgb(141, 154, 179) 2px;
-  background: var(--list-background-highlighted);
+.saltTreeNode:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-hover);
 }
-.saltTreeNode[aria-expanded=false] > *:first-child:after {
-  --list-svg-toggle: var(--tree-node-expand);
+.saltTreeNode-selected > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
+  position: relative;
+  z-index: var(--salt-zIndex-default);
 }
-.saltTreeNode[aria-expanded=true] > *:first-child:after {
-  transform: var(--tree-node-expanded-transform);
+.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,
+.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-selected);
 }
-.saltTree:not(.checkbox-only) .saltTreeNode:not([aria-expanded])[aria-selected=true],
-.saltTree:not(.checkbox-only) .saltTreeNode[aria-expanded][aria-selected=true] > div:first-child {
-  --checkbox-borderColor: var(--list-item-selected-color);
-  --checkbox-tick: var(--list-item-selected-color);
-  --tree-borderColor-focusVisible: var(--list-item-selected-color);
-  background: var(--list-item-background-active);
-  color: var(--list-item-selected-color);
+.saltTreeNode-disabled > .saltTreeNodeTrigger,
+.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {
+  opacity: 0.4;
+  cursor: var(--salt-cursor-disabled);
+  background: var(--salt-selectable-background);
+  color: var(--salt-content-primary-foreground);
 }
-.with-checkbox .saltTreeNode {
-  padding-left: 28px;
+.saltTreeNodeTrigger > .saltIcon {
+  width: var(--salt-size-selectable);
+  height: var(--salt-size-selectable);
+  min-width: var(--salt-size-selectable);
+  flex-shrink: 0;
+  color: var(--salt-content-primary-foreground);
 }
-.with-checkbox .saltTreeNode:before {
-  border-style: solid;
-  border-width: var(--checkbox-borderWidth);
-  border-color: var(--checkbox-borderColor);
-  content: "";
-  height: 12px;
-  left: 3px;
-  margin-top: -7px;
-  position: absolute;
-  top: 50%;
-  width: 12px;
+.saltTreeNodeTrigger > .saltTreeNode-checkbox {
+  margin-left: calc(var(--salt-spacing-150) - var(--salt-spacing-100));
+  margin-right: calc(var(--salt-spacing-150) - var(--salt-spacing-100));
 }
 
 /* src/window/ElectronWindow.css */
@@ -4153,7 +4086,7 @@
   box-sizing: border-box;
   height: var(--calendar-day-highlight-size);
   width: var(--calendar-day-highlight-size);
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   position: absolute;
   clip-path: polygon(100% 0, 100% 100%, 0 0);
   z-index: var(--calendar-day-zIndex-highlight);
@@ -4173,7 +4106,7 @@
   display: block;
   width: calc(100% - calc(var(--salt-spacing-50) * 2));
   height: var(--salt-size-indicator);
-  background: var(--salt-accent-borderColor);
+  background: var(--salt-sentiment-accent-borderColor);
   border-radius: var(--salt-palette-corner-weak);
   position: absolute;
   bottom: var(--salt-spacing-50);
@@ -4232,7 +4165,7 @@
 
 /* src/tabs/drag-drop/DropIndicator.css */
 .saltDropIndicator {
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   cursor: move;
   position: absolute;
   transform: translate(-4px, 0);
@@ -4311,4 +4244,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/e9027b72-c8b2-4bef-b218-a3ff3976ba17.css */
+/* src/4ab77bbb-d93c-4e89-bc2e-478a2cbac219.css */