@salt-ds/core 1.71.0 → 1.72.0

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":";;;;;;;;;;;;;;;;;;;AAkEA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAEzD,SAAS,WAAA,CAAY,GAAU,CAAA,EAAU;AACvC,EAAA,IAAI,MAAM,OAAA,CAAQ,CAAC,KAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA,EAAG;AACxC,IAAA,OACE,CAAA,CAAE,MAAA,KAAW,CAAA,CAAE,MAAA,IAAU,CAAA,CAAE,KAAA,CAAM,CAAC,KAAA,EAAO,KAAA,KAAU,KAAA,KAAU,CAAA,CAAE,KAAK,CAAC,CAAA;AAAA,EAEzE;AACA,EAAA,OAAO,CAAA,KAAM,CAAA;AACf;AAOA,MAAM,WAAA,GAAc,CAAC,OAAA,KACnB,CAAC,GAAG,OAAO,CAAA,CAAE,IAAA,CAAK,CAAC,OAAA,EAAS,OAAA,KAAY;AACtC,EAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,OAAA,CAAQ,uBAAA,CAAwB,QAAQ,OAAO,CAAA;AACxE,EAAA,IAAI,QAAA,GAAW,IAAA,CAAK,2BAAA,EAA6B,OAAO,EAAA;AACxD,EAAA,IAAI,QAAA,GAAW,IAAA,CAAK,2BAAA,EAA6B,OAAO,CAAA;AACxD,EAAA,OAAO,CAAA;AACT,CAAC,CAAA;AAEH,MAAM,kBAAkB,CACtB,QAAA,EACA,QAAA,KAEA,QAAA,CAAS,WAAW,QAAA,CAAS,MAAA,IAC7B,QAAA,CAAS,KAAA,CAAM,CAAC,MAAA,EAAQ,KAAA,KAAU,MAAA,KAAW,QAAA,CAAS,KAAK,CAAC,CAAA;AAEvD,MAAM,iBAAA,GAAoBC,gBAAA,CAG/B,SAASC,kBAAAA,CAAkB,OAAO,GAAA,EAAK;AACvC,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,YAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,YAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,mBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAC5C,EAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,QAAQ,CAAA;AAE1C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,2BAAA,CAAc;AAAA,IACtC,OAAA,EAAS,YAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,mBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AACD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAgB,KAAK,CAAA;AACnD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,cAAA,CAA6B,EAAE,CAAA;AAE3E,EAAA,MAAM,cAAA,GAAiBC,iBAAA;AAAA,IACrB,CAAC,aAAoB,OAAA,KAAyB;AAC5C,MAAA,MAAM,MAAA,GAAS,EAAE,OAAA,EAAS,KAAA,EAAO,WAAA,EAAY;AAC7C,MAAA,iBAAA;AAAA,QAAkB,CAAC,mBACjB,WAAA,CAAY;AAAA,UACV,GAAG,cAAA,CAAe,MAAA;AAAA,YAChB,CAAC,aAAA,KAAkB,aAAA,CAAc,OAAA,KAAY;AAAA,WAC/C;AAAA,UACA;AAAA,SACD;AAAA,OACH;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,iBAAA;AAAA,UAAkB,CAAC,cAAA,KACjB,cAAA,CAAe,QAAA,CAAS,MAAM,IAC1B,cAAA,CAAe,MAAA;AAAA,YACb,CAAC,qBAAqB,gBAAA,KAAqB;AAAA,WAC7C,GACA;AAAA,SACN;AAAA,MACF,CAAA;AAAA,IACF,CAAA;AAAA,IACA;AAAC,GACH;AAGA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,iBAAA,CAAkB,CAAC,cAAA,KAAmB;AACpC,MAAA,MAAM,aAAA,GAAgB,YAAY,cAAc,CAAA;AAChD,MAAA,OAAO,eAAA,CAAgB,cAAA,EAAgB,aAAa,CAAA,GAChD,cAAA,GACA,aAAA;AAAA,IACN,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,MAAA,GAASD,iBAAA;AAAA,IACb,CACE,UACG,MAAA,KACA;AACH,MAAA,MAAM,QAAA,GACJ,OAAO,MAAA,KAAW,CAAA,GAAI,MAAM,aAAA,CAAc,KAAA,GAAQ,OAAO,CAAC,CAAA;AAC5D,MAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,KAAA,EAAO,QAAQ,CAAA,EAAG;AACjC,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,MACb;AAAA,IACF,CAAA;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,GAClB;AAEA,EAAA,MAAM,UAAA,GAAaA,iBAAA;AAAA,IACjB,CAAC,EAAA,KAAc;AACb,MAAA,OAAO,WAAA,CAAY,OAAO,EAAE,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,KAAA,GAAQA,iBAAA,CAAY,CAAC,EAAA,KAAc;AACvC,IAAA,UAAA,CAAW,EAAE,CAAA;AAAA,EACf,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,SAAA,GAAYA,iBAAA;AAAA,IAChB,CAAC,EAAA,KAAc;AAEb,MAAA,IAAI,cAAA,CAAe,WAAW,CAAA,EAAG;AAC/B,QAAA,OAAO,OAAA,KAAY,EAAA,IAAM,OAAA,KAAY,MAAA,IAAa,OAAA,KAAY,EAAA;AAAA,MAChE;AAEA,MAAA,MAAM,iBAAiB,cAAA,CAAe,IAAA;AAAA,QAAK,CAAC,MAAA,KAC1C,WAAA,CAAY,MAAA,CAAO,OAAO,OAAO;AAAA,OACnC;AAEA,MAAA,OAAO,WAAA;AAAA,QACL,cAAA,GAAiB,OAAA,GAAU,cAAA,CAAe,CAAC,CAAA,CAAE,KAAA;AAAA,QAC7C;AAAA,OACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAS,cAAc;AAAA,GAC1B;AAEA,EAAA,MAAM,YAAA,GAAeE,aAAA;AAAA,IACnB,OAAO;AAAA,MACL,UAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyC;AAlPlE,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAoPI,IAAA,IAAI,KAAA,CAAM,MAAA,IAAU,KAAA,CAAM,OAAA,IAAW,MAAM,OAAA,EAAS;AAClD,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,WAA0B,KAAA,CAAM,IAAA;AAAA,MAAA,CAAA,CACpC,EAAA,GAAA,QAAA,CAAS,OAAA,KAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,gBAAA,CAAiB,8BAA6B;AAAC,KACnE;AAEA,IAAA,MAAM,GAAA,GAAMC,2BAAA,CAAc,QAAA,CAAS,OAAO,CAAA;AAE1C,IAAA,MAAM,YAAA,GAAe,QAAA,CAAS,OAAA,CAAQ,GAAA,CAAI,aAA4B,CAAA;AACtE,IAAA,QAAQ,MAAM,GAAA;AAAK,MACjB,KAAK,WAAA;AAAA,MACL,KAAK,YAAA;AACH,QAAA,IAAI,QAAA,CAAS,SAAS,CAAA,EAAG;AACvB,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,CAAA,EAAA,GAAA,QAAA,CAAA,CAAU,YAAA,GAAe,CAAA,IAAK,QAAA,CAAS,MAAM,MAA7C,IAAA,GAAA,MAAA,GAAA,EAAA,CAAgD,KAAA,EAAA;AAAA,QAClD;AACA,QAAA;AAAA,MACF,KAAK,SAAA;AAAA,MACL,KAAK,WAAA;AACH,QAAA,IAAI,QAAA,CAAS,SAAS,CAAA,EAAG;AACvB,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,CAAA,EAAA,GAAA,QAAA,CAAA,CACG,eAAe,CAAA,GAAI,QAAA,CAAS,UAAU,QAAA,CAAS,MAClD,MAFA,IAAA,GAAA,MAAA,GAAA,EAAA,CAEG,KAAA,EAAA;AAAA,QACL;AACA,QAAA;AAAA;AAGJ,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,uBACEC,cAAA,CAACC,iDAAA,CAAyB,QAAA,EAAzB,EAAkC,OAAO,YAAA,EACxC,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAe,QAAA;AAAA,MACf,eAAA,EAAe,QAAA;AAAA,MACf,SAAA,EAAWE,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,QAAA,IAAY,aAAa,UAAU,CAAA;AAAA,QACnC,QAAA,IAAY,aAAa,UAAU,CAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,IAAA,EAAK,YAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC;;;;"}

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/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/checkbox/Checkbox.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  width: fit-content;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground);\n\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-spacing-fixed-100);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  width: fit-content;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground);\n\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-spacing-fixed-100);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Checkbox.css.js.map

package/dist-es/checkbox/CheckboxIcon.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  opacity: 0.4;\n\n  border-color: var(--salt-selectable-borderColor);\n  background: var(--salt-container-primary-background);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly,\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckbox-disabled:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckbox-disabled:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-disabled:hover .saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  opacity: 0.4;\n\n  border-color: var(--salt-selectable-borderColor);\n  background: var(--salt-container-primary-background);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly,\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-es/combo-box/ComboBox.js

@@ -6,7 +6,8 @@ import { forwardRef, useRef, Children, useEffect } from 'react';
 import { Button } from '../button/Button.js';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
-import { ListControlContext } from '../list-control/ListControlContext.js';
+import { isModifiedListControlNavigationKey, isListControlNavigationKey, getComboBoxNavigationTarget } from '../list-control/ListControlNavigationKeys.js';
+import { ListControlProvider } from '../list-control/ListControlProvider.js';
 import { defaultValueToString } from '../list-control/ListControlState.js';
 import { OptionList } from '../option/OptionList.js';
 import { PillInput } from '../pill-input/PillInput.js';
@@ -166,7 +167,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     if (!event.repeat) {
       shouldAutoSelectRef.current = false;
     }
-    if (readOnly) {
+    if (readOnly || isModifiedListControlNavigationKey(event)) {
       return;
     }
     if (!openState) {
@@ -175,41 +176,22 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
         return;
       }
     }
+    if ((!openState || !hasValidChildren) && isListControlNavigationKey(event.key)) {
+      return;
+    }
     const activeOption = activeState;
-    let newActive;
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+    }
+    const newActive = getComboBoxNavigationTarget(event.key, activeOption, {
+      getFirstOption,
+      getLastOption,
+      getOptionAfter,
+      getOptionBefore,
+      getOptionPageAbove,
+      getOptionPageBelow
+    });
     switch (event.key) {
-      case "ArrowDown":
-        newActive = activeOption ? getOptionAfter(activeOption) : getFirstOption();
-        break;
-      case "ArrowUp":
-        newActive = activeOption ? getOptionBefore(activeOption) : getLastOption();
-        break;
-      case "Home":
-        newActive = getFirstOption();
-        break;
-      case "End":
-        newActive = getLastOption();
-        break;
-      case "PageUp":
-        if (activeOption) {
-          newActive = getOptionPageAbove(activeOption);
-        } else {
-          const lastOption = getLastOption();
-          if (lastOption) {
-            newActive = getOptionPageAbove(lastOption == null ? void 0 : lastOption.data);
-          }
-        }
-        break;
-      case "PageDown":
-        if (activeOption) {
-          newActive = getOptionPageBelow(activeOption);
-        } else {
-          const firstOption = getFirstOption();
-          if (firstOption) {
-            newActive = getOptionPageBelow(firstOption.data);
-          }
-        }
-        break;
       case "Enter":
         if (openState && (activeState == null ? void 0 : activeState.disabled)) {
           event.preventDefault();
@@ -345,7 +327,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     endAdornmentProp,
     showOptionsButton
   ] }) : endAdornmentProp;
-  return /* @__PURE__ */ jsxs(ListControlContext.Provider, { value: listControl, children: [
+  return /* @__PURE__ */ jsxs(ListControlProvider, { value: listControl, children: [
     /* @__PURE__ */ jsx(
       PillInput,
       {