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

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # @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
+
+  ```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

@@ -3121,163 +3121,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;
+}
+.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));
 }
-.saltTreeNodeTrigger > .saltTreeNode-checkbox {
-  margin-top: var(--saltTreeNodeTrigger-checkboxOffsetY);
-  margin-bottom: 0;
+.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);
 }
-.saltTreeNodeTrigger > .saltTreeNodeExpansionIcon,
-.saltTreeNodeTrigger > .saltTreeNode-icon {
-  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);
+.saltToolbarNextOverflow-panel .saltTooltrayNext[data-align=center],
+.saltToolbarNextOverflow-panel .saltTooltrayNext[data-align=end] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+.saltToolbarNextOverflow-panel .saltTooltrayNext > * {
+  inline-size: auto;
+}
+.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;
 }
-.saltTreeNodeTrigger > .saltIcon {
-  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);
+.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 +3431,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/4e80e272-9a7e-4873-a06d-4a946b33ff4b.css */
+/* src/90f79509-9c05-4f28-ba07-621519e16301.css */

package/dist-cjs/index.js

@@ -130,10 +130,9 @@ var Toolbar = require('./toolbar/Toolbar.js');
 var ToolbarButton = require('./toolbar/ToolbarButton.js');
 var Tooltray = require('./toolbar/Tooltray.js');
 var ToolbarField = require('./toolbar/toolbar-field/ToolbarField.js');
-var Tree = require('./tree/Tree.js');
-var TreeNode = require('./tree/TreeNode.js');
-var TreeNodeLabel = require('./tree/TreeNodeLabel.js');
-var TreeNodeTrigger = require('./tree/TreeNodeTrigger.js');
+var ToolbarContentNext = require('./toolbar-next/ToolbarContentNext.js');
+var ToolbarNext = require('./toolbar-next/ToolbarNext.js');
+var TooltrayNext = require('./toolbar-next/TooltrayNext.js');
 var ElectronWindow = require('./window/ElectronWindow.js');
 var WindowContext = require('./window/WindowContext.js');
 var dateComponents = require('@salt-ds/date-components');
@@ -321,10 +320,9 @@ exports.Toolbar = Toolbar.Toolbar;
 exports.ToolbarButton = ToolbarButton.ToolbarButton;
 exports.Tooltray = Tooltray.Tooltray;
 exports.ToolbarField = ToolbarField.ToolbarField;
-exports.Tree = Tree.Tree;
-exports.TreeNode = TreeNode.TreeNode;
-exports.TreeNodeLabel = TreeNodeLabel.TreeNodeLabel;
-exports.TreeNodeTrigger = TreeNodeTrigger.TreeNodeTrigger;
+exports.ToolbarContentNext = ToolbarContentNext.ToolbarContentNext;
+exports.ToolbarNext = ToolbarNext.ToolbarNext;
+exports.TooltrayNext = TooltrayNext.TooltrayNext;
 exports.ElectronWindow = ElectronWindow.ElectronWindow;
 exports.Window = WindowContext.Window;
 exports.WindowContext = WindowContext.WindowContext;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/toolbar-next/ToolbarContentNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltToolbarContentNext {\n  display: flex;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n  min-width: 0;\n  flex-shrink: 0;\n}\n\n.saltToolbarContentNext[data-position=\"start\"] {\n  justify-content: flex-start;\n}\n\n.saltToolbarContentNext[data-position=\"center\"] {\n  justify-content: center;\n}\n\n.saltToolbarContentNext[data-position=\"end\"] {\n  justify-content: flex-end;\n}\n\n.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=\"center\"],\n.saltToolbarContentNext[data-implicit] > .saltTooltrayNext[data-align=\"end\"] {\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ToolbarContentNext.css.js.map

package/dist-cjs/toolbar-next/ToolbarContentNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContentNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/toolbar-next/ToolbarContentNext.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var ToolbarContentNext$1 = require('./ToolbarContentNext.css.js');
+
+const withBaseName = core.makePrefixer("saltToolbarContentNext");
+const ToolbarContentNext = react.forwardRef(function ToolbarContentNext2({ children, className, position, ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-toolbar-content-next",
+    css: ToolbarContentNext$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(withBaseName(), className),
+      ...rest,
+      "data-position": position,
+      ref,
+      children
+    }
+  );
+});
+
+exports.ToolbarContentNext = ToolbarContentNext;
+//# sourceMappingURL=ToolbarContentNext.js.map

package/dist-cjs/toolbar-next/ToolbarContentNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContentNext.js","sources":["../src/toolbar-next/ToolbarContentNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport toolbarContentNextCss from \"./ToolbarContentNext.css\";\n\nexport type ToolbarContentNextPosition = \"start\" | \"center\" | \"end\";\n\nexport interface ToolbarContentNextProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Controls where the content is placed across the full toolbar.\n   * If any content uses `\"center\"`, `ToolbarNext` reserves symmetric side space\n   * so the center band stays on the toolbar midpoint.\n   */\n  position: ToolbarContentNextPosition;\n}\n\nconst withBaseName = makePrefixer(\"saltToolbarContentNext\");\n\nexport const ToolbarContentNext = forwardRef<\n  HTMLDivElement,\n  ToolbarContentNextProps\n>(function ToolbarContentNext({ children, className, position, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toolbar-content-next\",\n    css: toolbarContentNextCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      {...rest}\n      data-position={position}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToolbarContentNext","useWindow","useComponentCssInjection","toolbarContentNextCss","jsx","clsx"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAA,GAAqBC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC7E,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,2BAAA;AAAA,IACR,GAAA,EAAKC,oBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MACJ,eAAA,EAAe,QAAA;AAAA,MACf,GAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/toolbar-next/ToolbarNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltToolbarNext {\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  position: relative;\n}\n\n.saltToolbarNext-layout {\n  align-items: center;\n  --saltToolbarNext-band-gap: var(--salt-spacing-100);\n}\n\n.saltToolbarNext-layout:not([data-centered]) {\n  display: flex;\n  column-gap: var(--saltToolbarNext-band-gap);\n}\n\n.saltToolbarNext-layout[data-centered] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.saltToolbarNext-band {\n  display: flex;\n  align-items: center;\n  gap: var(--saltToolbarNext-band-gap);\n  min-width: 0;\n}\n\n.saltToolbarNext-layout:not([data-centered]) > .saltToolbarNext-band[data-band-position=\"end\"] {\n  justify-content: flex-end;\n  margin-inline-start: auto;\n}\n\n.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=\"start\"] {\n  grid-column: 1;\n}\n\n.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=\"center\"] {\n  grid-column: 2;\n  justify-content: center;\n}\n\n.saltToolbarNext-layout[data-centered] > .saltToolbarNext-band[data-band-position=\"end\"] {\n  grid-column: 3;\n  justify-content: flex-end;\n}\n\n.saltToolbarNext-fallback {\n  display: flex;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.saltToolbarNext-layout > * {\n  min-width: 0;\n}\n\n.saltToolbarNext-primary {\n  --toolbarNext-background: var(--salt-container-primary-background);\n  --toolbarNext-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltToolbarNext-secondary {\n  --toolbarNext-background: var(--salt-container-secondary-background);\n  --toolbarNext-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltToolbarNext-tertiary {\n  --toolbarNext-background: var(--salt-container-tertiary-background);\n  --toolbarNext-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltToolbarNext-bordered {\n  background: var(--saltToolbarNext-background, var(--toolbarNext-background));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbarNext-borderColor, var(--toolbarNext-borderColor));\n  border-radius: var(--salt-palette-corner, 0);\n  padding: var(--salt-spacing-100);\n}\n\n.saltToolbarNext-transparent {\n  background: transparent;\n  border: none;\n  padding: 0;\n}\n\n.saltToolbarNext-measurements {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  inset: 0 auto auto 0;\n  block-size: 0;\n  overflow: hidden;\n}\n\n.saltToolbarNext-measureTrigger {\n  white-space: nowrap;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ToolbarNext.css.js.map

package/dist-cjs/toolbar-next/ToolbarNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}