@salt-ds/core 1.64.1 → 1.65.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @salt-ds/core
 
+## 1.65.0
+
+### Minor Changes
+
+- 2516755: Added `Toolbar`, `ToolbarContent`, and `Tooltray` for composing horizontal toolbars with responsive overflow, grouped controls, and keyboard navigation.
+
+  Renamed from `ToolbarNext`, `ToolbarContentNext`, and `TooltrayNext` in lab.
+
+  **Basic Toolbar** — place `Tooltray` components directly inside `Toolbar`; use `align="end"` for trailing actions
+
+  ```tsx
+  import { Toolbar, Tooltray } from "@salt-ds/core";
+
+  <Toolbar aria-label="Data controls">
+    <Tooltray>{/* controls */}</Tooltray>
+    <Tooltray align="end" role="group" aria-label="View and actions">
+      {/* controls */}
+    </Tooltray>
+  </Toolbar>;
+  ```
+
+  **Centered Toolbar With Named Overflow** — use `ToolbarContent` when you need explicit start, center, and end regions
+
+  ```tsx
+  import { ToolbarContent, Toolbar, Tooltray } from "@salt-ds/core";
+
+  <Toolbar aria-label="Centered actions">
+    <ToolbarContent position="start">
+      <Tooltray overflowGroup="filters" overflowLabel="Filters">
+        {/* controls */}
+      </Tooltray>
+    </ToolbarContent>
+    <ToolbarContent position="center">
+      <Tooltray overflowMode="none" role="group" aria-label="View options">
+        {/* controls */}
+      </Tooltray>
+    </ToolbarContent>
+    <ToolbarContent position="end">
+      <Tooltray align="end">{/* controls */}</Tooltray>
+    </ToolbarContent>
+  </Toolbar>;
+  ```
+
+- 027f8c4: Added a `render` prop to `Avatar` so teams can render the avatar root as a custom interactive element such as a button or link.
+
+### Patch Changes
+
+- 906c94e: Fixed `Avatar` to use the notation text characteristic tokens for `font-family` and `font-weight`, aligning with its existing `font-size` and `line-height` values.
+- 027f8c4: Fixed `mergeProps` discarding the host component's inline `style` when the render element supplied its own `style`. Both `style` objects are now shallow-merged, so CSS custom properties set internally by the component are preserved. Conflicting keys still resolve in favor of the render element's value.
+
 ## 1.64.1
 
 ### Patch Changes

package/css/salt-core.css

@@ -129,13 +129,19 @@
   background: var(--saltAvatar-background, var(--avatar-background));
   font-size: var(--avatar-fontSize);
   line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));
-  font-family: var(--salt-text-fontFamily);
-  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-notation-fontFamily);
+  font-weight: var(--salt-text-notation-fontWeight);
   width: var(--avatar-container-size);
   min-width: var(--avatar-container-size);
   height: var(--avatar-container-size);
   min-height: var(--avatar-container-size);
   border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));
+  border: none;
+  padding: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  text-decoration: none;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -214,6 +220,38 @@
   width: 100%;
   height: 100%;
 }
+.saltAvatar:focus-visible {
+  outline-offset: var(--salt-spacing-fixed-100);
+}
+button.saltAvatar,
+a.saltAvatar {
+  cursor: var(--salt-cursor-hover);
+}
+button.saltAvatar:disabled {
+  cursor: var(--salt-cursor-disabled);
+}
+button.saltAvatar::after,
+a.saltAvatar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: transparent;
+}
+.saltAvatar[aria-expanded=true][aria-haspopup=menu]::after,
+.saltAvatar[aria-expanded=true][aria-haspopup=dialog]::after {
+  background: var(--salt-overlayable-background-hover);
+}
+@media (hover: hover) {
+  button.saltAvatar:hover::after,
+  a.saltAvatar:hover::after {
+    background: var(--salt-overlayable-background-hover);
+  }
+  button.saltAvatar:disabled:hover::after {
+    background: transparent;
+  }
+}
 
 /* src/badge/Badge.css */
 .saltBadge {
@@ -5510,6 +5548,206 @@ label.saltText small,
   outline-offset: var(--salt-size-fixed-100);
 }
 
+/* src/toolbar/Toolbar.css */
+.saltToolbar {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-width: 0;
+  position: relative;
+}
+.saltToolbar-layout {
+  align-items: center;
+  --saltToolbar-band-gap: var(--salt-spacing-100);
+}
+.saltToolbar-layout:not([data-centered]) {
+  display: flex;
+  column-gap: var(--saltToolbar-band-gap);
+}
+.saltToolbar-layout[data-centered] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+.saltToolbar-band {
+  display: flex;
+  align-items: center;
+  gap: var(--saltToolbar-band-gap);
+  min-width: 0;
+}
+.saltToolbar-layout:not([data-centered]) > .saltToolbar-band[data-band-position=end] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=start] {
+  grid-column: 1;
+}
+.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=center] {
+  grid-column: 2;
+  justify-content: center;
+}
+.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=end] {
+  grid-column: 3;
+  justify-content: flex-end;
+}
+.saltToolbar-fallback {
+  display: flex;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+}
+.saltToolbar-layout > * {
+  min-width: 0;
+}
+.saltToolbar-primary {
+  --toolbar-background: var(--salt-container-primary-background);
+  --toolbar-borderColor: var(--salt-container-primary-borderColor);
+}
+.saltToolbar-secondary {
+  --toolbar-background: var(--salt-container-secondary-background);
+  --toolbar-borderColor: var(--salt-container-secondary-borderColor);
+}
+.saltToolbar-tertiary {
+  --toolbar-background: var(--salt-container-tertiary-background);
+  --toolbar-borderColor: var(--salt-container-tertiary-borderColor);
+}
+.saltToolbar-bordered {
+  background: var(--saltToolbar-background, var(--toolbar-background));
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbar-borderColor, var(--toolbar-borderColor));
+  border-radius: var(--salt-palette-corner, 0);
+  padding: var(--salt-spacing-100);
+}
+.saltToolbar-transparent {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+.saltToolbar-measurements {
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  inset: 0 auto auto 0;
+  block-size: 0;
+  overflow: hidden;
+}
+.saltToolbar-measureTrigger {
+  white-space: nowrap;
+}
+
+/* src/toolbar/ToolbarContent.css */
+.saltToolbarContent {
+  display: flex;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  min-width: 0;
+  flex-shrink: 0;
+}
+.saltToolbarContent[data-position=start] {
+  justify-content: flex-start;
+}
+.saltToolbarContent[data-position=center] {
+  justify-content: center;
+}
+.saltToolbarContent[data-position=end] {
+  justify-content: flex-end;
+}
+.saltToolbarContent[data-implicit] > .saltTooltray[data-align=center],
+.saltToolbarContent[data-implicit] > .saltTooltray[data-align=end] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+/* src/toolbar/ToolbarOverflow.css */
+.saltToolbarOverflow-content {
+  position: relative;
+}
+.saltToolbarOverflow-slot,
+.saltToolbarOverflow-panelItem {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--salt-spacing-100);
+  min-width: 0;
+}
+.saltToolbarOverflow-slot[data-align=end] {
+  margin-inline-start: auto;
+}
+.saltToolbarOverflow-slot[data-align=center] {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+.saltToolbarOverflow-item {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+}
+.saltToolbarOverflow-menu {
+  display: flex;
+  flex-shrink: 0;
+}
+.saltToolbarOverflow-itemHost,
+.saltToolbarOverflow-contentHost {
+  display: contents;
+}
+.saltToolbarOverflow-trigger {
+  white-space: nowrap;
+}
+.saltToolbarOverflow-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);
+}
+.saltToolbarOverflow-floatingDescendant.saltToolbarOverflow-floatingDescendant {
+  z-index: calc(var(--salt-zIndex-flyover) + var(--salt-zIndex-default));
+}
+.saltToolbarOverflow-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);
+}
+.saltToolbarOverflow-panel .saltTooltray[data-align=center],
+.saltToolbarOverflow-panel .saltTooltray[data-align=end] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+.saltToolbarOverflow-panel .saltTooltray > * {
+  inline-size: auto;
+}
+.saltToolbarOverflow-content > .saltToolbarOverflow-slot .saltTooltray[data-align=center],
+.saltToolbarOverflow-content > .saltToolbarOverflow-slot .saltTooltray[data-align=end] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+/* src/toolbar/Tooltray.css */
+.saltTooltray {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: var(--salt-spacing-100);
+  min-width: 0;
+}
+.saltTooltray > * {
+  flex-shrink: 0;
+}
+.saltTooltray[data-align=end] {
+  margin-inline-start: auto;
+}
+.saltTooltray[data-align=center] {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+
 /* src/tooltip/Tooltip.css */
 .saltTooltip {
   --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));
@@ -6494,4 +6732,4 @@ label.saltText small,
   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);
 }
 
-/* src/8da7d430-1995-4d8c-8a61-22f6edca92c1.css */
+/* src/92a1d535-e903-4ee6-a57a-19ffbbd587e6.css */

package/dist-cjs/avatar/Avatar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Avatar.css.js.map

package/dist-cjs/avatar/Avatar.js

@@ -7,6 +7,7 @@ var clsx = require('clsx');
 var React = require('react');
 var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
 var makePrefixer = require('../utils/makePrefixer.js');
+var renderProps = require('../utils/renderProps.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
@@ -16,6 +17,11 @@ var useAvatarImage = require('./useAvatarImage.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltAvatar");
 const DEFAULT_AVATAR_SIZE = 2;
+const AvatarAction = React.forwardRef(
+  function AvatarAction2(props, ref) {
+    return renderProps.renderProps("div", { ...props, ref });
+  }
+);
 const defaultNameToInitials = (name) => name == null ? void 0 : name.split(" ").slice(0, 2).map((n) => n[0]).join("").toUpperCase();
 const Avatar = React.forwardRef(function Avatar2({
   className,
@@ -27,6 +33,7 @@ const Avatar = React.forwardRef(function Avatar2({
   size = DEFAULT_AVATAR_SIZE,
   style: styleProp,
   fallbackIcon: fallbackIconProp,
+  render,
   ...rest
 }, ref) {
   const targetWindow = window.useWindow();
@@ -50,14 +57,17 @@ const Avatar = React.forwardRef(function Avatar2({
     children = childrenProp;
   }
   const avatarInitials = nameToInitials(name);
-  const ariaProps = name ? {
+  const ariaProps = name ? render ? {
+    "aria-label": name
+  } : {
     role: "img",
     "aria-label": name
   } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    AvatarAction,
     {
       ref,
+      render,
       style,
       className: clsx.clsx(
         withBaseName(),

package/dist-cjs/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to `UserIcon`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon } = useIcon();\n\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <UserIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? {\n        role: \"img\",\n        \"aria-label\": name,\n      }\n    : {};\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,mBAAA,GAAsB,CAAA;AAE5B,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CACI,KAAA,CAAM,KACP,KAAA,CAAM,CAAA,EAAG,CAAA,CAAA,CACT,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EAAA,CAAA,CACL,WAAA,EAAA;AAEE,MAAM,MAAA,GAASC,gBAAA,CAAwC,SAASC,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA;AAAA,EACA,cAAA,GAAiB,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAA,GAAO,mBAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA;AAAA,EACd,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,4BAAA,EAAQ;AAE7B,EAAA,MAAM,eACJ,gBAAA,KAAqB,MAAA,kCAClB,QAAA,EAAA,EAAS,aAAA,EAAW,MAAC,CAAA,GAEtB,gBAAA;AAGJ,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,IAAI,QAAA;AAEJ,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAA,GAASC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAA,KAAW,QAAA;AACpC,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,QAAA,mBAAWC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAI,EAAA,EAAG,GAAA,EAAU,CAAA;AAAA,EACnC,CAAA,MAAA,IAAW,gBAAgB,IAAA,EAAM;AAC/B,IAAA,QAAA,GAAW,YAAA;AAAA,EACb;AAEA,EAAA,MAAM,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,YAAY,IAAA,GACd;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,YAAA,EAAc;AAAA,MAEhB,EAAC;AAEL,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAA,IAAkB;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to `UserIcon`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n  /**\n   * Render prop to enable customization of the avatar root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\ninterface AvatarActionProps extends ComponentPropsWithoutRef<\"div\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(\n  function AvatarAction(props, ref) {\n    return renderProps(\"div\", { ...props, ref });\n  },\n);\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon } = useIcon();\n\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <UserIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? render\n      ? {\n          \"aria-label\": name,\n        }\n      : {\n          role: \"img\",\n          \"aria-label\": name,\n        }\n    : {};\n\n  return (\n    <AvatarAction\n      ref={ref}\n      render={render}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </AvatarAction>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AvatarAction","renderProps","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;AAqEA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,mBAAA,GAAsB,CAAA;AAM5B,MAAM,YAAA,GAAeC,gBAAA;AAAA,EACnB,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,OAAOC,wBAAY,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAAA,EAC7C;AACF,CAAA;AAEA,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CACI,KAAA,CAAM,KACP,KAAA,CAAM,CAAA,EAAG,CAAA,CAAA,CACT,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EAAA,CAAA,CACL,WAAA,EAAA;AAEE,MAAM,MAAA,GAASF,gBAAA,CAAwC,SAASG,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA;AAAA,EACA,cAAA,GAAiB,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAA,GAAO,mBAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA;AAAA,EACd,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,4BAAA,EAAQ;AAE7B,EAAA,MAAM,eACJ,gBAAA,KAAqB,MAAA,kCAClB,QAAA,EAAA,EAAS,aAAA,EAAW,MAAC,CAAA,GAEtB,gBAAA;AAGJ,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,IAAI,QAAA;AAEJ,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAA,GAASC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAA,KAAW,QAAA;AACpC,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,QAAA,mBAAWC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAI,EAAA,EAAG,GAAA,EAAU,CAAA;AAAA,EACnC,CAAA,MAAA,IAAW,gBAAgB,IAAA,EAAM;AAC/B,IAAA,QAAA,GAAW,YAAA;AAAA,EACb;AAEA,EAAA,MAAM,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,SAAA,GAAY,OACd,MAAA,GACE;AAAA,IACE,YAAA,EAAc;AAAA,GAChB,GACA;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,YAAA,EAAc;AAAA,MAElB,EAAC;AAEL,EAAA,uBACEA,cAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAA,IAAkB;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}

package/dist-cjs/index.js

@@ -153,6 +153,9 @@ var ToggleButtonGroupContext = require('./toggle-button-group/ToggleButtonGroupC
 var Toggletip = require('./toggletip/Toggletip.js');
 var ToggletipPanel = require('./toggletip/ToggletipPanel.js');
 var ToggletipTrigger = require('./toggletip/ToggletipTrigger.js');
+var Toolbar = require('./toolbar/Toolbar.js');
+var ToolbarContent = require('./toolbar/ToolbarContent.js');
+var Tooltray = require('./toolbar/Tooltray.js');
 var Tooltip = require('./tooltip/Tooltip.js');
 var useTooltip = require('./tooltip/useTooltip.js');
 var Tree = require('./tree/Tree.js');
@@ -381,6 +384,9 @@ exports.useToggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup;
 exports.Toggletip = Toggletip.Toggletip;
 exports.ToggletipPanel = ToggletipPanel.ToggletipPanel;
 exports.ToggletipTrigger = ToggletipTrigger.ToggletipTrigger;
+exports.Toolbar = Toolbar.Toolbar;
+exports.ToolbarContent = ToolbarContent.ToolbarContent;
+exports.Tooltray = Tooltray.Tooltray;
 exports.Tooltip = Tooltip.Tooltip;
 exports.useTooltip = useTooltip.useTooltip;
 exports.Tree = Tree.Tree;

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/Toolbar.css.js

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

package/dist-cjs/toolbar/Toolbar.css.js.map

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