@salt-ds/lab 1.0.0-alpha.93 → 1.0.0-alpha.95

package/CHANGELOG.md

@@ -1,5 +1,219 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.95
+
+### Minor Changes
+
+- 8043fee: Updated `MegaMenu` with several API improvements:
+
+  - **Renamed `MegaMenuSection` to `MegaMenuGroups`.** The associated CSS custom property `--saltMegaMenuSection-columnWidth` has been renamed to `--saltMegaMenuGroups-columnWidth`.
+  - **Renamed `MegaMenuContent` to `MegaMenuSupportingContent`** to better convey its purpose as a region for supporting content alongside the menu groups.
+  - **Removed `MegaMenuItemContent`.** Pass the label directly to `MegaMenuItem`.
+  - **Added `MegaMenuSupportingActions`.** Use it to group one or more supporting action links beneath the menu groups in a `MegaMenuPanel`.
+  - **Added a `render` prop to `MegaMenuItem`** for integration with custom link or routing components (such as `react-router`'s `Link`).
+
+  ```diff
+  - <MegaMenuSection>
+  + <MegaMenuGroups>
+      <MegaMenuGroup>
+        <MegaMenuHeader>Financial services</MegaMenuHeader>
+  -     <MegaMenuItem>
+  -       <Icon aria-hidden />
+  -       <MegaMenuItemContent>Digital banking</MegaMenuItemContent>
+  -     </MegaMenuItem>
+  +     <MegaMenuItem render={<Link to="/digital-banking" />}>
+  +       <Icon aria-hidden />
+  +       Digital banking
+  +     </MegaMenuItem>
+      </MegaMenuGroup>
+  - </MegaMenuSection>
+  + </MegaMenuGroups>
+  - <MegaMenuContent>...</MegaMenuContent>
+  + <MegaMenuSupportingContent>...</MegaMenuSupportingContent>
+  + <MegaMenuSupportingActions>
+  +   <Link href="#demo" IconComponent={ChevronRightIcon}>Book a demo</Link>
+  + </MegaMenuSupportingActions>
+  ```
+
+- 8687aa7: Date-related components and utilities are no longer re-exported from `@salt-ds/lab`. Update the import source to `@salt-ds/date-components`.
+
+  The exact set of components depends on the selection variant you're using.
+
+  **Single-date selection** (`DateInputSingle`, single `DatePicker`, `DatePickerSingleInput`, `DatePickerSingleGridPanel`, single `Calendar`):
+
+  ```diff
+    import {
+      type DateInputSingleDetails,
+      DateInputSingle,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerSingleGridPanel,
+      DatePickerSingleInput,
+      DatePickerTrigger,
+      type SingleDateSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+  **Range selection** (`DateInputRange`, range `DatePicker`, `DatePickerRangeInput`, `DatePickerRangePanel`, `DatePickerRangeGridPanel`, range `Calendar`):
+
+  ```diff
+    import {
+      type DateInputRangeDetails,
+      DateInputRange,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerRangeGridPanel,
+      DatePickerRangeInput,
+      DatePickerRangePanel,
+      DatePickerTrigger,
+      type DateRangeSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+  **Offset selection** (offset `Calendar`; offset `DatePicker` built from the range input + range panel with `selectionVariant="offset"`):
+
+  ```diff
+    import {
+      type DateRangeSelection,
+      Calendar,
+      CalendarGrid,
+      CalendarNavigation,
+      DatePicker,
+      DatePickerOverlay,
+      DatePickerRangeInput,
+      DatePickerRangePanel,
+      DatePickerTrigger,
+      LocalizationProvider,
+      useLocalization,
+  - } from "@salt-ds/lab";
+  + } from "@salt-ds/date-components";
+  ```
+
+### Patch Changes
+
+- 4314ca5: Fixed `ToolbarNext` focus handling when composing multiselect `ComboBox` controls, preserving pill keyboard navigation and preventing focus flashes when restoring toolbar focus.
+- Updated dependencies [9729a10]
+- Updated dependencies [52daa64]
+- Updated dependencies [ed2779c]
+- Updated dependencies [07e4d5d]
+  - @salt-ds/core@1.64.0
+
+## 1.0.0-alpha.94
+
+### Minor Changes
+
+- fcf295b: Removed `Tree`, `TreeNode`, `TreeNodeTrigger`, and `TreeNodeLabel` from lab and promoted to core.
+- 5fc9124: ## Summary
+
+  New `ToolbarNext`, `ToolbarContentNext`, and `TooltrayNext` components for composing horizontal toolbars with responsive overflow, grouped controls, and keyboard navigation.
+
+  **What's included**
+
+  - Flat authoring with `TooltrayNext` children aligned to start, center, or end
+  - Explicit `ToolbarContentNext` regions for start, center, and end toolbar layouts
+  - Shared, named, grouped, independent, and non-overflowing tooltray overflow modes
+  - Overflow priority control for deciding which trays collapse first
+  - Bordered and transparent appearances with primary, secondary, and tertiary variants
+  - Horizontal toolbar semantics and keyboard navigation across toolbar controls and overflow menus
+  - `TooltrayNext` as a layout-only wrapper, with optional `role="group"` and accessible labels for meaningful control groups
+
+  ## Examples
+
+  **Basic Toolbar** — place `TooltrayNext` components directly inside `ToolbarNext`; use `align="end"` for trailing actions
+
+  ```tsx
+  import { Button, Dropdown, Input, Option } from "@salt-ds/core";
+  import { GridIcon, ListIcon, SearchIcon } from "@salt-ds/icons";
+  import { ToolbarNext, TooltrayNext } from "@salt-ds/lab";
+
+  const options = ["Option A", "Option B", "Option C"];
+
+  <ToolbarNext aria-label="Data controls">
+    <TooltrayNext>
+      <Dropdown bordered defaultSelected={["Option A"]} style={{ width: 160 }}>
+        {options.map((option) => (
+          <Option value={option} key={option} />
+        ))}
+      </Dropdown>
+    </TooltrayNext>
+    <TooltrayNext role="group" aria-label="Search">
+      <Input
+        bordered
+        startAdornment={<SearchIcon />}
+        placeholder="Search"
+        style={{ width: 180 }}
+      />
+    </TooltrayNext>
+    <TooltrayNext align="end" role="group" aria-label="View and actions">
+      <Button appearance="transparent" aria-label="Grid view">
+        <GridIcon aria-hidden />
+      </Button>
+      <Button appearance="transparent" aria-label="List view">
+        <ListIcon aria-hidden />
+      </Button>
+      <Button appearance="solid">Run</Button>
+    </TooltrayNext>
+  </ToolbarNext>;
+  ```
+
+  **Centered Toolbar With Named Overflow** — use `ToolbarContentNext` when you need explicit start, center, and end regions; named overflow keeps related actions behind a labelled trigger
+
+  ```tsx
+  import { Button, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+  import { ToolbarContentNext, ToolbarNext, TooltrayNext } from "@salt-ds/lab";
+
+  <ToolbarNext aria-label="Centered actions">
+    <ToolbarContentNext position="start">
+      <TooltrayNext
+        overflowMode="none"
+        role="group"
+        aria-label="Primary action"
+      >
+        <Button appearance="solid">Create</Button>
+      </TooltrayNext>
+    </ToolbarContentNext>
+    <ToolbarContentNext position="center">
+      <TooltrayNext overflowMode="none" role="group" aria-label="View options">
+        <ToggleButtonGroup>
+          <ToggleButton value="day">Day</ToggleButton>
+          <ToggleButton value="week">Week</ToggleButton>
+          <ToggleButton value="month">Month</ToggleButton>
+        </ToggleButtonGroup>
+      </TooltrayNext>
+    </ToolbarContentNext>
+    <ToolbarContentNext position="end">
+      <TooltrayNext
+        overflowGroup="Actions"
+        overflowLabel="Actions"
+        overflowMode="grouped"
+        overflowPriority={5}
+        role="group"
+        aria-label="Secondary actions"
+      >
+        <Button appearance="transparent">Export</Button>
+        <Button appearance="transparent">Settings</Button>
+      </TooltrayNext>
+    </ToolbarContentNext>
+  </ToolbarNext>;
+  ```
+
+### Patch Changes
+
+- Updated dependencies [fcf295b]
+  - @salt-ds/core@1.63.0
+
 ## 1.0.0-alpha.93
 
 ### Minor Changes

package/css/salt-lab.css

@@ -1893,11 +1893,6 @@
   border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
-/* src/mega-menu/MegaMenuContent.css */
-.saltMegaMenuContent {
-  padding: var(--salt-spacing-300);
-}
-
 /* src/mega-menu/MegaMenuGroup.css */
 .saltMegaMenuGroup {
   display: flex;
@@ -1912,6 +1907,15 @@
   flex-direction: column;
 }
 
+/* src/mega-menu/MegaMenuGroups.css */
+.saltMegaMenuGroups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuGroups-columnWidth, 12rem));
+  gap: var(--salt-spacing-300);
+  padding: var(--salt-spacing-300);
+  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));
+}
+
 /* src/mega-menu/MegaMenuHeader.css */
 .saltMegaMenuHeader-content {
   display: flex;
@@ -1952,6 +1956,14 @@
   height: var(--salt-size-base);
   align-items: center;
 }
+.saltMegaMenuItem-content {
+  flex: 1 0;
+  margin: var(--salt-spacing-75) 0;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+}
 .saltMegaMenuItem > a:focus-visible {
   outline: var(--salt-focused-outline);
   outline-offset: calc(var(--salt-size-fixed-100) * -2);
@@ -1973,16 +1985,6 @@
   pointer-events: none;
 }
 
-/* src/mega-menu/MegaMenuItemContent.css */
-.saltMegaMenuItemContent {
-  flex: 1 0;
-  margin: var(--salt-spacing-75) 0;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
-}
-
 /* src/mega-menu/MegaMenuPanel.css */
 .saltMegaMenuPanel {
   display: flex;
@@ -1999,13 +2001,17 @@
   box-shadow: var(--salt-overlayable-shadow-popout);
 }
 
-/* src/mega-menu/MegaMenuSection.css */
-.saltMegaMenuSection {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuSection-columnWidth, 12rem));
-  gap: var(--salt-spacing-300);
+/* src/mega-menu/MegaMenuSupportingActions.css */
+.saltMegaMenuSupportingActions {
+  display: flex;
+  flex-wrap: wrap;
+  width: fit-content;
+  padding-bottom: var(--salt-spacing-300);
+}
+
+/* src/mega-menu/MegaMenuSupportingContent.css */
+.saltMegaMenuSupportingContent {
   padding: var(--salt-spacing-300);
-  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));
 }
 
 /* src/menu-button/MenuButton.css */
@@ -3121,163 +3127,204 @@
   flex-basis: 0;
 }
 
-/* src/tree/Tree.css */
-.saltTree {
+/* src/toolbar-next/ToolbarContentNext.css */
+.saltToolbarContentNext {
   display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-fixed-100);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  outline: none;
-  width: 100%;
-  box-sizing: border-box;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  min-width: 0;
+  flex-shrink: 0;
 }
-.saltTree-disabled {
-  cursor: var(--salt-cursor-disabled);
+.saltToolbarContentNext[data-position=start] {
+  justify-content: flex-start;
 }
-
-/* src/tree/TreeNode.css */
-.saltTreeNode {
-  list-style: none;
-  position: relative;
-  cursor: var(--salt-cursor-hover);
+.saltToolbarContentNext[data-position=center] {
+  justify-content: center;
 }
-.saltTreeNode:focus {
-  outline: none;
+.saltToolbarContentNext[data-position=end] {
+  justify-content: flex-end;
 }
-.saltTreeNode:focus-visible > .saltTreeNodeTrigger,
-.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=center],
+.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=end] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+/* src/toolbar-next/ToolbarNext.css */
+.saltToolbarNext {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-width: 0;
   position: relative;
-  z-index: calc(var(--salt-zIndex-default) + 1);
 }
-.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,
-.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-size-fixed-100) * -2);
-  z-index: calc(var(--salt-zIndex-default) + 1);
+.saltToolbarNext-layout {
+  align-items: center;
+  --saltToolbarNext-band-gap: var(--salt-spacing-100);
 }
-.saltTreeNode-group {
+.saltToolbarNext-layout:not([data-centered]) {
   display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-fixed-100);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  padding-top: var(--salt-spacing-fixed-100);
+  column-gap: var(--saltToolbarNext-band-gap);
 }
-.saltTreeNode-checkbox {
-  flex-shrink: 0;
-  height: var(--salt-size-selectable);
+.saltToolbarNext-layout[data-centered] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 }
-.saltTreeNode-icon {
+.saltToolbarNext-band {
   display: flex;
   align-items: center;
+  gap: var(--saltToolbarNext-band-gap);
+  min-width: 0;
+}
+.saltToolbarNext-layout:not([data-centered]) > .saltToolbarNext-band[data-band-position=end] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=start] {
+  grid-column: 1;
+}
+.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=center] {
+  grid-column: 2;
   justify-content: center;
-  width: var(--saltTreeNodeTrigger-iconSize);
-  min-width: var(--saltTreeNodeTrigger-iconSize);
-  height: var(--saltTreeNodeTrigger-iconSize);
-  flex-shrink: 0;
 }
-.saltTreeNode-icon > * {
-  color: var(--salt-content-primary-foreground);
+.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=end] {
+  grid-column: 3;
+  justify-content: flex-end;
 }
-
-/* src/tree/TreeNodeExpansionIcon.css */
-.saltTreeNodeExpansionIcon {
+.saltToolbarNext-fallback {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: var(--saltTreeNodeTrigger-iconSize);
-  min-width: var(--saltTreeNodeTrigger-iconSize);
-  height: var(--saltTreeNodeTrigger-iconSize);
-  flex-shrink: 0;
-  position: relative;
+  gap: var(--salt-spacing-100);
 }
-.saltTreeNodeExpansionIcon-icon {
-  color: var(--salt-content-primary-foreground);
+.saltToolbarNext-layout > * {
+  min-width: 0;
 }
-.saltTreeNodeExpansionIcon::before {
-  content: "";
-  display: block;
+.saltToolbarNext-primary {
+  --toolbarNext-background: var(--salt-container-primary-background);
+  --toolbarNext-borderColor: var(--salt-container-primary-borderColor);
+}
+.saltToolbarNext-secondary {
+  --toolbarNext-background: var(--salt-container-secondary-background);
+  --toolbarNext-borderColor: var(--salt-container-secondary-borderColor);
+}
+.saltToolbarNext-tertiary {
+  --toolbarNext-background: var(--salt-container-tertiary-background);
+  --toolbarNext-borderColor: var(--salt-container-tertiary-borderColor);
+}
+.saltToolbarNext-bordered {
+  background: var(--saltToolbarNext-background, var(--toolbarNext-background));
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbarNext-borderColor, var(--toolbarNext-borderColor));
+  border-radius: var(--salt-palette-corner, 0);
+  padding: var(--salt-spacing-100);
+}
+.saltToolbarNext-transparent {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+.saltToolbarNext-measurements {
+  display: flex;
+  gap: var(--salt-spacing-100);
   position: absolute;
-  width: var(--salt-size-base);
-  height: var(--salt-size-base);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  visibility: hidden;
+  pointer-events: none;
+  inset: 0 auto auto 0;
+  block-size: 0;
+  overflow: hidden;
 }
-
-/* 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;
+.saltToolbarNext-measureTrigger {
+  white-space: nowrap;
 }
 
-/* src/tree/TreeNodeTrigger.css */
-.saltTreeNodeTrigger {
-  box-sizing: border-box;
+/* src/toolbar-next/ToolbarNextOverflow.css */
+.saltToolbarNextOverflow-content {
+  position: relative;
+}
+.saltToolbarNextOverflow-slot,
+.saltToolbarNextOverflow-panelItem {
+  align-items: center;
   display: flex;
-  align-items: flex-start;
+  flex-shrink: 0;
   gap: var(--salt-spacing-100);
-  width: 100%;
-  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50));
-  padding-bottom: calc(var(--salt-spacing-75) + var(--salt-spacing-50));
-  padding-right: var(--salt-spacing-100);
-  --saltTreeNodeTrigger-iconSize: max(var(--salt-size-icon), 12px);
-  --saltTreeNodeTrigger-indentStep: calc(var(--saltTreeNodeTrigger-iconSize) + var(--salt-spacing-100));
-  --saltTreeNodeTrigger-iconOffsetY: calc((var(--salt-text-lineHeight) - var(--saltTreeNodeTrigger-iconSize)) / 2);
-  --saltTreeNodeTrigger-checkboxOffsetY: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
-  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);
+  min-width: 0;
 }
-.saltTree-multiselect .saltTreeNodeTrigger {
-  --saltTreeNodeTrigger-indentStep: calc(((var(--saltTreeNodeTrigger-iconSize) + var(--salt-size-selectable)) / 2) + var(--salt-spacing-100));
+.saltToolbarNextOverflow-slot[data-align=end] {
+  margin-inline-start: auto;
 }
-.saltTreeNodeTrigger:hover {
-  background: var(--salt-selectable-background-hover);
+.saltToolbarNextOverflow-slot[data-align=center] {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
-.saltTreeNode:focus-visible > .saltTreeNodeTrigger,
-.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
-  background: var(--salt-selectable-background-hover);
+.saltToolbarNextOverflow-item {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
 }
-.saltTreeNode-selected > .saltTreeNodeTrigger {
-  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);
-  position: relative;
-  z-index: var(--salt-zIndex-default);
+.saltToolbarNextOverflow-menu {
+  display: flex;
+  flex-shrink: 0;
 }
-.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,
-.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {
-  background: var(--salt-selectable-background-selected);
+.saltToolbarNextOverflow-itemHost,
+.saltToolbarNextOverflow-contentHost {
+  display: contents;
 }
-.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);
+.saltToolbarNextOverflow-trigger {
+  white-space: nowrap;
 }
-.saltTreeNodeTrigger > .saltTreeNode-checkbox {
-  margin-top: var(--saltTreeNodeTrigger-checkboxOffsetY);
-  margin-bottom: 0;
+.saltToolbarNextOverflow-panel {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner, 0);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  max-width: min(32rem, calc(100vw - var(--salt-spacing-300)));
+  overflow: auto;
+  position: absolute;
+  z-index: var(--salt-zIndex-flyover);
+}
+.saltToolbarNextOverflow-floatingDescendant.saltToolbarNextOverflow-floatingDescendant {
+  z-index: calc(var(--salt-zIndex-flyover) + var(--salt-zIndex-default));
+}
+.saltToolbarNextOverflow-panelContent {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--salt-spacing-100);
+  max-width: inherit;
+  min-width: max-content;
+  padding: var(--salt-spacing-100);
+}
+.saltToolbarNextOverflow-panel .saltTooltrayNext[data-align=center],
+.saltToolbarNextOverflow-panel .saltTooltrayNext[data-align=end] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
-.saltTreeNodeTrigger > .saltTreeNodeExpansionIcon,
-.saltTreeNodeTrigger > .saltTreeNode-icon {
-  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);
+.saltToolbarNextOverflow-panel .saltTooltrayNext > * {
+  inline-size: auto;
 }
-.saltTreeNodeTrigger > .saltIcon {
-  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);
+.saltToolbarNextOverflow-content > .saltToolbarNextOverflow-slot .saltTooltrayNext[data-align=center],
+.saltToolbarNextOverflow-content > .saltToolbarNextOverflow-slot .saltTooltrayNext[data-align=end] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+/* src/toolbar-next/TooltrayNext.css */
+.saltTooltrayNext {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: var(--salt-spacing-100);
+  min-width: 0;
+}
+.saltTooltrayNext > * {
   flex-shrink: 0;
-  color: var(--salt-content-primary-foreground);
+}
+.saltTooltrayNext[data-align=end] {
+  margin-inline-start: auto;
+}
+.saltTooltrayNext[data-align=center] {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 
 /* src/window/ElectronWindow.css */
@@ -3390,4 +3437,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/4e80e272-9a7e-4873-a06d-4a946b33ff4b.css */
+/* src/0af170c9-7e3f-4fb8-8504-21af9780540e.css */