@salt-ds/core 1.64.1 → 1.65.1

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @salt-ds/core
 
+## 1.65.1
+
+### Patch Changes
+
+- a41099d: Fixed `compute-scroll-into-view` not being listed as a dependency.
+- 562f2e6: - Refactored `Spinner` so its size and stroke width are driven by CSS density tokens rather than computed in JavaScript. Density changes no longer cause `Spinner` to re-render.
+  - Fixed the small `Spinner` rendering at a smaller size than intended in high density.
+
+## 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 {
@@ -4052,15 +4090,24 @@ a:focus .saltCard-interactable.saltCard-disabled {
   height: var(--salt-size-base);
   width: var(--salt-size-base);
 }
+.saltSpinner-medium .saltSpinner-arc {
+  r: calc((var(--salt-size-base) - var(--spinner-strokeWidth)) / 2);
+}
 .saltSpinner-large {
   --spinner-strokeWidth: var(--salt-size-bar);
   height: calc(var(--salt-size-base) * 2);
   width: calc(var(--salt-size-base) * 2);
 }
+.saltSpinner-large .saltSpinner-arc {
+  r: calc((var(--salt-size-base) * 2 - var(--spinner-strokeWidth)) / 2);
+}
 .saltSpinner-small {
   --spinner-strokeWidth: var(--salt-size-fixed-200);
-  height: var(--salt-size-icon);
-  width: var(--salt-size-icon);
+  height: max(var(--salt-size-icon), 12px);
+  width: max(var(--salt-size-icon), 12px);
+}
+.saltSpinner-small .saltSpinner-arc {
+  r: calc((max(var(--salt-size-icon), 12px) - var(--spinner-strokeWidth)) / 2);
 }
 .saltSpinner-spinner {
   animation: spinner 0.9s linear infinite;
@@ -5510,6 +5557,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 +6741,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/e33ddadc-0f4f-47bc-8cf4-c2c50b07ad47.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/spinner/Spinner.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background));\n}\n\n/* Styles applied when `size=\"medium\"` */\n.saltSpinner-medium {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied when `size=\"small\"` */\n.saltSpinner-small {\n  --spinner-strokeWidth: var(--salt-size-fixed-200);\n  height: var(--salt-size-icon);\n  width: var(--salt-size-icon);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background));\n}\n\n/* Styles applied when `size=\"medium\"` */\n.saltSpinner-medium {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n.saltSpinner-medium .saltSpinner-arc {\n  r: calc((var(--salt-size-base) - var(--spinner-strokeWidth)) / 2);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n.saltSpinner-large .saltSpinner-arc {\n  r: calc((var(--salt-size-base) * 2 - var(--spinner-strokeWidth)) / 2);\n}\n\n/* Styles applied when `size=\"small\"` */\n.saltSpinner-small {\n  --spinner-strokeWidth: var(--salt-size-fixed-200);\n  height: max(var(--salt-size-icon), 12px);\n  width: max(var(--salt-size-icon), 12px);\n}\n.saltSpinner-small .saltSpinner-arc {\n  r: calc((max(var(--salt-size-icon), 12px) - var(--spinner-strokeWidth)) / 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Spinner.css.js.map

package/dist-cjs/spinner/Spinner.js

@@ -8,10 +8,10 @@ var React = require('react');
 var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
 require('../aria-announcer/AriaAnnouncerContext.js');
 require('../aria-announcer/AriaAnnouncerProvider.js');
-var SaltProvider = require('../salt-provider/SaltProvider.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 var useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var Spinner$1 = require('./Spinner.css.js');
 var SpinnerSVG = require('./svgSpinners/SpinnerSVG.js');
@@ -32,7 +32,7 @@ const Spinner = React.forwardRef(
     completionAnnouncement = `finished ${ariaLabel}`,
     disableAnnouncer,
     className,
-    size = "medium",
+    size: sizeProp = "medium",
     id: idProp,
     ...rest
   }, ref) {
@@ -44,8 +44,7 @@ const Spinner = React.forwardRef(
       window: targetWindow
     });
     const { announce } = useAriaAnnouncer.useAriaAnnouncer();
-    const density = SaltProvider.useDensity();
-    size = handleSize(size);
+    const size = handleSize(sizeProp);
     React.useEffect(() => {
       if (disableAnnouncer) return;
       announce(ariaLabel);
@@ -83,7 +82,7 @@ const Spinner = React.forwardRef(
         ref,
         role: "img",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerSVG.SpinnerSVG, { size, density, id })
+        children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerSVG.SpinnerSVG, { id })
       }
     );
   }

package/dist-cjs/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = Date.now();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (Date.now() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role=\"img\"\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useWindow","useComponentCssInjection","spinnerCss","useAriaAnnouncer","useDensity","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;;AAiBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAA,GAAa,CAAC,IAAA,KAClB,IAAA,KAAS,YAAY,QAAA,GAAW,IAAA;AAElC,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAqCxC,MAAM,OAAA,GAAUC,gBAAA;AAAA,EACrB,SAASC,QAAAA,CACP;AAAA,IACE,cAAc,SAAA,GAAY,SAAA;AAAA,IAC1B,iBAAA,GAAoB,GAAA;AAAA,IACpB,gBAAA,GAAmB,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,EAAA,EAAI,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,SAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,iCAAA,EAAiB;AAEtC,IAAA,MAAM,UAAUC,uBAAA,EAAW;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAA,EAAkB;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAA,GAAY,KAAK,GAAA,EAAI;AAE3B,MAAA,MAAM,QAAA,GACJ,iBAAA,GAAoB,CAAA,IACpB,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAA,CAAK,GAAA,EAAI,GAAI,SAAA,GAAY,gBAAA,EAAkB;AAE7C,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA,QACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,MACpB,GAAG,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAA,EAAkB;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAA,EAAwB;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA,QACjC;AAAA,MACF,CAAA;AAAA,IACF,CAAA,EAAG;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,SAAA;AAAA,QACZ,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAY,OAAA,EAAkB,EAAA,EAAQ;AAAA;AAAA,KACpD;AAAA,EAEJ;AACF;;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      className,\n      size: sizeProp = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const size = handleSize(sizeProp);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = Date.now();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (Date.now() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role=\"img\"\n        {...rest}\n      >\n        <SpinnerSVG id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useWindow","useComponentCssInjection","spinnerCss","useAriaAnnouncer","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;;AAgBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAA,GAAa,CAAC,IAAA,KAClB,IAAA,KAAS,YAAY,QAAA,GAAW,IAAA;AAElC,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAqCxC,MAAM,OAAA,GAAUC,gBAAA;AAAA,EACrB,SAASC,QAAAA,CACP;AAAA,IACE,cAAc,SAAA,GAAY,SAAA;AAAA,IAC1B,iBAAA,GAAoB,GAAA;AAAA,IACpB,gBAAA,GAAmB,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAM,QAAA,GAAW,QAAA;AAAA,IACjB,EAAA,EAAI,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,SAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,iCAAA,EAAiB;AAEtC,IAAA,MAAM,IAAA,GAAO,WAAW,QAAQ,CAAA;AAEhC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAA,EAAkB;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAA,GAAY,KAAK,GAAA,EAAI;AAE3B,MAAA,MAAM,QAAA,GACJ,iBAAA,GAAoB,CAAA,IACpB,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAA,CAAK,GAAA,EAAI,GAAI,SAAA,GAAY,gBAAA,EAAkB;AAE7C,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA,QACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,MACpB,GAAG,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAA,EAAkB;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAA,EAAwB;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA,QACjC;AAAA,MACF,CAAA;AAAA,IACF,CAAA,EAAG;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,SAAA;AAAA,QACZ,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA,CAACE,yBAAW,EAAA,EAAQ;AAAA;AAAA,KACtB;AAAA,EAEJ;AACF;;;;;"}