@salt-ds/core 1.52.1 → 1.54.0

package/dist-cjs/slider/internal/useRangeSliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRangeSliderThumb.js","sources":["../src/slider/internal/useRangeSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (\n    event: ChangeEvent<HTMLInputElement>,\n    thumbIndex: number,\n  ) => void;\n  inputRefs: RefObject<HTMLInputElement>[];\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: [number, number]) => void;\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<[number, number]>>;\n  stepMultiplier: number;\n  value: [number, number];\n};\n\nexport const useRangeSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRefs,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseRangeSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const [thumbIndexState, setIsThumbIndex] = useState<number>(0);\n  const lastValueRef = useRef<[number, number]>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const preventThumbOverlap = useCallback(\n    (currentValue: number, value: [number, number], thumbIndex: number) => {\n      const values = [...value] as [number, number];\n      if (thumbIndex === 0 && currentValue >= values[1]) {\n        values[0] = values[1];\n      } else if (thumbIndex === 1 && currentValue <= values[0]) {\n        values[1] = values[0];\n      } else {\n        values[thumbIndex] = currentValue;\n      }\n      return values;\n    },\n    [],\n  );\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined) return;\n      const newValues = preventThumbOverlap(\n        newValue,\n        value as [number, number],\n        thumbIndexState,\n      );\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      max,\n      min,\n      step,\n      preventThumbOverlap,\n      restrictToMarks,\n      value,\n      thumbIndexState,\n      setValue,\n      onChange,\n    ],\n  );\n\n  const handlePointerUp = useCallback(\n    (event: PointerEvent) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n\n      inputRefs[thumbIndex].current?.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      if (thumbIndex !== undefined) {\n        setIsThumbIndex(thumbIndex);\n      }\n    },\n    [inputRefs],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      let closestThumbIndex = 0;\n\n      if (newValue === undefined) return;\n      const newValues = [...value] as [number, number];\n      // Find nearest thumb\n      const distanceToThumb0 = Math.abs(newValue - newValues[0]);\n      const distanceToThumb1 = Math.abs(newValue - newValues[1]);\n      if (distanceToThumb0 > distanceToThumb1) {\n        // Move the second thumb\n        newValues[1] = newValue;\n        closestThumbIndex = 1;\n      } else if (distanceToThumb0 < distanceToThumb1) {\n        // Move the first thumb\n        newValues[0] = newValue;\n        closestThumbIndex = 0;\n      } else {\n        // If distances are equal, determine based on the click position\n        if (newValue < newValues[0]) {\n          // Clicked position is before both thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        } else if (newValue > newValues[1]) {\n          // Clicked position is after both thumbs, move the second thumb\n          newValues[1] = newValue;\n          closestThumbIndex = 1;\n        } else {\n          // Clicked position is between the thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        }\n      }\n      setIsThumbIndex(closestThumbIndex);\n      inputRefs[closestThumbIndex].current?.focus();\n      setIsFocusVisible(false);\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event.nativeEvent, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      value,\n      max,\n      min,\n      inputRefs,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent, thumbIndex: number) => {\n      const newValue = getKeyboardValue(\n        event,\n        value[thumbIndex],\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (\n        newValue === undefined ||\n        newValue === lastValueRef.current[thumbIndex]\n      ) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current[thumbIndex] = newValue;\n      handleInputChange(\n        {\n          target: { value: newValue.toString() },\n        } as ChangeEvent<HTMLInputElement>,\n        thumbIndex,\n      );\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(true);\n  };\n\n  const handleBlur = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(false);\n  };\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    preventThumbOverlap,\n    sliderRef,\n    thumbIndexState,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","value","getClickedPosition","useEffect","getKeyboardValue"],"mappings":"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"}
+{"version":3,"file":"useRangeSliderThumb.js","sources":["../src/slider/internal/useRangeSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (\n    event: ChangeEvent<HTMLInputElement>,\n    thumbIndex: number,\n  ) => void;\n  inputRefs: RefObject<HTMLInputElement>[];\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: [number, number]) => void;\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<[number, number]>>;\n  stepMultiplier: number;\n  value: [number, number];\n};\n\nexport const useRangeSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRefs,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseRangeSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const [thumbIndexState, setIsThumbIndex] = useState<number>(0);\n  const lastValueRef = useRef<[number, number]>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const preventThumbOverlap = useCallback(\n    (currentValue: number, value: [number, number], thumbIndex: number) => {\n      const values = [...value] as [number, number];\n      if (thumbIndex === 0 && currentValue >= values[1]) {\n        values[0] = values[1];\n      } else if (thumbIndex === 1 && currentValue <= values[0]) {\n        values[1] = values[0];\n      } else {\n        values[thumbIndex] = currentValue;\n      }\n      return values;\n    },\n    [],\n  );\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined) return;\n      const newValues = preventThumbOverlap(\n        newValue,\n        value as [number, number],\n        thumbIndexState,\n      );\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      max,\n      min,\n      step,\n      preventThumbOverlap,\n      restrictToMarks,\n      value,\n      thumbIndexState,\n      setValue,\n      onChange,\n    ],\n  );\n\n  const handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n\n      inputRefs[thumbIndex].current?.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      if (thumbIndex !== undefined) {\n        setIsThumbIndex(thumbIndex);\n      }\n    },\n    [inputRefs],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      let closestThumbIndex = 0;\n\n      if (newValue === undefined) return;\n      const newValues = [...value] as [number, number];\n      // Find nearest thumb\n      const distanceToThumb0 = Math.abs(newValue - newValues[0]);\n      const distanceToThumb1 = Math.abs(newValue - newValues[1]);\n      if (distanceToThumb0 > distanceToThumb1) {\n        // Move the second thumb\n        newValues[1] = newValue;\n        closestThumbIndex = 1;\n      } else if (distanceToThumb0 < distanceToThumb1) {\n        // Move the first thumb\n        newValues[0] = newValue;\n        closestThumbIndex = 0;\n      } else {\n        // If distances are equal, determine based on the click position\n        if (newValue < newValues[0]) {\n          // Clicked position is before both thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        } else if (newValue > newValues[1]) {\n          // Clicked position is after both thumbs, move the second thumb\n          newValues[1] = newValue;\n          closestThumbIndex = 1;\n        } else {\n          // Clicked position is between the thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        }\n      }\n      setIsThumbIndex(closestThumbIndex);\n      inputRefs[closestThumbIndex].current?.focus();\n      setIsFocusVisible(false);\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event.nativeEvent, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      value,\n      max,\n      min,\n      inputRefs,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent, thumbIndex: number) => {\n      const newValue = getKeyboardValue(\n        event,\n        value[thumbIndex],\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (\n        newValue === undefined ||\n        newValue === lastValueRef.current[thumbIndex]\n      ) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current[thumbIndex] = newValue;\n      handleInputChange(\n        {\n          target: { value: newValue.toString() },\n        } as ChangeEvent<HTMLInputElement>,\n        thumbIndex,\n      );\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(true);\n  };\n\n  const handleBlur = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(false);\n  };\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    preventThumbOverlap,\n    sliderRef,\n    thumbIndexState,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","value","getClickedPosition","useEffect","getKeyboardValue"],"mappings":"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"}

package/dist-cjs/slider/internal/useSliderThumb.js

@@ -46,7 +46,7 @@ const useSliderThumb = ({
     },
     [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step]
   );
-  const handlePointerUp = React.useCallback(
+  const handleDragEnd = React.useCallback(
     (event) => {
       setIsDragging(false);
       setIsFocusVisible(false);
@@ -57,16 +57,25 @@ const useSliderThumb = ({
   React.useEffect(() => {
     if (isDragging) {
       targetWindow == null ? void 0 : targetWindow.addEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("contextmenu", handleDragEnd);
     } else {
       targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("contextmenu", handleDragEnd);
     }
     return () => {
       targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
-      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointercancel", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("blur", handleDragEnd);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("contextmenu", handleDragEnd);
     };
-  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);
+  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);
   const handlePointerDownOnThumb = React.useCallback(
     (event) => {
       event.preventDefault();

package/dist-cjs/slider/internal/useSliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputRef: RefObject<HTMLInputElement>;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: number) => void;\n  onChangeEnd?: (event: Event, value: number) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<number>>;\n  stepMultiplier: number;\n  value: number;\n};\n\nexport const useSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRef,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const lastValueRef = useRef<number>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n  );\n\n  const handlePointerUp = useCallback(\n    (event: PointerEvent) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n    },\n    [inputRef],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event.nativeEvent, newValue);\n    },\n    [\n      decimalPlaces,\n      inputRef,\n      marks,\n      max,\n      min,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent) => {\n      const newValue = getKeyboardValue(\n        event,\n        value,\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current = newValue;\n      handleInputChange({\n        target: { value: newValue.toString() },\n      } as ChangeEvent<HTMLInputElement>);\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = () => setIsFocusVisible(true);\n\n  const handleBlur = () => setIsFocusVisible(false);\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","getClickedPosition","useEffect","getKeyboardValue"],"mappings":"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"}
+{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputRef: RefObject<HTMLInputElement>;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: number) => void;\n  onChangeEnd?: (event: Event, value: number) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<number>>;\n  stepMultiplier: number;\n  value: number;\n};\n\nexport const useSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRef,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const lastValueRef = useRef<number>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n  );\n\n  const handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n    },\n    [inputRef],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event.nativeEvent, newValue);\n    },\n    [\n      decimalPlaces,\n      inputRef,\n      marks,\n      max,\n      min,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent) => {\n      const newValue = getKeyboardValue(\n        event,\n        value,\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current = newValue;\n      handleInputChange({\n        target: { value: newValue.toString() },\n      } as ChangeEvent<HTMLInputElement>);\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = () => setIsFocusVisible(true);\n  const handleBlur = () => setIsFocusVisible(false);\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","getClickedPosition","useEffect","getKeyboardValue"],"mappings":";;;;;;AA2BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,aAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,GAAA,GAAM,EAAA;AAAA,EACN,IAAA,GAAO,CAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC1D,EAAA,MAAM,YAAA,GAAeC,aAAe,KAAK,CAAA;AACzC,EAAA,MAAM,SAAA,GAAYA,aAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAA,MAAM,iBAAA,GAAoBC,iBAAA;AAAA,IACxB,CAAC,KAAA,KAAwB;AACvB,MAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACxB,MAAA,MAAM,QAAA,GAAWC,wBAAA;AAAA,QACf,SAAA;AAAA,QACA,KAAA,CAAM,OAAA;AAAA,QACN,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,QAAA,KAAa,MAAA,IAAa,YAAA,CAAa,OAAA,KAAY,QAAA,EAAU;AAC/D,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AACvB,MAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,QAAA,CAAA;AAAA,IACpB,CAAA;AAAA,IACA,CAAC,eAAe,KAAA,EAAO,GAAA,EAAK,KAAK,QAAA,EAAU,QAAA,EAAU,iBAAiB,IAAI;AAAA,GAC5E;AAEA,EAAA,MAAM,aAAA,GAAgBD,iBAAA;AAAA,IACpB,CAAC,KAAA,KAAiB;AAChB,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,OAAO,YAAA,CAAa,OAAA,CAAA;AAAA,IACpC,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,aAAA,EAAe,iBAAA,CAAA;AAC9C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,WAAA,EAAa,aAAA,CAAA;AAC5C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,eAAA,EAAiB,aAAA,CAAA;AAChD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,MAAA,EAAQ,aAAA,CAAA;AACvC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,aAAA,EAAe,aAAA,CAAA;AAAA,IAChD,CAAA,MAAO;AACL,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,iBAAA,CAAA;AACjD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,WAAA,EAAa,aAAA,CAAA;AAC/C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,eAAA,EAAiB,aAAA,CAAA;AACnD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,MAAA,EAAQ,aAAA,CAAA;AAC1C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,aAAA,CAAA;AAAA,IACnD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,iBAAA,CAAA;AACjD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,WAAA,EAAa,aAAA,CAAA;AAC/C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,eAAA,EAAiB,aAAA,CAAA;AACnD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,MAAA,EAAQ,aAAA,CAAA;AAC1C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,aAAA,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,YAAA,EAAc,iBAAA,EAAmB,aAAa,CAAC,CAAA;AAE/D,EAAA,MAAM,wBAAA,GAA2BF,iBAAA;AAAA,IAC/B,CAAC,KAAA,KAA8C;AAC7C,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,QAAA,CAAS,OAAA,CAAQ,KAAA,EAAM;AAC7C,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,IACzB,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,wBAAA,GAA2BA,iBAAA;AAAA,IAC/B,CAAC,KAAA,KAA8C;AAC7C,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,QAAA,CAAS,OAAA,CAAQ,KAAA,EAAM;AAC7C,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,MAAA,MAAM,QAAA,GAAWC,wBAAA;AAAA,QACf,SAAA;AAAA,QACA,KAAA,CAAM,OAAA;AAAA,QACN,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,QAAA,KAAa,MAAA,IAAa,YAAA,CAAa,OAAA,KAAY,QAAA,EAAU;AAC/D,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AACvB,MAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,MAAM,WAAA,EAAa,QAAA,CAAA;AAAA,IAChC,CAAA;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,oBAAA,GAAuBD,iBAAA;AAAA,IAC3B,CAAC,KAAA,KAA+B;AAC9B,MAAA,MAAM,QAAA,GAAWG,sBAAA;AAAA,QACf,KAAA;AAAA,QACA,KAAA;AAAA,QACA,IAAA;AAAA,QACA,cAAA;AAAA,QACA,GAAA;AAAA,QACA,GAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,QAAA,KAAa,MAAA,IAAa,YAAA,CAAa,OAAA,KAAY,QAAA,EAAU;AAC/D,QAAA;AAAA,MACF;AACA,MAAA,iBAAA,CAAkB,IAAI,CAAA;AACtB,MAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AACvB,MAAA,iBAAA,CAAkB;AAAA,QAChB,MAAA,EAAQ,EAAE,KAAA,EAAO,QAAA,CAAS,UAAS;AAAE,OACL,CAAA;AAAA,IACpC,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,WAAA,GAAc,MAAM,iBAAA,CAAkB,IAAI,CAAA;AAChD,EAAA,MAAM,UAAA,GAAa,MAAM,iBAAA,CAAkB,KAAK,CAAA;AAEhD,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/tag/Tag.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\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  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n  --tag-secondary-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n  --tag-secondary-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n  --tag-secondary-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n  --tag-secondary-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n  --tag-secondary-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n  --tag-secondary-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n  --tag-secondary-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n  --tag-secondary-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n  --tag-secondary-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n  --tag-secondary-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n  --tag-secondary-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n  --tag-secondary-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n  --tag-secondary-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n  --tag-secondary-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n  --tag-secondary-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n  --tag-secondary-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n  --tag-secondary-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n  --tag-secondary-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n  --tag-secondary-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n  --tag-secondary-foreground: var(--salt-category-20-bold-foreground);\n}\n";
+var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\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  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--salt-content-bold-foreground);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tag.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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  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}\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}\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}\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}\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}\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}\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}\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}\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}\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}\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  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";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButton.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--avatar-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-accent-background);\n  --avatar-foreground: var(--salt-accent-foreground);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n  --avatar-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n  --avatar-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n  --avatar-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n  --avatar-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n  --avatar-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n  --avatar-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n  --avatar-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n  --avatar-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n  --avatar-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n  --avatar-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n  --avatar-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n  --avatar-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n  --avatar-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n  --avatar-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n  --avatar-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n  --avatar-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n  --avatar-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n  --avatar-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n  --avatar-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n  --avatar-foreground: var(--salt-category-20-bold-foreground);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Avatar.css.js.map

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

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

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

@@ -1,7 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { offset, size, flip, useInteractions, useDismiss, useFocus, useClick } from '@floating-ui/react';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, Children, useEffect } from 'react';
 import { Button } from '../button/Button.js';
@@ -13,12 +11,12 @@ import { OptionList } from '../option/OptionList.js';
 import { PillInput } from '../pill-input/PillInput.js';
 import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import { useFloatingUI } from '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import css_248z from './ComboBox.css.js';
 import { useComboBox } from './useComboBox.js';
 
 const withBaseName = makePrefixer("saltComboBox");
@@ -53,12 +51,6 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     OverlayProps,
     ...rest
   } = props;
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-combo-box",
-    css: css_248z,
-    window: targetWindow
-  });
   const { CollapseIcon, ExpandIcon } = useIcon();
   const {
     a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
@@ -69,6 +61,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
   const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
   const inputRef = useRef(null);
   const handleInputRef = useForkRef(inputRef, inputRefProp);
+  const shouldAutoSelectRef = useRef(false);
   const listControl = useComboBox({
     open,
     defaultOpen,
@@ -89,7 +82,6 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     openState,
     setOpen,
     openKey,
-    getIndexOfOption,
     getOptionsMatching,
     getFirstOption,
     getLastOption,
@@ -105,6 +97,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     focusedState,
     setFocusedState,
     listRef,
+    setListRef,
     valueState,
     setValueState,
     removePill
@@ -165,8 +158,10 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   };
   const handleKeyDown = (event) => {
-    var _a2;
     onKeyDown == null ? void 0 : onKeyDown(event);
+    if (!event.repeat) {
+      shouldAutoSelectRef.current = false;
+    }
     if (readOnly) {
       return;
     }
@@ -176,17 +171,14 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
         return;
       }
     }
-    const activeOption = activeState ?? ((_a2 = getFirstOption()) == null ? void 0 : _a2.data);
-    if (activeOption === void 0) {
-      return;
-    }
+    const activeOption = activeState;
     let newActive;
     switch (event.key) {
       case "ArrowDown":
-        newActive = getOptionAfter(activeOption) ?? getLastOption();
+        newActive = activeOption ? getOptionAfter(activeOption) : getFirstOption();
         break;
       case "ArrowUp":
-        newActive = getOptionBefore(activeOption) ?? getFirstOption();
+        newActive = activeOption ? getOptionBefore(activeOption) : getLastOption();
         break;
       case "Home":
         newActive = getFirstOption();
@@ -195,10 +187,24 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
         newActive = getLastOption();
         break;
       case "PageUp":
-        newActive = getOptionPageAbove(activeOption);
+        if (activeOption) {
+          newActive = getOptionPageAbove(activeOption);
+        } else {
+          const lastOption = getLastOption();
+          if (lastOption) {
+            newActive = getOptionPageAbove(lastOption == null ? void 0 : lastOption.data);
+          }
+        }
         break;
       case "PageDown":
-        newActive = getOptionPageBelow(activeOption);
+        if (activeOption) {
+          newActive = getOptionPageBelow(activeOption);
+        } else {
+          const firstOption = getFirstOption();
+          if (firstOption) {
+            newActive = getOptionPageBelow(firstOption.data);
+          }
+        }
         break;
       case "Enter":
         if (openState && (activeState == null ? void 0 : activeState.disabled)) {
@@ -228,13 +234,18 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     }
   };
   const handleFocus = (event) => {
-    setFocusedState(true);
+    if (event.currentTarget === inputRef.current) {
+      setFocusedState(true);
+    } else {
+      setActive(void 0);
+    }
     onFocus == null ? void 0 : onFocus(event);
   };
   const handleBlur = (event) => {
     event.persist();
     if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {
       onBlur == null ? void 0 : onBlur(event);
+      shouldAutoSelectRef.current = false;
     }
   };
   const handleChange = (event) => {
@@ -246,16 +257,11 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
       clear(event);
     }
     setValueState(value2);
-    queueMicrotask(() => {
-      if (value2 !== "") {
-        const newOption = getFirstOption();
-        if (newOption) {
-          setActive(newOption.data);
-        }
-      } else {
-        setActive(void 0);
-      }
-    });
+    if (value2 === "") {
+      setActive(void 0);
+    } else {
+      shouldAutoSelectRef.current = true;
+    }
     onChange == null ? void 0 : onChange(event);
   };
   const handlePillRemove = (event, index) => {
@@ -273,14 +279,25 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     var _a2;
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   };
+  useIsomorphicLayoutEffect(() => {
+    if (value) {
+      shouldAutoSelectRef.current = true;
+    }
+  }, [value]);
   useEffect(() => {
-    if (!openState) {
-      setActive(void 0);
-      return;
+    if (openState && value) {
+      queueMicrotask(() => {
+        const newOption = getFirstOption();
+        if (newOption && shouldAutoSelectRef.current) {
+          setActive(newOption.data);
+        }
+      });
     }
-    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
+  }, [value, setActive, openState, getFirstOption]);
+  useEffect(() => {
     let newActive;
-    if (activeIndex > -1) {
+    if (!openState) {
+      setActive(void 0);
       return;
     }
     if (selectedState.length > 0) {
@@ -297,14 +314,13 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
         setFocusVisibleState(true);
       }
     }
-    if (!newActive) {
-      newActive = getFirstOption();
+    if (newActive) {
+      setActive(newActive == null ? void 0 : newActive.data);
     }
-    setActive(newActive == null ? void 0 : newActive.data);
-  }, [openState, children]);
+  }, [openState]);
   const buttonId = useId();
   const listId = useId();
-  const handleListRef = useForkRef(listRef, floating);
+  const handleListRef = useForkRef(setListRef, floating);
   const showOptionsButton = /* @__PURE__ */ jsx(
     Button,
     {