@salt-ds/core 1.74.0 → 1.75.0

package/dist-cjs/stepper/internal/StepText.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStepText-label {\n  grid-area: label;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\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.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-bolder);\n}\n\n.saltStepText-description {\n  grid-area: description;\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-bolder);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
+var css_248z = ".saltStepText-label {\n  grid-area: label;\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n  padding-top: var(--salt-spacing-75);\n  padding-bottom: var(--salt-spacing-75);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-stage-active > .saltText.saltStepText-label,\n.saltStep-collapsed.saltStep-hasActiveStep > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-bolder);\n}\n\n/* A collapsed step that contains active step. JS fallback is in hasActiveStep.ts */\n@supports selector(:has(*)) {\n  .saltStep-collapsed:has(.saltStep-stage-active) > .saltText.saltStepText-label {\n    font-weight: var(--salt-text-fontWeight-bolder);\n  }\n}\n\n.saltStepText-description {\n  grid-area: description;\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StepText.css.js.map

package/dist-cjs/stepper/internal/StepText.js

@@ -26,7 +26,8 @@ function StepText({
   id,
   purpose,
   className,
-  styleAs = "label",
+  styleAs = purpose === "description" ? "label" : void 0,
+  color = purpose === "description" ? "secondary" : void 0,
   children,
   ...props
 }) {
@@ -40,6 +41,8 @@ function StepText({
     Text.Text,
     {
       id,
+      styleAs,
+      color,
       className: clsx.clsx(withBaseName(), withBaseName(purpose), className),
       ...props,
       children

package/dist-cjs/stepper/internal/StepText.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = purpose === \"description\" ? \"label\" : undefined,\n  color = purpose === \"description\" ? \"secondary\" : undefined,\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      styleAs={styleAs}\n      color={color}\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,OAAA,KAAY,aAAA,GAAgB,OAAA,GAAU,MAAA;AAAA,EAChD,KAAA,GAAQ,OAAA,KAAY,aAAA,GAAgB,WAAA,GAAc,MAAA;AAAA,EAClD,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist-cjs/stepper/internal/hasActiveStep.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+
+function hasActiveStep(children) {
+  return React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && (child.props.stage === "active" || hasActiveStep(child.props.children))
+  );
+}
+
+exports.hasActiveStep = hasActiveStep;
+//# sourceMappingURL=hasActiveStep.js.map

package/dist-cjs/stepper/internal/hasActiveStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasActiveStep.js","sources":["../src/stepper/internal/hasActiveStep.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport type { StepStage } from \"../Step\";\n\ninterface StepElementProps {\n  stage?: StepStage;\n  children?: ReactNode;\n}\n\nexport function hasActiveStep(children: ReactNode): boolean {\n  return Children.toArray(children).some(\n    (child) =>\n      isValidElement<StepElementProps>(child) &&\n      (child.props.stage === \"active\" || hasActiveStep(child.props.children)),\n  );\n}\n"],"names":["Children","isValidElement"],"mappings":";;;;AAQO,SAAS,cAAc,QAAA,EAA8B;AAC1D,EAAA,OAAOA,cAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA;AAAA,IAChC,CAAC,KAAA,KACCC,oBAAA,CAAiC,KAAK,CAAA,KACrC,KAAA,CAAM,KAAA,CAAM,KAAA,KAAU,QAAA,IAAY,aAAA,CAAc,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,GACzE;AACF;;;;"}

package/dist-cjs/tree/TreeNodeTrigger.js

@@ -77,7 +77,7 @@ const TreeNodeTrigger = React.forwardRef(function TreeNodeTrigger2(props, ref) {
     onClick == null ? void 0 : onClick(event);
     if (disabled) return;
     const target = event.target;
-    if (target.closest(".saltTreeNodeExpansionIcon")) return;
+    if (hasChildren && target.closest(".saltTreeNodeExpansionIcon")) return;
     const nestedTreeItem = target.closest('[role="treeitem"]');
     if (nestedTreeItem && nestedTreeItem !== nodeRef.current) {
       return;

package/dist-cjs/tree/TreeNodeTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNodeTrigger.js","sources":["../src/tree/TreeNodeTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { useTreeContext, useTreeNodeContext } from \"./TreeContext\";\nimport { TreeNodeExpansionIcon } from \"./TreeNodeExpansionIcon\";\nimport treeNodeTriggerCss from \"./TreeNodeTrigger.css\";\n\nexport interface TreeNodeTriggerProps extends ComponentPropsWithoutRef<\"li\"> {}\n\nconst withBaseName = makePrefixer(\"saltTreeNodeTrigger\");\nconst withNodeBaseName = makePrefixer(\"saltTreeNode\");\n\n/**\n * The forwarded ref points to the inner trigger content span (for tooltip positioning),\n * while the <li> handles focus, ARIA, and event handling.\n */\nexport const TreeNodeTrigger = forwardRef<\n  HTMLSpanElement,\n  TreeNodeTriggerProps\n>(function TreeNodeTrigger(props, ref) {\n  const {\n    className,\n    children,\n    style,\n    onClick,\n    onFocus,\n    onBlur,\n    onMouseDown,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node-trigger\",\n    css: treeNodeTriggerCss,\n    window: targetWindow,\n  });\n\n  const nodeContext = useTreeNodeContext();\n  if (!nodeContext) {\n    throw new Error(\"TreeNodeTrigger must be used within a TreeNode\");\n  }\n\n  const {\n    value,\n    level,\n    hasChildren,\n    expanded,\n    disabled,\n    id,\n    nodeRef,\n    setNodeRef,\n    selected,\n    indeterminate,\n    nodeChildren,\n  } = nodeContext;\n\n  const {\n    multiselect,\n    activeNode,\n    setActiveNode,\n    select,\n    tabbableNodeId,\n    registerElement,\n  } = useTreeContext();\n\n  const triggerContentRef = useForkRef(useRef<HTMLSpanElement>(null), ref);\n  const wasMouseDownRef = useRef(false);\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const isActive = activeNode === value;\n\n  const isTabbable = tabbableNodeId === value;\n\n  useEffect(() => {\n    if (nodeRef.current) {\n      return registerElement(value, nodeRef.current);\n    }\n  }, [value, registerElement, nodeRef]);\n\n  const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n    onClick?.(event);\n    if (disabled) return;\n    const target = event.target as HTMLElement;\n    if (target.closest(\".saltTreeNodeExpansionIcon\")) return;\n    const nestedTreeItem = target.closest('[role=\"treeitem\"]');\n    if (nestedTreeItem && nestedTreeItem !== nodeRef.current) {\n      return;\n    }\n    setActiveNode(value);\n    select(event, value);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLLIElement>) => {\n    if (event.target !== event.currentTarget) return;\n    onFocus?.(event);\n    if (!wasMouseDownRef.current) {\n      setFocusVisible(true);\n    }\n    wasMouseDownRef.current = false;\n    setActiveNode(value);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLLIElement>) => {\n    if (event.target !== event.currentTarget) return;\n    onBlur?.(event);\n    setFocusVisible(false);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLLIElement>) => {\n    wasMouseDownRef.current = true;\n    onMouseDown?.(event);\n  };\n\n  return (\n    <li\n      ref={setNodeRef}\n      id={id}\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-selected={multiselect ? undefined : selected}\n      aria-checked={\n        multiselect ? (indeterminate ? \"mixed\" : selected) : undefined\n      }\n      aria-level={level}\n      aria-disabled={disabled || undefined}\n      tabIndex={isTabbable ? 0 : -1}\n      className={clsx(\n        withNodeBaseName(),\n        {\n          [withNodeBaseName(\"expanded\")]: expanded,\n          [withNodeBaseName(\"selected\")]: selected && !multiselect,\n          [withNodeBaseName(\"active\")]: isActive,\n          [withNodeBaseName(\"disabled\")]: disabled,\n          [withNodeBaseName(\"hasChildren\")]: hasChildren,\n          [withNodeBaseName(\"focusVisible\")]: focusVisible,\n        },\n        className,\n      )}\n      style={\n        {\n          \"--saltTreeNode-level\": level,\n          ...style,\n        } as CSSProperties\n      }\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\n      onKeyDown={onKeyDown}\n      {...rest}\n    >\n      <span ref={triggerContentRef} className={withBaseName()}>\n        <TreeNodeExpansionIcon />\n        {multiselect && (\n          <CheckboxIcon\n            checked={selected}\n            indeterminate={indeterminate}\n            className={withNodeBaseName(\"checkbox\")}\n          />\n        )}\n        {children}\n      </span>\n\n      {hasChildren && expanded && (\n        <ul role=\"group\" className={withNodeBaseName(\"group\")}>\n          {nodeChildren}\n        </ul>\n      )}\n    </li>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TreeNodeTrigger","useWindow","useComponentCssInjection","treeNodeTriggerCss","useTreeNodeContext","useTreeContext","useForkRef","useRef","useState","useEffect","jsxs","clsx","jsx","TreeNodeExpansionIcon","CheckboxIcon"],"mappings":"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"}
+{"version":3,"file":"TreeNodeTrigger.js","sources":["../src/tree/TreeNodeTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { useTreeContext, useTreeNodeContext } from \"./TreeContext\";\nimport { TreeNodeExpansionIcon } from \"./TreeNodeExpansionIcon\";\nimport treeNodeTriggerCss from \"./TreeNodeTrigger.css\";\n\nexport interface TreeNodeTriggerProps extends ComponentPropsWithoutRef<\"li\"> {}\n\nconst withBaseName = makePrefixer(\"saltTreeNodeTrigger\");\nconst withNodeBaseName = makePrefixer(\"saltTreeNode\");\n\n/**\n * The forwarded ref points to the inner trigger content span (for tooltip positioning),\n * while the <li> handles focus, ARIA, and event handling.\n */\nexport const TreeNodeTrigger = forwardRef<\n  HTMLSpanElement,\n  TreeNodeTriggerProps\n>(function TreeNodeTrigger(props, ref) {\n  const {\n    className,\n    children,\n    style,\n    onClick,\n    onFocus,\n    onBlur,\n    onMouseDown,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node-trigger\",\n    css: treeNodeTriggerCss,\n    window: targetWindow,\n  });\n\n  const nodeContext = useTreeNodeContext();\n  if (!nodeContext) {\n    throw new Error(\"TreeNodeTrigger must be used within a TreeNode\");\n  }\n\n  const {\n    value,\n    level,\n    hasChildren,\n    expanded,\n    disabled,\n    id,\n    nodeRef,\n    setNodeRef,\n    selected,\n    indeterminate,\n    nodeChildren,\n  } = nodeContext;\n\n  const {\n    multiselect,\n    activeNode,\n    setActiveNode,\n    select,\n    tabbableNodeId,\n    registerElement,\n  } = useTreeContext();\n\n  const triggerContentRef = useForkRef(useRef<HTMLSpanElement>(null), ref);\n  const wasMouseDownRef = useRef(false);\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const isActive = activeNode === value;\n\n  const isTabbable = tabbableNodeId === value;\n\n  useEffect(() => {\n    if (nodeRef.current) {\n      return registerElement(value, nodeRef.current);\n    }\n  }, [value, registerElement, nodeRef]);\n\n  const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n    onClick?.(event);\n    if (disabled) return;\n    const target = event.target as HTMLElement;\n    if (hasChildren && target.closest(\".saltTreeNodeExpansionIcon\")) return;\n    const nestedTreeItem = target.closest('[role=\"treeitem\"]');\n    if (nestedTreeItem && nestedTreeItem !== nodeRef.current) {\n      return;\n    }\n    setActiveNode(value);\n    select(event, value);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLLIElement>) => {\n    if (event.target !== event.currentTarget) return;\n    onFocus?.(event);\n    if (!wasMouseDownRef.current) {\n      setFocusVisible(true);\n    }\n    wasMouseDownRef.current = false;\n    setActiveNode(value);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLLIElement>) => {\n    if (event.target !== event.currentTarget) return;\n    onBlur?.(event);\n    setFocusVisible(false);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLLIElement>) => {\n    wasMouseDownRef.current = true;\n    onMouseDown?.(event);\n  };\n\n  return (\n    <li\n      ref={setNodeRef}\n      id={id}\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-selected={multiselect ? undefined : selected}\n      aria-checked={\n        multiselect ? (indeterminate ? \"mixed\" : selected) : undefined\n      }\n      aria-level={level}\n      aria-disabled={disabled || undefined}\n      tabIndex={isTabbable ? 0 : -1}\n      className={clsx(\n        withNodeBaseName(),\n        {\n          [withNodeBaseName(\"expanded\")]: expanded,\n          [withNodeBaseName(\"selected\")]: selected && !multiselect,\n          [withNodeBaseName(\"active\")]: isActive,\n          [withNodeBaseName(\"disabled\")]: disabled,\n          [withNodeBaseName(\"hasChildren\")]: hasChildren,\n          [withNodeBaseName(\"focusVisible\")]: focusVisible,\n        },\n        className,\n      )}\n      style={\n        {\n          \"--saltTreeNode-level\": level,\n          ...style,\n        } as CSSProperties\n      }\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\n      onKeyDown={onKeyDown}\n      {...rest}\n    >\n      <span ref={triggerContentRef} className={withBaseName()}>\n        <TreeNodeExpansionIcon />\n        {multiselect && (\n          <CheckboxIcon\n            checked={selected}\n            indeterminate={indeterminate}\n            className={withNodeBaseName(\"checkbox\")}\n          />\n        )}\n        {children}\n      </span>\n\n      {hasChildren && expanded && (\n        <ul role=\"group\" className={withNodeBaseName(\"group\")}>\n          {nodeChildren}\n        </ul>\n      )}\n    </li>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TreeNodeTrigger","useWindow","useComponentCssInjection","treeNodeTriggerCss","useTreeNodeContext","useTreeContext","useForkRef","useRef","useState","useEffect","jsxs","clsx","jsx","TreeNodeExpansionIcon","CheckboxIcon"],"mappings":"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"}

package/dist-es/dialog/Dialog.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  overflow-y: auto;\n  z-index: var(--salt-zIndex-modal);\n  height: min-content;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths  */\n.saltDialog-small-xs {\n  width: 100%;\n  max-height: 48%;\n}\n\n.saltDialog-small-sm {\n  width: 56%;\n  max-height: 48%;\n}\n\n.saltDialog-small-md {\n  width: 36%;\n  max-height: 48%;\n}\n\n.saltDialog-small-lg {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-small-xl {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n  width: 100%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n  width: 84%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-md {\n  width: 68%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-large-xs {\n  width: 100%;\n  max-height: 84%;\n}\n\n.saltDialog-large-sm {\n  width: 96%;\n  max-height: 84%;\n}\n\n.saltDialog-large-md {\n  width: 84%;\n  max-height: 84%;\n}\n\n.saltDialog-large-lg {\n  width: 72%;\n  max-height: 84%;\n}\n\n.saltDialog-large-xl {\n  width: 72%;\n  max-height: 84%;\n}\n";
+var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  overflow-y: auto;\n  z-index: var(--salt-zIndex-modal);\n  height: min-content;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-borderColor);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths  */\n.saltDialog-small-xs {\n  width: 100%;\n  max-height: 48%;\n}\n\n.saltDialog-small-sm {\n  width: 56%;\n  max-height: 48%;\n}\n\n.saltDialog-small-md {\n  width: 36%;\n  max-height: 48%;\n}\n\n.saltDialog-small-lg {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-small-xl {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n  width: 100%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n  width: 84%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-md {\n  width: 68%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-large-xs {\n  width: 100%;\n  max-height: 84%;\n}\n\n.saltDialog-large-sm {\n  width: 96%;\n  max-height: 84%;\n}\n\n.saltDialog-large-md {\n  width: 84%;\n  max-height: 84%;\n}\n\n.saltDialog-large-lg {\n  width: 72%;\n  max-height: 84%;\n}\n\n.saltDialog-large-xl {\n  width: 72%;\n  max-height: 84%;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Dialog.css.js.map

package/dist-es/interactable-card/InteractableCard.js

@@ -34,6 +34,7 @@ const InteractableCard = forwardRef(function InteractableCard2(props, ref) {
     onClick,
     onKeyUp,
     onKeyDown,
+    tabIndex: tabIndexProp,
     ...rest
   } = props;
   const targetWindow = useWindow();
@@ -128,7 +129,7 @@ const InteractableCard = forwardRef(function InteractableCard2(props, ref) {
         ...rest,
         onClick: handleClick,
         ref: handleRef,
-        tabIndex,
+        tabIndex: tabIndexProp ?? tabIndex,
         children
       }
     )

package/dist-es/interactable-card/InteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { hasCardSection } from \"../card/hasCardSection\";\nimport {\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Visual elevation.\n   */\n  elevation?: \"flat\" | \"raised\";\n  /**\n   * Border color strength.\n   */\n  borderColor?: \"strong\" | \"subtle\" | \"none\";\n  /**\n   * @deprecated since 1.23.0. Use the `accent` prop instead.\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    borderColor,\n    children,\n    className,\n    disabled: disabledProp,\n    elevation = \"raised\",\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (interactableCardGroup) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  // Disabled cards omit tabIndex so they can't receive focus, matching native disabled controls.\n  let tabIndex: number | undefined;\n\n  if (disabled) {\n    tabIndex = undefined;\n  } else if (interactableCardGroup) {\n    if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: only the selected card, or the first enabled card when no enabled card is selected, is focusable\n      tabIndex = selected ? 0 : -1;\n      // Fall back to the value for custom providers without hasEnabledSelection.\n      const hasEnabledSelection =\n        interactableCardGroup.hasEnabledSelection ??\n        Boolean(interactableCardGroup.value);\n      if (!hasEnabledSelection && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n  const registerCard = interactableCardGroup?.registerCard;\n\n  useIsomorphicLayoutEffect(() => {\n    if (!disabled && cardRef.current && registerCard) {\n      return registerCard(value, cardRef.current);\n    }\n  }, [disabled, registerCard, value]);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  const sectioned = hasCardSection(children);\n\n  return (\n    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n    // biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard event handlers are provided by cardProps.\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(elevation || \"\")]: elevation,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"sectioned\")]: sectioned,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":"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"}
+{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { hasCardSection } from \"../card/hasCardSection\";\nimport {\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Visual elevation.\n   */\n  elevation?: \"flat\" | \"raised\";\n  /**\n   * Border color strength.\n   */\n  borderColor?: \"strong\" | \"subtle\" | \"none\";\n  /**\n   * @deprecated since 1.23.0. Use the `accent` prop instead.\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    borderColor,\n    children,\n    className,\n    disabled: disabledProp,\n    elevation = \"raised\",\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    tabIndex: tabIndexProp,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    if (interactableCardGroup) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  // Disabled cards omit tabIndex so they can't receive focus, matching native disabled controls.\n  let tabIndex: number | undefined;\n\n  if (disabled) {\n    tabIndex = undefined;\n  } else if (interactableCardGroup) {\n    if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: only the selected card, or the first enabled card when no enabled card is selected, is focusable\n      tabIndex = selected ? 0 : -1;\n      // Fall back to the value for custom providers without hasEnabledSelection.\n      const hasEnabledSelection =\n        interactableCardGroup.hasEnabledSelection ??\n        Boolean(interactableCardGroup.value);\n      if (!hasEnabledSelection && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n  const registerCard = interactableCardGroup?.registerCard;\n\n  useIsomorphicLayoutEffect(() => {\n    if (!disabled && cardRef.current && registerCard) {\n      return registerCard(value, cardRef.current);\n    }\n  }, [disabled, registerCard, value]);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  const sectioned = hasCardSection(children);\n\n  return (\n    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n    // biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard event handlers are provided by cardProps.\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(elevation || \"\")]: elevation,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"sectioned\")]: sectioned,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndexProp ?? tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":"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"}

package/dist-es/mega-menu/useMegaMenuNavigation.js

@@ -4,7 +4,7 @@ const COLUMN_SELECTOR = "[data-mega-menu-column]";
 const ACTIONS_SELECTOR = "[data-mega-menu-actions]";
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const SELF_CONSUMING_SELECTOR = 'input, textarea, select, [contenteditable], [role="combobox"], [role="listbox"], [role="slider"], [role="spinbutton"], [role="textbox"]';
-const HIDDEN_ANCESTOR_SELECTOR = '[aria-hidden="true"], [inert]';
+const HIDDEN_ANCESTOR_SELECTOR = '[aria-hidden="true"], [inert], [data-floating-ui-focus-guard]';
 function queryFocusables(root) {
   return Array.from(
     root.querySelectorAll(FOCUSABLE_SELECTOR)
@@ -192,27 +192,18 @@ function handleArrow(key, cell, panel, context) {
   }
   return false;
 }
-function focusNextAfterPanel(context, panel) {
+function findNextAfterPanel(context, panel) {
   var _a;
   const reference = context.elements.reference;
   const refFocusable = firstFocusable(reference) ?? reference;
   const nextLi = (_a = refFocusable == null ? void 0 : refFocusable.closest("li")) == null ? void 0 : _a.nextElementSibling;
   const nextSibling = nextLi instanceof HTMLElement ? firstFocusable(nextLi) : null;
-  const nextOutside = nextSibling || (() => {
-    const allFocusable = queryFocusables(
-      panel.ownerDocument.documentElement
-    ).filter((el) => !panel.contains(el));
-    const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;
-    return idx >= 0 ? allFocusable[idx + 1] : void 0;
-  })();
-  if (nextOutside) {
-    const view = panel.ownerDocument.defaultView;
-    view == null ? void 0 : view.requestAnimationFrame(() => {
-      view == null ? void 0 : view.requestAnimationFrame(() => {
-        nextOutside.focus();
-      });
-    });
-  }
+  if (nextSibling) return nextSibling;
+  const allFocusable = queryFocusables(
+    panel.ownerDocument.documentElement
+  ).filter((el) => !panel.contains(el));
+  const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;
+  return idx >= 0 ? allFocusable[idx + 1] : void 0;
 }
 function useMegaMenuNavigation(context, props = {}) {
   const { enabled = true } = props;
@@ -224,7 +215,7 @@ function useMegaMenuNavigation(context, props = {}) {
     return {
       floating: {
         onKeyDown(event) {
-          var _a, _b;
+          var _a, _b, _c;
           if (!open) return;
           const panel = event.currentTarget;
           const target = event.target;
@@ -246,10 +237,10 @@ function useMegaMenuNavigation(context, props = {}) {
                 (_a = allCells[linearIndex - 1]) == null ? void 0 : _a.focus();
               }
             } else if (linearIndex === allCells.length - 1) {
+              (_b = findNextAfterPanel(context, panel)) == null ? void 0 : _b.focus();
               onOpenChange(false);
-              focusNextAfterPanel(context, panel);
             } else {
-              (_b = allCells[linearIndex + 1]) == null ? void 0 : _b.focus();
+              (_c = allCells[linearIndex + 1]) == null ? void 0 : _c.focus();
             }
             return;
           }

package/dist-es/mega-menu/useMegaMenuNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMegaMenuNavigation.js","sources":["../src/mega-menu/useMegaMenuNavigation.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ACTIONS_SELECTOR = \"[data-mega-menu-actions]\";\n\nexport const FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// Controls that own the arrow keys (caret, option lists, steppers); the engine\n// leaves their keys alone when focus is inside one.\nconst SELF_CONSUMING_SELECTOR =\n  'input, textarea, select, [contenteditable], [role=\"combobox\"], [role=\"listbox\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"textbox\"]';\n\n// aria-hidden / inert subtrees are out of the focus order; filtered by ancestor\n// lookup since `:not()` cannot match on an ancestor.\nconst HIDDEN_ANCESTOR_SELECTOR = '[aria-hidden=\"true\"], [inert]';\n\nfunction queryFocusables(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((el) => !el.closest(HIDDEN_ANCESTOR_SELECTOR));\n}\n\nfunction firstFocusable(root: HTMLElement | null): HTMLElement | null {\n  return root ? (queryFocusables(root)[0] ?? null) : null;\n}\n\ninterface NavModel {\n  /** Columns (`data-mega-menu-column`) in DOM order, each with ≥1 cell. */\n  columns: HTMLElement[];\n  /** Full-width actions row; the bottom of the center area. */\n  actions: HTMLElement[];\n}\n\n/** Build the navigation model from the panel DOM at keypress time. */\nfunction buildModel(panel: HTMLElement): NavModel {\n  const columns = Array.from(\n    panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR),\n  ).filter((el) => queryFocusables(el).length > 0);\n\n  const actions = Array.from(\n    panel.querySelectorAll<HTMLElement>(ACTIONS_SELECTOR),\n  ).filter((el) => queryFocusables(el).length > 0);\n\n  return { columns, actions };\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n  const reference = context.elements.reference as HTMLElement | null;\n  (firstFocusable(reference) ?? reference)?.focus();\n}\n\n/** Exit to the next nav-bar trigger and close. Returns false when there is none. */\nfunction focusNextTriggerAndClose(context: FloatingRootContext): boolean {\n  const reference = context.elements.reference as HTMLElement | null;\n  const trigger = firstFocusable(reference) ?? reference;\n  const li = trigger?.closest(\"li\");\n  const next =\n    li?.nextElementSibling instanceof HTMLElement\n      ? firstFocusable(li.nextElementSibling)\n      : null;\n  if (next) {\n    context.onOpenChange(false);\n    next.focus();\n    return true;\n  }\n  return false;\n}\n\n/** True when the grid has collapsed to one stacked column (small viewport). */\nfunction columnsStacked(columns: HTMLElement[]): boolean {\n  if (columns.length < 2) return false;\n  const first = columns[0].getBoundingClientRect();\n  const second = columns[1].getBoundingClientRect();\n  return second.top >= first.bottom - 1;\n}\n\n/** Stacked layout: all arrows degrade to prev/next over every cell. */\nfunction handleLinear(\n  key: string,\n  cell: HTMLElement,\n  panel: HTMLElement,\n  context: FloatingRootContext,\n): boolean {\n  const cells = queryFocusables(panel);\n  const index = cells.indexOf(cell);\n  if (index === -1) return false;\n\n  switch (key) {\n    case \"ArrowDown\":\n    case \"ArrowRight\": {\n      if (index < cells.length - 1) {\n        cells[index + 1].focus();\n      }\n      return true;\n    }\n    case \"ArrowUp\":\n    case \"ArrowLeft\": {\n      if (index > 0) {\n        cells[index - 1].focus();\n      } else {\n        focusTrigger(context);\n      }\n      return true;\n    }\n    case \"Home\": {\n      cells[0]?.focus();\n      return true;\n    }\n    case \"End\": {\n      cells[cells.length - 1]?.focus();\n      return true;\n    }\n    default:\n      return false;\n  }\n}\n\n/** Arrow/Home/End movement from `cell`. Returns `true` when the key was consumed. */\nfunction handleArrow(\n  key: string,\n  cell: HTMLElement,\n  panel: HTMLElement,\n  context: FloatingRootContext,\n): boolean {\n  const { columns, actions } = buildModel(panel);\n\n  if (columnsStacked(columns)) {\n    return handleLinear(key, cell, panel, context);\n  }\n\n  const column = cell.closest<HTMLElement>(COLUMN_SELECTOR);\n  const actionsEl = cell.closest<HTMLElement>(ACTIONS_SELECTOR);\n\n  if (column) {\n    const colIndex = columns.indexOf(column);\n    const cells = queryFocusables(column);\n    const rowIndex = cells.indexOf(cell);\n\n    switch (key) {\n      case \"ArrowDown\": {\n        if (rowIndex < cells.length - 1) {\n          cells[rowIndex + 1].focus();\n        } else if (colIndex < columns.length - 1) {\n          firstFocusable(columns[colIndex + 1])?.focus();\n        } else if (actions.length > 0) {\n          firstFocusable(actions[0])?.focus();\n        } else {\n          focusNextTriggerAndClose(context);\n        }\n        return true;\n      }\n      case \"ArrowUp\": {\n        if (rowIndex > 0) {\n          cells[rowIndex - 1].focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowRight\": {\n        if (colIndex < columns.length - 1) {\n          firstFocusable(columns[colIndex + 1])?.focus();\n          return true;\n        }\n        // Right border column: exit to the next trigger and close if available\n        if (\n          rowIndex === cells.length - 1 &&\n          focusNextTriggerAndClose(context)\n        ) {\n          return true;\n        }\n        // Wrap to the current trigger and keep the menu open,\n        // mirroring Left in the first column.\n        focusTrigger(context);\n        return true;\n      }\n      case \"ArrowLeft\": {\n        if (colIndex > 0) {\n          firstFocusable(columns[colIndex - 1])?.focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"Home\": {\n        cells[0]?.focus();\n        return true;\n      }\n      case \"End\": {\n        cells[cells.length - 1]?.focus();\n        return true;\n      }\n      default:\n        return false;\n    }\n  }\n\n  if (actionsEl) {\n    const cells = queryFocusables(actionsEl);\n    const index = cells.indexOf(cell);\n\n    switch (key) {\n      case \"ArrowRight\": {\n        if (index < cells.length - 1) {\n          cells[index + 1].focus();\n        } else if (!focusNextTriggerAndClose(context)) {\n          // Last action with no next trigger: wrap to the current trigger.\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowLeft\": {\n        if (index > 0) {\n          cells[index - 1].focus();\n        } else if (cell === firstFocusable(panel)) {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowUp\": {\n        if (columns.length > 0) {\n          const lastColumnCells = queryFocusables(columns[columns.length - 1]);\n          lastColumnCells[lastColumnCells.length - 1]?.focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowDown\": {\n        if (index === cells.length - 1) {\n          focusNextTriggerAndClose(context);\n        }\n        return true;\n      }\n      case \"Home\": {\n        cells[0]?.focus();\n        return true;\n      }\n      case \"End\": {\n        cells[cells.length - 1]?.focus();\n        return true;\n      }\n      default:\n        return false;\n    }\n  }\n\n  return false;\n}\n\n/** Focus the first document-focusable after the panel, once it has unmounted. */\nfunction focusNextAfterPanel(context: FloatingRootContext, panel: HTMLElement) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const refFocusable = firstFocusable(reference) ?? reference;\n\n  const nextLi = refFocusable?.closest(\"li\")?.nextElementSibling;\n  const nextSibling =\n    nextLi instanceof HTMLElement ? firstFocusable(nextLi) : null;\n\n  const nextOutside =\n    nextSibling ||\n    (() => {\n      const allFocusable = queryFocusables(\n        panel.ownerDocument.documentElement,\n      ).filter((el) => !panel.contains(el));\n      const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n      return idx >= 0 ? allFocusable[idx + 1] : undefined;\n    })();\n\n  if (nextOutside) {\n    const view = panel.ownerDocument.defaultView;\n    view?.requestAnimationFrame(() => {\n      view?.requestAnimationFrame(() => {\n        nextOutside.focus();\n      });\n    });\n  }\n}\n\nexport interface UseMegaMenuNavigationProps {\n  /**\n   * Whether the interaction is enabled.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Floating-ui interaction hook for mega menu keyboard navigation. Handles keys\n * on the panel only; the trigger keys are owned by `MegaMenuTrigger`.\n */\nexport function useMegaMenuNavigation(\n  context: FloatingRootContext,\n  props: UseMegaMenuNavigationProps = {},\n): ElementProps {\n  const { enabled = true } = props;\n  const { open, onOpenChange } = context;\n\n  return useMemo(() => {\n    if (!enabled) {\n      return {};\n    }\n\n    return {\n      floating: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (!open) return;\n\n          const panel = event.currentTarget as HTMLElement;\n          const target = event.target as HTMLElement;\n          const { key } = event;\n\n          const isArrowOrEdge =\n            key === \"ArrowUp\" ||\n            key === \"ArrowDown\" ||\n            key === \"ArrowLeft\" ||\n            key === \"ArrowRight\" ||\n            key === \"Home\" ||\n            key === \"End\";\n\n          // A self-consuming control keeps its own navigation keys.\n          if (isArrowOrEdge && target.closest(SELF_CONSUMING_SELECTOR)) {\n            return;\n          }\n\n          const cell = target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n\n          // Tab walks every cell in layout order; the panel is portaled, so the\n          // boundary transitions are handled manually.\n          if (key === \"Tab\") {\n            const allCells = queryFocusables(panel);\n            const linearIndex = cell ? allCells.indexOf(cell) : -1;\n            if (linearIndex === -1) return;\n            event.preventDefault();\n            if (event.shiftKey) {\n              if (linearIndex === 0) {\n                focusTrigger(context);\n              } else {\n                allCells[linearIndex - 1]?.focus();\n              }\n            } else if (linearIndex === allCells.length - 1) {\n              onOpenChange(false);\n              focusNextAfterPanel(context, panel);\n            } else {\n              allCells[linearIndex + 1]?.focus();\n            }\n            return;\n          }\n\n          if (!cell || !isArrowOrEdge) return;\n\n          if (handleArrow(key, cell, panel, context)) {\n            event.preventDefault();\n          }\n        },\n      },\n    };\n  }, [enabled, open, context, onOpenChange]);\n}\n\n/** Focus the first navigable item inside a mega menu panel, retrying until rendered. */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n  const firstItem = firstFocusable(panel);\n\n  if (firstItem) {\n    firstItem.focus();\n    return;\n  }\n\n  const view = panel.ownerDocument.defaultView;\n  if (attempt < 3 && view) {\n    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMegaMenuNavigation.js","sources":["../src/mega-menu/useMegaMenuNavigation.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ACTIONS_SELECTOR = \"[data-mega-menu-actions]\";\n\nexport const FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// Controls that own the arrow keys (caret, option lists, steppers); the engine\n// leaves their keys alone when focus is inside one.\nconst SELF_CONSUMING_SELECTOR =\n  'input, textarea, select, [contenteditable], [role=\"combobox\"], [role=\"listbox\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"textbox\"]';\n\n// aria-hidden / inert subtrees are out of the focus order; filtered by ancestor\n// lookup since `:not()` cannot match on an ancestor. Floating UI focus guards\n// are only aria-hidden outside Safari, so they are excluded explicitly.\nconst HIDDEN_ANCESTOR_SELECTOR =\n  '[aria-hidden=\"true\"], [inert], [data-floating-ui-focus-guard]';\n\nfunction queryFocusables(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((el) => !el.closest(HIDDEN_ANCESTOR_SELECTOR));\n}\n\nfunction firstFocusable(root: HTMLElement | null): HTMLElement | null {\n  return root ? (queryFocusables(root)[0] ?? null) : null;\n}\n\ninterface NavModel {\n  /** Columns (`data-mega-menu-column`) in DOM order, each with ≥1 cell. */\n  columns: HTMLElement[];\n  /** Full-width actions row; the bottom of the center area. */\n  actions: HTMLElement[];\n}\n\n/** Build the navigation model from the panel DOM at keypress time. */\nfunction buildModel(panel: HTMLElement): NavModel {\n  const columns = Array.from(\n    panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR),\n  ).filter((el) => queryFocusables(el).length > 0);\n\n  const actions = Array.from(\n    panel.querySelectorAll<HTMLElement>(ACTIONS_SELECTOR),\n  ).filter((el) => queryFocusables(el).length > 0);\n\n  return { columns, actions };\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n  const reference = context.elements.reference as HTMLElement | null;\n  (firstFocusable(reference) ?? reference)?.focus();\n}\n\n/** Exit to the next nav-bar trigger and close. Returns false when there is none. */\nfunction focusNextTriggerAndClose(context: FloatingRootContext): boolean {\n  const reference = context.elements.reference as HTMLElement | null;\n  const trigger = firstFocusable(reference) ?? reference;\n  const li = trigger?.closest(\"li\");\n  const next =\n    li?.nextElementSibling instanceof HTMLElement\n      ? firstFocusable(li.nextElementSibling)\n      : null;\n  if (next) {\n    context.onOpenChange(false);\n    next.focus();\n    return true;\n  }\n  return false;\n}\n\n/** True when the grid has collapsed to one stacked column (small viewport). */\nfunction columnsStacked(columns: HTMLElement[]): boolean {\n  if (columns.length < 2) return false;\n  const first = columns[0].getBoundingClientRect();\n  const second = columns[1].getBoundingClientRect();\n  return second.top >= first.bottom - 1;\n}\n\n/** Stacked layout: all arrows degrade to prev/next over every cell. */\nfunction handleLinear(\n  key: string,\n  cell: HTMLElement,\n  panel: HTMLElement,\n  context: FloatingRootContext,\n): boolean {\n  const cells = queryFocusables(panel);\n  const index = cells.indexOf(cell);\n  if (index === -1) return false;\n\n  switch (key) {\n    case \"ArrowDown\":\n    case \"ArrowRight\": {\n      if (index < cells.length - 1) {\n        cells[index + 1].focus();\n      }\n      return true;\n    }\n    case \"ArrowUp\":\n    case \"ArrowLeft\": {\n      if (index > 0) {\n        cells[index - 1].focus();\n      } else {\n        focusTrigger(context);\n      }\n      return true;\n    }\n    case \"Home\": {\n      cells[0]?.focus();\n      return true;\n    }\n    case \"End\": {\n      cells[cells.length - 1]?.focus();\n      return true;\n    }\n    default:\n      return false;\n  }\n}\n\n/** Arrow/Home/End movement from `cell`. Returns `true` when the key was consumed. */\nfunction handleArrow(\n  key: string,\n  cell: HTMLElement,\n  panel: HTMLElement,\n  context: FloatingRootContext,\n): boolean {\n  const { columns, actions } = buildModel(panel);\n\n  if (columnsStacked(columns)) {\n    return handleLinear(key, cell, panel, context);\n  }\n\n  const column = cell.closest<HTMLElement>(COLUMN_SELECTOR);\n  const actionsEl = cell.closest<HTMLElement>(ACTIONS_SELECTOR);\n\n  if (column) {\n    const colIndex = columns.indexOf(column);\n    const cells = queryFocusables(column);\n    const rowIndex = cells.indexOf(cell);\n\n    switch (key) {\n      case \"ArrowDown\": {\n        if (rowIndex < cells.length - 1) {\n          cells[rowIndex + 1].focus();\n        } else if (colIndex < columns.length - 1) {\n          firstFocusable(columns[colIndex + 1])?.focus();\n        } else if (actions.length > 0) {\n          firstFocusable(actions[0])?.focus();\n        } else {\n          focusNextTriggerAndClose(context);\n        }\n        return true;\n      }\n      case \"ArrowUp\": {\n        if (rowIndex > 0) {\n          cells[rowIndex - 1].focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowRight\": {\n        if (colIndex < columns.length - 1) {\n          firstFocusable(columns[colIndex + 1])?.focus();\n          return true;\n        }\n        // Right border column: exit to the next trigger and close if available\n        if (\n          rowIndex === cells.length - 1 &&\n          focusNextTriggerAndClose(context)\n        ) {\n          return true;\n        }\n        // Wrap to the current trigger and keep the menu open,\n        // mirroring Left in the first column.\n        focusTrigger(context);\n        return true;\n      }\n      case \"ArrowLeft\": {\n        if (colIndex > 0) {\n          firstFocusable(columns[colIndex - 1])?.focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"Home\": {\n        cells[0]?.focus();\n        return true;\n      }\n      case \"End\": {\n        cells[cells.length - 1]?.focus();\n        return true;\n      }\n      default:\n        return false;\n    }\n  }\n\n  if (actionsEl) {\n    const cells = queryFocusables(actionsEl);\n    const index = cells.indexOf(cell);\n\n    switch (key) {\n      case \"ArrowRight\": {\n        if (index < cells.length - 1) {\n          cells[index + 1].focus();\n        } else if (!focusNextTriggerAndClose(context)) {\n          // Last action with no next trigger: wrap to the current trigger.\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowLeft\": {\n        if (index > 0) {\n          cells[index - 1].focus();\n        } else if (cell === firstFocusable(panel)) {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowUp\": {\n        if (columns.length > 0) {\n          const lastColumnCells = queryFocusables(columns[columns.length - 1]);\n          lastColumnCells[lastColumnCells.length - 1]?.focus();\n        } else {\n          focusTrigger(context);\n        }\n        return true;\n      }\n      case \"ArrowDown\": {\n        if (index === cells.length - 1) {\n          focusNextTriggerAndClose(context);\n        }\n        return true;\n      }\n      case \"Home\": {\n        cells[0]?.focus();\n        return true;\n      }\n      case \"End\": {\n        cells[cells.length - 1]?.focus();\n        return true;\n      }\n      default:\n        return false;\n    }\n  }\n\n  return false;\n}\n\n/** The first document-focusable after the trigger, outside the panel. */\nfunction findNextAfterPanel(\n  context: FloatingRootContext,\n  panel: HTMLElement,\n): HTMLElement | undefined {\n  const reference = context.elements.reference as HTMLElement | null;\n  const refFocusable = firstFocusable(reference) ?? reference;\n\n  const nextLi = refFocusable?.closest(\"li\")?.nextElementSibling;\n  const nextSibling =\n    nextLi instanceof HTMLElement ? firstFocusable(nextLi) : null;\n  if (nextSibling) return nextSibling;\n\n  const allFocusable = queryFocusables(\n    panel.ownerDocument.documentElement,\n  ).filter((el) => !panel.contains(el));\n  const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n  return idx >= 0 ? allFocusable[idx + 1] : undefined;\n}\n\nexport interface UseMegaMenuNavigationProps {\n  /**\n   * Whether the interaction is enabled.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Floating-ui interaction hook for mega menu keyboard navigation. Handles keys\n * on the panel only; the trigger keys are owned by `MegaMenuTrigger`.\n */\nexport function useMegaMenuNavigation(\n  context: FloatingRootContext,\n  props: UseMegaMenuNavigationProps = {},\n): ElementProps {\n  const { enabled = true } = props;\n  const { open, onOpenChange } = context;\n\n  return useMemo(() => {\n    if (!enabled) {\n      return {};\n    }\n\n    return {\n      floating: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (!open) return;\n\n          const panel = event.currentTarget as HTMLElement;\n          const target = event.target as HTMLElement;\n          const { key } = event;\n\n          const isArrowOrEdge =\n            key === \"ArrowUp\" ||\n            key === \"ArrowDown\" ||\n            key === \"ArrowLeft\" ||\n            key === \"ArrowRight\" ||\n            key === \"Home\" ||\n            key === \"End\";\n\n          // A self-consuming control keeps its own navigation keys.\n          if (isArrowOrEdge && target.closest(SELF_CONSUMING_SELECTOR)) {\n            return;\n          }\n\n          const cell = target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n\n          // Tab walks every cell in layout order; the panel is portaled, so the\n          // boundary transitions are handled manually.\n          if (key === \"Tab\") {\n            const allCells = queryFocusables(panel);\n            const linearIndex = cell ? allCells.indexOf(cell) : -1;\n            if (linearIndex === -1) return;\n            event.preventDefault();\n            if (event.shiftKey) {\n              if (linearIndex === 0) {\n                focusTrigger(context);\n              } else {\n                allCells[linearIndex - 1]?.focus();\n              }\n            } else if (linearIndex === allCells.length - 1) {\n              // Focus before closing: floating-ui skips returnFocus when focus\n              // has already left the panel, so the trigger never flashes focus.\n              findNextAfterPanel(context, panel)?.focus();\n              onOpenChange(false);\n            } else {\n              allCells[linearIndex + 1]?.focus();\n            }\n            return;\n          }\n\n          if (!cell || !isArrowOrEdge) return;\n\n          if (handleArrow(key, cell, panel, context)) {\n            event.preventDefault();\n          }\n        },\n      },\n    };\n  }, [enabled, open, context, onOpenChange]);\n}\n\n/** Focus the first navigable item inside a mega menu panel, retrying until rendered. */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n  const firstItem = firstFocusable(panel);\n\n  if (firstItem) {\n    firstItem.focus();\n    return;\n  }\n\n  const view = panel.ownerDocument.defaultView;\n  if (attempt < 3 && view) {\n    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist-es/pill-input/PillInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltPillInput-tertiary {\n  --pillInput-background: var(--salt-editable-tertiary-background);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, var(--salt-text-letterSpacing));\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltPillInput-tertiary {\n  --pillInput-background: var(--salt-editable-tertiary-background);\n  --pillInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, var(--salt-text-letterSpacing));\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PillInput.css.js.map

package/dist-es/semantic-icon-provider/SemanticIconProvider.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { WarningSolidIcon, UserIcon, UploadIcon, SuccessCircleSolidIcon, FavoriteStrongIcon, FavoriteSolidIcon, FavoriteIcon, ChevronLeftIcon, StepDefaultIcon, OverflowMenuIcon, ChevronRightIcon, LockedIcon, ProgressInprogressIcon, InfoSolidIcon, TriangleUpIcon, TearOutIcon, ChevronDownIcon, ErrorSolidIcon, BankIcon, TriangleDownIcon, DoubleChevronRightIcon, DoubleChevronLeftIcon, ChevronUpIcon, CloseIcon, CalendarIcon, StepActiveIcon } from '@salt-ds/icons';
+import { WarningSolidIcon, UserIcon, UploadIcon, SuccessCircleSolidIcon, FavoriteStrongIcon, FavoriteSolidIcon, FavoriteIcon, ChevronLeftIcon, ProgressDraftIcon, OverflowMenuIcon, ChevronRightIcon, LockedIcon, ProgressInprogressIcon, InfoSolidIcon, TriangleUpIcon, TearOutIcon, ChevronDownIcon, ErrorSolidIcon, BankIcon, TriangleDownIcon, DoubleChevronRightIcon, DoubleChevronLeftIcon, ChevronUpIcon, CloseIcon, CalendarIcon, ProgressActiveIcon } from '@salt-ds/icons';
 import { createContext, useContext } from 'react';
 import { ErrorAdornmentIcon } from '../status-adornment/ErrorAdornment.js';
 import { SuccessAdornmentIcon } from '../status-adornment/SuccessAdornment.js';
 import { WarningAdornmentIcon } from '../status-adornment/WarningAdornment.js';
 
 const defaultIconMap = {
-  ActiveIcon: StepActiveIcon,
+  ActiveIcon: ProgressActiveIcon,
   CalendarIcon,
   CloseIcon,
   CollapseGroupIcon: ChevronDownIcon,
@@ -28,7 +28,7 @@ const defaultIconMap = {
   LevelSeparatorIcon: ChevronRightIcon,
   NextIcon: ChevronRightIcon,
   OverflowIcon: OverflowMenuIcon,
-  PendingIcon: StepDefaultIcon,
+  PendingIcon: ProgressDraftIcon,
   PreviousIcon: ChevronLeftIcon,
   RatingIcon: FavoriteIcon,
   RatingSelectedIcon: FavoriteSolidIcon,

package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  BankIcon,\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  DoubleChevronLeftIcon,\n  DoubleChevronRightIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ActiveIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  CollapseIcon: ElementType;\n  CollapseLeftIcon: ElementType;\n  CollapseRightIcon: ElementType;\n  CompletedIcon: ElementType;\n  DecreaseIcon: ElementType;\n  EntityIcon: ElementType;\n  ErrorIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  ExpandGroupIcon: ElementType;\n  ExpandIcon: ElementType;\n  ExternalIcon: ElementType;\n  IncreaseIcon: ElementType;\n  InfoIcon: ElementType;\n  InProgressIcon: ElementType;\n  LockedIcon: ElementType;\n  LevelSeparatorIcon: ElementType;\n  NextIcon: ElementType;\n  OverflowIcon: ElementType;\n  PendingIcon: ElementType;\n  PreviousIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  SuccessIcon: ElementType;\n  SuccessStatusAdornment: ElementType;\n  UploadIcon: ElementType;\n  UserIcon: ElementType;\n  WarningIcon: ElementType;\n  WarningStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ActiveIcon: StepActiveIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  CollapseLeftIcon: DoubleChevronLeftIcon,\n  CollapseRightIcon: DoubleChevronRightIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  DecreaseIcon: TriangleDownIcon,\n  EntityIcon: BankIcon,\n  ErrorIcon: ErrorSolidIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  ExpandIcon: ChevronDownIcon,\n  ExternalIcon: TearOutIcon,\n  IncreaseIcon: TriangleUpIcon,\n  InfoIcon: InfoSolidIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  LockedIcon: LockedIcon,\n  LevelSeparatorIcon: ChevronRightIcon,\n  NextIcon: ChevronRightIcon,\n  OverflowIcon: OverflowMenuIcon,\n  PendingIcon: StepDefaultIcon,\n  PreviousIcon: ChevronLeftIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n  UploadIcon,\n  UserIcon: UserIcon,\n  WarningIcon: WarningSolidIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;AAsFA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,cAAA;AAAA,EACZ,YAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA,EAAmB,eAAA;AAAA,EACnB,YAAA,EAAc,aAAA;AAAA,EACd,gBAAA,EAAkB,qBAAA;AAAA,EAClB,iBAAA,EAAmB,sBAAA;AAAA,EACnB,aAAA,EAAe,sBAAA;AAAA,EACf,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA,EAAY,QAAA;AAAA,EACZ,SAAA,EAAW,cAAA;AAAA,EACX,oBAAA,EAAsB,kBAAA;AAAA,EACtB,eAAA,EAAiB,gBAAA;AAAA,EACjB,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,WAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,cAAA,EAAgB,sBAAA;AAAA,EAChB,UAAA;AAAA,EACA,kBAAA,EAAoB,gBAAA;AAAA,EACpB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,gBAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,UAAA,EAAY,YAAA;AAAA,EACZ,kBAAA,EAAoB,iBAAA;AAAA,EACpB,qBAAA,EAAuB,kBAAA;AAAA,EACvB,WAAA,EAAa,sBAAA;AAAA,EACb,sBAAA,EAAwB,oBAAA;AAAA,EACxB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,EAAa,gBAAA;AAAA,EACb,sBAAA,EAAwB;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}
+{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  BankIcon,\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  DoubleChevronLeftIcon,\n  DoubleChevronRightIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressActiveIcon,\n  ProgressDraftIcon,\n  ProgressInprogressIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ActiveIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  CollapseIcon: ElementType;\n  CollapseLeftIcon: ElementType;\n  CollapseRightIcon: ElementType;\n  CompletedIcon: ElementType;\n  DecreaseIcon: ElementType;\n  EntityIcon: ElementType;\n  ErrorIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  ExpandGroupIcon: ElementType;\n  ExpandIcon: ElementType;\n  ExternalIcon: ElementType;\n  IncreaseIcon: ElementType;\n  InfoIcon: ElementType;\n  InProgressIcon: ElementType;\n  LockedIcon: ElementType;\n  LevelSeparatorIcon: ElementType;\n  NextIcon: ElementType;\n  OverflowIcon: ElementType;\n  PendingIcon: ElementType;\n  PreviousIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  SuccessIcon: ElementType;\n  SuccessStatusAdornment: ElementType;\n  UploadIcon: ElementType;\n  UserIcon: ElementType;\n  WarningIcon: ElementType;\n  WarningStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ActiveIcon: ProgressActiveIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  CollapseLeftIcon: DoubleChevronLeftIcon,\n  CollapseRightIcon: DoubleChevronRightIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  DecreaseIcon: TriangleDownIcon,\n  EntityIcon: BankIcon,\n  ErrorIcon: ErrorSolidIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  ExpandIcon: ChevronDownIcon,\n  ExternalIcon: TearOutIcon,\n  IncreaseIcon: TriangleUpIcon,\n  InfoIcon: InfoSolidIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  LockedIcon: LockedIcon,\n  LevelSeparatorIcon: ChevronRightIcon,\n  NextIcon: ChevronRightIcon,\n  OverflowIcon: OverflowMenuIcon,\n  PendingIcon: ProgressDraftIcon,\n  PreviousIcon: ChevronLeftIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n  UploadIcon,\n  UserIcon: UserIcon,\n  WarningIcon: WarningSolidIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;AAsFA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,kBAAA;AAAA,EACZ,YAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA,EAAmB,eAAA;AAAA,EACnB,YAAA,EAAc,aAAA;AAAA,EACd,gBAAA,EAAkB,qBAAA;AAAA,EAClB,iBAAA,EAAmB,sBAAA;AAAA,EACnB,aAAA,EAAe,sBAAA;AAAA,EACf,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA,EAAY,QAAA;AAAA,EACZ,SAAA,EAAW,cAAA;AAAA,EACX,oBAAA,EAAsB,kBAAA;AAAA,EACtB,eAAA,EAAiB,gBAAA;AAAA,EACjB,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,WAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,cAAA,EAAgB,sBAAA;AAAA,EAChB,UAAA;AAAA,EACA,kBAAA,EAAoB,gBAAA;AAAA,EACpB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,gBAAA;AAAA,EACd,WAAA,EAAa,iBAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,UAAA,EAAY,YAAA;AAAA,EACZ,kBAAA,EAAoB,iBAAA;AAAA,EACpB,qBAAA,EAAuB,kBAAA;AAAA,EACvB,WAAA,EAAa,sBAAA;AAAA,EACb,sBAAA,EAAwB,oBAAA;AAAA,EACxB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,EAAa,gBAAA;AAAA,EACb,sBAAA,EAAwB;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}

package/dist-es/stepper/Step.js

@@ -9,6 +9,7 @@ import '../utils/useFloatingUI/useFloatingUI.js';
 import { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import { hasActiveStep } from './internal/hasActiveStep.js';
 import { StepConnector } from './internal/StepConnector.js';
 import { StepExpandTrigger } from './internal/StepExpandTrigger.js';
 import { StepIcon } from './internal/StepIcon.js';
@@ -91,6 +92,7 @@ const Step = forwardRef(function Step2({
         withBaseName(`depth-${depth}`),
         status && withBaseName(`status-${status}`),
         !hasNestedSteps && withBaseName("terminal"),
+        hasNestedSteps && hasActiveStep(children) && withBaseName("hasActiveStep"),
         hasNestedSteps && expanded && withBaseName("expanded"),
         hasNestedSteps && !expanded && withBaseName("collapsed"),
         className
@@ -126,7 +128,16 @@ const Step = forwardRef(function Step2({
           }
         ),
         label && /* @__PURE__ */ jsx(StepText, { id: labelId, purpose: "label", "aria-hidden": true, children: label }),
-        description && /* @__PURE__ */ jsx(StepText, { id: descriptionId, purpose: "description", "aria-hidden": true, children: description }),
+        description && /* @__PURE__ */ jsx(
+          StepText,
+          {
+            id: descriptionId,
+            purpose: "description",
+            color: status,
+            "aria-hidden": true,
+            children: description
+          }
+        ),
         hasNestedSteps && orientation === "vertical" && /* @__PURE__ */ jsx(
           StepExpandTrigger,
           {

package/dist-es/stepper/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n} from \"react\";\nimport type { ButtonProps } from \"../button\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport {\n  StepDepthContext,\n  StepperOrientationContext,\n} from \"./internal/StepperProvider\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  /**\n   * The label of the step\n   */\n  label?: ReactNode;\n  /**\n   * Description text is displayed just below the label\n   **/\n  description?: ReactNode;\n  /**\n   * Optional string to determine the status of the step.\n   */\n  status?: StepStatus;\n  /**\n   * The stage of the step\n   */\n  stage?: StepStage;\n  /**\n   * Whether the step item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Initial expanded state of the step.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the step is toggled.\n   */\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n  | \"pending\"\n  | \"locked\"\n  | \"completed\"\n  | \"inprogress\"\n  | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  label?: ReactNode;\n  description?: ReactNode;\n  status?: StepStatus;\n  stage?: StepStage;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n  {\n    id: idProp,\n    label,\n    description,\n    status,\n    stage = \"pending\",\n    expanded: expandedProp,\n    defaultExpanded,\n    onToggle,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const id = useId(idProp);\n  const targetWindow = useWindow();\n  const depth = useContext(StepDepthContext);\n  const orientation = useContext(StepperOrientationContext);\n\n  const hasNestedSteps = !!children;\n\n  const [expanded, setExpanded] = useControlled({\n    name: \"Step\",\n    state: \"expanded\",\n    controlled: expandedProp,\n    default: Boolean(defaultExpanded),\n  });\n\n  useComponentCssInjection({\n    testId: \"salt-step\",\n    css: stepCSS,\n    window: targetWindow,\n  });\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (depth === -1) {\n        console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n      }\n      if (depth > 2) {\n        console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n      }\n      if (orientation === \"horizontal\" && hasNestedSteps) {\n        console.warn(\n          \"<Stepper /> does not support nested steps in horizontal orientation!\",\n        );\n      }\n    }\n  }, [depth, orientation, hasNestedSteps]);\n\n  const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n  const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n  const state = status || stageText;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const expandTriggerId = `${id}-expand-trigger`;\n  const nestedStepperId = `${id}-nested-stepper`;\n\n  const screenReaderOnly = {\n    stateId: `${id}-sr-only-state`,\n    stateText: state !== \"active\" ? state : \"\",\n    substepsId: `${id}-sr-only-substeps`,\n    substepsText: \"substeps\",\n    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n    toggleSubstepsText: \"toggle substeps\",\n  };\n\n  return (\n    <li\n      id={id}\n      aria-current={ariaCurrent}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`stage-${stage}`),\n        withBaseName(`depth-${depth}`),\n        status && withBaseName(`status-${status}`),\n        !hasNestedSteps && withBaseName(\"terminal\"),\n        hasNestedSteps && expanded && withBaseName(\"expanded\"),\n        hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n        className,\n      )}\n      style={\n        {\n          \"--saltStep-depth\": depth,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n      ref={ref}\n    >\n      <StepScreenReaderOnly>\n        {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n      </StepScreenReaderOnly>\n      {hasNestedSteps && (\n        <>\n          <StepScreenReaderOnly\n            id={screenReaderOnly.toggleSubstepsId}\n            aria-hidden\n          >\n            {screenReaderOnly.toggleSubstepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n            {screenReaderOnly.substepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n            {screenReaderOnly.stateText}\n          </StepScreenReaderOnly>\n        </>\n      )}\n      <StepConnector />\n      <StepIcon\n        stage={stage}\n        status={status}\n        sizeMultiplier={iconSizeMultiplier}\n        aria-hidden\n      />\n      {label && (\n        <StepText id={labelId} purpose=\"label\" aria-hidden>\n          {label}\n        </StepText>\n      )}\n      {description && (\n        <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n          {description}\n        </StepText>\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <StepExpandTrigger\n          id={expandTriggerId}\n          aria-expanded={expanded}\n          aria-controls={nestedStepperId}\n          aria-labelledby={[\n            labelId,\n            descriptionId,\n            screenReaderOnly.stateId,\n            screenReaderOnly.toggleSubstepsId,\n          ].join(\" \")}\n          expanded={expanded}\n          onClick={(event) => {\n            onToggle?.(event);\n            setExpanded(!expanded);\n          }}\n        />\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <Stepper\n          id={nestedStepperId}\n          aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n          aria-hidden={!expanded}\n          hidden={!expanded}\n        >\n          {children}\n        </Stepper>\n      )}\n    </li>\n  );\n});\n"],"names":["Step","stepCSS"],"mappings":"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"}
+{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n} from \"react\";\nimport type { ButtonProps } from \"../button\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { hasActiveStep } from \"./internal/hasActiveStep\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport {\n  StepDepthContext,\n  StepperOrientationContext,\n} from \"./internal/StepperProvider\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  /**\n   * The label of the step\n   */\n  label?: ReactNode;\n  /**\n   * Description text is displayed just below the label\n   **/\n  description?: ReactNode;\n  /**\n   * Optional string to determine the status of the step.\n   */\n  status?: StepStatus;\n  /**\n   * The stage of the step\n   */\n  stage?: StepStage;\n  /**\n   * Whether the step item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Initial expanded state of the step.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the step is toggled.\n   */\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n  | \"pending\"\n  | \"locked\"\n  | \"completed\"\n  | \"inprogress\"\n  | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  label?: ReactNode;\n  description?: ReactNode;\n  status?: StepStatus;\n  stage?: StepStage;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n  {\n    id: idProp,\n    label,\n    description,\n    status,\n    stage = \"pending\",\n    expanded: expandedProp,\n    defaultExpanded,\n    onToggle,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const id = useId(idProp);\n  const targetWindow = useWindow();\n  const depth = useContext(StepDepthContext);\n  const orientation = useContext(StepperOrientationContext);\n\n  const hasNestedSteps = !!children;\n\n  const [expanded, setExpanded] = useControlled({\n    name: \"Step\",\n    state: \"expanded\",\n    controlled: expandedProp,\n    default: Boolean(defaultExpanded),\n  });\n\n  useComponentCssInjection({\n    testId: \"salt-step\",\n    css: stepCSS,\n    window: targetWindow,\n  });\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (depth === -1) {\n        console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n      }\n      if (depth > 2) {\n        console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n      }\n      if (orientation === \"horizontal\" && hasNestedSteps) {\n        console.warn(\n          \"<Stepper /> does not support nested steps in horizontal orientation!\",\n        );\n      }\n    }\n  }, [depth, orientation, hasNestedSteps]);\n\n  const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n  const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n  const state = status || stageText;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const expandTriggerId = `${id}-expand-trigger`;\n  const nestedStepperId = `${id}-nested-stepper`;\n\n  const screenReaderOnly = {\n    stateId: `${id}-sr-only-state`,\n    stateText: state !== \"active\" ? state : \"\",\n    substepsId: `${id}-sr-only-substeps`,\n    substepsText: \"substeps\",\n    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n    toggleSubstepsText: \"toggle substeps\",\n  };\n\n  return (\n    <li\n      id={id}\n      aria-current={ariaCurrent}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`stage-${stage}`),\n        withBaseName(`depth-${depth}`),\n        status && withBaseName(`status-${status}`),\n        !hasNestedSteps && withBaseName(\"terminal\"),\n        hasNestedSteps &&\n          hasActiveStep(children) &&\n          withBaseName(\"hasActiveStep\"),\n        hasNestedSteps && expanded && withBaseName(\"expanded\"),\n        hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n        className,\n      )}\n      style={\n        {\n          \"--saltStep-depth\": depth,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n      ref={ref}\n    >\n      <StepScreenReaderOnly>\n        {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n      </StepScreenReaderOnly>\n      {hasNestedSteps && (\n        <>\n          <StepScreenReaderOnly\n            id={screenReaderOnly.toggleSubstepsId}\n            aria-hidden\n          >\n            {screenReaderOnly.toggleSubstepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n            {screenReaderOnly.substepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n            {screenReaderOnly.stateText}\n          </StepScreenReaderOnly>\n        </>\n      )}\n      <StepConnector />\n      <StepIcon\n        stage={stage}\n        status={status}\n        sizeMultiplier={iconSizeMultiplier}\n        aria-hidden\n      />\n      {label && (\n        <StepText id={labelId} purpose=\"label\" aria-hidden>\n          {label}\n        </StepText>\n      )}\n      {description && (\n        <StepText\n          id={descriptionId}\n          purpose=\"description\"\n          color={status}\n          aria-hidden\n        >\n          {description}\n        </StepText>\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <StepExpandTrigger\n          id={expandTriggerId}\n          aria-expanded={expanded}\n          aria-controls={nestedStepperId}\n          aria-labelledby={[\n            labelId,\n            descriptionId,\n            screenReaderOnly.stateId,\n            screenReaderOnly.toggleSubstepsId,\n          ].join(\" \")}\n          expanded={expanded}\n          onClick={(event) => {\n            onToggle?.(event);\n            setExpanded(!expanded);\n          }}\n        />\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <Stepper\n          id={nestedStepperId}\n          aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n          aria-hidden={!expanded}\n          hidden={!expanded}\n        >\n          {children}\n        </Stepper>\n      )}\n    </li>\n  );\n});\n"],"names":["Step","stepCSS"],"mappings":"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"}