@salt-ds/core 1.70.0 → 1.72.0

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

@@ -6,6 +6,7 @@ import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import { ownerDocument } from '../utils/ownerDocument.js';
 import { useControlled } from '../utils/useControlled.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
@@ -15,6 +16,19 @@ import css_248z from './ToggleButtonGroup.css.js';
 import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
 
 const withBaseName = 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 = forwardRef(function ToggleButtonGroup2(props, ref) {
   const {
     appearance,
@@ -45,11 +59,39 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
     state: "value"
   });
   const [focused, setFocused] = useState(value);
+  const [enabledButtons, setEnabledButtons] = useState([]);
+  const registerButton = 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(() => {
+    setEnabledButtons((currentButtons) => {
+      const sortedButtons = sortButtons(currentButtons);
+      return buttonsAreEqual(currentButtons, sortedButtons) ? currentButtons : sortedButtons;
+    });
+  }, [children]);
   const select = 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);
       }
     },
@@ -57,7 +99,7 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   );
   const isSelected = useCallback(
     (id) => {
-      return value === id;
+      return isSameValue(value, id);
     },
     [value]
   );
@@ -66,9 +108,18 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   }, []);
   const isFocused = 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 = useMemo(
     () => ({
@@ -79,6 +130,7 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
       isSelected,
       orientation,
       readOnly,
+      registerButton,
       select,
       sentiment
     }),
@@ -90,12 +142,17 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
       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])")) ?? []
     );
@@ -104,11 +161,17 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
     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-es/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":["ToggleButtonGroup","toggleButtonGroupCss"],"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":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}

package/dist-es/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":[],"mappings":";;;;;;;;;AAkBO,MAAM,wBAAA,GAA2B,aAAA,CAEtC,0BAAA,EAA4B,MAAS;AAEhC,SAAS,oBAAA,GAAuB;AACrC,EAAA,OAAO,WAAW,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":[],"mappings":";;;;;;;;;AAmBO,MAAM,wBAAA,GAA2B,aAAA,CAEtC,0BAAA,EAA4B,MAAS;AAEhC,SAAS,oBAAA,GAAuB;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;;;;"}

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggletipPanel.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=Tooltip.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=VerticalNavigationItemContent.css.js.map

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

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=VerticalNavigationSubMenu.css.js.map

package/dist-types/card/Card.d.ts

@@ -4,6 +4,14 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
      * If provided an accent is shown in the specified position.
      */
     accent?: "bottom" | "top" | "left" | "right";
+    /**
+     * Visual elevation.
+     */
+    elevation?: "flat" | "raised";
+    /**
+     * Border color strength.
+     */
+    borderColor?: "strong" | "subtle" | "none";
     /**
      * **Deprecated:** Use the InteractableCard component instead
      *
@@ -11,6 +19,8 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
      */
     disabled?: boolean;
     /**
+     * @deprecated since 1.71.0. Use `LinkCard` or `InteractableCard` when the entire card is interactive.
+     *
      * If `true` the card will have hover styling.
      */
     hoverable?: boolean;

package/dist-types/combo-box/useComboBox.d.ts

@@ -12,7 +12,7 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     setOpen: (newOpen: boolean, reason?: import("../list-control/ListControlState").OpenChangeReason, key?: string) => void;
     openKey: import("react").MutableRefObject<string | undefined>;
     activeState: OptionValue<Item> | undefined;
-    setActive: (option?: OptionValue<Item> | undefined) => void;
+    setActive: import("react").Dispatch<import("react").SetStateAction<OptionValue<Item> | undefined>>;
     selectedState: Item[];
     setSelectedState: import("react").Dispatch<import("react").SetStateAction<Item[]>>;
     clear: (event: SyntheticEvent) => void;
@@ -22,17 +22,13 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     setListRef: import("react").Ref<HTMLDivElement>;
     listRef: import("react").RefObject<HTMLDivElement>;
-    options: HTMLElement[];
     register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
     getOptionAtIndex: (index: number) => {
         data: OptionValue<Item>;
         element: HTMLElement;
     } | undefined;
     getIndexOfOption: (option: OptionValue<Item>) => number;
-    getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => {
-        data: OptionValue<Item>;
-        element: HTMLElement;
-    }[];
+    getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => import("../list-control/ListControlRegistry").RegisteredOption<Item>[];
     getOptionFromSearch: (search: string, startFrom?: OptionValue<Item> | undefined) => OptionValue<Item> | undefined;
     getOptionAfter: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
@@ -60,4 +56,5 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     } | undefined;
     valueToString: (item: Item) => string;
     disabled: boolean | undefined;
+    optionStateStore: import("../list-control/ListControlOptionStore").ListControlOptionStore<Item>;
 };

package/dist-types/drawer/Drawer.d.ts

@@ -18,7 +18,7 @@ export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
      */
     variant?: "primary" | "secondary" | "tertiary";
     /**
-     * Prevent the dialog closing on click away
+     * Prevent the drawer closing on click away
      * */
     disableDismiss?: boolean;
     /**

package/dist-types/drawer/DrawerCloseButton.d.ts

@@ -1,2 +1,5 @@
 import { type ButtonProps } from "../button";
+/**
+ * @deprecated since 1.71.0. Use `Button` in `DrawerHeader`'s `actions` instead.
+ */
 export declare const DrawerCloseButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/drawer/DrawerContent.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentPropsWithoutRef } from "react";
+export type DrawerContentProps = ComponentPropsWithoutRef<"div">;
+export declare const DrawerContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/drawer/DrawerContext.d.ts

@@ -0,0 +1,9 @@
+export interface DrawerContextValue {
+    drawerId?: string;
+    headerId?: string;
+    setHeaderId?: (id: string | undefined) => void;
+    descriptionId?: string;
+    setDescriptionId?: (id: string | undefined) => void;
+}
+export declare const DrawerContext: import("react").Context<DrawerContextValue>;
+export declare const useDrawerContext: () => DrawerContextValue;

package/dist-types/drawer/DrawerFooter.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentPropsWithoutRef } from "react";
+export type DrawerFooterProps = ComponentPropsWithoutRef<"div">;
+export declare const DrawerFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/drawer/DrawerHeader.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface DrawerHeaderProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Hides the accent bar in the Drawer Header. Defaults to `false`.
+     */
+    disableAccent?: boolean;
+    /**
+     * Displays the header at the top of the Drawer
+     */
+    header?: ReactNode;
+    /**
+     * Displays the preheader just above the header
+     **/
+    preheader?: ReactNode;
+    /**
+     * Description text is displayed just below the header
+     **/
+    description?: ReactNode;
+    /**
+     * Actions to be displayed in header
+     */
+    actions?: ReactNode;
+}
+export declare const DrawerHeader: import("react").ForwardRefExoticComponent<DrawerHeaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/drawer/hasDrawerSection.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from "react";
+export declare function hasDrawerSection(children: ReactNode): boolean;

package/dist-types/drawer/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./Drawer";
 export * from "./DrawerCloseButton";
+export * from "./DrawerContent";
+export * from "./DrawerFooter";
+export * from "./DrawerHeader";

package/dist-types/index.d.ts

@@ -28,6 +28,7 @@ export * from "./input";
 export * from "./interactable-card";
 export * from "./kbd";
 export * from "./link";
+export * from "./link-button";
 export * from "./link-card";
 export * from "./list-box";
 export * from "./list-control";

package/dist-types/interactable-card/InteractableCard.d.ts

@@ -2,9 +2,17 @@ import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
 import { type InteractableCardValue } from "./InteractableCardGroupContext";
 export interface InteractableCardProps extends ComponentPropsWithoutRef<"div"> {
     /**
-     * Accent border position: defaults to "bottom"
+     * If provided an accent is shown in the specified position.
      */
     accent?: "bottom" | "top" | "left" | "right";
+    /**
+     * Visual elevation.
+     */
+    elevation?: "flat" | "raised";
+    /**
+     * Border color strength.
+     */
+    borderColor?: "strong" | "subtle" | "none";
     /**
      * @deprecated since 1.23.0. Use the `accent` prop instead.
      */

package/dist-types/interactable-card/InteractableCardGroupContext.d.ts

@@ -3,6 +3,8 @@ export type InteractableCardValue = string | readonly string[] | undefined;
 export interface InteractableCardGroupContextValue {
     disabled?: boolean;
     select: (event: SyntheticEvent<HTMLDivElement>, value: InteractableCardValue) => void;
+    registerCard?: (value: InteractableCardValue, element: HTMLElement) => () => void;
+    hasEnabledSelection?: boolean;
     isSelected: (id: InteractableCardValue) => boolean;
     isFirstChild: (value: InteractableCardValue) => boolean;
     multiSelect?: boolean;

package/dist-types/interactable-card/useInteractableCard.d.ts

@@ -10,8 +10,7 @@ export interface CardHookResult<T extends Element> {
     active: boolean;
     cardProps: {
         "aria-disabled"?: boolean;
-        disabled?: boolean;
-        tabIndex: number;
+        tabIndex?: number;
         onBlur: (event: FocusEvent<T>) => void;
         onClick?: (event: MouseEvent<T>) => void;
         onKeyDown: (event: KeyboardEvent<T>) => void;

package/dist-types/link-button/LinkButton.d.ts

@@ -0,0 +1,26 @@
+import type { IconProps } from "@salt-ds/icons";
+import { type ComponentPropsWithoutRef, type ComponentType } from "react";
+import { type RenderPropsType } from "../utils";
+export interface LinkButtonProps extends ComponentPropsWithoutRef<"a"> {
+    /**
+     * Icon component displayed when `target="_blank"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.
+     */
+    IconComponent?: ComponentType<IconProps> | null;
+    /**
+     * The sentiment of the button. Options are 'accented' and 'neutral'.
+     * 'neutral' is the default value.
+     */
+    sentiment?: "accented" | "neutral";
+    /**
+     * Render prop to enable customisation of anchor element.
+     */
+    render?: RenderPropsType["render"];
+    /**
+     * Either "default" or "never".
+     * Determines when underline should be applied to the link button.
+     *
+     * @default "default".
+     */
+    underline?: "default" | "never";
+}
+export declare const LinkButton: import("react").ForwardRefExoticComponent<LinkButtonProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist-types/link-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./LinkButton";

package/dist-types/link-card/LinkCard.d.ts

@@ -4,6 +4,14 @@ export interface LinkCardProps extends ComponentPropsWithoutRef<"a"> {
      * If provided an accent is shown in the specified position.
      */
     accent?: "bottom" | "top" | "left" | "right";
+    /**
+     * Visual elevation.
+     */
+    elevation?: "flat" | "raised";
+    /**
+     * Border color strength.
+     */
+    borderColor?: "strong" | "subtle" | "none";
     /**
      * Styling variant; defaults to "primary".
      */

package/dist-types/list-control/ListControlNavigationKeys.d.ts

@@ -0,0 +1,30 @@
+import type { OptionValue } from "./ListControlContext";
+export declare function isListControlNavigationKey(key: string): boolean;
+/**
+ * Navigation keys pressed with Ctrl or Meta (e.g. Ctrl+End, Cmd+ArrowDown,
+ * Ctrl+PageDown) are browser or OS shortcuts, so list controls leave them to
+ * the browser. Alt is only used with ArrowUp and ArrowDown, as in the ARIA
+ * combobox pattern.
+ */
+export declare function isModifiedListControlNavigationKey(event: {
+    key: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+}): boolean;
+export interface OptionAndElement<Item> {
+    data: OptionValue<Item>;
+    element: HTMLElement;
+}
+export interface ListControlNavigationGetters<Item> {
+    getFirstOption: () => OptionAndElement<Item> | undefined;
+    getLastOption: () => OptionAndElement<Item> | undefined;
+    getOptionAfter: (option: OptionValue<Item>) => OptionAndElement<Item> | undefined;
+    getOptionBefore: (option: OptionValue<Item>) => OptionAndElement<Item> | undefined;
+    getOptionPageAbove: (option: OptionValue<Item>) => OptionAndElement<Item> | undefined;
+    getOptionPageBelow: (option: OptionValue<Item>) => OptionAndElement<Item> | undefined;
+}
+/** Shared by Dropdown and ListBox, which always have an active option. */
+export declare function getListControlNavigationTarget<Item>(key: string, activeOption: OptionValue<Item>, getters: ListControlNavigationGetters<Item>): OptionAndElement<Item> | undefined;
+/** For ComboBox, where the active option may be undefined. */
+export declare function getComboBoxNavigationTarget<Item>(key: string, activeOption: OptionValue<Item> | undefined, getters: ListControlNavigationGetters<Item>): OptionAndElement<Item> | undefined;

package/dist-types/list-control/ListControlOptionContext.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode, type RefObject, type SyntheticEvent } from "react";
+import type { OptionValue } from "./ListControlContext";
+import { ListControlOptionStore } from "./ListControlOptionStore";
+export interface ListControlOptionContextValue<Item> {
+    disabled?: boolean;
+    listRef?: RefObject<HTMLDivElement>;
+    multiselect: boolean;
+    optionStateStore: ListControlOptionStore<Item>;
+    register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
+    select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
+    setActive: (option: OptionValue<Item>) => void;
+    valueToString: (item: Item) => string;
+}
+export declare function ListControlOptionContextProvider<Item>({ children, value, }: {
+    children: ReactNode;
+    value: ListControlOptionContextValue<Item>;
+}): import("react").JSX.Element;
+export declare function useListControlOptionContext<Item>(): ListControlOptionContextValue<Item>;

package/dist-types/list-control/ListControlOptionStore.d.ts

@@ -0,0 +1,17 @@
+import type { OptionValue } from "./ListControlContext";
+export declare const OPTION_STATE_ACTIVE = 1;
+export declare const OPTION_STATE_SELECTED = 2;
+export declare const OPTION_STATE_FOCUS_VISIBLE = 4;
+export type OptionStateSnapshot = number;
+export declare function hasOptionState(snapshot: OptionStateSnapshot, state: OptionStateSnapshot): boolean;
+/** Internal per-list store used to target updates at affected Options. */
+export declare class ListControlOptionStore<Item> {
+    #private;
+    constructor(selected?: readonly Item[]);
+    subscribe(id: string, listener: () => void): () => void;
+    register(option: OptionValue<Item>): () => void;
+    getSnapshot(id: string, currentOption?: OptionValue<Item>): OptionStateSnapshot;
+    setActiveId(id: string | undefined): void;
+    setFocusVisible(focusVisible: boolean): void;
+    setSelected(selected: readonly Item[]): void;
+}

package/dist-types/list-control/ListControlProvider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type ListControlContextValue } from "./ListControlContext";
+import type { ListControlOptionStore } from "./ListControlOptionStore";
+type ListControlProviderValue<Item> = ListControlContextValue<Item> & {
+    optionStateStore: ListControlOptionStore<Item>;
+};
+export declare function ListControlProvider<Item>({ children, value, }: {
+    children: ReactNode;
+    value: ListControlProviderValue<Item>;
+}): import("react").JSX.Element;
+export {};

package/dist-types/list-control/ListControlRegistry.d.ts

@@ -0,0 +1,22 @@
+import type { OptionValue } from "./ListControlContext";
+export interface RegisteredOption<Item> {
+    data: OptionValue<Item>;
+    element: HTMLElement;
+}
+export declare function createCoalescedRebuild(rebuild: () => void, enqueue?: (callback: () => void) => void): {
+    schedule: () => void;
+    cancel: () => void;
+};
+/** Internal option registry optimized for large, non-virtualized lists. */
+export declare class ListControlRegistry<Item> {
+    #private;
+    register(option: OptionValue<Item>, element: HTMLElement): () => void;
+    rebuild(listElement: Pick<HTMLElement, "querySelectorAll">): void;
+    getAt(index: number): RegisteredOption<Item> | undefined;
+    get length(): number;
+    indexOfId(id: string): number;
+    indexOfValue(value: Item): number;
+    findByData(option: OptionValue<Item>): RegisteredOption<Item> | undefined;
+    matching(predicate: (option: OptionValue<Item>) => boolean): RegisteredOption<Item>[];
+    snapshot(): readonly RegisteredOption<Item>[];
+}