@salt-ds/lab 1.0.0-alpha.14 → 1.0.0-alpha.16

package/dist-es/navigation-item/NavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  MouseEventHandler,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, Link, Button } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the parent navigation item has active nested items.\n   */\n  blurSelected?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\ntype ConditionalWrapper = {\n  children: ReactNode;\n  className: string;\n};\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurSelected,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n      onExpand?.(event);\n    };\n\n    const ConditionalWrapper = ({\n      children,\n      className,\n      ...rest\n    }: ConditionalWrapper) =>\n      parent ? (\n        <Button\n          aria-label=\"expand\"\n          variant=\"secondary\"\n          aria-expanded={expanded}\n          className={clsx(withBaseName(\"expandButton\"), className)}\n          onClick={handleExpand}\n          {...rest}\n        >\n          {children}\n        </Button>\n      ) : (\n        <Link\n          aria-current={active ? \"page\" : undefined}\n          href={href}\n          className={className}\n          {...rest}\n        >\n          {children}\n        </Link>\n      );\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <ConditionalWrapper\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active,\n              [withBaseName(\"blurSelected\")]: blurSelected,\n              [withBaseName(\"nested\")]: level !== 0,\n            },\n            withBaseName(orientation)\n          )}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent && (\n            <ExpansionIcon\n              expanded={expanded}\n              orientation={orientation}\n              className={withBaseName(\"expandIcon\")}\n            />\n          )}\n        </ConditionalWrapper>\n      </div>\n    );\n  }\n);\n"],"names":["NavigationItem","navigationItemCss","children","className","rest"],"mappings":"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"}

package/dist-es/progress/CircularProgress/CircularProgress.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCircularProgress {\n  --circularProgress-progressCircle-radius: calc(var(--salt-size-base) - (var(--salt-size-adornment) * 0.25));\n  --circularProgress-progressCircle-circumference: calc(var(--circularProgress-progressCircle-radius) * 2 * PI);\n  --circularProgress-railCircle-radius: calc(var(--salt-size-base) - (var(--salt-track-borderWidth) * 0.5));\n  --circularProgress-railCircle-circumference: calc(var(--circularProgress-railCircle-radius) * 2 * PI);\n\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-progressValue,\n.saltCircularProgress-disabled circle {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-circle {\n  stroke: var(--salt-accent-background-disabled);\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-railCircle {\n  stroke: var(--salt-track-borderColor-disabled);\n}\n\n.saltCircularProgress-railCircle {\n  stroke: var(--salt-track-borderColor);\n  stroke-width: var(--salt-track-borderWidth);\n  r: var(--circularProgress-railCircle-radius);\n}\n\n.saltCircularProgress-svg {\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n  fill: var(--salt-accent-background);\n  transform: rotate(-90deg);\n  display: block;\n}\n\n.saltCircularProgress-circle {\n  r: var(--circularProgress-progressCircle-radius);\n  stroke-width: calc(var(--salt-size-adornment) * 0.5);\n  stroke: var(--salt-accent-background);\n  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n";
+var css_248z = ".saltCircularProgress {\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-track {\n  inline-size: calc(var(--salt-size-base) * 2);\n  block-size: calc(var(--salt-size-base) * 2);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-track-borderWidth);\n  border-radius: var(--salt-size-base);\n  border-color: var(--salt-track-borderColor);\n}\n\n.saltCircularProgress-bar {\n  inline-size: calc(var(--salt-size-base) * 2);\n  block-size: calc(var(--salt-size-base) * 2);\n  border-style: var(--salt-track-borderStyle);\n  border-width: calc(var(--salt-size-adornment) * 0.5);\n  border-radius: var(--salt-size-base);\n  border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n  inline-size: 50%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  transform: rotate(180deg);\n  overflow: hidden;\n  position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n  inline-size: 100%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  overflow: hidden;\n  transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n  transform: rotate(0deg);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CircularProgress.css.js.map

package/dist-es/progress/CircularProgress/CircularProgress.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { Info } from '../Info.js';
@@ -11,12 +11,9 @@ const withBaseName = makePrefixer("saltCircularProgress");
 const CircularProgress = forwardRef(function CircularProgress2({
   "aria-label": ariaLabel,
   className,
-  disabled,
   max = 100,
   showInfo = true,
-  renderInfo,
   value = 0,
-  unit = "%",
   ...rest
 }, ref) {
   const targetWindow = useWindow();
@@ -25,71 +22,67 @@ const CircularProgress = forwardRef(function CircularProgress2({
     css: css_248z,
     window: targetWindow
   });
-  const circleStyle = {};
-  const railCircleStyle = {};
+  const subOverlayRightStyle = {};
+  const subOverlayLeftStyle = {};
+  const getRotationAngle = (progress2, shift = 0) => {
+    return -180 + (progress2 - shift) / 50 * 180;
+  };
   const progress = value / max * 100;
-  const progressStrokeLength = `calc(${progress} * var(--circularProgress-progressCircle-circumference) / 100)`;
-  const progressGapLength = `calc((100 - ${progress}) * var(--circularProgress-progressCircle-circumference) / 100)`;
-  const railStrokeLength = `calc((100 - ${progress}) * var(--circularProgress-railCircle-circumference) / 100)`;
-  const railGapLength = `calc((${progress}) * var(--circularProgress-railCircle-circumference) / 100)`;
-  circleStyle.strokeDasharray = `${progressStrokeLength} ${progressGapLength}`;
-  railCircleStyle.strokeDashoffset = `${railStrokeLength}`;
-  railCircleStyle.strokeDasharray = `${railStrokeLength} ${railGapLength}`;
-  useEffect(() => {
-    if (process.env.NODE_ENV !== "production" && !ariaLabel) {
-      console.error(
-        "Salt: aria-label value not supplied to CircularProgress. This may affect the ADA compliance level of the component and owning application, and may generate errors in automated accessibility testing software"
-      );
-    }
-  }, [ariaLabel]);
-  const getValueProps = () => ({
-    unit,
-    value,
-    getValueProps: (valueProps = {}) => ({
-      className: withBaseName("progressValue"),
-      ...valueProps
-    })
-  });
+  if (progress <= 50) {
+    const rotationAngle = getRotationAngle(progress);
+    subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;
+    subOverlayLeftStyle.transform = "rotate(-180deg)";
+  } else {
+    const rotationAngle = getRotationAngle(progress, 50);
+    subOverlayRightStyle.transform = "rotate(0deg)";
+    subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;
+  }
   let progressInfo = null;
   if (showInfo) {
-    progressInfo = renderInfo ? renderInfo(getValueProps()) : /* @__PURE__ */ jsx(Info, {
+    progressInfo = /* @__PURE__ */ jsx(Info, {
       className: withBaseName("progressValue"),
-      unit,
-      value: Math.round(progress),
-      ...rest
+      unit: "%",
+      value: Math.round(progress)
     });
   }
   return /* @__PURE__ */ jsxs("div", {
-    className: clsx(
-      withBaseName(),
-      { [withBaseName("disabled")]: disabled },
-      className
-    ),
+    className: clsx(withBaseName(), className),
     "data-testid": "circular-progress",
     ref,
     role: "progressbar",
     "aria-label": ariaLabel,
     "aria-valuemax": max,
     "aria-valuemin": 0,
-    "aria-valuenow": value,
+    "aria-valuenow": Math.round(value),
     ...rest,
     children: [
-      /* @__PURE__ */ jsxs("svg", {
-        className: withBaseName("svg"),
+      /* @__PURE__ */ jsx("div", {
+        className: withBaseName("track")
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: withBaseName("bars"),
         children: [
-          /* @__PURE__ */ jsx("circle", {
-            cx: "50%",
-            cy: "50%",
-            fill: "none",
-            style: railCircleStyle,
-            className: withBaseName("railCircle")
+          /* @__PURE__ */ jsx("div", {
+            className: withBaseName("barOverlayRight"),
+            children: /* @__PURE__ */ jsx("div", {
+              className: withBaseName("barSubOverlayRight"),
+              "data-testid": "barSubOverlayRight",
+              style: subOverlayRightStyle,
+              children: /* @__PURE__ */ jsx("div", {
+                className: withBaseName("bar")
+              })
+            })
           }),
-          /* @__PURE__ */ jsx("circle", {
-            cx: "50%",
-            cy: "50%",
-            fill: "none",
-            style: circleStyle,
-            className: withBaseName("circle")
+          /* @__PURE__ */ jsx("div", {
+            className: withBaseName("barOverlayLeft"),
+            children: /* @__PURE__ */ jsx("div", {
+              className: withBaseName("barSubOverlayLeft"),
+              "data-testid": "barSubOverlayLeft",
+              style: subOverlayLeftStyle,
+              children: /* @__PURE__ */ jsx("div", {
+                className: withBaseName("bar")
+              })
+            })
           })
         ]
       }),

package/dist-es/progress/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info as DefaultInfo } from \"../Info\";\nimport { InfoRendererProps } from \"../LinearProgress/LinearProgress\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A label for accessibility\n   */\n  \"aria-label\"?: string;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Disabled flag, true when the component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * Render props callback to render info panel.\n   * @param function({ value, unit, getValueProps })\n   */\n  renderInfo?: (\n    props: Pick<InfoRendererProps<any, any>, \"value\" | \"unit\" | \"getValueProps\">\n  ) => ReactElement<InfoRendererProps<any, any>>;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * Default unit is`%`\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Circular progress bar with an optional Info element, showing the current value\n * The default Info element can be rendered by setting `unit` and `value` props.\n * A custom Info element can be rendered using the `renderInfo` callback.\n * The render props callback is of the form\n * @param {string} unit the unit of the progress info\n * @param {number} value the value of the progress info\n * @param {function} getValueProps function callback that returns the value props\n */\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    \"aria-label\": ariaLabel,\n    className,\n    disabled,\n    max = 100,\n    showInfo = true,\n    renderInfo,\n    value = 0,\n    unit = \"%\",\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-circular-progress\",\n    css: circularProgressCSS,\n    window: targetWindow,\n  });\n\n  const circleStyle: CSSProperties = {};\n  const railCircleStyle: CSSProperties = {};\n  const rootStyle: CSSProperties = {};\n  const rootProps: HTMLAttributes<any> = {};\n\n  const progress = (value / max) * 100;\n\n  rootProps[\"aria-valuenow\"] = Math.round(value);\n\n  const progressStrokeLength = `calc(${progress} * var(--circularProgress-progressCircle-circumference) / 100)`;\n  const progressGapLength = `calc((100 - ${progress}) * var(--circularProgress-progressCircle-circumference) / 100)`;\n  const railStrokeLength = `calc((100 - ${progress}) * var(--circularProgress-railCircle-circumference) / 100)`;\n  const railGapLength = `calc((${progress}) * var(--circularProgress-railCircle-circumference) / 100)`;\n\n  circleStyle.strokeDasharray = `${progressStrokeLength} ${progressGapLength}`;\n  railCircleStyle.strokeDashoffset = `${railStrokeLength}`;\n  railCircleStyle.strokeDasharray = `${railStrokeLength} ${railGapLength}`;\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\" && !ariaLabel) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Salt: aria-label value not supplied to CircularProgress. This may affect the ADA compliance level of the component and owning application, and may generate errors in automated accessibility testing software\"\n      );\n    }\n  }, [ariaLabel]);\n\n  const getValueProps = () => ({\n    unit,\n    value,\n    getValueProps: (valueProps = {}) => ({\n      className: withBaseName(\"progressValue\"),\n      ...valueProps,\n    }),\n  });\n\n  let progressInfo: ReactNode = null;\n  if (showInfo) {\n    progressInfo = renderInfo ? (\n      renderInfo(getValueProps())\n    ) : (\n      <DefaultInfo\n        className={withBaseName(\"progressValue\")}\n        unit={unit}\n        value={Math.round(progress)}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"disabled\")]: disabled },\n        className\n      )}\n      data-testid=\"circular-progress\"\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={value}\n      {...rest}\n    >\n      <svg className={withBaseName(\"svg\")}>\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          style={railCircleStyle}\n          className={withBaseName(\"railCircle\")}\n        />\n\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          style={circleStyle}\n          className={withBaseName(\"circle\")}\n        />\n      </svg>\n      {progressInfo}\n    </div>\n  );\n});\n"],"names":["CircularProgress","circularProgressCSS","DefaultInfo"],"mappings":"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"}
+{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info } from \"../Info\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A label for accessibility\n   */\n  \"aria-label\"?: string;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Circular progress bar with an optional Info element, showing the current value\n */\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    \"aria-label\": ariaLabel,\n    className,\n    max = 100,\n    showInfo = true,\n    value = 0,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-circular-progress\",\n    css: circularProgressCSS,\n    window: targetWindow,\n  });\n\n  const subOverlayRightStyle: CSSProperties = {};\n  const subOverlayLeftStyle: CSSProperties = {};\n\n  const getRotationAngle = (progress: number, shift = 0) => {\n    return -180 + ((progress - shift) / 50) * 180;\n  };\n\n  const progress = (value / max) * 100;\n\n  if (progress <= 50) {\n    const rotationAngle = getRotationAngle(progress);\n    subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n    subOverlayLeftStyle.transform = \"rotate(-180deg)\";\n  } else {\n    const rotationAngle = getRotationAngle(progress, 50);\n    subOverlayRightStyle.transform = \"rotate(0deg)\";\n    subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n  }\n\n  let progressInfo: ReactNode = null;\n  if (showInfo) {\n    progressInfo = (\n      <Info\n        className={withBaseName(\"progressValue\")}\n        unit=\"%\"\n        value={Math.round(progress)}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      data-testid=\"circular-progress\"\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={Math.round(value)}\n      {...rest}\n    >\n      <div className={withBaseName(\"track\")} />\n      <div className={withBaseName(\"bars\")}>\n        <div className={withBaseName(\"barOverlayRight\")}>\n          <div\n            className={withBaseName(\"barSubOverlayRight\")}\n            data-testid=\"barSubOverlayRight\"\n            style={subOverlayRightStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n        <div className={withBaseName(\"barOverlayLeft\")}>\n          <div\n            className={withBaseName(\"barSubOverlayLeft\")}\n            data-testid=\"barSubOverlayLeft\"\n            style={subOverlayLeftStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n      </div>\n      {progressInfo}\n    </div>\n  );\n});\n"],"names":["CircularProgress","circularProgressCSS","progress"],"mappings":"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"}

package/dist-es/progress/LinearProgress/LinearProgress.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  min-width: 200px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-bar {\n  background: var(--salt-accent-background-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-track {\n  background: var(--salt-track-borderColor-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-progressValue {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: calc(100% - 10px);\n  overflow: hidden;\n  height: var(--salt-size-adornment);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-track {\n  background: var(--salt-track-borderColor);\n  width: 100%;\n  height: var(--salt-track-borderWidth);\n  position: absolute;\n  top: calc((var(--salt-size-adornment) - var(--salt-track-borderWidth)) / 2);\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  min-width: 200px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: var(--salt-size-adornment);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-track {\n  background: var(--salt-track-borderColor);\n  width: 100%;\n  height: var(--salt-track-borderWidth);\n  position: absolute;\n  top: calc((var(--salt-size-adornment) - var(--salt-track-borderWidth)) / 2);\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=LinearProgress.css.js.map

package/dist-es/progress/LinearProgress/LinearProgress.js

@@ -8,29 +8,8 @@ import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './LinearProgress.css.js';
 
 const withBaseName = makePrefixer("saltLinearProgress");
-const getUnitAndValueProps = ({ unit, value }, { progressUnit, progressValue }) => ({
-  unit,
-  value,
-  getUnitProps: (props = {}) => ({
-    className: progressUnit,
-    ...props
-  }),
-  getValueProps: (props = {}) => ({
-    className: progressValue,
-    ...props
-  })
-});
 const LinearProgress = forwardRef(
-  function LinearProgress2({
-    className,
-    disabled,
-    max = 100,
-    renderInfo,
-    showInfo = true,
-    unit = "%",
-    value = 0,
-    ...rest
-  }, ref) {
+  function LinearProgress2({ className, max = 100, showInfo = true, value = 0, ...rest }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-linear-progress",
@@ -38,51 +17,32 @@ const LinearProgress = forwardRef(
       window: targetWindow
     });
     let progressInfo = null;
-    const progressUnit = withBaseName("progressUnit");
-    const progressValue = withBaseName("progressValue");
     const progress = value / max * 100;
     if (showInfo) {
-      progressInfo = renderInfo ? renderInfo(
-        getUnitAndValueProps(
-          {
-            unit,
-            value
-          },
-          {
-            progressUnit,
-            progressValue
-          }
-        )
-      ) : /* @__PURE__ */ jsx(Info, {
-        unit,
+      progressInfo = /* @__PURE__ */ jsx(Info, {
+        unit: "%",
         value: Math.round(progress),
-        className: progressValue
+        className: withBaseName("progressValue")
       });
     }
-    const rootProps = {};
     const barStyle = {};
     const trackStyle = {};
-    rootProps["aria-valuenow"] = Math.round(value);
-    rootProps["aria-valuemin"] = 0;
-    rootProps["aria-valuemax"] = 100;
     barStyle.transform = `translateX(${progress - 100}%)`;
     trackStyle.transform = `translateX(${progress}%)`;
     return /* @__PURE__ */ jsxs("div", {
-      className: clsx(
-        withBaseName(),
-        { [withBaseName("disabled")]: disabled },
-        className
-      ),
+      className: clsx(withBaseName(), className),
       ref,
       "data-testid": "linear-progress",
       role: "progressbar",
-      ...rootProps,
+      "aria-valuemax": max,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(value),
       ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", {
           className: withBaseName("barContainer"),
           children: [
-            progress !== 0 && /* @__PURE__ */ jsx("div", {
+            /* @__PURE__ */ jsx("div", {
               className: withBaseName("bar"),
               style: barStyle
             }),

package/dist-es/progress/LinearProgress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { Info as DefaultInfo } from \"../Info\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface InfoRendererProps<T, U> {\n  unit: string;\n  value: number;\n  getUnitProps?: (props: T) => { className: string } & T;\n  getValueProps: (props: U) => { className: string } & U;\n}\n\ntype UnitAndValuePropsGetter<T, U> = (\n  a: {\n    unit: string;\n    value: number;\n  },\n  b: {\n    progressUnit: string;\n    progressValue: string;\n  }\n) => InfoRendererProps<T, U>;\n\nconst getUnitAndValueProps: UnitAndValuePropsGetter<any, any> = (\n  { unit, value },\n  { progressUnit, progressValue }\n) => ({\n  unit,\n  value,\n  getUnitProps: (props = {}) => ({\n    className: progressUnit,\n    ...props,\n  }),\n  getValueProps: (props = {}) => ({\n    className: progressValue,\n    ...props,\n  }),\n});\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * Disabled flag, true when the component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * render props callback to render info panel.\n   */\n  renderInfo?: (\n    props: Pick<\n      InfoRendererProps<any, any>,\n      \"value\" | \"unit\" | \"getValueProps\" | \"getUnitProps\"\n    >\n  ) => ReactElement<InfoRendererProps<any, any>>;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * Default unit is`%`.\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Linear progress bar with an optional Info element, showing the current value\n * The default Info element can be rendered by setting `unit` and `value` props.\n * A custom Info element can be rendered using the `renderInfo` callback.\n * The render props callback is of the form\n * @param {string} unit the unit of the progress info\n * @param {number} value the value of the progress info\n * @param {function} getUnitProps function callback that returns the unit props\n * @param {function} getValueProps function callback that returns the value props\n */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    {\n      className,\n      disabled,\n      max = 100,\n      renderInfo,\n      showInfo = true,\n      unit = \"%\",\n      value = 0,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-linear-progress\",\n      css: linearProgressCss,\n      window: targetWindow,\n    });\n\n    let progressInfo: ReactNode = null;\n\n    const progressUnit = withBaseName(\"progressUnit\");\n    const progressValue = withBaseName(\"progressValue\");\n\n    const progress = (value / max) * 100;\n\n    if (showInfo) {\n      progressInfo = renderInfo ? (\n        renderInfo(\n          getUnitAndValueProps(\n            {\n              unit,\n              value,\n            },\n            {\n              progressUnit,\n              progressValue,\n            }\n          )\n        )\n      ) : (\n        <DefaultInfo\n          unit={unit}\n          value={Math.round(progress)}\n          className={progressValue}\n        />\n      );\n    }\n\n    const rootProps: HTMLAttributes<HTMLDivElement> = {};\n    const barStyle: CSSProperties = {};\n    const trackStyle: CSSProperties = {};\n\n    rootProps[\"aria-valuenow\"] = Math.round(value);\n    rootProps[\"aria-valuemin\"] = 0;\n    rootProps[\"aria-valuemax\"] = 100;\n    barStyle.transform = `translateX(${progress - 100}%)`;\n    trackStyle.transform = `translateX(${progress}%)`;\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"disabled\")]: disabled },\n          className\n        )}\n        ref={ref}\n        data-testid=\"linear-progress\"\n        role=\"progressbar\"\n        {...rootProps}\n        {...rest}\n      >\n        <div className={withBaseName(\"barContainer\")}>\n          {progress !== 0 && (\n            <div className={withBaseName(\"bar\")} style={barStyle} />\n          )}\n          <div className={withBaseName(\"track\")} style={trackStyle} />\n        </div>\n        {progressInfo}\n      </div>\n    );\n  }\n);\n"],"names":["LinearProgress","linearProgressCss","DefaultInfo"],"mappings":"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"}
+{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { Info } from \"../Info\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * Default unit is`%`.\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Linear progress bar with an optional Info element, showing the current value\n */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    { className, max = 100, showInfo = true, value = 0, ...rest },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-linear-progress\",\n      css: linearProgressCss,\n      window: targetWindow,\n    });\n\n    let progressInfo: ReactNode = null;\n\n    const progress = (value / max) * 100;\n\n    if (showInfo) {\n      progressInfo = (\n        <Info\n          unit=\"%\"\n          value={Math.round(progress)}\n          className={withBaseName(\"progressValue\")}\n        />\n      );\n    }\n\n    const barStyle: CSSProperties = {};\n    const trackStyle: CSSProperties = {};\n\n    barStyle.transform = `translateX(${progress - 100}%)`;\n    trackStyle.transform = `translateX(${progress}%)`;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        data-testid=\"linear-progress\"\n        role=\"progressbar\"\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(value)}\n        {...rest}\n      >\n        <div className={withBaseName(\"barContainer\")}>\n          <div className={withBaseName(\"bar\")} style={barStyle} />\n          <div className={withBaseName(\"track\")} style={trackStyle} />\n        </div>\n        {progressInfo}\n      </div>\n    );\n  }\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AA8B/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAAA,CACP,EAAE,SAAA,EAAW,GAAM,GAAA,GAAA,EAAK,QAAW,GAAA,IAAA,EAAM,KAAQ,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,IAAI,YAA0B,GAAA,IAAA,CAAA;AAE9B,IAAM,MAAA,QAAA,GAAY,QAAQ,GAAO,GAAA,GAAA,CAAA;AAEjC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,YAAA,mBACG,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,IAAK,EAAA,GAAA;AAAA,QACL,KAAA,EAAO,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,QAC1B,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,OACzC,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,MAAM,WAA0B,EAAC,CAAA;AACjC,IAAA,MAAM,aAA4B,EAAC,CAAA;AAEnC,IAAS,QAAA,CAAA,SAAA,GAAY,cAAc,QAAW,GAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AAC9C,IAAA,UAAA,CAAW,YAAY,CAAc,WAAA,EAAA,QAAA,CAAA,EAAA,CAAA,CAAA;AAErC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,aAAY,EAAA,iBAAA;AAAA,MACZ,IAAK,EAAA,aAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,CAAA;AAAA,MACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC9B,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACzC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAAG,KAAO,EAAA,QAAA;AAAA,aAAU,CAAA;AAAA,4BACrD,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAG,KAAO,EAAA,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAC5D,CAAA;AAAA,QACC,YAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltStepLabel {\n  width: 100%;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n";
+var css_248z = ".saltStepLabel {\n  width: 100%;\n  text-align: center;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StepLabel.css.js.map

package/dist-es/stepped-tracker/StepLabel/StepLabel.js

@@ -1,35 +1,27 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { clsx } from 'clsx';
-import { makePrefixer, useIdMemo, useForkRef, Label } from '@salt-ds/core';
+import { makePrefixer, Label } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import css_248z from './StepLabel.css.js';
-import { useSteppedTrackerContext } from '../SteppedTrackerContext.js';
-import '../TrackerStep/TrackerStep.js';
-import { useTrackerStepTooltipContext } from '../TrackerStep/TrackerStepTooltipContext.js';
 
 const withBaseName = makePrefixer("saltStepLabel");
 const StepLabel = forwardRef(
   function StepLabel2({ children, className, ...rest }, ref) {
-    const id = useIdMemo();
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-step-label",
       css: css_248z,
       window: targetWindow
     });
-    const { getOverflowRef } = useSteppedTrackerContext();
-    const overflowRef = useMemo(() => getOverflowRef(id), [id, getOverflowRef]);
-    const isInTooltip = useTrackerStepTooltipContext();
-    const combinedRef = useForkRef(overflowRef, ref);
-    return isInTooltip ? /* @__PURE__ */ jsx("span", {
-      children
-    }) : /* @__PURE__ */ jsx(Label, {
+    return /* @__PURE__ */ jsx(Label, {
       className: clsx(withBaseName(), className),
-      ref: combinedRef,
+      ref,
       ...rest,
-      children
+      children: /* @__PURE__ */ jsx("strong", {
+        children
+      })
     });
   }
 );

package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  useMemo,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useForkRef, makePrefixer, useIdMemo, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nimport { useSteppedTrackerContext } from \"../SteppedTrackerContext\";\nimport { useTrackerStepTooltipContext } from \"../TrackerStep\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  children: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n  function StepLabel({ children, className, ...rest }, ref?) {\n    const id = useIdMemo();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-step-label\",\n      css: stepLabelCss,\n      window: targetWindow,\n    });\n\n    const { getOverflowRef } = useSteppedTrackerContext();\n    const overflowRef = useMemo(() => getOverflowRef(id), [id, getOverflowRef]);\n\n    const isInTooltip = useTrackerStepTooltipContext();\n\n    const combinedRef = useForkRef<HTMLLabelElement>(overflowRef, ref);\n\n    return isInTooltip ? (\n      <span>{children}</span>\n    ) : (\n      <Label\n        className={clsx(withBaseName(), className)}\n        ref={combinedRef}\n        {...rest}\n      >\n        {children}\n      </Label>\n    );\n  }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAM1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAM,EAAA;AACzD,IAAA,MAAM,KAAK,SAAU,EAAA,CAAA;AAErB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,cAAe,EAAA,GAAI,wBAAyB,EAAA,CAAA;AACpD,IAAM,MAAA,WAAA,GAAc,QAAQ,MAAM,cAAA,CAAe,EAAE,CAAG,EAAA,CAAC,EAAI,EAAA,cAAc,CAAC,CAAA,CAAA;AAE1E,IAAA,MAAM,cAAc,4BAA6B,EAAA,CAAA;AAEjD,IAAM,MAAA,WAAA,GAAc,UAA6B,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAEjE,IAAA,OAAO,8BACJ,GAAA,CAAA,MAAA,EAAA;AAAA,MAAM,QAAA;AAAA,KAAS,oBAEf,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,WAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport type StepLabelProps = ComponentPropsWithoutRef<\"label\">;\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n  function StepLabel({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-step-label\",\n      css: stepLabelCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <strong>{children}</strong>\n      </Label>\n    );\n  }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAI1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepped-tracker/SteppedTracker.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSteppedTracker {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n  width: 100%;\n  position: relative;\n}\n";
+var css_248z = ".saltSteppedTracker {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  position: relative;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SteppedTracker.css.js.map

package/dist-es/stepped-tracker/SteppedTracker.js

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, Children, useEffect, isValidElement } from 'react';
+import { forwardRef, Children, useEffect, isValidElement } from 'react';
 import { clsx } from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { makePrefixer } from '@salt-ds/core';
-import useDetectTruncatedText from './useDetectTruncatedText.js';
 import { SteppedTrackerProvider, TrackerStepProvider } from './SteppedTrackerContext.js';
 import css_248z from './SteppedTracker.css.js';
 
@@ -35,12 +34,8 @@ const SteppedTracker = forwardRef(
       window: targetWindow
     });
     useCheckInvalidChildren(children);
-    const [hasTooltips, setHasTooltips] = useState(false);
-    const getOverflowRef = useDetectTruncatedText(setHasTooltips);
     const totalSteps = Children.count(children);
     return /* @__PURE__ */ jsx(SteppedTrackerProvider, {
-      hasTooltips,
-      getOverflowRef,
       totalSteps,
       activeStep,
       children: /* @__PURE__ */ jsx("ul", {

package/dist-es/stepped-tracker/SteppedTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Children,\n  useState,\n  isValidElement,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport useDetectTruncatedText from \"./useDetectTruncatedText\";\nimport {\n  SteppedTrackerProvider,\n  TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * The index of the current activeStep\n   */\n  activeStep: number;\n  /**\n   * Should be one or more TrackerStep components\n   */\n  children: ReactNode;\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      let hasInvalidChild = false;\n      Children.forEach(children, (child) => {\n        if (!isValidElement(child)) {\n          hasInvalidChild = true;\n        }\n      });\n\n      if (hasInvalidChild) {\n        console.error(\n          \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n        );\n      }\n    }\n  }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n  function SteppedTracker(\n    { children, className, activeStep, ...restProps },\n    ref?\n  ): ReactElement<SteppedTrackerProps> {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepped-tracker\",\n      css: steppedTrackerCss,\n      window: targetWindow,\n    });\n\n    useCheckInvalidChildren(children);\n    const [hasTooltips, setHasTooltips] = useState(false);\n    // A factory function used to get a callback ref for checking truncation.\n    const getOverflowRef = useDetectTruncatedText(setHasTooltips);\n    const totalSteps = Children.count(children);\n\n    return (\n      <SteppedTrackerProvider\n        hasTooltips={hasTooltips}\n        getOverflowRef={getOverflowRef}\n        totalSteps={totalSteps}\n        activeStep={activeStep}\n      >\n        <ul\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...restProps}\n        >\n          {Children.map(children, (child, i) => (\n            <TrackerStepProvider stepNumber={i}>{child}</TrackerStepProvider>\n          ))}\n        </ul>\n      </SteppedTrackerProvider>\n    );\n  }\n);\n"],"names":["SteppedTracker","steppedTrackerCss"],"mappings":";;;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAatD,MAAM,uBAAA,GAA0B,CAAC,QAAwB,KAAA;AACvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,eAAkB,GAAA,KAAA,CAAA;AACtB,MAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AACpC,QAAI,IAAA,CAAC,cAAe,CAAA,KAAK,CAAG,EAAA;AAC1B,UAAkB,eAAA,GAAA,IAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,2EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACf,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,gBACP,EAAE,QAAA,EAAU,WAAW,UAAe,EAAA,GAAA,SAAA,IACtC,GACmC,EAAA;AACnC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBAAA,CAAwB,QAAQ,CAAA,CAAA;AAChC,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEpD,IAAM,MAAA,cAAA,GAAiB,uBAAuB,cAAc,CAAA,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1C,IAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,MACC,WAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,mBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,sBAC7B,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,UAAY,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAC5C,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Children,\n  isValidElement,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport {\n  SteppedTrackerProvider,\n  TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * The index of the current activeStep\n   */\n  activeStep: number;\n  /**\n   * Should be one or more TrackerStep components\n   */\n  children: ReactNode;\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      let hasInvalidChild = false;\n      Children.forEach(children, (child) => {\n        if (!isValidElement(child)) {\n          hasInvalidChild = true;\n        }\n      });\n\n      if (hasInvalidChild) {\n        console.error(\n          \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n        );\n      }\n    }\n  }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n  function SteppedTracker(\n    { children, className, activeStep, ...restProps },\n    ref\n  ): ReactElement<SteppedTrackerProps> {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepped-tracker\",\n      css: steppedTrackerCss,\n      window: targetWindow,\n    });\n    useCheckInvalidChildren(children);\n\n    const totalSteps = Children.count(children);\n\n    return (\n      <SteppedTrackerProvider totalSteps={totalSteps} activeStep={activeStep}>\n        <ul\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...restProps}\n        >\n          {Children.map(children, (child, i) => (\n            <TrackerStepProvider stepNumber={i}>{child}</TrackerStepProvider>\n          ))}\n        </ul>\n      </SteppedTrackerProvider>\n    );\n  }\n);\n"],"names":["SteppedTracker","steppedTrackerCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAatD,MAAM,uBAAA,GAA0B,CAAC,QAAwB,KAAA;AACvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,eAAkB,GAAA,KAAA,CAAA;AACtB,MAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AACpC,QAAI,IAAA,CAAC,cAAe,CAAA,KAAK,CAAG,EAAA;AAC1B,UAAkB,eAAA,GAAA,IAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,2EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACf,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,gBACP,EAAE,QAAA,EAAU,WAAW,UAAe,EAAA,GAAA,SAAA,IACtC,GACmC,EAAA;AACnC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,uBAAA,CAAwB,QAAQ,CAAA,CAAA;AAEhC,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1C,IAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,MAAuB,UAAA;AAAA,MAAwB,UAAA;AAAA,MAC9C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,mBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,sBAC7B,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,UAAY,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAC5C,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepped-tracker/SteppedTrackerContext.js

@@ -3,9 +3,7 @@ import { createContext, useMemo, useContext } from 'react';
 
 const defaultSteppedTrackerContext = {
   activeStep: 0,
-  hasTooltips: false,
   totalSteps: 1,
-  getOverflowRef: () => void 0,
   isWithinSteppedTracker: false
 };
 const SteppedTrackerContext = createContext(
@@ -13,20 +11,16 @@ const SteppedTrackerContext = createContext(
 );
 const SteppedTrackerProvider = ({
   activeStep,
-  getOverflowRef,
-  hasTooltips,
   totalSteps,
   children
 }) => {
   const steppedTrackerContextValue = useMemo(
     () => ({
       activeStep,
-      getOverflowRef,
-      hasTooltips,
       totalSteps,
       isWithinSteppedTracker: true
     }),
-    [activeStep, getOverflowRef, hasTooltips, totalSteps]
+    [activeStep, totalSteps]
   );
   return /* @__PURE__ */ jsx(SteppedTrackerContext.Provider, {
     value: steppedTrackerContextValue,

package/dist-es/stepped-tracker/SteppedTrackerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from \"react\";\n\nimport { GetOverflowRef } from \"./useDetectTruncatedText\";\n\nexport type SteppedTrackerContextType = {\n  activeStep: number;\n  getOverflowRef: GetOverflowRef;\n  hasTooltips: boolean;\n  totalSteps: number;\n  isWithinSteppedTracker: boolean;\n};\n\nconst defaultSteppedTrackerContext = {\n  activeStep: 0,\n  hasTooltips: false,\n  totalSteps: 1,\n  getOverflowRef: () => undefined,\n  isWithinSteppedTracker: false,\n};\n\nconst SteppedTrackerContext = createContext(\n  defaultSteppedTrackerContext as unknown as SteppedTrackerContextType\n);\n\ntype SteppedTrackerProviderProps = Omit<\n  SteppedTrackerContextType,\n  \"isWithinSteppedTracker\"\n> & {\n  children: ReactNode;\n};\n\nexport const SteppedTrackerProvider = ({\n  activeStep,\n  getOverflowRef,\n  hasTooltips,\n  totalSteps,\n  children,\n}: SteppedTrackerProviderProps) => {\n  const steppedTrackerContextValue: SteppedTrackerContextType = useMemo(\n    () => ({\n      activeStep,\n      getOverflowRef,\n      hasTooltips,\n      totalSteps,\n      isWithinSteppedTracker: true,\n    }),\n    [activeStep, getOverflowRef, hasTooltips, totalSteps]\n  );\n\n  return (\n    <SteppedTrackerContext.Provider value={steppedTrackerContextValue}>\n      {children}\n    </SteppedTrackerContext.Provider>\n  );\n};\n\nexport const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);\n\ntype TrackerStepNumberContextType = number;\n\nconst TrackerStepContext = createContext<TrackerStepNumberContextType>(0);\n\nexport const useTrackerStepContext = () => useContext(TrackerStepContext);\n\ntype TrackerStepProivderProps = {\n  stepNumber: number;\n  children: ReactNode;\n};\n\nexport const TrackerStepProvider = ({\n  children,\n  stepNumber,\n}: TrackerStepProivderProps) => {\n  return (\n    <TrackerStepContext.Provider value={stepNumber}>\n      {children}\n    </TrackerStepContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAYA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,WAAa,EAAA,KAAA;AAAA,EACb,UAAY,EAAA,CAAA;AAAA,EACZ,gBAAgB,MAAM,KAAA,CAAA;AAAA,EACtB,sBAAwB,EAAA,KAAA;AAC1B,CAAA,CAAA;AAEA,MAAM,qBAAwB,GAAA,aAAA;AAAA,EAC5B,4BAAA;AACF,CAAA,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAA,OAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA,IAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,UAAA,EAAY,cAAgB,EAAA,WAAA,EAAa,UAAU,CAAA;AAAA,GACtD,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAO,EAAA,0BAAA;AAAA,IACpC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,wBAAA,GAA2B,MAAM,UAAA,CAAW,qBAAqB,EAAA;AAI9E,MAAM,kBAAA,GAAqB,cAA4C,CAAC,CAAA,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAM,UAAA,CAAW,kBAAkB,EAAA;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,UAAA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,UAAA;AAAA,IACjC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from \"react\";\n\nexport type SteppedTrackerContextType = {\n  activeStep: number;\n  totalSteps: number;\n  isWithinSteppedTracker: boolean;\n};\n\nconst defaultSteppedTrackerContext = {\n  activeStep: 0,\n  totalSteps: 1,\n  isWithinSteppedTracker: false,\n};\n\nconst SteppedTrackerContext = createContext(\n  defaultSteppedTrackerContext as unknown as SteppedTrackerContextType\n);\n\ntype SteppedTrackerProviderProps = Omit<\n  SteppedTrackerContextType,\n  \"isWithinSteppedTracker\"\n> & {\n  children: ReactNode;\n};\n\nexport const SteppedTrackerProvider = ({\n  activeStep,\n  totalSteps,\n  children,\n}: SteppedTrackerProviderProps) => {\n  const steppedTrackerContextValue: SteppedTrackerContextType = useMemo(\n    () => ({\n      activeStep,\n      totalSteps,\n      isWithinSteppedTracker: true,\n    }),\n    [activeStep, totalSteps]\n  );\n\n  return (\n    <SteppedTrackerContext.Provider value={steppedTrackerContextValue}>\n      {children}\n    </SteppedTrackerContext.Provider>\n  );\n};\n\nexport const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);\n\ntype TrackerStepNumberContextType = number;\n\nconst TrackerStepContext = createContext<TrackerStepNumberContextType>(0);\n\nexport const useTrackerStepContext = () => useContext(TrackerStepContext);\n\ntype TrackerStepProivderProps = {\n  stepNumber: number;\n  children: ReactNode;\n};\n\nexport const TrackerStepProvider = ({\n  children,\n  stepNumber,\n}: TrackerStepProivderProps) => {\n  return (\n    <TrackerStepContext.Provider value={stepNumber}>\n      {children}\n    </TrackerStepContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,UAAY,EAAA,CAAA;AAAA,EACZ,sBAAwB,EAAA,KAAA;AAC1B,CAAA,CAAA;AAEA,MAAM,qBAAwB,GAAA,aAAA;AAAA,EAC5B,4BAAA;AACF,CAAA,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAA,OAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA,IAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,YAAY,UAAU,CAAA;AAAA,GACzB,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAO,EAAA,0BAAA;AAAA,IACpC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,wBAAA,GAA2B,MAAM,UAAA,CAAW,qBAAqB,EAAA;AAI9E,MAAM,kBAAA,GAAqB,cAA4C,CAAC,CAAA,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAM,UAAA,CAAW,kBAAkB,EAAA;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,UAAA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,UAAA;AAAA,IACjC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTrackerConnector {\n  --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n  --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n  --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-track-borderWidth));\n  --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n}\n\n.saltTrackerConnector {\n  height: 0;\n  border-top-width: var(--trackerConnector-thickness);\n  border-top-style: var(--trackerConnector-style-default);\n  border-top-color: var(--trackerConnector-color);\n  position: absolute;\n  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  top: calc(var(--saltIcon-size) / 2);\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n  border-top-style: var(--trackerConnector-style-active);\n}\n";
+var css_248z = ".saltTrackerConnector {\n  --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n  --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n  --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-track-borderWidth));\n  --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n}\n\n.saltTrackerConnector {\n  height: 0;\n  border-top-width: var(--trackerConnector-thickness);\n  border-top-style: var(--trackerConnector-style-default);\n  border-top-color: var(--trackerConnector-color);\n  position: absolute;\n  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n  border-top-style: var(--trackerConnector-style-active);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TrackerConnector.css.js.map

package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
+var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  padding: 0 var(--salt-spacing-25);\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TrackerStep.css.js.map

package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js

@@ -3,12 +3,11 @@ import { forwardRef, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { makePrefixer, Tooltip } from '@salt-ds/core';
+import { makePrefixer } from '@salt-ds/core';
 import { StepActiveIcon, StepDefaultIcon, StepSuccessIcon } from '@salt-ds/icons';
 import { TrackerConnector } from '../TrackerConnector/TrackerConnector.js';
 import { useSteppedTrackerContext, useTrackerStepContext } from '../SteppedTrackerContext.js';
 import css_248z from './TrackerStep.css.js';
-import { TrackStepTooltipProvider } from './TrackerStepTooltipContext.js';
 
 const withBaseName = makePrefixer("saltTrackerStep");
 const iconMap = {
@@ -59,7 +58,7 @@ const TrackerStep = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const { activeStep, totalSteps, hasTooltips, isWithinSteppedTracker } = useSteppedTrackerContext();
+    const { activeStep, totalSteps, isWithinSteppedTracker } = useSteppedTrackerContext();
     const stepNumber = useTrackerStepContext();
     useCheckWithinSteppedTracker(isWithinSteppedTracker);
     const isActive = activeStep === stepNumber;
@@ -71,10 +70,9 @@ const TrackerStep = forwardRef(
       ...style,
       "--saltTrackerStep-width": `${100 / totalSteps}%`
     };
-    const Inner = /* @__PURE__ */ jsxs("li", {
+    return /* @__PURE__ */ jsxs("li", {
       className: clsx(withBaseName(), withBaseName(resolvedState), className),
       style: innerStyle,
-      tabIndex: hasTooltips ? 0 : void 0,
       "aria-current": isActive ? "step" : void 0,
       "data-state": state,
       ref,
@@ -90,16 +88,6 @@ const TrackerStep = forwardRef(
         })
       ]
     });
-    if (!hasTooltips) {
-      return Inner;
-    }
-    return /* @__PURE__ */ jsx(Tooltip, {
-      placement: "top",
-      content: /* @__PURE__ */ jsx(TrackStepTooltipProvider, {
-        children
-      }),
-      children: Inner
-    });
   }
 );