@salt-ds/core 1.53.0 → 1.54.1

package/dist-es/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":["value"],"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":["value"],"mappings":";;;;AA8BO,MAAM,sBAAsB,CAAC;AAAA,EAClC,aAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;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,KAAgC;AAC9B,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1D,EAAA,MAAM,CAAC,eAAA,EAAiB,eAAe,CAAA,GAAI,SAAiB,CAAC,CAAA;AAC7D,EAAA,MAAM,YAAA,GAAe,OAAyB,KAAK,CAAA;AACnD,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,EAAA,MAAM,mBAAA,GAAsB,WAAA;AAAA,IAC1B,CAAC,YAAA,EAAsBA,MAAAA,EAAyB,UAAA,KAAuB;AACrE,MAAA,MAAM,MAAA,GAAS,CAAC,GAAGA,MAAK,CAAA;AACxB,MAAA,IAAI,UAAA,KAAe,CAAA,IAAK,YAAA,IAAgB,MAAA,CAAO,CAAC,CAAA,EAAG;AACjD,QAAA,MAAA,CAAO,CAAC,CAAA,GAAI,MAAA,CAAO,CAAC,CAAA;AAAA,MACtB,WAAW,UAAA,KAAe,CAAA,IAAK,YAAA,IAAgB,MAAA,CAAO,CAAC,CAAA,EAAG;AACxD,QAAA,MAAA,CAAO,CAAC,CAAA,GAAI,MAAA,CAAO,CAAC,CAAA;AAAA,MACtB,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,UAAU,CAAA,GAAI,YAAA;AAAA,MACvB;AACA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,iBAAA,GAAoB,WAAA;AAAA,IACxB,CAAC,KAAA,KAAwB;AACvB,MAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACxB,MAAA,MAAM,QAAA,GAAW,kBAAA;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,aAAa,MAAA,EAAW;AAC5B,MAAA,MAAM,SAAA,GAAY,mBAAA;AAAA,QAChB,QAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,IACE,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,IACvC,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,EACvC;AACA,QAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AACvB,QAAA,QAAA,CAAS,SAAS,CAAA;AAClB,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,SAAA,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA;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,EAAA,SAAA,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;AACA,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,GAA2B,WAAA;AAAA,IAC/B,CAAC,OAA2C,UAAA,KAAuB;AAhJvE,MAAA,IAAA,EAAA;AAiJM,MAAA,KAAA,CAAM,cAAA,EAAe;AAGrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AAEtB,MAAA,CAAA,EAAA,GAAA,SAAA,CAAU,UAAU,CAAA,CAAE,OAAA,KAAtB,IAAA,GAAA,MAAA,GAAA,EAAA,CAA+B,KAAA,EAAA;AAC/B,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,MAAA,IAAI,eAAe,MAAA,EAAW;AAC5B,QAAA,eAAA,CAAgB,UAAU,CAAA;AAAA,MAC5B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,MAAM,wBAAA,GAA2B,WAAA;AAAA,IAC/B,CAAC,KAAA,KAA8C;AAjKnD,MAAA,IAAA,EAAA;AAkKM,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,aAAA,CAAc,IAAI,CAAA;AAElB,MAAA,MAAM,QAAA,GAAW,kBAAA;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,iBAAA,GAAoB,CAAA;AAExB,MAAA,IAAI,aAAa,MAAA,EAAW;AAC5B,MAAA,MAAM,SAAA,GAAY,CAAC,GAAG,KAAK,CAAA;AAE3B,MAAA,MAAM,mBAAmB,IAAA,CAAK,GAAA,CAAI,QAAA,GAAW,SAAA,CAAU,CAAC,CAAC,CAAA;AACzD,MAAA,MAAM,mBAAmB,IAAA,CAAK,GAAA,CAAI,QAAA,GAAW,SAAA,CAAU,CAAC,CAAC,CAAA;AACzD,MAAA,IAAI,mBAAmB,gBAAA,EAAkB;AAEvC,QAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,QAAA,iBAAA,GAAoB,CAAA;AAAA,MACtB,CAAA,MAAA,IAAW,mBAAmB,gBAAA,EAAkB;AAE9C,QAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,QAAA,iBAAA,GAAoB,CAAA;AAAA,MACtB,CAAA,MAAO;AAEL,QAAA,IAAI,QAAA,GAAW,SAAA,CAAU,CAAC,CAAA,EAAG;AAE3B,UAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,UAAA,iBAAA,GAAoB,CAAA;AAAA,QACtB,CAAA,MAAA,IAAW,QAAA,GAAW,SAAA,CAAU,CAAC,CAAA,EAAG;AAElC,UAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,UAAA,iBAAA,GAAoB,CAAA;AAAA,QACtB,CAAA,MAAO;AAEL,UAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,UAAA,iBAAA,GAAoB,CAAA;AAAA,QACtB;AAAA,MACF;AACA,MAAA,eAAA,CAAgB,iBAAiB,CAAA;AACjC,MAAA,CAAA,EAAA,GAAA,SAAA,CAAU,iBAAiB,CAAA,CAAE,OAAA,KAA7B,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsC,KAAA,EAAA;AACtC,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAEvB,MAAA,IACE,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,IACvC,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,EACvC;AACA,QAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AACvB,QAAA,QAAA,CAAS,SAAS,CAAA;AAClB,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,MAAM,WAAA,EAAa,SAAA,CAAA;AAAA,MAChC;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,oBAAA,GAAuB,WAAA;AAAA,IAC3B,CAAC,OAA4B,UAAA,KAAuB;AAClD,MAAA,MAAM,QAAA,GAAW,gBAAA;AAAA,QACf,KAAA;AAAA,QACA,MAAM,UAAU,CAAA;AAAA,QAChB,IAAA;AAAA,QACA,cAAA;AAAA,QACA,GAAA;AAAA,QACA,GAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IACE,aAAa,MAAA,IACb,QAAA,KAAa,YAAA,CAAa,OAAA,CAAQ,UAAU,CAAA,EAC5C;AACA,QAAA;AAAA,MACF;AACA,MAAA,iBAAA,CAAkB,IAAI,CAAA;AACtB,MAAA,YAAA,CAAa,OAAA,CAAQ,UAAU,CAAA,GAAI,QAAA;AACnC,MAAA,iBAAA;AAAA,QACE;AAAA,UACE,MAAA,EAAQ,EAAE,KAAA,EAAO,QAAA,CAAS,UAAS;AAAE,SACvC;AAAA,QACA;AAAA,OACF;AAAA,IACF,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,CAAC,UAAA,KAAuB;AAC1C,IAAA,eAAA,CAAgB,UAAU,CAAA;AAC1B,IAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,UAAA,KAAuB;AACzC,IAAA,eAAA,CAAgB,UAAU,CAAA;AAC1B,IAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,EACzB,CAAA;AAEA,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,mBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

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

@@ -44,7 +44,7 @@ const useSliderThumb = ({
     },
     [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step]
   );
-  const handlePointerUp = useCallback(
+  const handleDragEnd = useCallback(
     (event) => {
       setIsDragging(false);
       setIsFocusVisible(false);
@@ -55,16 +55,25 @@ const useSliderThumb = ({
   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 = useCallback(
     (event) => {
       event.preventDefault();

package/dist-es/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":[],"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":[],"mappings":"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"}

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

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

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

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

package/dist-types/menu/MenuContext.d.ts

@@ -10,6 +10,8 @@ export interface MenuContextValue extends Pick<UseInteractionsReturn, "getItemPr
     focusInside: boolean;
     setFocusInside: Dispatch<SetStateAction<boolean>>;
     isNested: boolean;
+    triggerDisabled: boolean;
+    setTriggerDisabled: (disabled: boolean) => void;
 }
 export declare const MenuContext: import("react").Context<MenuContextValue>;
 export declare function useMenuContext(): MenuContextValue;

package/dist-types/number-input/internal/useLongPressPointerAction.d.ts

@@ -0,0 +1,2 @@
+import { type PointerEvent } from "react";
+export declare function useLongPressPointerAction(actionFn: (event?: PointerEvent) => void, isAtLimit: boolean): (event: PointerEvent) => void;

package/dist-types/pill/Pill.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithoutRef } from "react";
 export interface PillProps extends ComponentPropsWithoutRef<"button"> {
+    value?: string;
 }
 export declare const Pill: import("react").ForwardRefExoticComponent<PillProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/pill/PillCheckIcon.d.ts

@@ -0,0 +1,7 @@
+export interface PillCheckIconProps {
+    checked?: boolean;
+    className?: string;
+    disabled?: boolean;
+    active?: boolean;
+}
+export declare const PillCheckIcon: ({ className, checked, disabled, active, }: PillCheckIconProps) => JSX.Element;

package/dist-types/pill/PillGroup.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
+interface CommonPillGroupProps extends ComponentPropsWithoutRef<"fieldset"> {
+    /**
+     * If `true`, the Pill group will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Selection variant of the Pill group. If "none", the Pills will not be selectable. If "multiple", pills inside behave like checkboxes.
+     */
+    selectionVariant?: "none" | "multiple";
+}
+interface SelectablePillGroupProps extends CommonPillGroupProps {
+    selectionVariant: "multiple";
+    /**
+     * The currently selected values.
+     */
+    selected?: string[];
+    /**
+     * The default selected values for un-controlled component.
+     */
+    defaultSelected?: string[];
+    /**
+     * Callback fired when the selection changes.
+     * @param event
+     * @param newSelected The new selected values.
+     */
+    onSelectionChange?: (event: SyntheticEvent, newSelected: string[]) => void;
+}
+interface NonSelectablePillGroupProps extends CommonPillGroupProps {
+    selectionVariant?: "none";
+}
+export type PillGroupProps = SelectablePillGroupProps | NonSelectablePillGroupProps;
+export declare const PillGroup: import("react").ForwardRefExoticComponent<PillGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export {};

package/dist-types/pill/PillGroupContext.d.ts

@@ -0,0 +1,9 @@
+import { type SyntheticEvent } from "react";
+export interface PillGroupContextValue {
+    selected: string[];
+    select: (e: SyntheticEvent, value: string) => void;
+    disabled?: boolean;
+    selectionVariant: "none" | "multiple";
+}
+export declare const PillGroupContext: import("react").Context<PillGroupContextValue>;
+export declare function usePillGroup(): PillGroupContextValue;

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

@@ -1 +1,2 @@
 export * from "./Pill";
+export * from "./PillGroup";

package/dist-types/salt-provider/ProviderContext.d.ts

@@ -0,0 +1,5 @@
+import type { WindowContextType } from "@salt-ds/window";
+export interface ProviderContext {
+    targetWindow: WindowContextType;
+}
+export declare const ProviderContext: import("react").Context<ProviderContext | null>;

package/dist-types/salt-provider/SaltProvider.d.ts

@@ -2,6 +2,7 @@ import { type WindowContextType } from "@salt-ds/window";
 import { type ReactElement, type ReactNode } from "react";
 import { type Breakpoints } from "../breakpoints";
 import type { Accent, ActionFont, Corner, Density, HeadingFont, Mode, ThemeName } from "../theme";
+import { type ThemeApplicatorProps } from "./ThemeApplicator";
 export declare const DEFAULT_DENSITY = "medium";
 export interface ThemeContextProps {
     theme: ThemeName;
@@ -25,34 +26,8 @@ export interface ThemeContextProps {
 export declare const DensityContext: import("react").Context<"touch" | "high" | "low" | "medium">;
 export declare const ThemeContext: import("react").Context<ThemeContextProps>;
 export declare const BreakpointContext: import("react").Context<Breakpoints>;
-type TargetElement = "root" | "scope" | "child";
-interface SaltProviderBaseProps {
-    /**
-     * Either "root", "scope" or "child".
-     * Specifies the location of salt theme class and attributes should be applied to.
-     *
-     * Defaults to "root" for a root provider, otherwise "scope".
-     */
-    applyClassesTo?: TargetElement;
-    /**
-     * Either "high", "medium", "low" or "touch".
-     * Determines the amount of content that can fit on a screen based on the size and spacing of components.
-     * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.
-     *
-     * @default "medium"
-     */
-    density?: Density;
-    /**
-     * A string. Specifies custom theme name(s) you want to apply, similar to `className`.
-     */
-    theme?: ThemeName;
-    /**
-     * Either "light" or "dark". Enable the color palette to change from light to dark.
-     * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.
-     *
-     * @default "light"
-     */
-    mode?: Mode;
+type ThemeNextOnlyAttributes = "accent" | "corner" | "actionFont" | "headingFont";
+interface SaltProviderBaseProps extends Partial<Omit<ThemeApplicatorProps, "children" | ThemeNextOnlyAttributes>> {
     /**
      * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.
      * Determines breakpoints used in responsive calculation for layout components.
@@ -79,36 +54,10 @@ interface SaltProviderThatClassesToRoot extends SaltProviderThatInjectsThemeElem
 }
 type SaltProviderProps = SaltProviderThatAppliesClassesToChild | SaltProviderThatInjectsThemeElement | SaltProviderThatClassesToRoot;
 export declare function SaltProvider({ enableStyleInjection, ...restProps }: SaltProviderProps): import("react/jsx-runtime").JSX.Element;
-interface SaltProviderNextAdditionalProps {
-    /**
-     * Either "sharp" or "rounded".
-     * Determines selected components corner radius.
-     * @default "sharp"
-     */
-    corner?: Corner;
-    /**
-     * Either "Open Sans" or "Amplitude".
-     * Determines font family of display and heading text.
-     * @default "Open Sans"
-     */
-    headingFont?: HeadingFont;
-    /**
-     * Either "blue" or "teal".
-     * Determines accent color used across components, e.g. Accent Button, List, Calendar.
-     * @default "blue"
-     */
-    accent?: Accent;
-    /**
-     * Either "Open Sans" or "Amplitude".
-     * Determines font family of action components, mostly Buttons.
-     * @default "Open Sans"
-     */
-    actionFont?: ActionFont;
-}
-export type SaltProviderNextProps = SaltProviderProps & SaltProviderNextAdditionalProps;
+export type SaltProviderNextProps = SaltProviderProps & Pick<ThemeApplicatorProps, ThemeNextOnlyAttributes>;
+export declare function SaltProviderNext({ enableStyleInjection, ...restProps }: SaltProviderNextProps): import("react/jsx-runtime").JSX.Element;
 /** @deprecated use `SaltProviderNextProps` */
 export type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;
-export declare function SaltProviderNext({ enableStyleInjection, ...restProps }: SaltProviderNextProps): import("react/jsx-runtime").JSX.Element;
 /** @deprecated use `SaltProviderNext` */
 export declare const UNSTABLE_SaltProviderNext: typeof SaltProviderNext;
 export declare const useTheme: () => ThemeContextProps;

package/dist-types/salt-provider/ThemeApplicator.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+import type { Accent, ActionFont, Corner, Density, HeadingFont, Mode, ThemeName } from "../theme/index";
+export interface ThemeApplicatorProps {
+    /**
+     * Either "root", "scope" or "child".
+     * Specifies the location of salt theme class and attributes should be applied to.
+     *
+     * Defaults to "root" for a root provider, otherwise "scope".
+     */
+    applyClassesTo: "root" | "scope" | "child";
+    /**
+     * Either "high", "medium", "low" or "touch".
+     * Determines the amount of content that can fit on a screen based on the size and spacing of components.
+     * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.
+     *
+     * @default "medium"
+     */
+    density: Density;
+    /**
+     * A string. Specifies custom theme name(s) you want to apply, similar to `className`.
+     */
+    theme: ThemeName;
+    /**
+     * Either "light" or "dark". Enable the color palette to change from light to dark.
+     * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.
+     *
+     * @default "light"
+     */
+    mode: Mode;
+    /**
+     * Either "sharp" or "rounded".
+     * Determines selected components corner radius.
+     * @default "sharp"
+     */
+    corner?: Corner;
+    /**
+     * Either "Open Sans" or "Amplitude".
+     * Determines font family of display and heading text.
+     * @default "Open Sans"
+     */
+    headingFont?: HeadingFont;
+    /**
+     * Either "blue" or "teal".
+     * Determines accent color used across components, e.g. Accent Button, List, Calendar.
+     * @default "blue"
+     */
+    accent?: Accent;
+    /**
+     * Either "Open Sans" or "Amplitude".
+     * Determines font family of action components, mostly Buttons.
+     * @default "Open Sans"
+     */
+    actionFont?: ActionFont;
+    children?: ReactNode;
+}
+export declare function ThemeApplicator({ applyClassesTo, children, density, mode, theme, corner, headingFont, accent, actionFont, }: ThemeApplicatorProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.53.0",
+  "version": "1.54.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
-    "@salt-ds/icons": "^1.15.0",
+    "@salt-ds/icons": "^1.16.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
     "clsx": "^2.0.0",

package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var window = require('@salt-ds/window');
-var React = require('react');
-var useInterval = require('./useInterval.js');
-
-const INITIAL_DELAY = 500;
-const INTERVAL_DELAY = 100;
-function useActivateWhileMouseDown(activationFn, isAtLimit) {
-  const [buttonDown, setButtonDown] = React.useState(false);
-  const [delay, setDelay] = React.useState(INITIAL_DELAY);
-  const cancelInterval = React.useCallback(() => {
-    setButtonDown(false);
-    setDelay(INITIAL_DELAY);
-  }, []);
-  React.useEffect(() => {
-    if (isAtLimit) cancelInterval();
-  }, [isAtLimit, cancelInterval]);
-  const targetWindow = window.useWindow();
-  React.useEffect(() => {
-    if (targetWindow) {
-      targetWindow.addEventListener("mouseup", cancelInterval);
-    }
-    return () => {
-      if (targetWindow) {
-        targetWindow.removeEventListener("mouseup", cancelInterval);
-      }
-    };
-  }, [cancelInterval, targetWindow]);
-  const activate = (event) => {
-    activationFn(event);
-    if (event.type === "mousedown") {
-      setButtonDown(true);
-    }
-  };
-  useInterval.useInterval(
-    () => {
-      if (!buttonDown) return;
-      activationFn();
-      if (delay === INITIAL_DELAY) {
-        setDelay(INTERVAL_DELAY);
-      }
-    },
-    buttonDown ? delay : null
-  );
-  return { activate, buttonDown };
-}
-
-exports.useActivateWhileMouseDown = useActivateWhileMouseDown;
-//# sourceMappingURL=useActivateWhileMouseDown.js.map

package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useActivateWhileMouseDown.js","sources":["../src/number-input/internal/useActivateWhileMouseDown.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type SyntheticEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useActivateWhileMouseDown(\n  activationFn: (event?: SyntheticEvent) => void,\n  isAtLimit: boolean,\n) {\n  const [buttonDown, setButtonDown] = useState(false);\n  const [delay, setDelay] = useState(INITIAL_DELAY);\n\n  const cancelInterval = useCallback(() => {\n    setButtonDown(false);\n    setDelay(INITIAL_DELAY);\n  }, []);\n\n  useEffect(() => {\n    if (isAtLimit) cancelInterval();\n  }, [isAtLimit, cancelInterval]);\n\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (targetWindow) {\n      targetWindow.addEventListener(\"mouseup\", cancelInterval);\n    }\n    return () => {\n      if (targetWindow) {\n        targetWindow.removeEventListener(\"mouseup\", cancelInterval);\n      }\n    };\n  }, [cancelInterval, targetWindow]);\n\n  const activate = (event: SyntheticEvent) => {\n    activationFn(event);\n    if (event.type === \"mousedown\") {\n      setButtonDown(true);\n    }\n  };\n\n  useInterval(\n    () => {\n      if (!buttonDown) return;\n      activationFn();\n      if (delay === INITIAL_DELAY) {\n        setDelay(INTERVAL_DELAY);\n      }\n    },\n    buttonDown ? delay : null,\n  );\n\n  return { activate, buttonDown };\n}\n"],"names":["useState","useCallback","useEffect","useWindow","useInterval"],"mappings":";;;;;;AAIA,MAAM,aAAA,GAAgB,GAAA;AACtB,MAAM,cAAA,GAAiB,GAAA;AAEhB,SAAS,yBAAA,CACd,cACA,SAAA,EACA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,aAAa,CAAA;AAEhD,EAAA,MAAM,cAAA,GAAiBC,kBAAY,MAAM;AACvC,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA,EACxB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAW,cAAA,EAAe;AAAA,EAChC,CAAA,EAAG,CAAC,SAAA,EAAW,cAAc,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,YAAA,CAAa,gBAAA,CAAiB,WAAW,cAAc,CAAA;AAAA,IACzD;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAA,EAAc;AAChB,QAAA,YAAA,CAAa,mBAAA,CAAoB,WAAW,cAAc,CAAA;AAAA,MAC5D;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,cAAA,EAAgB,YAAY,CAAC,CAAA;AAEjC,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAA0B;AAC1C,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,IAAI,KAAA,CAAM,SAAS,WAAA,EAAa;AAC9B,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA,IACpB;AAAA,EACF,CAAA;AAEA,EAAAE,uBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,UAAA,EAAY;AACjB,MAAA,YAAA,EAAa;AACb,MAAA,IAAI,UAAU,aAAA,EAAe;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA;AAAA,MACzB;AAAA,IACF,CAAA;AAAA,IACA,aAAa,KAAA,GAAQ;AAAA,GACvB;AAEA,EAAA,OAAO,EAAE,UAAU,UAAA,EAAW;AAChC;;;;"}