@salt-ds/core 1.70.0 → 1.72.0

package/dist-cjs/toggle-button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n  useClassNameInjection,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The appearance of the toggle button when `selected` is true.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is in a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Whether the toggle button is selected by default.\n   * This will be disregarded if `selected` is already set.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const { className, props: finalProps } = useClassNameInjection(\n      \"saltToggleButton\",\n      props,\n    );\n    const {\n      appearance: appearanceProp,\n      children,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      defaultSelected,\n      sentiment: sentimentProp,\n      ...rest\n    } = finalProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(defaultSelected),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ToggleButtonProps = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      readOnly: readOnlyProp,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useClassNameInjection","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAqDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,UAAA,EAAW,GAAIC,4BAAA;AAAA,MACvC,kBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM;AAAA,MACJ,UAAA,EAAY,cAAA;AAAA,MACZ,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,QAAA,EAAU,YAAA;AAAA,MACV,eAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX,GAAG;AAAA,KACL,GAAI,UAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAA,GAAYC,aAA0B,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,SAAS,CAAA;AAE3C,IAAA,MAAM,oBAAoBC,6CAAA,EAAqB;AAE/C,IAAA,MAAM,yBAAA,GAA4B,iBAAA,GAC9B,iBAAA,CAAkB,UAAA,CAAW,KAAK,CAAA,GAClC,YAAA;AACJ,IAAA,MAAM,SAAA,GAAY,iBAAA,GACd,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,SAAA,CAAU,KAAA,CAAA,GAC7B,IAAA;AAEJ,IAAA,MAAM,SAAA,GACJ,aAAA,KAAiB,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,SAAA,CAAA,IAAa,SAAA;AACnD,IAAA,MAAM,UAAA,GACJ,cAAA,KAAkB,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,UAAA,CAAA,IAAc,OAAA;AACrD,IAAA,MAAM,QAAA,GAAA,CAAW,uDAAmB,QAAA,KAAY,YAAA;AAChD,IAAA,MAAM,QAAA,GAAA,CAAW,uDAAmB,QAAA,KAAY,YAAA;AAEhD,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAA,CAAc;AAAA,MAC5C,UAAA,EAAY,yBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAA,EAAM,cAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,IAAI,YAAY,QAAA,EAAU;AACxB,QAAA;AAAA,MACF;AACA,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,MAAA,CAAO,KAAA,CAAA;AAC1B,MAAA,WAAA,CAAY,CAAC,QAAQ,CAAA;AACrB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AACX,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,KAAA,CAAM,KAAA,CAAA;AACzB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ,CAAA;AAEA,IAAA,MAAM,iBAAA,GAAuC;AAAA,MAC3C,eAAA,EAAiB,YAAA;AAAA,MACjB,cAAA,EAAgB,CAAC,iBAAA,GAAoB,QAAA,GAAW,MAAA;AAAA,MAChD,cAAA,EAAgB,oBAAoB,QAAA,GAAW,MAAA;AAAA,MAC/C,eAAA,EAAiB,QAAA;AAAA,MACjB,IAAA,EAAM,oBAAoB,OAAA,GAAU,MAAA;AAAA,MACpC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,aAAa,UAAU,CAAA;AAAA,QACvB,QAAA,IAAY,aAAa,UAAU,CAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,OAAA,EAAS,WAAA;AAAA,MACT,QAAA,EAAU,YAAY,CAAA,GAAI,EAAA;AAAA,MAC1B,KAAA;AAAA,MACA,IAAA,EAAM,QAAA;AAAA,MACN,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,GAAG;AAAA,KACL;AAEA,IAAA,sCACG,QAAA,EAAA,EAAO,GAAA,EAAK,SAAA,EAAY,GAAG,mBACzB,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n  useClassNameInjection,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport {\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The appearance of the toggle button when `selected` is true.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is in a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Whether the toggle button is selected by default.\n   * This will be disregarded if `selected` is already set.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const { className, props: finalProps } = useClassNameInjection(\n      \"saltToggleButton\",\n      props,\n    );\n    const {\n      appearance: appearanceProp,\n      children,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      defaultSelected,\n      sentiment: sentimentProp,\n      ...rest\n    } = finalProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const registerButton = toggleButtonGroup?.registerButton;\n    useIsomorphicLayoutEffect(() => {\n      if (!disabled && buttonRef.current && registerButton) {\n        return registerButton(value, buttonRef.current);\n      }\n    }, [disabled, registerButton, value]);\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(defaultSelected),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event, value);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ToggleButtonProps = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useClassNameInjection","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useIsomorphicLayoutEffect","useControlled","clsx"],"mappings":"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"}

package/dist-cjs/toggle-button-group/ToggleButtonGroup.js

@@ -8,6 +8,7 @@ var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 var ownerDocument = require('../utils/ownerDocument.js');
 var useControlled = require('../utils/useControlled.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
@@ -17,6 +18,19 @@ var ToggleButtonGroup$1 = require('./ToggleButtonGroup.css.js');
 var ToggleButtonGroupContext = require('./ToggleButtonGroupContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltToggleButtonGroup");
+function isSameValue(a, b) {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((value, index) => value === b[index]);
+  }
+  return a === b;
+}
+const sortButtons = (buttons) => [...buttons].sort((buttonA, buttonB) => {
+  const position = buttonA.element.compareDocumentPosition(buttonB.element);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+  return 0;
+});
+const buttonsAreEqual = (buttonsA, buttonsB) => buttonsA.length === buttonsB.length && buttonsA.every((button, index) => button === buttonsB[index]);
 const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, ref) {
   const {
     appearance,
@@ -47,11 +61,39 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
     state: "value"
   });
   const [focused, setFocused] = React.useState(value);
+  const [enabledButtons, setEnabledButtons] = React.useState([]);
+  const registerButton = React.useCallback(
+    (buttonValue, element) => {
+      const button = { element, value: buttonValue };
+      setEnabledButtons(
+        (currentButtons) => sortButtons([
+          ...currentButtons.filter(
+            (currentButton) => currentButton.element !== element
+          ),
+          button
+        ])
+      );
+      return () => {
+        setEnabledButtons(
+          (currentButtons) => currentButtons.includes(button) ? currentButtons.filter(
+            (registeredButton) => registeredButton !== button
+          ) : currentButtons
+        );
+      };
+    },
+    []
+  );
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    setEnabledButtons((currentButtons) => {
+      const sortedButtons = sortButtons(currentButtons);
+      return buttonsAreEqual(currentButtons, sortedButtons) ? currentButtons : sortedButtons;
+    });
+  }, [children]);
   const select = React.useCallback(
-    (event) => {
-      const newValue = event.currentTarget.value;
+    (event, ...values) => {
+      const newValue = values.length === 0 ? event.currentTarget.value : values[0];
       setValue(newValue);
-      if (value !== newValue) {
+      if (!isSameValue(value, newValue)) {
         onChange == null ? void 0 : onChange(event);
       }
     },
@@ -59,7 +101,7 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
   );
   const isSelected = React.useCallback(
     (id) => {
-      return value === id;
+      return isSameValue(value, id);
     },
     [value]
   );
@@ -68,9 +110,18 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
   }, []);
   const isFocused = React.useCallback(
     (id) => {
-      return focused === id || !focused;
+      if (enabledButtons.length === 0) {
+        return focused === id || focused === void 0 || focused === "";
+      }
+      const hasFocusTarget = enabledButtons.some(
+        (button) => isSameValue(button.value, focused)
+      );
+      return isSameValue(
+        hasFocusTarget ? focused : enabledButtons[0].value,
+        id
+      );
     },
-    [focused]
+    [focused, enabledButtons]
   );
   const contextValue = React.useMemo(
     () => ({
@@ -81,6 +132,7 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
       isSelected,
       orientation,
       readOnly,
+      registerButton,
       select,
       sentiment
     }),
@@ -92,12 +144,17 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
       isSelected,
       orientation,
       readOnly,
+      registerButton,
       select,
       sentiment
     ]
   );
   const handleKeyDown = (event) => {
     var _a, _b, _c;
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      return;
+    }
     const elements = Array.from(
       ((_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) ?? []
     );
@@ -106,11 +163,17 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
     switch (event.key) {
       case "ArrowDown":
       case "ArrowRight":
-        (_b = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _b.focus();
+        if (elements.length > 0) {
+          event.preventDefault();
+          (_b = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _b.focus();
+        }
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        (_c = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _c.focus();
+        if (elements.length > 0) {
+          event.preventDefault();
+          (_c = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _c.focus();
+        }
         break;
     }
     onKeyDown == null ? void 0 : onKeyDown(event);

package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.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 KeyboardEvent,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport {\n  makePrefixer,\n  ownerDocument,\n  useControlled,\n  useForkRef,\n} from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The appearance of all the toggle buttons within the group.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Value of the toggle button group, to be used when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button group will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The visual sentimenent of all the toggle buttons within the group.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    appearance,\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    readOnly,\n    sentiment,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    }),\n    [\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    ],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n\n    const doc = ownerDocument(groupRef.current);\n\n    const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        aria-disabled={disabled}\n        aria-readonly={readOnly}\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          disabled && withBaseName(\"disabled\"),\n          readOnly && withBaseName(\"readOnly\"),\n          className,\n        )}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","ownerDocument","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.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 KeyboardEvent,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport {\n  makePrefixer,\n  ownerDocument,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The appearance of all the toggle buttons within the group.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Value of the toggle button group, to be used when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button group will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The visual sentimenent of all the toggle buttons within the group.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nfunction isSameValue(a: Value, b: Value) {\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return (\n      a.length === b.length && a.every((value, index) => value === b[index])\n    );\n  }\n  return a === b;\n}\n\ninterface RegisteredButton {\n  element: HTMLElement;\n  value: Value;\n}\n\nconst sortButtons = (buttons: RegisteredButton[]) =>\n  [...buttons].sort((buttonA, buttonB) => {\n    const position = buttonA.element.compareDocumentPosition(buttonB.element);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n    return 0;\n  });\n\nconst buttonsAreEqual = (\n  buttonsA: RegisteredButton[],\n  buttonsB: RegisteredButton[],\n) =>\n  buttonsA.length === buttonsB.length &&\n  buttonsA.every((button, index) => button === buttonsB[index]);\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    appearance,\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    readOnly,\n    sentiment,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n  const [enabledButtons, setEnabledButtons] = useState<RegisteredButton[]>([]);\n\n  const registerButton = useCallback(\n    (buttonValue: Value, element: HTMLElement) => {\n      const button = { element, value: buttonValue };\n      setEnabledButtons((currentButtons) =>\n        sortButtons([\n          ...currentButtons.filter(\n            (currentButton) => currentButton.element !== element,\n          ),\n          button,\n        ]),\n      );\n\n      return () => {\n        setEnabledButtons((currentButtons) =>\n          currentButtons.includes(button)\n            ? currentButtons.filter(\n                (registeredButton) => registeredButton !== button,\n              )\n            : currentButtons,\n        );\n      };\n    },\n    [],\n  );\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: re-sorts registered buttons after children move.\n  useIsomorphicLayoutEffect(() => {\n    setEnabledButtons((currentButtons) => {\n      const sortedButtons = sortButtons(currentButtons);\n      return buttonsAreEqual(currentButtons, sortedButtons)\n        ? currentButtons\n        : sortedButtons;\n    });\n  }, [children]);\n\n  const select = useCallback(\n    (\n      event: SyntheticEvent<HTMLButtonElement>,\n      ...values: [newValue?: Value]\n    ) => {\n      const newValue =\n        values.length === 0 ? event.currentTarget.value : values[0];\n      setValue(newValue);\n      if (!isSameValue(value, newValue)) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return isSameValue(value, id);\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      // Trust the focused value until buttons register (e.g. server rendering).\n      if (enabledButtons.length === 0) {\n        return focused === id || focused === undefined || focused === \"\";\n      }\n\n      const hasFocusTarget = enabledButtons.some((button) =>\n        isSameValue(button.value, focused),\n      );\n\n      return isSameValue(\n        hasFocusTarget ? focused : enabledButtons[0].value,\n        id,\n      );\n    },\n    [focused, enabledButtons],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      registerButton,\n      select,\n      sentiment,\n    }),\n    [\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      registerButton,\n      select,\n      sentiment,\n    ],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Leave modified arrow keys (e.g. browser history shortcuts) to the browser.\n    if (event.altKey || event.ctrlKey || event.metaKey) {\n      onKeyDown?.(event);\n      return;\n    }\n\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n\n    const doc = ownerDocument(groupRef.current);\n\n    const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        if (elements.length > 0) {\n          event.preventDefault();\n          elements[(currentIndex + 1) % elements.length]?.focus();\n        }\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        if (elements.length > 0) {\n          event.preventDefault();\n          elements[\n            (currentIndex - 1 + elements.length) % elements.length\n          ]?.focus();\n        }\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        aria-disabled={disabled}\n        aria-readonly={readOnly}\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          disabled && withBaseName(\"disabled\"),\n          readOnly && withBaseName(\"readOnly\"),\n          className,\n        )}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useIsomorphicLayoutEffect","useMemo","ownerDocument","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}

package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  disabled?: boolean;\n  focus: (id: Value) => void;\n  isFocused: (id: Value) => boolean;\n  isSelected: (id: Value) => boolean;\n  orientation: \"horizontal\" | \"vertical\";\n  readOnly?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  sentiment?: ButtonSentiment;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAkBO,MAAM,wBAAA,GAA2BA,2BAAA,CAEtC,0BAAA,EAA4B,MAAS;AAEhC,SAAS,oBAAA,GAAuB;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA;AAC5C;;;;;"}
+{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  disabled?: boolean;\n  focus: (id: Value) => void;\n  isFocused: (id: Value) => boolean;\n  isSelected: (id: Value) => boolean;\n  orientation: \"horizontal\" | \"vertical\";\n  readOnly?: boolean;\n  registerButton: (value: Value, element: HTMLElement) => () => void;\n  select: (event: SyntheticEvent<HTMLButtonElement>, value?: Value) => void;\n  sentiment?: ButtonSentiment;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAmBO,MAAM,wBAAA,GAA2BA,2BAAA,CAEtC,0BAAA,EAA4B,MAAS;AAEhC,SAAS,oBAAA,GAAuB;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA;AAC5C;;;;;"}

package/dist-cjs/toggletip/ToggletipPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggletipPanel {\n  --toggletip-background: var(--salt-container-primary-background);\n  --toggletip-borderColor: var(--salt-container-bold-borderColor);\n\n  box-sizing: border-box;\n  padding: var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n\n  background: var(--toggletip-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n\n  color: var(--salt-content-primary-foreground);\n  z-index: var(--salt-zIndex-flyover);\n\n  max-width: 45ch;\n  max-height: 100vh;\n}\n\n.saltToggletipPanel-content {\n  max-height: 100%;\n  overflow-y: auto;\n}\n\n.saltToggletipPanel-content:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n";
+var css_248z = ".saltToggletipPanel {\n  --toggletip-background: var(--salt-container-primary-background);\n  --toggletip-borderColor: var(--salt-container-bold-borderColor);\n\n  box-sizing: border-box;\n  padding: var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n\n  background: var(--toggletip-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n\n  color: var(--salt-content-primary-foreground);\n  z-index: var(--salt-zIndex-flyover);\n\n  max-width: 45ch;\n  max-height: 100vh;\n}\n\n.saltToggletipPanel-content {\n  max-height: 100%;\n  overflow-y: auto;\n}\n\n.saltToggletipPanel-content:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggletipPanel.css.js.map

package/dist-cjs/tooltip/Tooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-bold-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-bold-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tooltip.css.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltVerticalNavigationItemContent {\n  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  appearance: none;\n  -webkit-appearance: none;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  overflow: hidden;\n\n  cursor: var(--salt-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-h4-fontWeight);\n  font-family: var(--salt-text-h4-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-h4-lineHeight);\n  font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n  left: var(--salt-spacing-50);\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-50);\n  bottom: var(--salt-spacing-50);\n  border-radius: var(--salt-palette-corner-strongest);\n  width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n  background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n  background: var(--salt-navigable-accent-background-active);\n  border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n  min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n  z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n  background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n  font-weight: var(--salt-text-h4-fontWeight);\n}\n\n@supports selector(:has(*)) {\n  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n    background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n  }\n}\n";
+var css_248z = ".saltVerticalNavigationItemContent {\n  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  appearance: none;\n  -webkit-appearance: none;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  overflow: hidden;\n\n  cursor: var(--salt-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-heading-fontWeight);\n  font-family: var(--salt-text-heading-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-h4-lineHeight);\n  font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n  left: var(--salt-spacing-50);\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-50);\n  bottom: var(--salt-spacing-50);\n  border-radius: var(--salt-palette-corner-strongest);\n  width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n  background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n  background: var(--salt-navigable-accent-background-active);\n  border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n  min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n  z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n  background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n  font-weight: var(--salt-text-heading-fontWeight);\n}\n\n@supports selector(:has(*)) {\n  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n    background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=VerticalNavigationItemContent.css.js.map

package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltVerticalNavigationSubMenu {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  padding: var(--salt-spacing-fixed-100) 0 0;\n  margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n";
+var css_248z = ".saltVerticalNavigationSubMenu {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  padding: var(--salt-spacing-fixed-100) 0 0;\n  margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n  font-weight: var(--salt-text-heading-fontWeight-small);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=VerticalNavigationSubMenu.css.js.map

package/dist-es/accordion/AccordionHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\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-strong);\n  text-align: left;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-success-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n";
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\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-strong);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-align: left;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-success-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  opacity: 0.4;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=AccordionHeader.css.js.map

package/dist-es/aria-announcer/AriaAnnouncerProvider.js

@@ -21,6 +21,7 @@ const AriaAnnouncerProvider = forwardRef(function AriaAnnouncerProvider2({ child
   const [politeAnnouncements, setPoliteAnnouncements] = useState([]);
   const [assertiveAnnouncements, setAssertiveAnnouncements] = useState([]);
   const idCounterRef = useRef(0);
+  const isMountedRef = useRef(true);
   const timeoutsRef = useRef(/* @__PURE__ */ new Set());
   const scheduleRemoval = useCallback(
     (id, assertiveness, duration) => {
@@ -38,6 +39,7 @@ const AriaAnnouncerProvider = forwardRef(function AriaAnnouncerProvider2({ child
   );
   const makeAnnouncement = useCallback(
     (message, assertiveness = "polite", duration = ANNOUNCEMENT_TIME_IN_DOM) => {
+      if (!isMountedRef.current) return;
       idCounterRef.current += 1;
       const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;
       if (assertiveness === "polite") {
@@ -53,6 +55,12 @@ const AriaAnnouncerProvider = forwardRef(function AriaAnnouncerProvider2({ child
     },
     [scheduleRemoval]
   );
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   useEffect(() => {
     const timeouts = timeoutsRef.current;
     return () => {

package/dist-es/aria-announcer/AriaAnnouncerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport {\n  type AnnounceFnOptions,\n  AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\nimport { registerAnnouncementTarget } from \"./announcementRegistry\";\n\nexport const ANNOUNCEMENT_TIME_IN_DOM = 300; // time between DOM updates\n\nexport interface AriaAnnouncerProviderProps\n  extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Optional target key used to route announcements to this provider.\n   */\n  target?: string;\n}\n\nconst AnnouncementRegion = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithRef<\"div\">\n>(function AnnouncementRegion(props, ref) {\n  return (\n    <div\n      // Keep the region simple for maximum assistive-tech compatibility.\n      // aria-live is applied by the caller (polite/assertive).\n      aria-atomic={false}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\ntype AnnouncementMessage = {\n  id: string;\n  message: string;\n};\n\nexport const AriaAnnouncerProvider = forwardRef<\n  HTMLDivElement,\n  AriaAnnouncerProviderProps\n>(function AriaAnnouncerProvider({ children, style, target, ...rest }, ref) {\n  const targetWindow = useWindow();\n\n  const [politeAnnouncements, setPoliteAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n  const [assertiveAnnouncements, setAssertiveAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n\n  const idCounterRef = useRef(0);\n  const timeoutsRef = useRef<Set<number>>(new Set());\n\n  const scheduleRemoval = useCallback(\n    (id: string, assertiveness: \"polite\" | \"assertive\", duration: number) => {\n      if (!targetWindow) return;\n\n      const setter =\n        assertiveness === \"polite\"\n          ? setPoliteAnnouncements\n          : setAssertiveAnnouncements;\n      const handle = targetWindow.setTimeout(() => {\n        timeoutsRef.current.delete(handle);\n        setter((previous) =>\n          previous.filter((announcement) => announcement.id !== id),\n        );\n      }, duration);\n      timeoutsRef.current.add(handle);\n    },\n    [targetWindow],\n  );\n\n  const makeAnnouncement = useCallback(\n    (\n      message: string,\n      assertiveness: \"polite\" | \"assertive\" = \"polite\",\n      duration: number = ANNOUNCEMENT_TIME_IN_DOM,\n    ) => {\n      idCounterRef.current += 1;\n      // Date.now() can collide when multiple announcements are created in the same millisecond\n      // (e.g. tests with cy.clock, batching, or multiple announces during one tick).\n      // Add a monotonic counter suffix to guarantee uniqueness.\n      const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;\n      if (assertiveness === \"polite\") {\n        setPoliteAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      } else {\n        setAssertiveAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      }\n      scheduleRemoval(id, assertiveness, duration);\n    },\n    [scheduleRemoval],\n  );\n\n  useEffect(() => {\n    const timeouts = timeoutsRef.current;\n    return () => {\n      for (const handle of timeouts) {\n        targetWindow?.clearTimeout(handle);\n      }\n      timeouts.clear();\n    };\n  }, [targetWindow]);\n\n  const announce = useCallback(\n    (\n      announcement: string,\n      legacyDelayOrOptions: number | AnnounceFnOptions | undefined = {},\n    ) => {\n      // Legacy delay (number arg) is handled by useAriaAnnouncer; if we also delayed\n      // here we'd apply it twice. Keep supporting the signature but ignore the delay.\n      const options: AnnounceFnOptions =\n        typeof legacyDelayOrOptions === \"object\" && legacyDelayOrOptions\n          ? legacyDelayOrOptions\n          : {};\n\n      makeAnnouncement(\n        announcement,\n        options.ariaLive,\n        options.duration ?? ANNOUNCEMENT_TIME_IN_DOM,\n      );\n    },\n    [makeAnnouncement],\n  );\n\n  const value = useMemo(() => ({ announce }), [announce]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!target) {\n      return;\n    }\n    return registerAnnouncementTarget(target, announce);\n  }, [announce, target]);\n\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <AnnouncementRegion aria-live=\"polite\">\n          {politeAnnouncements.map((announcement) => (\n            <div key={`polite-${announcement.id}`}>{announcement.message}</div>\n          ))}\n        </AnnouncementRegion>\n        <AnnouncementRegion aria-live=\"assertive\">\n          {assertiveAnnouncements.map((announcement) => (\n            <div key={`assertive-${announcement.id}`}>\n              {announcement.message}\n            </div>\n          ))}\n        </AnnouncementRegion>\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n});\n"],"names":["AnnouncementRegion","AriaAnnouncerProvider"],"mappings":"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"}
+{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport {\n  type AnnounceFnOptions,\n  AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\nimport { registerAnnouncementTarget } from \"./announcementRegistry\";\n\nexport const ANNOUNCEMENT_TIME_IN_DOM = 300; // time between DOM updates\n\nexport interface AriaAnnouncerProviderProps\n  extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Optional target key used to route announcements to this provider.\n   */\n  target?: string;\n}\n\nconst AnnouncementRegion = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithRef<\"div\">\n>(function AnnouncementRegion(props, ref) {\n  return (\n    <div\n      // Keep the region simple for maximum assistive-tech compatibility.\n      // aria-live is applied by the caller (polite/assertive).\n      aria-atomic={false}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\ntype AnnouncementMessage = {\n  id: string;\n  message: string;\n};\n\nexport const AriaAnnouncerProvider = forwardRef<\n  HTMLDivElement,\n  AriaAnnouncerProviderProps\n>(function AriaAnnouncerProvider({ children, style, target, ...rest }, ref) {\n  const targetWindow = useWindow();\n\n  const [politeAnnouncements, setPoliteAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n  const [assertiveAnnouncements, setAssertiveAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n\n  const idCounterRef = useRef(0);\n  const isMountedRef = useRef(true);\n  const timeoutsRef = useRef<Set<number>>(new Set());\n\n  const scheduleRemoval = useCallback(\n    (id: string, assertiveness: \"polite\" | \"assertive\", duration: number) => {\n      if (!targetWindow) return;\n\n      const setter =\n        assertiveness === \"polite\"\n          ? setPoliteAnnouncements\n          : setAssertiveAnnouncements;\n      const handle = targetWindow.setTimeout(() => {\n        timeoutsRef.current.delete(handle);\n        setter((previous) =>\n          previous.filter((announcement) => announcement.id !== id),\n        );\n      }, duration);\n      timeoutsRef.current.add(handle);\n    },\n    [targetWindow],\n  );\n\n  const makeAnnouncement = useCallback(\n    (\n      message: string,\n      assertiveness: \"polite\" | \"assertive\" = \"polite\",\n      duration: number = ANNOUNCEMENT_TIME_IN_DOM,\n    ) => {\n      if (!isMountedRef.current) return;\n\n      idCounterRef.current += 1;\n      // Date.now() can collide when multiple announcements are created in the same millisecond\n      // (e.g. tests with fake timers, batching, or multiple announces during one tick).\n      // Add a monotonic counter suffix to guarantee uniqueness.\n      const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;\n      if (assertiveness === \"polite\") {\n        setPoliteAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      } else {\n        setAssertiveAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      }\n      scheduleRemoval(id, assertiveness, duration);\n    },\n    [scheduleRemoval],\n  );\n\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    const timeouts = timeoutsRef.current;\n    return () => {\n      for (const handle of timeouts) {\n        targetWindow?.clearTimeout(handle);\n      }\n      timeouts.clear();\n    };\n  }, [targetWindow]);\n\n  const announce = useCallback(\n    (\n      announcement: string,\n      legacyDelayOrOptions: number | AnnounceFnOptions | undefined = {},\n    ) => {\n      // Legacy delay (number arg) is handled by useAriaAnnouncer; if we also delayed\n      // here we'd apply it twice. Keep supporting the signature but ignore the delay.\n      const options: AnnounceFnOptions =\n        typeof legacyDelayOrOptions === \"object\" && legacyDelayOrOptions\n          ? legacyDelayOrOptions\n          : {};\n\n      makeAnnouncement(\n        announcement,\n        options.ariaLive,\n        options.duration ?? ANNOUNCEMENT_TIME_IN_DOM,\n      );\n    },\n    [makeAnnouncement],\n  );\n\n  const value = useMemo(() => ({ announce }), [announce]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!target) {\n      return;\n    }\n    return registerAnnouncementTarget(target, announce);\n  }, [announce, target]);\n\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <AnnouncementRegion aria-live=\"polite\">\n          {politeAnnouncements.map((announcement) => (\n            <div key={`polite-${announcement.id}`}>{announcement.message}</div>\n          ))}\n        </AnnouncementRegion>\n        <AnnouncementRegion aria-live=\"assertive\">\n          {assertiveAnnouncements.map((announcement) => (\n            <div key={`assertive-${announcement.id}`}>\n              {announcement.message}\n            </div>\n          ))}\n        </AnnouncementRegion>\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n});\n"],"names":["AnnouncementRegion","AriaAnnouncerProvider"],"mappings":"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"}

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

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

package/dist-es/badge/Badge.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --badge-size: var(--salt-text-notation-lineHeight);\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--badge-size);\n  min-width: var(--badge-size);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-sentiment-accent-background);\n  color: var(--salt-content-bold-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));\n}\n\n.saltBadge-dotBadge {\n  height: var(--salt-size-adornment);\n  min-width: var(--salt-size-adornment);\n  padding: 0;\n  --badge-size: var(--salt-size-adornment);\n}\n\n.saltBadge-dotBadge.saltBadge-topRight {\n  right: calc((var(--salt-size-adornment) / 2));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --badge-size: var(--salt-text-notation-lineHeight);\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--badge-size);\n  min-width: var(--badge-size);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  background: var(--salt-sentiment-accent-background);\n  color: var(--salt-content-bold-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));\n}\n\n.saltBadge-dotBadge {\n  height: var(--salt-size-adornment);\n  min-width: var(--salt-size-adornment);\n  padding: 0;\n  --badge-size: var(--salt-size-adornment);\n}\n\n.saltBadge-dotBadge.saltBadge-topRight {\n  right: calc((var(--salt-size-adornment) / 2));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Badge.css.js.map

package/dist-es/banner/Banner.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--salt-content-primary-foreground);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  color: var(--salt-content-primary-foreground);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Banner.css.js.map

package/dist-es/breadcrumbs/Breadcrumb.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltBreadcrumb {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumb-current,\n.saltBreadcrumb-label,\n.saltBreadcrumb-link,\n.saltBreadcrumb-trigger {\n  min-width: 0;\n}\n\n.saltBreadcrumb-trigger {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  gap: var(--salt-spacing-50);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-label-lineHeight);\n  max-width: 100%;\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current) {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):hover {\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):active {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-trigger:focus {\n  outline: var(--salt-focused-outline);\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-current {\n  cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumb-separator {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n  --saltIcon-size: var(--salt-size-icon);\n\n  flex: 0 0 auto;\n}\n";
+var css_248z = ".saltBreadcrumb {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumb-current,\n.saltBreadcrumb-label,\n.saltBreadcrumb-link,\n.saltBreadcrumb-trigger {\n  min-width: 0;\n}\n\n.saltBreadcrumb-trigger {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  gap: var(--salt-spacing-50);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-label-lineHeight);\n  max-width: 100%;\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current) {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):hover {\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):active {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-trigger:focus {\n  outline: var(--salt-focused-outline);\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-current {\n  cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumb-separator {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n  --saltIcon-size: var(--salt-size-icon);\n\n  flex: 0 0 auto;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Breadcrumb.css.js.map

package/dist-es/breadcrumbs/Breadcrumbs.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltBreadcrumbs {\n  display: block;\n  margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbs-ol {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--salt-spacing-100);\n  justify-content: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-collapseItem {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumbs-collapseButton[aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-subtle-background-active);\n  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);\n  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);\n  --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);\n  cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbs-disclosure {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  min-width: 10em;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbs-disclosureList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-disclosureListItem {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-disclosureItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  width: 100%;\n}\n\n.saltBreadcrumbs-disclosureItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbs-disclosureItem:hover {\n  outline: none;\n}\n\n.saltBreadcrumbs-disclosureItem:hover,\n.saltBreadcrumbs-disclosureItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbs-disclosureItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n  box-shadow: none;\n}\n";
+var css_248z = ".saltBreadcrumbs {\n  display: block;\n  margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbs-ol {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--salt-spacing-100);\n  justify-content: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-collapseItem {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumbs-collapseButton[aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-subtle-background-active);\n  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);\n  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);\n  --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);\n  cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbs-disclosure {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  min-width: 10em;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbs-disclosureList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-disclosureListItem {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-disclosureItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  width: 100%;\n}\n\n.saltBreadcrumbs-disclosureItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbs-disclosureItem:hover {\n  outline: none;\n}\n\n.saltBreadcrumbs-disclosureItem:hover,\n.saltBreadcrumbs-disclosureItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbs-disclosureItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"]:active {\n  opacity: 0.4;\n  background: var(--salt-selectable-background);\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-disabled);\n  box-shadow: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Breadcrumbs.css.js.map

package/dist-es/card/Card.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  padding: var(--saltCard-padding, var(--card-padding));\n  position: relative;\n  box-shadow: var(--salt-overlayable-shadow);\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltCard.saltCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  border-color: var(--salt-container-ghost-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n  position: relative;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--saltCard-borderColor, var(--card-borderColor));\n  padding: var(--saltCard-padding, var(--card-padding));\n  position: relative;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --card-borderColor: var(--salt-container-borderColor);\n  --card-borderColor-strong: var(--salt-container-bold-borderColor);\n  --card-borderColor-subtle: var(--salt-container-subtle-borderColor);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltCard.saltCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  --card-borderColor: var(--salt-container-ghost-borderColor);\n  --card-borderColor-strong: var(--salt-container-ghost-bold-borderColor);\n  --card-borderColor-subtle: var(--salt-container-ghost-subtle-borderColor);\n}\n\n/* Styles applied when elevation=\"flat\" */\n.saltCard-flat {\n  box-shadow: var(--saltCard-boxShadow-flat, none);\n}\n\n/* Styles applied when elevation=\"raised\" */\n.saltCard-raised {\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied when borderColor=\"strong\" */\n.saltCard-borderColorStrong {\n  --card-borderColor: var(--card-borderColor-strong);\n}\n\n/* Styles applied when borderColor=\"subtle\" */\n.saltCard-borderColorSubtle {\n  --card-borderColor: var(--card-borderColor-subtle);\n}\n\n/* Styles applied when borderColor=\"none\" */\n.saltCard-borderColorNone {\n  --card-borderColor: transparent;\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Deprecated interactable styles. Use InteractableCard instead. */\n\n/* Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n}\n\n/* Deprecated hoverable styles retained for backward compatibility. */\n@media (hover: hover) {\n  .saltCard-hoverable:not(.saltCard-disabled):hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied to disabled interactable states */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Card.css.js.map

package/dist-es/card/Card.js

@@ -17,9 +17,11 @@ const Card = forwardRef(
   function Card2(props, ref) {
     const {
       accent,
+      borderColor,
       children,
       className,
       disabled,
+      elevation = "raised",
       interactable,
       hoverable,
       variant = "primary",
@@ -38,9 +40,11 @@ const Card = forwardRef(
         className: clsx(
           withBaseName(),
           withBaseName(variant),
+          borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),
           {
             [withBaseName("accent")]: accent,
             [withBaseName(`accent${capitalize(accent || "")}`)]: accent,
+            [withBaseName(elevation || "")]: elevation,
             [withBaseName("hoverable")]: hoverable,
             /* **Deprecated:** InteractableCard should be used instead for these features */
             [withBaseName("disabled")]: disabled,

package/dist-es/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\nimport { hasCardSection } from \"./hasCardSection\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      disabled,\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    const sectioned = hasCardSection(children);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n            [withBaseName(\"sectioned\")]: sectioned,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["Card","cardCss"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AA6BrC,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,SAASA,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAA,GAAY,eAAe,QAAQ,CAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAA,MAAA,EAAS,UAAA,CAAW,UAAU,EAAE,CAAC,CAAA,CAAE,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,YAAA;AAAA,YAChC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\nimport { hasCardSection } from \"./hasCardSection\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps 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:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * @deprecated since 1.71.0. Use `LinkCard` or `InteractableCard` when the entire card is interactive.\n   *\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      borderColor,\n      children,\n      className,\n      disabled,\n      elevation = \"raised\",\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    const sectioned = hasCardSection(children);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(elevation || \"\")]: elevation,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n            [withBaseName(\"sectioned\")]: sectioned,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["Card","cardCss"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAuCrC,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,SAASA,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,GAAY,QAAA;AAAA,MACZ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAA,GAAY,eAAe,QAAQ,CAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB,eAAe,YAAA,CAAa,CAAA,WAAA,EAAc,UAAA,CAAW,WAAW,CAAC,CAAA,CAAE,CAAA;AAAA,UACnE;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAA,MAAA,EAAS,UAAA,CAAW,UAAU,EAAE,CAAC,CAAA,CAAE,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,SAAA,IAAa,EAAE,CAAC,GAAG,SAAA;AAAA,YACjC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,YAAA;AAAA,YAChC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}