@salt-ds/lab 1.0.0-alpha.56 → 1.0.0-alpha.58

package/dist-es/skip-link/SkipLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { Link, type LinkProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type RefObject, forwardRef } from \"react\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends LinkProps {\n  /**\n   * This is a ref that has access to the target element.\n   *\n   * This will be used to apply focus to that element\n   *\n   * Refs are referentially stable so if this changes it won't be picked up\n   * will need to find a better way of passing in the target element to apply the attributes\n   */\n  targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink({ className, targetRef, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-skip-link\",\n      css: skipLinkCss,\n      window: targetWindow,\n    });\n\n    const targetClass = clsx(withBaseName(\"target\"), className);\n\n    const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n    return (\n      <li>\n        <Link\n          {...eventHandlers}\n          {...rest}\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n        />\n      </li>\n    );\n  },\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,UAAS,EAAE,SAAA,EAAW,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA;AAE1D,IAAA,MAAM,aAAgB,GAAA,sBAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA;AAEvE,IAAA,2BACG,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * The ID of the target element to apply focus when the link is clicked.\n   * If the element with this ID is not found, the SkipLink will not be rendered.\n   */\n  targetId: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink(\n    { className, targetId, children, onKeyUp, onBlur, onClick, ...rest },\n    ref,\n  ) {\n    const [isTargetAvailable, setIsTargetAvailable] = useState(false);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-skip-link\",\n      css: skipLinkCss,\n      window: targetWindow,\n    });\n\n    const targetRef = useRef<HTMLElement | null>(null);\n\n    useEffect(() => {\n      if (targetWindow) {\n        targetRef.current = targetWindow.document.getElementById(targetId);\n      }\n      setIsTargetAvailable(!!targetRef.current);\n    }, [targetId, targetWindow]);\n\n    const eventHandlers = useManageFocusOnTarget({\n      onKeyUp,\n      onBlur,\n      onClick,\n      targetRef,\n      targetClass: withBaseName(\"target\"),\n    });\n\n    if (!isTargetAvailable) return null;\n    return (\n      <a\n        className={clsx(withBaseName(), className)}\n        href={`#${targetId}`}\n        ref={ref}\n        target=\"_self\"\n        {...eventHandlers}\n        {...rest}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAAA,CACP,EAAE,SAAA,EAAW,QAAU,EAAA,QAAA,EAAU,OAAS,EAAA,MAAA,EAAQ,OAAS,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAChE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AAEjD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,SAAA,CAAU,OAAU,GAAA,YAAA,CAAa,QAAS,CAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AAEnE,MAAqB,oBAAA,CAAA,CAAC,CAAC,SAAA,CAAU,OAAO,CAAA;AAAA,KACvC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,IAAA,MAAM,gBAAgB,sBAAuB,CAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,EAAa,aAAa,QAAQ;AAAA,KACnC,CAAA;AAED,IAAI,IAAA,CAAC,mBAA0B,OAAA,IAAA;AAC/B,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,QAClB,GAAA;AAAA,QACA,MAAO,EAAA,OAAA;AAAA,QACN,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/skip-link/internal/useManageFocusOnTarget.js

@@ -1,7 +1,10 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 const FOCUS_TIMEOUT = 50;
 const useManageFocusOnTarget = ({
+  onKeyUp,
+  onBlur,
+  onClick,
   targetRef,
   targetClass
 }) => {
@@ -13,44 +16,58 @@ const useManageFocusOnTarget = ({
       setTarget(targetRef.current);
     }
   }, [targetRef]);
-  return useMemo(() => {
-    if (!target) {
-      return {};
-    }
-    const addTabIndex = () => {
-      const tabIndex = target.getAttribute("tabIndex");
-      hasTabIndex.current = tabIndex || tabIndex === "0";
-      if (!hasTabIndex.current) {
-        shouldRemoveTabIndex.current = true;
-        target.setAttribute("tabIndex", "-1");
-      }
-    };
-    const removeTabIndex = () => {
-      if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
-        target.removeAttribute("tabIndex");
-      }
-    };
-    const handleFocusOnTarget = () => {
-      shouldRemoveTabIndex.current = false;
-      target.classList.add(targetClass);
-    };
-    const handleBlurFromTarget = () => {
+  if (!target) {
+    return {};
+  }
+  const addTabIndex = () => {
+    const tabIndex = target.getAttribute("tabIndex");
+    hasTabIndex.current = tabIndex || tabIndex === "0";
+    if (!hasTabIndex.current) {
       shouldRemoveTabIndex.current = true;
-      removeTabIndex();
-      target.classList.remove(targetClass);
-    };
-    return {
-      onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),
-      onClick: () => {
-        addTabIndex();
-        setTimeout(() => {
-          target.focus();
-        }, FOCUS_TIMEOUT);
-        target.addEventListener("focus", handleFocusOnTarget, { once: true });
-        target.addEventListener("blur", handleBlurFromTarget, { once: true });
-      }
-    };
-  }, [target, targetClass]);
+      target.setAttribute("tabIndex", "-1");
+    }
+  };
+  const removeTabIndex = () => {
+    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
+      target.removeAttribute("tabIndex");
+    }
+  };
+  const handleFocusOnTarget = () => {
+    shouldRemoveTabIndex.current = false;
+    target.classList.add(targetClass);
+  };
+  const handleBlurFromTarget = () => {
+    shouldRemoveTabIndex.current = true;
+    removeTabIndex();
+    target.classList.remove(targetClass);
+  };
+  function moveToTarget() {
+    addTabIndex();
+    setTimeout(() => {
+      target == null ? void 0 : target.focus();
+    }, FOCUS_TIMEOUT);
+    target == null ? void 0 : target.addEventListener("focus", handleFocusOnTarget, { once: true });
+    target == null ? void 0 : target.addEventListener("blur", handleBlurFromTarget, { once: true });
+  }
+  const handleKeyUp = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      moveToTarget();
+    }
+    onKeyUp == null ? void 0 : onKeyUp(event);
+  };
+  const handleClick = (event) => {
+    moveToTarget();
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleBlur = (event) => {
+    setTimeout(removeTabIndex, FOCUS_TIMEOUT);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  return {
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyUp: handleKeyUp
+  };
 };
 
 export { useManageFocusOnTarget };

package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import { type RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\nexport const useManageFocusOnTarget = ({\n  targetRef,\n  targetClass,\n}: {\n  targetRef: RefObject<HTMLElement> | undefined;\n  targetClass: string;\n}):\n  | { onBlur: () => NodeJS.Timeout; onClick: () => void }\n  | Record<string, undefined> => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string>();\n  const shouldRemoveTabIndex = useRef<boolean>();\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  return useMemo(() => {\n    if (!target) {\n      return {};\n    }\n\n    const addTabIndex = () => {\n      const tabIndex = target.getAttribute(\"tabIndex\");\n      hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n      if (!hasTabIndex.current) {\n        shouldRemoveTabIndex.current = true;\n        target.setAttribute(\"tabIndex\", \"-1\");\n      }\n    };\n\n    const removeTabIndex = () => {\n      if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n        target.removeAttribute(\"tabIndex\");\n      }\n    };\n\n    const handleFocusOnTarget = () => {\n      shouldRemoveTabIndex.current = false;\n      target.classList.add(targetClass);\n    };\n\n    const handleBlurFromTarget = () => {\n      shouldRemoveTabIndex.current = true;\n      removeTabIndex();\n      target.classList.remove(targetClass);\n    };\n\n    return {\n      onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),\n      onClick: () => {\n        addTabIndex();\n        setTimeout(() => {\n          target.focus();\n        }, FOCUS_TIMEOUT);\n\n        target.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n        target.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n      },\n    };\n  }, [target, targetClass]);\n};\n"],"names":[],"mappings":";;AAEA,MAAM,aAAgB,GAAA,EAAA;AAEf,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA;AACF,CAKiC,KAAA;AAC/B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAsB,EAAA;AAElD,EAAA,MAAM,cAAc,MAAyB,EAAA;AAC7C,EAAA,MAAM,uBAAuB,MAAgB,EAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,OAAS,EAAA;AACtB,MAAA,SAAA,CAAU,UAAU,OAAO,CAAA;AAAA;AAC7B,GACF,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAO,EAAC;AAAA;AAGV,IAAA,MAAM,cAAc,MAAM;AACxB,MAAM,MAAA,QAAA,GAAW,MAAO,CAAA,YAAA,CAAa,UAAU,CAAA;AAC/C,MAAY,WAAA,CAAA,OAAA,GAAU,YAAY,QAAa,KAAA,GAAA;AAE/C,MAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,QAAO,MAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA;AACtC,KACF;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,CAAC,WAAA,CAAY,OAAW,IAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAA,MAAA,CAAO,gBAAgB,UAAU,CAAA;AAAA;AACnC,KACF;AAEA,IAAA,MAAM,sBAAsB,MAAM;AAChC,MAAA,oBAAA,CAAqB,OAAU,GAAA,KAAA;AAC/B,MAAO,MAAA,CAAA,SAAA,CAAU,IAAI,WAAW,CAAA;AAAA,KAClC;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,MAAe,cAAA,EAAA;AACf,MAAO,MAAA,CAAA,SAAA,CAAU,OAAO,WAAW,CAAA;AAAA,KACrC;AAEA,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA,MAAM,UAAW,CAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAY,WAAA,EAAA;AACZ,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAM,EAAA;AAAA,WACZ,aAAa,CAAA;AAEhB,QAAA,MAAA,CAAO,iBAAiB,OAAS,EAAA,mBAAA,EAAqB,EAAE,IAAA,EAAM,MAAM,CAAA;AACpE,QAAA,MAAA,CAAO,iBAAiB,MAAQ,EAAA,oBAAA,EAAsB,EAAE,IAAA,EAAM,MAAM,CAAA;AAAA;AACtE,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,WAAW,CAAC,CAAA;AAC1B;;;;"}
+{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n  onBlur?: FocusEventHandler;\n  onClick?: MouseEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  targetRef: RefObject<HTMLElement> | undefined;\n  targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n  onBlur?: FocusEventHandler<HTMLAnchorElement>;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n  onKeyUp,\n  onBlur,\n  onClick,\n  targetRef,\n  targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string>();\n  const shouldRemoveTabIndex = useRef<boolean>();\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  if (!target) {\n    return {};\n  }\n\n  const addTabIndex = () => {\n    const tabIndex = target.getAttribute(\"tabIndex\");\n    hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n    if (!hasTabIndex.current) {\n      shouldRemoveTabIndex.current = true;\n      target.setAttribute(\"tabIndex\", \"-1\");\n    }\n  };\n\n  const removeTabIndex = () => {\n    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n      target.removeAttribute(\"tabIndex\");\n    }\n  };\n\n  const handleFocusOnTarget = () => {\n    shouldRemoveTabIndex.current = false;\n    target.classList.add(targetClass);\n  };\n\n  const handleBlurFromTarget = () => {\n    shouldRemoveTabIndex.current = true;\n    removeTabIndex();\n    target.classList.remove(targetClass);\n  };\n\n  function moveToTarget() {\n    addTabIndex();\n    setTimeout(() => {\n      target?.focus();\n    }, FOCUS_TIMEOUT);\n\n    target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n    target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n  }\n\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      moveToTarget();\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    moveToTarget();\n    onClick?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n    setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n    onBlur?.(event);\n  };\n\n  return {\n    onBlur: handleBlur,\n    onClick: handleClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/stepped-tracker/Step.Connector.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltSteppedTracker-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-border-strong);\n  border-top-style: var(--salt-track-borderStyle-incomplete);\n  border-top-color: var(--salt-track-borderColor);\n}\n\n.saltSteppedTracker-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltSteppedTracker-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltSteppedTracker-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-border-strong);\n  border-left-style: var(--salt-track-borderStyle-incomplete);\n  border-left-color: var(--salt-track-borderColor);\n}\n\n.saltSteppedTracker-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltSteppedTracker-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.Connector.css.js.map

package/dist-es/stepped-tracker/Step.Connector.css.js.map

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

package/dist-es/stepped-tracker/Step.Connector.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './Step.Connector.css.js';
+
+const withBaseName = makePrefixer("saltStepConnector");
+function StepConnector() {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-step-connector",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: withBaseName() });
+}
+
+export { StepConnector };
+//# sourceMappingURL=Step.Connector.js.map

package/dist-es/stepped-tracker/Step.Connector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.Connector.js","sources":["../src/stepped-tracker/Step.Connector.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepConnectorCSS from \"./Step.Connector.css\";\n\nconst withBaseName = makePrefixer(\"saltStepConnector\");\n\nexport function StepConnector() {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-connector\",\n    css: stepConnectorCSS,\n    window: targetWindow,\n  });\n\n  return <div aria-hidden className={withBaseName()} />;\n}\n"],"names":["stepConnectorCSS"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,SAAS,aAAgB,GAAA;AAC9B,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,2BAAQ,KAAI,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA,SAAA,EAAW,cAAgB,EAAA,CAAA;AACrD;;;;"}

package/dist-es/stepped-tracker/Step.Description.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepDescription {\n  grid-area: description;\n}\n\n.saltSteppedTracker-vertical .saltStepDescription {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepDescription {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepDescription {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.Description.css.js.map

package/dist-es/stepped-tracker/Step.Description.css.js.map

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

package/dist-es/stepped-tracker/Step.Description.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import css_248z from './Step.Description.css.js';
+
+const withBaseName = makePrefixer("saltStepDescription");
+function StepDescription({
+  id,
+  className,
+  styleAs = "label",
+  ...props
+}) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-step-description",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      id,
+      styleAs: "label",
+      className: clsx(withBaseName(), className),
+      ...props
+    }
+  );
+}
+
+export { StepDescription };
+//# sourceMappingURL=Step.Description.js.map

package/dist-es/stepped-tracker/Step.Description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.Description.js","sources":["../src/stepped-tracker/Step.Description.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport stepDescriptionCSS from \"./Step.Description.css\";\n\nexport interface StepDescriptionProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltStepDescription\");\n\nexport function StepDescription({\n  id,\n  className,\n  styleAs = \"label\",\n  ...props\n}: StepDescriptionProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-description\",\n    css: stepDescriptionCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      styleAs=\"label\"\n      className={clsx(withBaseName(), className)}\n      {...props}\n    />\n  );\n}\n"],"names":["stepDescriptionCSS"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAEhD,SAAS,eAAgB,CAAA;AAAA,EAC9B,EAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,GAAG;AACL,CAAyB,EAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist-es/stepped-tracker/Step.ExpandTrigger.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepExpandTrigger {\n  grid-area: expand;\n}\n\n.saltButton.saltStepExpandTrigger:focus-visible {\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.ExpandTrigger.css.js.map

package/dist-es/stepped-tracker/Step.ExpandTrigger.css.js.map

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

package/dist-es/stepped-tracker/Step.ExpandTrigger.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIcon, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import css_248z from './Step.ExpandTrigger.css.js';
+
+const withBaseName = makePrefixer("saltStepExpandTrigger");
+function StepExpandTrigger({
+  id,
+  expanded,
+  className,
+  ...props
+}) {
+  const { CollapseIcon, ExpandIcon } = useIcon();
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-step-expand-trigger",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      id,
+      appearance: "transparent",
+      sentiment: "neutral",
+      className: clsx(withBaseName(), className),
+      ...props,
+      children: expanded ? /* @__PURE__ */ jsx(CollapseIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ExpandIcon, { "aria-hidden": true })
+    }
+  );
+}
+
+export { StepExpandTrigger };
+//# sourceMappingURL=Step.ExpandTrigger.js.map

package/dist-es/stepped-tracker/Step.ExpandTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.ExpandTrigger.js","sources":["../src/stepped-tracker/Step.ExpandTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps } from \"@salt-ds/core\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport stepExpandTriggerCSS from \"./Step.ExpandTrigger.css\";\n\nexport interface StepExpandTriggerProps extends ButtonProps {\n  expanded: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltStepExpandTrigger\");\n\nexport function StepExpandTrigger({\n  id,\n  expanded,\n  className,\n  ...props\n}: StepExpandTriggerProps) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-expand-trigger\",\n    css: stepExpandTriggerCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Button\n      id={id}\n      appearance=\"transparent\"\n      sentiment=\"neutral\"\n      className={clsx(withBaseName(), className)}\n      {...props}\n    >\n      {expanded ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n}\n"],"names":["stepExpandTriggerCSS"],"mappings":";;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAElD,SAAS,iBAAkB,CAAA;AAAA,EAChC,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA2B,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAI,OAAQ,EAAA;AAC7C,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,UAAW,EAAA,aAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA,uBAAY,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,CAAK,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACrE;AAEJ;;;;"}

package/dist-es/stepped-tracker/Step.Icon.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepIcon {\n  grid-area: icon;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  justify-self: center;\n}\n\n.saltSteppedTracker-vertical .saltStepIcon {\n  height: var(--salt-size-base);\n}\n\n.saltStep-stage-pending > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-locked > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-inprogress > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-active > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-completed > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-success-foreground-decorative);\n}\n\n.saltStep-status-warning > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltStep-status-error > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-error-foreground-decorative);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.Icon.css.js.map

package/dist-es/stepped-tracker/Step.Icon.css.js.map

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

package/dist-es/stepped-tracker/Step.Icon.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIcon } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import css_248z from './Step.Icon.css.js';
+
+const withBaseName = makePrefixer("saltStepIcon");
+function StepIcon({
+  status,
+  stage,
+  size,
+  sizeMultiplier = size || 1.5,
+  className,
+  ...props
+}) {
+  const targetWindow = useWindow();
+  const IconComponent = useStepIcon({ stage, status });
+  useComponentCssInjection({
+    testId: "salt-step-icon",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      size: sizeMultiplier,
+      className: clsx(withBaseName(), className),
+      ...props
+    }
+  );
+}
+function useStepIcon({
+  stage,
+  status
+}) {
+  const icons = useIcon();
+  const stepIconMap = useMemo(
+    () => ({
+      error: icons.ErrorIcon,
+      warning: icons.WarningIcon,
+      active: icons.ActiveIcon,
+      completed: icons.CompletedIcon,
+      pending: icons.PendingIcon,
+      inprogress: icons.InProgressIcon,
+      locked: icons.LockedIcon
+    }),
+    [icons]
+  );
+  return stepIconMap[status || stage];
+}
+
+export { StepIcon };
+//# sourceMappingURL=Step.Icon.js.map

package/dist-es/stepped-tracker/Step.Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.Icon.js","sources":["../src/stepped-tracker/Step.Icon.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { useMemo } from \"react\";\n\nimport stepIconCSS from \"./Step.Icon.css\";\n\nimport type { StepStage, StepStatus } from \"./Step.types\";\n\nexport interface StepIconProps extends IconProps {\n  stage: StepStage;\n  status?: StepStatus;\n  sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n  status,\n  stage,\n  size,\n  sizeMultiplier = size || 1.5,\n  className,\n  ...props\n}: StepIconProps) {\n  const targetWindow = useWindow();\n  const IconComponent = useStepIcon({ stage, status });\n\n  useComponentCssInjection({\n    testId: \"salt-step-icon\",\n    css: stepIconCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <IconComponent\n      size={sizeMultiplier}\n      className={clsx(withBaseName(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction useStepIcon({\n  stage,\n  status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n  const icons = useIcon();\n\n  const stepIconMap = useMemo(\n    () => ({\n      error: icons.ErrorIcon,\n      warning: icons.WarningIcon,\n      active: icons.ActiveIcon,\n      completed: icons.CompletedIcon,\n      pending: icons.PendingIcon,\n      inprogress: icons.InProgressIcon,\n      locked: icons.LockedIcon,\n    }),\n    [icons],\n  );\n\n  return stepIconMap[status || stage];\n}\n"],"names":["stepIconCSS"],"mappings":";;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,iBAAiB,IAAQ,IAAA,GAAA;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,EAAE,KAAA,EAAO,QAAQ,CAAA;AAEnD,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,cAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAY,CAAA;AAAA,EACnB,KAAA;AAAA,EACA;AACF,CAA4C,EAAA;AAC1C,EAAA,MAAM,QAAQ,OAAQ,EAAA;AAEtB,EAAA,MAAM,WAAc,GAAA,OAAA;AAAA,IAClB,OAAO;AAAA,MACL,OAAO,KAAM,CAAA,SAAA;AAAA,MACb,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,QAAQ,KAAM,CAAA,UAAA;AAAA,MACd,WAAW,KAAM,CAAA,aAAA;AAAA,MACjB,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,YAAY,KAAM,CAAA,cAAA;AAAA,MAClB,QAAQ,KAAM,CAAA;AAAA,KAChB,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAO,OAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AACpC;;;;"}

package/dist-es/stepped-tracker/Step.Label.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepLabel {\n  grid-area: label;\n}\n\n.saltSteppedTracker-horizontal .saltStepLabel {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltSteppedTracker-vertical .saltStepLabel {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepLabel {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.Label.css.js.map

package/dist-es/stepped-tracker/Step.Label.css.js.map

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

package/dist-es/stepped-tracker/Step.Label.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import css_248z from './Step.Label.css.js';
+
+const withBaseName = makePrefixer("saltStepLabel");
+function StepLabel({
+  id,
+  className,
+  styleAs = "label",
+  children,
+  ...props
+}) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-step-label",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      id,
+      styleAs: "label",
+      className: clsx(withBaseName(), className),
+      ...props,
+      children
+    }
+  );
+}
+
+export { StepLabel };
+//# sourceMappingURL=Step.Label.js.map

package/dist-es/stepped-tracker/Step.Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.Label.js","sources":["../src/stepped-tracker/Step.Label.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport stepLabelCSS from \"./Step.Label.css\";\n\nexport interface StepLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport function StepLabel({\n  id,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepLabelProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-label\",\n    css: stepLabelCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      styleAs=\"label\"\n      className={clsx(withBaseName(), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["stepLabelCSS"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,SAAS,SAAU,CAAA;AAAA,EACxB,EAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAmB,EAAA;AACjB,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist-es/stepped-tracker/Step.SROnly.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepSROnly {\n  position: fixed;\n  top: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.SROnly.css.js.map

package/dist-es/stepped-tracker/Step.SROnly.css.js.map

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

package/dist-es/stepped-tracker/Step.SROnly.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './Step.SROnly.css.js';
+
+const withBaseName = makePrefixer("saltStepSROnly");
+function StepSROnly({ children, ...props }) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-step-sr-only",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { className: withBaseName(), ...props, children });
+}
+
+export { StepSROnly };
+//# sourceMappingURL=Step.SROnly.js.map

package/dist-es/stepped-tracker/Step.SROnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.SROnly.js","sources":["../src/stepped-tracker/Step.SROnly.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport stepSROnlyCSS from \"./Step.SROnly.css\";\n\nconst withBaseName = makePrefixer(\"saltStepSROnly\");\n\nexport interface StepSROnlyProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport function StepSROnly({ children, ...props }: StepSROnlyProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-sr-only\",\n    css: stepSROnlyCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={withBaseName()} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"names":["stepSROnlyCSS"],"mappings":";;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAM3C,SAAS,UAAW,CAAA,EAAE,QAAU,EAAA,GAAG,OAA0B,EAAA;AAClE,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,cAAiB,EAAA,GAAG,OACjC,QACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltStep {\n  /* Copy of size calculations of <Icon /> */\n  --step-icon-base-size: var(--salt-size-icon, 12px);\n  --step-icon-size-multiplier: var(--saltIcon-size-multiplier, 1.5);\n  --step-icon-size: calc(var(--step-icon-base-size) * var(--step-icon-size-multiplier));\n  --step-depth: var(--saltStep-depth, 0);\n}\n\n.saltSteppedTracker-horizontal .saltStep {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(3, min-content);\n  grid-template-areas:\n    \"icon\"\n    \"label\"\n    \"description\";\n  justify-items: center;\n  align-items: center;\n  text-align: center;\n  flex: 1;\n  padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker-vertical .saltStep {\n  display: grid;\n  grid-template-columns: var(--step-icon-size) 1fr min-content;\n  grid-template-areas:\n    \"icon            label           expand\"\n    \"connector       description     .\"\n    \"stepped-tracker stepped-tracker stepped-tracker\";\n  justify-items: start;\n  align-items: start;\n  gap: 0 var(--salt-spacing-100);\n  width: 100%;\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: grid-template-rows;\n}\n\n.saltSteppedTracker-vertical .saltStep-terminal {\n  grid-template-areas:\n    \"icon            label           label\"\n    \"connector       description     description\"\n    \"stepped-tracker stepped-tracker stepped-tracker\";\n}\n\n.saltSteppedTracker-vertical > .saltStep.saltStep-expanded {\n  grid-template-rows:\n    var(--salt-size-base)\n    min-content\n    1fr;\n}\n\n.saltSteppedTracker-vertical > .saltStep.saltStep-collapsed {\n  grid-template-rows:\n    var(--salt-size-base)\n    min-content\n    0fr;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Step.css.js.map

package/dist-es/stepped-tracker/Step.css.js.map

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

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

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useControlled } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { useContext, useEffect } from 'react';
+import { StepConnector } from './Step.Connector.js';
+import { StepDescription } from './Step.Description.js';
+import { StepExpandTrigger } from './Step.ExpandTrigger.js';
+import { StepIcon } from './Step.Icon.js';
+import { StepLabel } from './Step.Label.js';
+import { StepSROnly } from './Step.SROnly.js';
+import css_248z from './Step.css.js';
+import { SteppedTracker } from './SteppedTracker.js';
+import { DepthContext } from './SteppedTracker.Provider.js';
+
+const withBaseName = makePrefixer("saltStep");
+function Step({
+  id: idProp,
+  label,
+  description,
+  status,
+  stage = "pending",
+  expanded: expandedProp,
+  defaultExpanded,
+  onToggle,
+  className,
+  style,
+  substeps,
+  children,
+  ...props
+}) {
+  const id = useId(idProp);
+  const targetWindow = useWindow();
+  const depth = useContext(DepthContext);
+  const [expanded, setExpanded] = useControlled({
+    name: "Step",
+    state: "expanded",
+    controlled: expandedProp,
+    default: Boolean(defaultExpanded)
+  });
+  useComponentCssInjection({
+    testId: "salt-step",
+    css: css_248z,
+    window: targetWindow
+  });
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production") {
+      if (depth === -1) {
+        console.warn(
+          "<Step /> should be used within a <SteppedTracker /> component!"
+        );
+      }
+      if (depth > 2) {
+        console.warn("<Step /> should not be nested more than 2 levels deep!");
+      }
+    }
+  }, [depth]);
+  const ariaCurrent = stage === "active" ? "step" : void 0;
+  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;
+  const hasNestedSteps = !!children || !!substeps;
+  const state = status || stage;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const expandTriggerId = `${id}-expand-trigger`;
+  const nestedSteppedTrackerId = `${id}-nested-stepped-tracker`;
+  const srOnly = {
+    stateId: `${id}-sr-only-state`,
+    stateText: state !== "active" ? state : void 0,
+    substepsId: `${id}-sr-only-substeps`,
+    substepsText: "substeps",
+    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,
+    toggleSubstepsText: "toggle substeps"
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id,
+      "data-stage": stage,
+      "data-status": status,
+      "data-depth": depth,
+      "aria-current": ariaCurrent,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`stage-${stage}`),
+        withBaseName(`depth-${depth}`),
+        status && withBaseName(`status-${status}`),
+        !hasNestedSteps && withBaseName("terminal"),
+        hasNestedSteps && expanded && withBaseName("expanded"),
+        hasNestedSteps && !expanded && withBaseName("collapsed"),
+        className
+      ),
+      style: {
+        "--saltStep-depth": depth,
+        ...style
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(StepSROnly, { children: [
+          label,
+          " ",
+          description,
+          " ",
+          srOnly.stateText
+        ] }),
+        /* @__PURE__ */ jsx(StepSROnly, { id: srOnly.toggleSubstepsId, "aria-hidden": true, children: srOnly.toggleSubstepsText }),
+        /* @__PURE__ */ jsx(StepSROnly, { id: srOnly.substepsId, "aria-hidden": true, children: srOnly.substepsText }),
+        /* @__PURE__ */ jsx(StepSROnly, { id: srOnly.stateId, "aria-hidden": true, children: srOnly.stateText }),
+        /* @__PURE__ */ jsx(StepConnector, {}),
+        /* @__PURE__ */ jsx(
+          StepIcon,
+          {
+            stage,
+            status,
+            sizeMultiplier: iconSizeMultiplier,
+            "aria-hidden": true
+          }
+        ),
+        label && /* @__PURE__ */ jsx(StepLabel, { id: labelId, "aria-hidden": true, children: label }),
+        description && /* @__PURE__ */ jsx(StepDescription, { id: descriptionId, "aria-hidden": true, children: description }),
+        hasNestedSteps && /* @__PURE__ */ jsx(
+          StepExpandTrigger,
+          {
+            id: expandTriggerId,
+            "aria-expanded": expanded,
+            "aria-controls": nestedSteppedTrackerId,
+            "aria-labelledby": [
+              labelId,
+              descriptionId,
+              srOnly.stateId,
+              srOnly.toggleSubstepsId
+            ].join(" "),
+            expanded,
+            onClick: (event) => {
+              onToggle == null ? void 0 : onToggle(event);
+              setExpanded(!expanded);
+            }
+          }
+        ),
+        hasNestedSteps && /* @__PURE__ */ jsxs(
+          SteppedTracker,
+          {
+            id: nestedSteppedTrackerId,
+            "aria-labelledby": [labelId, srOnly.substepsId].join(" "),
+            "aria-hidden": !expanded,
+            hidden: !expanded,
+            children: [
+              children,
+              substeps == null ? void 0 : substeps.map((step) => /* @__PURE__ */ jsx(Step, { ...step }, step.id))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Step };
+//# sourceMappingURL=Step.js.map