@salt-ds/core 1.73.0 → 1.74.0

package/dist-es/menu/MenuItem.js

@@ -3,20 +3,53 @@ import { useListItem, useFloatingTree } from '@floating-ui/react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import '../checkbox/Checkbox.js';
+import '../checkbox/CheckboxGroup.js';
+import { CheckboxIcon } from '../checkbox/CheckboxIcon.js';
+import '../radio-button/RadioButton.js';
+import '../radio-button/RadioButtonGroup.js';
+import { RadioButtonIcon } from '../radio-button/RadioButtonIcon.js';
 import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import { useMenuAlignment } from './MenuAlignmentContext.js';
 import { useMenuContext } from './MenuContext.js';
+import { useMenuGroup } from './MenuGroupContext.js';
 import css_248z from './MenuItem.css.js';
 import { useMenuPanelContext } from './MenuPanelContext.js';
 import { useIsMenuTrigger } from './MenuTriggerContext.js';
 
 const withBaseName = makePrefixer("saltMenuItem");
+const leadingSlotClassNames = [
+  withBaseName("selectionIcon"),
+  withBaseName("selectionIconPlaceholder"),
+  withBaseName("iconPlaceholder")
+];
+function hasLeadingIcon(item) {
+  var _a;
+  for (const node of Array.from((item == null ? void 0 : item.childNodes) ?? [])) {
+    if (node.nodeType === node.TEXT_NODE) {
+      if ((_a = node.textContent) == null ? void 0 : _a.trim()) {
+        return false;
+      }
+    } else if (node.nodeType === node.ELEMENT_NODE) {
+      const { classList } = node;
+      if (!leadingSlotClassNames.some(
+        (className) => classList.contains(className)
+      )) {
+        return classList.contains("saltIcon");
+      }
+    }
+  }
+  return false;
+}
+let missingValueWarningShown = false;
 const MenuItem = forwardRef(
   function MenuItem2(props, ref) {
     const {
@@ -26,12 +59,26 @@ const MenuItem = forwardRef(
       onClick,
       onFocus,
       onKeyDown,
+      value,
       ...rest
     } = props;
     const { triggersSubmenu, blurActive } = useIsMenuTrigger();
     const { setTriggerDisabled } = useMenuContext();
     const { ExpandGroupIcon } = useIcon();
-    const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();
+    const {
+      activeIndex,
+      getItemProps,
+      setFocusInside,
+      hasSelectionIcon,
+      registerPanelSelectionIcon
+    } = useMenuPanelContext();
+    const {
+      reserveIconSpace,
+      reserveSelectionIconSpace,
+      registerIcon,
+      registerSelectionIcon
+    } = useMenuAlignment();
+    const { isSelected, select, selectionVariant } = useMenuGroup();
     const item = useListItem();
     const tree = useFloatingTree();
     const active = item.index === activeIndex;
@@ -41,57 +88,136 @@ const MenuItem = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const handleRef = useForkRef(ref, item.ref);
+    const itemRef = useRef(null);
+    const listItemRef = useForkRef(item.ref, itemRef);
+    const handleRef = useForkRef(ref, listItemRef);
+    const activationKeyRef = useRef(null);
+    const [hasIcon, setHasIcon] = useState(false);
+    const insideSelectableGroup = selectionVariant !== void 0 && !triggersSubmenu;
+    const selectable = insideSelectableGroup && value !== void 0;
+    const selected = selectable && isSelected(value);
+    const alignIconWithSelectionIcon = hasSelectionIcon && !selectable && !reserveSelectionIconSpace && (hasIcon || reserveIconSpace);
+    useIsomorphicLayoutEffect(() => {
+      setHasIcon(hasLeadingIcon(itemRef.current));
+    });
+    useIsomorphicLayoutEffect(
+      () => hasIcon ? registerIcon() : void 0,
+      [hasIcon, registerIcon]
+    );
+    useIsomorphicLayoutEffect(() => {
+      if (!selectable) {
+        return void 0;
+      }
+      const unregisterFromGroup = registerSelectionIcon();
+      const unregisterFromPanel = registerPanelSelectionIcon();
+      return () => {
+        unregisterFromGroup();
+        unregisterFromPanel();
+      };
+    }, [selectable, registerSelectionIcon, registerPanelSelectionIcon]);
     useEffect(() => {
-      setTriggerDisabled(!!disabled);
-    }, [disabled, setTriggerDisabled]);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx(
-          withBaseName(),
-          {
-            [withBaseName("blurActive")]: blurActive
-          },
-          className
-        ),
-        role: "menuitem",
-        "aria-disabled": disabled || void 0,
-        ...getItemProps({
-          tabIndex: disabled ? void 0 : active ? 0 : -1,
-          onKeyDown(event) {
-            const element = event.currentTarget;
-            onKeyDown == null ? void 0 : onKeyDown(event);
-            if ((event.key === " " || event.key === "Enter") && !triggersSubmenu && !disabled) {
-              event.preventDefault();
-              const { view, ...eventInit } = event;
-              queueMicrotask(() => {
-                element.dispatchEvent(
-                  new window.MouseEvent("click", eventInit)
-                );
-              });
-            }
-          },
-          onClick(event) {
-            if (!disabled) {
-              onClick == null ? void 0 : onClick(event);
-              if (!triggersSubmenu) {
-                tree == null ? void 0 : tree.events.emit("click");
-              }
-            }
-          },
-          onFocus(event) {
-            onFocus == null ? void 0 : onFocus(event);
-            setFocusInside(true);
-          },
-          ...rest
-        }),
-        ref: handleRef,
-        children: [
-          children,
-          triggersSubmenu && /* @__PURE__ */ jsx(ExpandGroupIcon, { className: withBaseName("expandIcon"), "aria-hidden": true })
-        ]
+      if (triggersSubmenu) {
+        setTriggerDisabled(!!disabled);
+      }
+    }, [disabled, setTriggerDisabled, triggersSubmenu]);
+    useEffect(() => {
+      if (process.env.NODE_ENV !== "production") {
+        if (insideSelectableGroup && value === void 0 && !missingValueWarningShown) {
+          missingValueWarningShown = true;
+          console.warn(
+            "Salt: MenuItem requires a `value` to be selectable inside a MenuGroup with `selectionVariant` set. It will behave as a regular menu item."
+          );
+        }
       }
+    }, [insideSelectableGroup, value]);
+    const shouldCloseMenu = () => !selectable || activationKeyRef.current === "Enter";
+    let role = "menuitem";
+    if (selectable) {
+      role = selectionVariant === "single" ? "menuitemradio" : "menuitemcheckbox";
+    }
+    return (
+      // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            withBaseName(),
+            {
+              [withBaseName("blurActive")]: blurActive,
+              [withBaseName("selectionAlignedIcon")]: alignIconWithSelectionIcon
+            },
+            className
+          ),
+          role,
+          "aria-checked": selectable ? selected : void 0,
+          "aria-disabled": disabled || void 0,
+          ...getItemProps({
+            tabIndex: active ? 0 : -1,
+            onKeyDown(event) {
+              const element = event.currentTarget;
+              const { key } = event;
+              onKeyDown == null ? void 0 : onKeyDown(event);
+              if ((key === " " || key === "Enter") && !triggersSubmenu) {
+                event.preventDefault();
+                if (disabled || event.repeat) {
+                  return;
+                }
+                const { view, ...eventInit } = event;
+                queueMicrotask(() => {
+                  activationKeyRef.current = key;
+                  element.dispatchEvent(
+                    new window.MouseEvent("click", eventInit)
+                  );
+                  activationKeyRef.current = null;
+                });
+              }
+            },
+            onClick(event) {
+              if (!disabled) {
+                onClick == null ? void 0 : onClick(event);
+                if (selectable) {
+                  select(event, value);
+                }
+                if (!triggersSubmenu && shouldCloseMenu()) {
+                  tree == null ? void 0 : tree.events.emit("click");
+                }
+              }
+            },
+            onFocus(event) {
+              onFocus == null ? void 0 : onFocus(event);
+              setFocusInside(true);
+            },
+            ...rest
+          }),
+          ref: handleRef,
+          children: [
+            selectable && selectionVariant === "single" && /* @__PURE__ */ jsx(
+              RadioButtonIcon,
+              {
+                checked: selected,
+                className: withBaseName("selectionIcon")
+              }
+            ),
+            selectable && selectionVariant === "multiple" && /* @__PURE__ */ jsx(
+              CheckboxIcon,
+              {
+                checked: selected,
+                className: withBaseName("selectionIcon")
+              }
+            ),
+            reserveSelectionIconSpace && !selectable && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: withBaseName("selectionIconPlaceholder")
+              }
+            ),
+            reserveIconSpace && !hasIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: withBaseName("iconPlaceholder") }),
+            children,
+            triggersSubmenu && /* @__PURE__ */ jsx(ExpandGroupIcon, { className: withBaseName("expandIcon"), "aria-hidden": true })
+          ]
+        }
+      )
     );
   }
 );

package/dist-es/menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  useEffect,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport menuItemCss from \"./MenuItem.css\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the item will be disabled.\n   */\n  disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n  function MenuItem(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      onClick,\n      onFocus,\n      onKeyDown,\n      ...rest\n    } = props;\n\n    const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n    const { setTriggerDisabled } = useMenuContext();\n    const { ExpandGroupIcon } = useIcon();\n    const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();\n    const item = useListItem();\n    const tree = useFloatingTree();\n    const active = item.index === activeIndex;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-item\",\n      css: menuItemCss,\n      window: targetWindow,\n    });\n    const handleRef = useForkRef<HTMLDivElement>(ref, item.ref);\n\n    useEffect(() => {\n      setTriggerDisabled(!!disabled);\n    }, [disabled, setTriggerDisabled]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"blurActive\")]: blurActive,\n          },\n          className,\n        )}\n        role=\"menuitem\"\n        aria-disabled={disabled || undefined}\n        {...getItemProps({\n          tabIndex: disabled ? undefined : active ? 0 : -1,\n          onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n            const element = event.currentTarget;\n            onKeyDown?.(event);\n            if (\n              (event.key === \" \" || event.key === \"Enter\") &&\n              !triggersSubmenu &&\n              !disabled\n            ) {\n              event.preventDefault();\n              const { view, ...eventInit } = event;\n              queueMicrotask(() => {\n                element.dispatchEvent(\n                  new window.MouseEvent(\"click\", eventInit),\n                );\n              });\n            }\n          },\n          onClick(event: MouseEvent<HTMLDivElement>) {\n            if (!disabled) {\n              onClick?.(event);\n              if (!triggersSubmenu) {\n                tree?.events.emit(\"click\");\n              }\n            }\n          },\n          onFocus(event: FocusEvent<HTMLDivElement>) {\n            onFocus?.(event);\n            setFocusInside(true);\n          },\n          ...rest,\n        })}\n        ref={handleRef}\n      >\n        {children}\n        {triggersSubmenu && (\n          <ExpandGroupIcon className={withBaseName(\"expandIcon\")} aria-hidden />\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MenuItem","menuItemCss"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport { RadioButtonIcon } from \"../radio-button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useMenuAlignment } from \"./MenuAlignmentContext\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuGroup } from \"./MenuGroupContext\";\nimport menuItemCss from \"./MenuItem.css\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the item will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the item. Identifies the item inside a `MenuGroup` whose `selectionVariant` is \"single\" or \"multiple\".\n   */\n  value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nconst leadingSlotClassNames = [\n  withBaseName(\"selectionIcon\"),\n  withBaseName(\"selectionIconPlaceholder\"),\n  withBaseName(\"iconPlaceholder\"),\n];\n\nfunction hasLeadingIcon(item: HTMLElement | null) {\n  for (const node of Array.from(item?.childNodes ?? [])) {\n    if (node.nodeType === node.TEXT_NODE) {\n      if (node.textContent?.trim()) {\n        return false;\n      }\n    } else if (node.nodeType === node.ELEMENT_NODE) {\n      const { classList } = node as Element;\n      if (\n        !leadingSlotClassNames.some((className) =>\n          classList.contains(className),\n        )\n      ) {\n        return classList.contains(\"saltIcon\");\n      }\n    }\n  }\n  return false;\n}\n\nlet missingValueWarningShown = false;\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n  function MenuItem(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      onClick,\n      onFocus,\n      onKeyDown,\n      value,\n      ...rest\n    } = props;\n\n    const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n    const { setTriggerDisabled } = useMenuContext();\n    const { ExpandGroupIcon } = useIcon();\n    const {\n      activeIndex,\n      getItemProps,\n      setFocusInside,\n      hasSelectionIcon,\n      registerPanelSelectionIcon,\n    } = useMenuPanelContext();\n    const {\n      reserveIconSpace,\n      reserveSelectionIconSpace,\n      registerIcon,\n      registerSelectionIcon,\n    } = useMenuAlignment();\n    const { isSelected, select, selectionVariant } = useMenuGroup();\n    const item = useListItem();\n    const tree = useFloatingTree();\n    const active = item.index === activeIndex;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-item\",\n      css: menuItemCss,\n      window: targetWindow,\n    });\n    const itemRef = useRef<HTMLDivElement>(null);\n    const listItemRef = useForkRef<HTMLDivElement>(item.ref, itemRef);\n    const handleRef = useForkRef<HTMLDivElement>(ref, listItemRef);\n    const activationKeyRef = useRef<string | null>(null);\n    const [hasIcon, setHasIcon] = useState(false);\n\n    const insideSelectableGroup =\n      selectionVariant !== undefined && !triggersSubmenu;\n    const selectable = insideSelectableGroup && value !== undefined;\n    const selected = selectable && isSelected(value);\n    // When icons lead this item and another group in the panel leads with a radio\n    // or checkbox, widen the icon column to match so the labels still line up.\n    const alignIconWithSelectionIcon =\n      hasSelectionIcon &&\n      !selectable &&\n      !reserveSelectionIconSpace &&\n      (hasIcon || reserveIconSpace);\n\n    useIsomorphicLayoutEffect(() => {\n      setHasIcon(hasLeadingIcon(itemRef.current));\n    });\n\n    useIsomorphicLayoutEffect(\n      () => (hasIcon ? registerIcon() : undefined),\n      [hasIcon, registerIcon],\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      if (!selectable) {\n        return undefined;\n      }\n      const unregisterFromGroup = registerSelectionIcon();\n      const unregisterFromPanel = registerPanelSelectionIcon();\n      return () => {\n        unregisterFromGroup();\n        unregisterFromPanel();\n      };\n    }, [selectable, registerSelectionIcon, registerPanelSelectionIcon]);\n\n    useEffect(() => {\n      if (triggersSubmenu) {\n        setTriggerDisabled(!!disabled);\n      }\n    }, [disabled, setTriggerDisabled, triggersSubmenu]);\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (\n          insideSelectableGroup &&\n          value === undefined &&\n          !missingValueWarningShown\n        ) {\n          missingValueWarningShown = true;\n          console.warn(\n            \"Salt: MenuItem requires a `value` to be selectable inside a MenuGroup with `selectionVariant` set. It will behave as a regular menu item.\",\n          );\n        }\n      }\n    }, [insideSelectableGroup, value]);\n\n    const shouldCloseMenu = () =>\n      !selectable || activationKeyRef.current === \"Enter\";\n\n    let role = \"menuitem\";\n    if (selectable) {\n      role =\n        selectionVariant === \"single\" ? \"menuitemradio\" : \"menuitemcheckbox\";\n    }\n\n    return (\n      // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"blurActive\")]: blurActive,\n            [withBaseName(\"selectionAlignedIcon\")]: alignIconWithSelectionIcon,\n          },\n          className,\n        )}\n        role={role}\n        aria-checked={selectable ? selected : undefined}\n        aria-disabled={disabled || undefined}\n        {...getItemProps({\n          tabIndex: active ? 0 : -1,\n          onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n            const element = event.currentTarget;\n            const { key } = event;\n            onKeyDown?.(event);\n            if ((key === \" \" || key === \"Enter\") && !triggersSubmenu) {\n              event.preventDefault();\n              if (disabled || event.repeat) {\n                return;\n              }\n              const { view, ...eventInit } = event;\n              queueMicrotask(() => {\n                activationKeyRef.current = key;\n                element.dispatchEvent(\n                  new window.MouseEvent(\"click\", eventInit),\n                );\n                activationKeyRef.current = null;\n              });\n            }\n          },\n          onClick(event: MouseEvent<HTMLDivElement>) {\n            if (!disabled) {\n              onClick?.(event);\n              if (selectable) {\n                select(event, value);\n              }\n              if (!triggersSubmenu && shouldCloseMenu()) {\n                tree?.events.emit(\"click\");\n              }\n            }\n          },\n          onFocus(event: FocusEvent<HTMLDivElement>) {\n            onFocus?.(event);\n            setFocusInside(true);\n          },\n          ...rest,\n        })}\n        ref={handleRef}\n      >\n        {selectable && selectionVariant === \"single\" && (\n          <RadioButtonIcon\n            checked={selected}\n            className={withBaseName(\"selectionIcon\")}\n          />\n        )}\n        {selectable && selectionVariant === \"multiple\" && (\n          <CheckboxIcon\n            checked={selected}\n            className={withBaseName(\"selectionIcon\")}\n          />\n        )}\n        {reserveSelectionIconSpace && !selectable && (\n          <span\n            aria-hidden\n            className={withBaseName(\"selectionIconPlaceholder\")}\n          />\n        )}\n        {reserveIconSpace && !hasIcon && (\n          <span aria-hidden className={withBaseName(\"iconPlaceholder\")} />\n        )}\n        {children}\n        {triggersSubmenu && (\n          <ExpandGroupIcon className={withBaseName(\"expandIcon\")} aria-hidden />\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MenuItem","menuItemCss"],"mappings":"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"}

package/dist-es/menu/MenuPanel.js

@@ -8,6 +8,7 @@ import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import { useSlotRegistry, useMenuAlignmentScope, MenuAlignmentContext } from './MenuAlignmentContext.js';
 import { useMenuContext } from './MenuContext.js';
 import { MenuPanelBase } from './MenuPanelBase.js';
 import { MenuPanelContext } from './MenuPanelContext.js';
@@ -30,11 +31,19 @@ const MenuPanel = forwardRef(
       isNested
     } = useMenuContext();
     const handleRef = useForkRef(ref, refs == null ? void 0 : refs.setFloating);
+    const [hasSelectionIcon, registerPanelSelectionIcon] = useSlotRegistry();
+    const alignment = useMenuAlignmentScope();
     return /* @__PURE__ */ jsx(
       MenuPanelContext.Provider,
       {
-        value: { activeIndex, getItemProps, setFocusInside },
-        children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
+        value: {
+          activeIndex,
+          getItemProps,
+          setFocusInside,
+          hasSelectionIcon,
+          registerPanelSelectionIcon
+        },
+        children: /* @__PURE__ */ jsx(MenuAlignmentContext.Provider, { value: alignment, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
           FloatingComponent,
           {
             open: openState,
@@ -53,7 +62,7 @@ const MenuPanel = forwardRef(
             ...rest,
             children: /* @__PURE__ */ jsx(MenuPanelBase, { children })
           }
-        ) })
+        ) }) })
       }
     );
   }

package/dist-es/menu/MenuPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the menu panel.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n  function MenuPanel(props, ref) {\n    const { children, className, ...rest } = props;\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      getItemProps,\n      openState,\n      getFloatingProps,\n      refs,\n      getPanelPosition,\n      context,\n      elementsRef,\n      activeIndex,\n      setFocusInside,\n      isNested,\n    } = useMenuContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n    return (\n      <MenuPanelContext.Provider\n        value={{ activeIndex, getItemProps, setFocusInside }}\n      >\n        <FloatingList elementsRef={elementsRef}>\n          <FloatingComponent\n            open={openState}\n            role=\"menu\"\n            {...getFloatingProps()}\n            {...getPanelPosition()}\n            className={clsx(withBaseName(), className)}\n            focusManagerProps={\n              context\n                ? {\n                    context,\n                    initialFocus: isNested ? -1 : 0,\n                    returnFocus: !isNested,\n                    modal: false,\n                  }\n                : undefined\n            }\n            tabIndex={-1}\n            ref={handleRef}\n            {...rest}\n          >\n            <MenuPanelBase>{children}</MenuPanelBase>\n          </FloatingComponent>\n        </FloatingList>\n      </MenuPanelContext.Provider>\n    );\n  },\n);\n"],"names":["MenuPanel"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,oBAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,cAAA,EAAe;AAEnB,IAAA,MAAM,SAAA,GAAY,UAAA,CAA2B,GAAA,EAAK,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,WAAW,CAAA;AAEnE,IAAA,uBACE,GAAA;AAAA,MAAC,gBAAA,CAAiB,QAAA;AAAA,MAAjB;AAAA,QACC,KAAA,EAAO,EAAE,WAAA,EAAa,YAAA,EAAc,cAAA,EAAe;AAAA,QAEnD,QAAA,kBAAA,GAAA,CAAC,gBAAa,WAAA,EACZ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,SAAA;AAAA,YACN,IAAA,EAAK,MAAA;AAAA,YACJ,GAAG,gBAAA,EAAiB;AAAA,YACpB,GAAG,gBAAA,EAAiB;AAAA,YACrB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,YACzC,mBACE,OAAA,GACI;AAAA,cACE,OAAA;AAAA,cACA,YAAA,EAAc,WAAW,EAAA,GAAK,CAAA;AAAA,cAC9B,aAAa,CAAC,QAAA;AAAA,cACd,KAAA,EAAO;AAAA,aACT,GACA,MAAA;AAAA,YAEN,QAAA,EAAU,EAAA;AAAA,YACV,GAAA,EAAK,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAe,QAAA,EAAS;AAAA;AAAA,SAC3B,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport {\n  MenuAlignmentContext,\n  useMenuAlignmentScope,\n  useSlotRegistry,\n} from \"./MenuAlignmentContext\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the menu panel.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n  function MenuPanel(props, ref) {\n    const { children, className, ...rest } = props;\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      getItemProps,\n      openState,\n      getFloatingProps,\n      refs,\n      getPanelPosition,\n      context,\n      elementsRef,\n      activeIndex,\n      setFocusInside,\n      isNested,\n    } = useMenuContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n    const [hasSelectionIcon, registerPanelSelectionIcon] = useSlotRegistry();\n    // Items outside a MenuGroup align with each other.\n    const alignment = useMenuAlignmentScope();\n\n    return (\n      <MenuPanelContext.Provider\n        value={{\n          activeIndex,\n          getItemProps,\n          setFocusInside,\n          hasSelectionIcon,\n          registerPanelSelectionIcon,\n        }}\n      >\n        <MenuAlignmentContext.Provider value={alignment}>\n          <FloatingList elementsRef={elementsRef}>\n            <FloatingComponent\n              open={openState}\n              role=\"menu\"\n              {...getFloatingProps()}\n              {...getPanelPosition()}\n              className={clsx(withBaseName(), className)}\n              focusManagerProps={\n                context\n                  ? {\n                      context,\n                      initialFocus: isNested ? -1 : 0,\n                      returnFocus: !isNested,\n                      modal: false,\n                    }\n                  : undefined\n              }\n              tabIndex={-1}\n              ref={handleRef}\n              {...rest}\n            >\n              <MenuPanelBase>{children}</MenuPanelBase>\n            </FloatingComponent>\n          </FloatingList>\n        </MenuAlignmentContext.Provider>\n      </MenuPanelContext.Provider>\n    );\n  },\n);\n"],"names":["MenuPanel"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,oBAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,cAAA,EAAe;AAEnB,IAAA,MAAM,SAAA,GAAY,UAAA,CAA2B,GAAA,EAAK,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,WAAW,CAAA;AAEnE,IAAA,MAAM,CAAC,gBAAA,EAAkB,0BAA0B,CAAA,GAAI,eAAA,EAAgB;AAEvE,IAAA,MAAM,YAAY,qBAAA,EAAsB;AAExC,IAAA,uBACE,GAAA;AAAA,MAAC,gBAAA,CAAiB,QAAA;AAAA,MAAjB;AAAA,QACC,KAAA,EAAO;AAAA,UACL,WAAA;AAAA,UACA,YAAA;AAAA,UACA,cAAA;AAAA,UACA,gBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,qBAAqB,QAAA,EAArB,EAA8B,OAAO,SAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,gBAAa,WAAA,EACZ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,SAAA;AAAA,YACN,IAAA,EAAK,MAAA;AAAA,YACJ,GAAG,gBAAA,EAAiB;AAAA,YACpB,GAAG,gBAAA,EAAiB;AAAA,YACrB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,YACzC,mBACE,OAAA,GACI;AAAA,cACE,OAAA;AAAA,cACA,YAAA,EAAc,WAAW,EAAA,GAAK,CAAA;AAAA,cAC9B,aAAa,CAAC,QAAA;AAAA,cACd,KAAA,EAAO;AAAA,aACT,GACA,MAAA;AAAA,YAEN,QAAA,EAAU,EAAA;AAAA,YACV,GAAA,EAAK,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAe,QAAA,EAAS;AAAA;AAAA,WAE7B,CAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/menu/MenuPanelContext.js

@@ -12,7 +12,9 @@ const MenuPanelContext = createContext(
   {
     activeIndex: null,
     getItemProps: () => ({}),
-    setFocusInside: () => void 0
+    setFocusInside: () => void 0,
+    hasSelectionIcon: false,
+    registerPanelSelectionIcon: () => () => void 0
   }
 );
 function useMenuPanelContext() {

package/dist-es/menu/MenuPanelContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n  extends Pick<\n    MenuContextValue,\n    \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n  > {}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n  \"MenuPanelContext\",\n  {\n    activeIndex: null,\n    getItemProps: () => ({}),\n    setFocusInside: () => undefined,\n  },\n);\n\nexport function useMenuPanelContext() {\n  return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAA,EAAa,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA;AAE1B;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}
+{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n  extends Pick<\n    MenuContextValue,\n    \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n  > {\n  hasSelectionIcon: boolean;\n  registerPanelSelectionIcon: () => () => void;\n}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n  \"MenuPanelContext\",\n  {\n    activeIndex: null,\n    getItemProps: () => ({}),\n    setFocusInside: () => undefined,\n    hasSelectionIcon: false,\n    registerPanelSelectionIcon: () => () => undefined,\n  },\n);\n\nexport function useMenuPanelContext() {\n  return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAA,EAAa,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM,MAAA;AAAA,IACtB,gBAAA,EAAkB,KAAA;AAAA,IAClB,0BAAA,EAA4B,MAAM,MAAM;AAAA;AAE5C;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}

package/dist-es/toggle-button/ToggleButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltToggleButton {\n  --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--toggleButton-borderWidth);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-hover);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n@media (hover: hover) {\n  .saltToggleButton:hover {\n    background: var(--toggleButton-background-hover);\n    color: var(--toggleButton-text-color-hover);\n    border-color: var(--toggleButton-borderColor-hover);\n  }\n}\n\n.saltToggleButton:active {\n  background: var(--toggleButton-background-active);\n  color: var(--toggleButton-text-color-active);\n  border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:hover {\n  cursor: unset;\n}\n\n.saltToggleButton[aria-pressed=\"true\"]:hover {\n  background: var(--toggleButton-background-selectedHover);\n  border-color: var(--toggleButton-borderColor-selectedHover);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n\n  opacity: unset;\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-background);\n  --toggleButton-background-hover: var(--salt-actionable-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-background);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-accented-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-background);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-positive-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-background);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-negative-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-background);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-background: var(--salt-actionable-caution-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-background);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);\n}\n";
+var css_248z = ".saltToggleButton {\n  --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--toggleButton-borderWidth);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-hover);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n@media (hover: hover) {\n  .saltToggleButton:hover {\n    background: var(--toggleButton-background-hover);\n    color: var(--toggleButton-text-color-hover);\n    border-color: var(--toggleButton-borderColor-hover);\n  }\n}\n\n.saltToggleButton:active {\n  background: var(--toggleButton-background-active);\n  color: var(--toggleButton-text-color-active);\n  border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:hover {\n  cursor: unset;\n}\n\n.saltToggleButton[aria-pressed=\"true\"]:hover {\n  background: var(--toggleButton-background-selectedHover);\n  color: var(--toggleButton-text-color-selectedHover);\n  border-color: var(--toggleButton-borderColor-selectedHover);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background);\n  color: var(--toggleButton-text-color);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor);\n\n  opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  border-color: var(--toggleButton-borderColor-selected);\n\n  opacity: unset;\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-accented-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-positive-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-negative-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-caution-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-background);\n  --toggleButton-background-hover: var(--salt-actionable-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-accented-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-accented-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-accented-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-positive-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-positive-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-positive-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-negative-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-negative-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-negative-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n  --toggleButton-text-color-selectedHover: var(--salt-actionable-caution-bold-foreground-hover);\n  --toggleButton-background: var(--salt-actionable-caution-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);\n  --toggleButton-background-active: var(--salt-actionable-caution-background-active);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n  --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n  --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-es/tree/TreeNodeTrigger.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTreeNodeTrigger {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n\n  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50));\n  padding-bottom: calc(var(--salt-spacing-75) + var(--salt-spacing-50));\n  padding-right: var(--salt-spacing-100);\n  /* Keep a fixed spacing-100 outer left padding for all nodes, then add one\n   indent step per additional level. Each indent step = (icon column width +\n   inter-item gap).\n   Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n   */\n  --saltTreeNodeTrigger-iconSize: max(var(--salt-size-icon), 12px);\n  --saltTreeNodeTrigger-indentStep: calc(var(--saltTreeNodeTrigger-iconSize) + var(--salt-spacing-100));\n  --saltTreeNodeTrigger-iconOffsetY: calc((var(--salt-text-lineHeight) - var(--saltTreeNodeTrigger-iconSize)) / 2);\n  --saltTreeNodeTrigger-checkboxOffsetY: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n  padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n  background: var(--salt-selectable-background);\n  color: var(--salt-content-primary-foreground);\n}\n\n/* Account for selectable and icon token size differences */\n.saltTree-multiselect .saltTreeNodeTrigger {\n  --saltTreeNodeTrigger-indentStep: calc(((var(--saltTreeNodeTrigger-iconSize) + var(--salt-size-selectable)) / 2) + var(--salt-spacing-100));\n}\n\n.saltTreeNodeTrigger:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\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  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger,\n.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {\n  opacity: 0.4;\n  cursor: var(--salt-cursor-disabled);\n\n  background: var(--salt-selectable-background);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n  margin-top: var(--saltTreeNodeTrigger-checkboxOffsetY);\n  margin-bottom: 0;\n}\n\n.saltTreeNodeTrigger > .saltTreeNodeExpansionIcon,\n.saltTreeNodeTrigger > .saltTreeNode-icon {\n  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);\n  flex-shrink: 0;\n  color: var(--salt-content-primary-foreground);\n}\n";
+var css_248z = ".saltTreeNodeTrigger {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n\n  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50));\n  padding-bottom: calc(var(--salt-spacing-75) + var(--salt-spacing-50));\n  padding-right: var(--salt-spacing-100);\n  /* Keep a fixed spacing-100 outer left padding for all nodes, then add one\n   indent step per additional level. Each indent step = (icon column width +\n   inter-item gap).\n   Level-1 nodes get no extra indent; level-2 gets 1 step, level-3 gets 2, etc.\n   */\n  --saltTreeNodeTrigger-iconSize: max(var(--salt-size-icon), 12px);\n  --saltTreeNodeTrigger-indentStep: calc(var(--saltTreeNodeTrigger-iconSize) + var(--salt-spacing-100));\n  --saltTreeNodeTrigger-iconOffsetY: calc((var(--salt-text-lineHeight) - var(--saltTreeNodeTrigger-iconSize)) / 2);\n  --saltTreeNodeTrigger-checkboxOffsetY: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n  padding-left: calc(var(--salt-spacing-100) + (var(--saltTreeNodeTrigger-indentStep) * (var(--saltTreeNode-level, 1) - 1)));\n  background: var(--salt-selectable-background);\n  color: var(--salt-content-primary-foreground);\n}\n\n/* Account for selectable and icon token size differences */\n.saltTree-multiselect .saltTreeNodeTrigger {\n  --saltTreeNodeTrigger-indentStep: calc(((var(--saltTreeNodeTrigger-iconSize) + var(--salt-size-selectable)) / 2) + var(--salt-spacing-100));\n}\n\n.saltTreeNodeTrigger:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTreeNode-selected > .saltTreeNodeTrigger {\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  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTreeNode-selected:focus-visible > .saltTreeNodeTrigger,\n.saltTreeNode-selected.saltTreeNode-focusVisible > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNode-disabled > .saltTreeNodeTrigger,\n.saltTreeNode-disabled:hover > .saltTreeNodeTrigger {\n  opacity: 0.4;\n  cursor: var(--salt-cursor-disabled);\n\n  background: var(--salt-selectable-background);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltTreeNode-selected.saltTreeNode-disabled > .saltTreeNodeTrigger {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltTreeNodeTrigger > .saltTreeNode-checkbox {\n  margin-top: var(--saltTreeNodeTrigger-checkboxOffsetY);\n  margin-bottom: 0;\n}\n\n.saltTreeNodeTrigger > .saltTreeNodeExpansionIcon,\n.saltTreeNodeTrigger > .saltTreeNode-icon {\n  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);\n}\n\n.saltTreeNodeTrigger > .saltIcon {\n  margin-top: var(--saltTreeNodeTrigger-iconOffsetY);\n  flex-shrink: 0;\n  color: var(--salt-content-primary-foreground);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TreeNodeTrigger.css.js.map

package/dist-es/tree/TreeNodeTrigger.js

@@ -143,7 +143,6 @@ const TreeNodeTrigger = forwardRef(function TreeNodeTrigger2(props, ref) {
             {
               checked: selected,
               indeterminate,
-              disabled,
               className: withNodeBaseName("checkbox")
             }
           ),

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

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

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

@@ -25,6 +25,12 @@ export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
      * Prevent Scrim from rendering
      * */
     disableScrim?: boolean;
+    /**
+     * Allow the user to resize the drawer. Set size limits with the `--saltDrawer-minResize`/`--saltDrawer-maxResize`
+     * variables, which apply to the width of `left` and `right` drawers and the height of `top` and `bottom` drawers.
+     * The drawer never shrinks below `--salt-size-base`, unless `min-width`/`min-height` is set directly.
+     * */
+    resizable?: boolean;
     /**
      * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.
      * Default value is 0 (first tabbable element).

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

@@ -1,5 +1,8 @@
+import type { DrawerProps } from "./Drawer";
 export interface DrawerContextValue {
     drawerId?: string;
+    position?: DrawerProps["position"];
+    resizable?: boolean;
     headerId?: string;
     setHeaderId?: (id: string | undefined) => void;
     descriptionId?: string;

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

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 export interface DrawerHeaderProps extends ComponentPropsWithoutRef<"div"> {
     /**
-     * Hides the accent bar in the Drawer Header. Defaults to `false`.
+     * Hides the accent bar in the Drawer Header. Defaults to `true` when the Drawer is resizable and positioned `right`, otherwise `false`.
      */
     disableAccent?: boolean;
     /**

package/dist-types/drawer/internal/DrawerResizeGuide.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentPropsWithoutRef } from "react";
+import type { DrawerProps } from "../Drawer";
+export interface DrawerResizeGuideProps extends ComponentPropsWithoutRef<"div"> {
+    position: NonNullable<DrawerProps["position"]>;
+}
+/** Covers the viewport while placing the edge by click, so the click doesn't reach the content. */
+export declare const DrawerResizeGuide: import("react").ForwardRefExoticComponent<DrawerResizeGuideProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/drawer/internal/DrawerResizeHandle.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef } from "react";
+import type { DrawerProps } from "../Drawer";
+export interface DrawerResizeHandleProps extends ComponentPropsWithoutRef<"div"> {
+    position: NonNullable<DrawerProps["position"]>;
+    resizing?: boolean;
+    hovered?: boolean;
+}
+export declare const DrawerResizeHandle: import("react").ForwardRefExoticComponent<DrawerResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export * from "./DrawerResizeGuide";
+export * from "./DrawerResizeHandle";
+export * from "./useDrawerResize";