@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

@salt-ds/core@1.63.0

Minor Changes

• fcf295b: Added Tree, TreeNode, TreeNodeTrigger, and TreeNodeLabel.

  Tree displays hierarchical data as an expandable and collapsible structure. Users can navigate nested items and optionally select one or more nodes.

  <Tree aria-label="File browser" defaultExpanded={["documents"]}>
    <TreeNode value="documents" label="Documents">
      <TreeNode value="reports" label="Reports">
        <TreeNode value="annual-report" label="Annual Report" />
      </TreeNode>
    </TreeNode>
  </Tree>

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

Minor Changes

• 8980f01: Removed SidePanel and its related components (SidePanelProvider, SidePanelTrigger, SidePanelCloseButton, SidePanelHeader, SidePanelTitle, SidePanelContent, and the useSidePanel hook) from lab and promoted to core.

Patch Changes

• 1718878: Updated Tree node layout to use spacing-75 + spacing-50 vertical padding and size-icon chevron to align with design.
• Updated dependencies [8980f01]
  • @salt-ds/core@1.62.0

@salt-ds/core@1.62.0

Minor Changes

• 8980f01: A side panel is a persistent, side-by-side workspace that keeps supporting information and controls available while users continue their main task. It’s intended for ongoing parallel work—such as referencing details, inspecting data, filtering results, or editing attributes—where maintaining visibility and context improves accuracy and efficiency.

  <SidePanelProvider>
    <SidePanelTrigger>
      <Button />
    </SidePanelTrigger>
    <SidePanel>
      <SidePanelHeader>
        <SidePanelTitle>Section Title</SidePanelTitle>
        <SidePanelCloseButton />
      </SidePanelHeader>
      <SidePanelContent>
        <Text>Side panel content goes here.</Text>
      </SidePanelContent>
    </SidePanel>
  </SidePanelProvider>

@salt-ds/lab@1.0.0-alpha.92

Published @salt-ds/lab@1.0.0-alpha.92.

@salt-ds/highcharts-theme@1.0.0

Published @salt-ds/highcharts-theme@1.0.0.

@salt-ds/core@1.61.0

Minor Changes

• 2db14be: Added Rating.

  Rating component allows users to submit feedback and view average scores on a defined scale, reflecting your product, service or experience.

  <Rating aria-label="Rating" defaultValue={3} />

• 7ffd0fd: Added Tab, TabAction, TabBar, TabList, TabPanel, Tabs, TabTrigger.

  Tabs allow users to move between different views of related content without leave the current page.

  <Tabs defaultValue="Home">
    <TabBar>
      <TabList aria-label="Example tablist">
        <Tab value="Home">
          <TabTrigger>Home</TabTrigger>
        </Tab>
        <Tab value="Transactions">
          <TabTrigger>Transactions</TabTrigger>
        </Tab>
        <Tab value="Checks">
          <TabTrigger>Checks</TabTrigger>
        </Tab>
      </TabList>
    </TabBar>
  </Tabs>

Patch Changes

• e74d4d8: Fixed aria-controls on NavigationItem being applied to the outer wrapper element instead of the interactive trigger element.

@salt-ds/lab@1.0.0-alpha.91

Minor Changes

• e74d4d8: Added MegaMenu.

  MegaMenu is a multi-column dropdown that opens from a trigger to display a large set of grouped navigation items. Use MegaMenu to manage open state, MegaMenuTrigger to toggle the panel, MegaMenuPanel for the floating container, and MegaMenuSection / MegaMenuGroup / MegaMenuHeader / MegaMenuItem / MegaMenuItemContent / MegaMenuContent to structure the contents.

  const [open, setOpen] = useState(false);
  
  <MegaMenu open={open} onOpenChange={setOpen}>
    <MegaMenuTrigger>
      <NavigationItem>Solutions</NavigationItem>
    </MegaMenuTrigger>
    <MegaMenuPanel aria-label="Solutions menu">
      <MegaMenuSection>
        <MegaMenuGroup>
          <MegaMenuHeader>Financial services</MegaMenuHeader>
          <MegaMenuItem onClick={() => console.log("Digital banking")}>
            <MegaMenuItemContent>Digital banking</MegaMenuItemContent>
          </MegaMenuItem>
          <MegaMenuItem onClick={() => console.log("Risk management")}>
            <MegaMenuItemContent>Risk management</MegaMenuItemContent>
          </MegaMenuItem>
        </MegaMenuGroup>
      </MegaMenuSection>
    </MegaMenuPanel>
  </MegaMenu>;

• 7ffd0fd: Removed TabsNext and related components from lab and promoted to core. As part of the promotion the components were renamed e.g., TabsNext is now Tabs.

• 2db14be: Removed Rating from lab and promoted to core.

• 6368299: Added SidePanelCloseButton component that handles close logic, icon rendering, and accessible labelling (aria-label + aria-labelledby linked to the panel title) automatically. Removes the need for consumers to manually wire up IDs, icons, and click handlers.

• 6368299: Updated getTriggerProps in useSidePanel to include a built-in onClick handler that toggles the panel open state, removing the need for consumers to manage toggle logic themselves, unless they want to.

Patch Changes

• 78ca46a: Fix TreeNodes wrapped in React Fragments not participating in keyboard navigation
• 6368299: Fixed SidePanel animating on first render when using defaultOpen. The panel now appears immediately without animation when initially open, and only animates on subsequent open/close interactions.
• Updated dependencies [e74d4d8]
• Updated dependencies [2db14be]
• Updated dependencies [7ffd0fd]
  • @salt-ds/core@1.61.0

@salt-ds/theme@1.43.0

Minor Changes

• 7bd425f: Added categorical foundational colors into the next theme.

@salt-ds/highcharts-theme@0.3.0

Minor Changes

• 3b2dbc2: Drive Salt Highcharts styling through chart options and useChart instead of package-level CSS imports.

  The Highcharts theme now injects its required CSS and builds Salt defaults from tokens in the hook, so consumers no longer need to import highcharts/css/highcharts.css, @salt-ds/highcharts-theme/index.css, or wrap charts with the previous theme/pattern class names.

  Accessibility patterns are now enabled with useChart(chartRef, chartOptions, { fillPatterns: true }) after loading the Highcharts pattern-fill module. The hook also supports Salt color-axis configuration for token-aware continuous, threshold, and data-class color scales.

Patch Changes

• 3b2dbc2: Added Heatmap chart support. The saltColorAxis option on useChart can now be used with heatmaps so color scales align with Salt design tokens (continuous gradients, data classes, or discrete ranges).

  To see an example configuration, see the Heatmap Options example in the Chart example section, and the Color axis section of the Chart usage docs.

• Updated dependencies [7bd425f]

• Updated dependencies [5d4de6f]

  • @salt-ds/theme@1.43.0
  • @salt-ds/core@1.60.0