@salt-ds/lab@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

  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

  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