@salt-ds/lab 1.0.0-alpha.62 → 1.0.0-alpha.63

package/dist-es/slider/Slider.js

@@ -1,90 +1,124 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer, useControlled, Label } from '@salt-ds/core';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useControlled, useFormFieldProps } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { SliderThumb } from './internal/SliderThumb.js';
 import { SliderTrack } from './internal/SliderTrack.js';
-import { SliderMarks } from './internal/SliderMarks.js';
-import { SliderContext } from './internal/SliderContext.js';
-import css_248z from './Slider.css.js';
-import { parseValueProp } from './internal/utils.js';
+import { useSliderThumb } from './internal/useSliderThumb.js';
+import { clamp, calculatePercentage, toFloat } from './internal/utils.js';
 
-const withBaseName = makePrefixer("saltSlider");
-const defaultMin = 0;
-const defaultMax = 10;
-const defaultStep = 1;
 const Slider = forwardRef(function Slider2({
-  min = defaultMin,
-  max = defaultMax,
-  step = defaultStep,
-  value: valueProp,
-  defaultValue = [0],
-  onChange,
-  className,
   "aria-label": ariaLabel,
-  marks = "inline",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-valuetext": ariaValueText,
+  decimalPlaces = 2,
+  disabled: disabledProp = false,
+  format,
+  marks,
+  min = 0,
+  minLabel,
+  max = 10,
+  maxLabel,
+  onChange,
+  onChangeEnd,
+  restrictToMarks = false,
+  showTooltip = true,
+  step = 1,
+  stepMultiplier = 2,
+  value: valueProp,
+  defaultValue = min + (max - min) / 2,
   ...rest
 }, ref) {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-slider",
-    css: css_248z,
-    window: targetWindow
-  });
-  const [value, setValue] = useControlled({
-    controlled: parseValueProp(valueProp, min, max),
+  const [valueState, setValue] = useControlled({
+    controlled: valueProp,
     default: defaultValue,
     name: "Slider",
-    state: "Value"
+    state: "value"
   });
-  const handleSliderChange = (value2) => {
-    setValue(value2);
-    onChange == null ? void 0 : onChange(value2);
+  const {
+    a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+    disabled: formFieldDisabled
+  } = useFormFieldProps();
+  const disabled = formFieldDisabled || disabledProp;
+  const value = clamp(
+    valueState,
+    max,
+    min,
+    step,
+    decimalPlaces,
+    marks,
+    restrictToMarks
+  );
+  const progressPercentage = calculatePercentage(toFloat(value), max, min);
+  const lastValueRef = useRef(value);
+  const handleInputChange = (event) => {
+    const parsedValue = toFloat(event.target.value);
+    if (parsedValue !== lastValueRef.current) {
+      setValue(parsedValue);
+      onChange == null ? void 0 : onChange(event, parsedValue);
+      onChangeEnd == null ? void 0 : onChangeEnd(event, parsedValue);
+      lastValueRef.current = parsedValue;
+    }
   };
+  const {
+    handleKeydownOnThumb,
+    handlePointerDownOnThumb,
+    handlePointerDownOnTrack,
+    isDragging,
+    sliderRef
+  } = useSliderThumb({
+    decimalPlaces,
+    handleInputChange,
+    marks,
+    min,
+    max,
+    step,
+    value,
+    onChange,
+    onChangeEnd,
+    restrictToMarks,
+    setValue,
+    stepMultiplier
+  });
   return /* @__PURE__ */ jsx(
-    SliderContext.Provider,
+    SliderTrack,
     {
-      value: {
-        value,
-        min,
-        max,
-        step,
-        onChange: handleSliderChange,
-        ariaLabel
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
+      disabled,
+      format,
+      handlePointerDown: handlePointerDownOnTrack,
+      isDragging,
+      min,
+      minLabel,
+      max,
+      maxLabel,
+      marks,
+      progressPercentage,
+      ref,
+      sliderRef,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        SliderThumb,
         {
-          ref,
-          className: clsx(
-            withBaseName(),
-            { [withBaseName("bottomLabel")]: marks !== "inline" },
-            className
-          ),
-          ...rest,
-          children: [
-            marks !== "all" && /* @__PURE__ */ jsx(
-              Label,
-              {
-                className: clsx(withBaseName("label"), {
-                  [withBaseName("labelMinBottom")]: marks !== "inline"
-                }),
-                children: min
-              }
-            ),
-            /* @__PURE__ */ jsx(SliderTrack, {}),
-            marks !== "all" && /* @__PURE__ */ jsx(
-              Label,
-              {
-                className: clsx(withBaseName("label"), {
-                  [withBaseName("labelMaxBottom")]: marks !== "inline"
-                }),
-                children: max
-              }
-            ),
-            marks === "all" && /* @__PURE__ */ jsx(SliderMarks, { max, min, step })
-          ]
+          "aria-label": ariaLabel,
+          "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+          "aria-valuemax": max,
+          "aria-valuemin": min,
+          "aria-valuetext": ariaValueText,
+          disabled,
+          format,
+          handleInputChange,
+          handlePointerDown: handlePointerDownOnThumb,
+          handleKeydownOnThumb,
+          min,
+          minLabel,
+          max,
+          maxLabel,
+          offsetPercentage: `${progressPercentage}%`,
+          sliderValue: value,
+          showTooltip,
+          step,
+          stepMultiplier,
+          trackDragging: isDragging
         }
       )
     }

package/dist-es/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { Label, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { SliderContext, SliderMarks, SliderTrack } from \"./internal\";\n\nimport sliderCss from \"./Slider.css\";\nimport { parseValueProp } from \"./internal/utils\";\nimport type { SliderChangeHandler, SliderValue } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 10;\nconst defaultStep = 1;\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Minimum slider value\n   */\n  min?: number;\n  /**\n   * Maximum slider value\n   */\n  max?: number;\n  /**\n   * Minimum interval the slider thumb can move\n   */\n  step?: number;\n  /**\n   * Initial value of the slider\n   */\n  defaultValue?: SliderValue;\n  /**\n   * The markings the slider is displayed with\n   */\n  marks?: \"inline\" | \"bottom\" | \"all\";\n  /**\n   * Value of the slider, to be used when in a controlled state\n   */\n  value?: SliderValue;\n  /**\n   * Change handler to be used when in a controlled state\n   */\n  onChange?: SliderChangeHandler;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    min = defaultMin,\n    max = defaultMax,\n    step = defaultStep,\n    value: valueProp,\n    defaultValue = [0],\n    onChange,\n    className,\n    \"aria-label\": ariaLabel,\n    marks = \"inline\",\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  const [value, setValue] = useControlled<SliderValue>({\n    controlled: parseValueProp(valueProp, min, max),\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"Value\",\n  });\n\n  const handleSliderChange = (value: SliderValue) => {\n    setValue(value);\n    onChange?.(value);\n  };\n\n  return (\n    <SliderContext.Provider\n      value={{\n        value,\n        min,\n        max,\n        step,\n        onChange: handleSliderChange,\n        ariaLabel,\n      }}\n    >\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"bottomLabel\")]: marks !== \"inline\" },\n          className,\n        )}\n        {...rest}\n      >\n        {marks !== \"all\" && (\n          <Label\n            className={clsx(withBaseName(\"label\"), {\n              [withBaseName(\"labelMinBottom\")]: marks !== \"inline\",\n            })}\n          >\n            {min}\n          </Label>\n        )}\n        <SliderTrack />\n        {marks !== \"all\" && (\n          <Label\n            className={clsx(withBaseName(\"label\"), {\n              [withBaseName(\"labelMaxBottom\")]: marks !== \"inline\",\n            })}\n          >\n            {max}\n          </Label>\n        )}\n        {marks === \"all\" && <SliderMarks max={max} min={min} step={step} />}\n      </div>\n    </SliderContext.Provider>\n  );\n});\n"],"names":["Slider","sliderCss","value"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAE9C,MAAM,UAAa,GAAA,CAAA;AACnB,MAAM,UAAa,GAAA,EAAA;AACnB,MAAM,WAAc,GAAA,CAAA;AAkCP,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,GAAM,GAAA,UAAA;AAAA,EACN,GAAM,GAAA,UAAA;AAAA,EACN,IAAO,GAAA,WAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,YAAA,GAAe,CAAC,CAAC,CAAA;AAAA,EACjB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAc,EAAA,SAAA;AAAA,EACd,KAAQ,GAAA,QAAA;AAAA,EACR,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAA2B,CAAA;AAAA,IACnD,UAAY,EAAA,cAAA,CAAe,SAAW,EAAA,GAAA,EAAK,GAAG,CAAA;AAAA,IAC9C,OAAS,EAAA,YAAA;AAAA,IACT,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqB,CAACC,MAAuB,KAAA;AACjD,IAAA,QAAA,CAASA,MAAK,CAAA;AACd,IAAWA,QAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAAA,CAAAA,MAAAA,CAAAA;AAAA,GACb;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,aAAc,CAAA,QAAA;AAAA,IAAd;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,kBAAA;AAAA,QACV;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,SAAW,EAAA,IAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,UAAU,QAAS,EAAA;AAAA,YACpD;AAAA,WACF;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,KAAA,KAAU,KACT,oBAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,kBACrC,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,KAAU,KAAA;AAAA,iBAC7C,CAAA;AAAA,gBAEA,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,gCAED,WAAY,EAAA,EAAA,CAAA;AAAA,YACZ,UAAU,KACT,oBAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,kBACrC,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,KAAU,KAAA;AAAA,iBAC7C,CAAA;AAAA,gBAEA,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YAED,UAAU,KAAS,oBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,GAAA,EAAU,KAAU,IAAY,EAAA;AAAA;AAAA;AAAA;AACnE;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport { useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   * @default false\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default min + (max - min) / 2,\n   */\n  defaultValue?: number;\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for the minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * Event is either an Input change event or a click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown> | Event, value: number) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard.\n   * Event is either an Input change event or a click event.\n   */\n  onChangeEnd?: (event: SyntheticEvent<unknown> | Event, value: number) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    decimalPlaces = 2,\n    disabled: disabledProp = false,\n    format,\n    marks,\n    min = 0,\n    minLabel,\n    max = 10,\n    maxLabel,\n    onChange,\n    onChangeEnd,\n    restrictToMarks = false,\n    showTooltip = true,\n    step = 1,\n    stepMultiplier = 2,\n    value: valueProp,\n    defaultValue = min + (max - min) / 2,\n    ...rest\n  },\n  ref,\n) {\n  const [valueState, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"value\",\n  });\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const value = clamp(\n    valueState,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n  const progressPercentage = calculatePercentage(toFloat(value), max, min);\n  const lastValueRef = useRef<number>(value);\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const parsedValue = toFloat(event.target.value);\n    if (parsedValue !== lastValueRef.current) {\n      setValue(parsedValue);\n      onChange?.(event, parsedValue);\n      onChangeEnd?.(event, parsedValue);\n      lastValueRef.current = parsedValue;\n    }\n  };\n\n  const {\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    sliderRef,\n  } = useSliderThumb({\n    decimalPlaces,\n    handleInputChange,\n    marks,\n    min,\n    max,\n    step,\n    value,\n    onChange,\n    onChangeEnd,\n    restrictToMarks,\n    setValue,\n    stepMultiplier,\n  });\n\n  return (\n    <SliderTrack\n      disabled={disabled}\n      format={format}\n      handlePointerDown={handlePointerDownOnTrack}\n      isDragging={isDragging}\n      min={min}\n      minLabel={minLabel}\n      max={max}\n      maxLabel={maxLabel}\n      marks={marks}\n      progressPercentage={progressPercentage}\n      ref={ref}\n      sliderRef={sliderRef}\n      {...rest}\n    >\n      <SliderThumb\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuetext={ariaValueText}\n        disabled={disabled}\n        format={format}\n        handleInputChange={handleInputChange}\n        handlePointerDown={handlePointerDownOnThumb}\n        handleKeydownOnThumb={handleKeydownOnThumb}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        offsetPercentage={`${progressPercentage}%`}\n        sliderValue={value}\n        showTooltip={showTooltip}\n        step={step}\n        stepMultiplier={stepMultiplier}\n        trackDragging={isDragging}\n      />\n    </SliderTrack>\n  );\n});\n"],"names":["Slider"],"mappings":"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"}

package/dist-es/slider/internal/SliderThumb.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSliderThumb {\n  align-items: center;\n  background: var(--salt-accent-borderColor);\n  cursor: var(--salt-selectable-cursor-hover);\n  display: flex;\n  height: var(--salt-size-selectable);\n  outline: none;\n  position: absolute;\n  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);\n  transform: translateX(-50%);\n  width: var(--salt-size-border-strong);\n}\n\n.saltSliderThumb-disabled {\n  background: var(--salt-accent-borderColor-disabled);\n  pointer-events: none;\n}\n\n.saltSliderThumb-focused {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderThumb:active,\n.saltSliderThumb-dragging {\n  cursor: var(--draggable-grab-cursor-active);\n}\n\n.saltSliderThumb-input {\n  border: 0;\n  appearance: none;\n  cursor: var(--salt-selectable-cursor-hover);\n  height: var(--salt-size-base);\n  left: var(--slider-progressPercentage);\n  margin: 0;\n  opacity: 0.0001;\n  overflow: hidden;\n  -webkit-appearance: none;\n  pointer-events: none;\n  width: var(--salt-size-base);\n  padding: 0;\n  position: absolute;\n  transform: translateX(-50%);\n}\n\n.saltSliderThumb-secondThumb {\n  /* The second thumb needs to sit on top the first thumb */\n  z-index: 2;\n}\n\n/* Visually hide accessible text. Can not\n  use visibility: hidden as we need the screen\n  reader to announce it */\n.saltSliderThumb-accessibleText {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SliderThumb.css.js.map

package/dist-es/slider/internal/SliderThumb.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,79 +1,145 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, Label } from '@salt-ds/core';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { useState } from 'react';
-import { useSliderContext } from './SliderContext.js';
-import { useKeyDownThumb } from './useKeyDownThumb.js';
-import { getPercentage } from './utils.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import css_248z from './SliderThumb.css.js';
+import { SliderTooltip } from './SliderTooltip.js';
 
 const withBaseName = makePrefixer("saltSliderThumb");
-function SliderThumb(props) {
-  const { index, activeThumb, setActiveThumb } = props;
-  const [focussed, setFocussed] = useState(false);
-  const { min, max, step, value, onChange, ariaLabel } = useSliderContext();
-  const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);
-  const thumbValue = value[index];
-  const thumbPosition = getPercentage(min, max, thumbValue);
-  const handlePointerOver = () => {
-    if (activeThumb === void 0 && index !== null) setActiveThumb(index);
-  };
-  const handleFocus = () => {
-    setFocussed(true);
-    if (index !== null) setActiveThumb(index);
-  };
-  const handleBlur = () => {
-    setFocussed(false);
-    setActiveThumb(void 0);
-  };
-  const showTooltip = focussed || activeThumb === index;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: { left: `${thumbPosition}%` },
-      className: withBaseName("container"),
-      onPointerOver: handlePointerOver,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(withBaseName("tooltip"), {
-              [withBaseName("tooltip-visible")]: showTooltip
-            }),
-            "aria-expanded": showTooltip,
-            children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: withBaseName("tooltip-arrow"),
-                  "aria-hidden": "true",
-                  viewBox: "0 1 14 14",
-                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 H14 L7,7 Q7,7 7,7 Z" })
-                }
-              ),
-              /* @__PURE__ */ jsx(Label, { children: value[index] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: withBaseName(),
-            onKeyDown,
-            role: "slider",
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": index === 1 ? value[1] : value[0],
-            "aria-label": ariaLabel,
-            "aria-orientation": "horizontal",
-            tabIndex: 0
-          }
-        )
-      ]
-    }
-  );
-}
+const SliderThumb = ({
+  "aria-label": ariaLabel,
+  "aria-valuetext": ariaValueText,
+  "aria-labelledby": ariaLabelledBy,
+  disabled,
+  format,
+  handleInputChange,
+  handleKeydownOnThumb,
+  handlePointerDown,
+  index = 0,
+  max,
+  maxLabel,
+  min,
+  minLabel,
+  offsetPercentage,
+  showTooltip,
+  sliderValue,
+  step,
+  stepMultiplier,
+  trackDragging,
+  ...rest
+}) => {
+  {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-slider-thumb",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [isFocused, setIsFocused] = useState(false);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const inputRef = useRef(null);
+    const id = useId();
+    const accessibleTextId = `saltSlider-${id}-${index}`;
+    const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;
+    const formattedValue = format ? format(value) : value;
+    const handleKeyDown = useCallback((event) => {
+      if (event.key === "Escape") {
+        setIsTooltipVisible(false);
+      }
+    }, []);
+    useEffect(() => {
+      if (showTooltip && isTooltipVisible) {
+        targetWindow == null ? void 0 : targetWindow.addEventListener("keydown", handleKeyDown);
+      }
+      return () => targetWindow == null ? void 0 : targetWindow.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);
+    const handlePointerEnter = () => setIsTooltipVisible(true);
+    const handlePointerLeave = () => {
+      setTimeout(() => {
+        setIsTooltipVisible(false);
+      }, 300);
+    };
+    const handleFocus = () => {
+      setIsFocused(true);
+      if (showTooltip) setIsTooltipVisible(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+      if (showTooltip) setIsTooltipVisible(false);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName(), {
+          [withBaseName("focused")]: isFocused,
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("dragging")]: trackDragging,
+          [withBaseName("secondThumb")]: index === 1
+        }),
+        "data-testid": "sliderThumb",
+        onPointerDown: handlePointerDown,
+        style: { left: offsetPercentage },
+        ...showTooltip && {
+          onPointerEnter: handlePointerEnter,
+          onPointerLeave: handlePointerLeave
+        },
+        children: [
+          showTooltip && /* @__PURE__ */ jsx(
+            SliderTooltip,
+            {
+              value: formattedValue,
+              open: (isTooltipVisible || trackDragging) && !disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              disabled,
+              type: "range",
+              ref: inputRef,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              className: withBaseName("input"),
+              value,
+              onChange: handleInputChange,
+              onKeyDown: handleKeydownOnThumb,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-valuenow": value,
+              "aria-valuetext": ariaValueText || (format == null ? void 0 : format(value).toString()),
+              "aria-label": ariaLabel,
+              "aria-describedby": accessibleTextId,
+              min,
+              max,
+              step,
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "aria-hidden": "true",
+              id: accessibleTextId,
+              className: withBaseName("accessibleText"),
+              children: [
+                Array.isArray(sliderValue) && `${index === 0 ? "leading" : "trailing"}, ${(format == null ? void 0 : format(sliderValue[0])) || sliderValue[0]} to ${(format == null ? void 0 : format(sliderValue[1])) || sliderValue[1]}, `,
+                "Slider range ",
+                minLabel && `From ${minLabel}, `,
+                maxLabel && `To ${maxLabel},`,
+                " minimum ",
+                (format == null ? void 0 : format(min)) || min,
+                ", maximum ",
+                (format == null ? void 0 : format(max)) || max,
+                step !== 1 && `, Increments of ${step}`
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+};
 
 export { SliderThumb };
 //# sourceMappingURL=SliderThumb.js.map

package/dist-es/slider/internal/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { Label, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, useState } from \"react\";\nimport type { ActiveThumbIndex, ThumbIndex } from \"../types\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { useKeyDownThumb } from \"./useKeyDownThumb\";\nimport { getPercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\nexport interface SliderThumbProps extends ComponentPropsWithoutRef<\"div\"> {\n  index: ThumbIndex;\n  activeThumb: ActiveThumbIndex;\n  setActiveThumb: (index: ActiveThumbIndex) => void;\n}\n\nexport function SliderThumb(props: SliderThumbProps): JSX.Element {\n  const { index, activeThumb, setActiveThumb } = props;\n\n  const [focussed, setFocussed] = useState(false);\n\n  const { min, max, step, value, onChange, ariaLabel } = useSliderContext();\n\n  const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);\n\n  const thumbValue = value[index];\n\n  const thumbPosition = getPercentage(min, max, thumbValue as number);\n\n  const handlePointerOver = () => {\n    if (activeThumb === undefined && index !== null) setActiveThumb(index);\n  };\n\n  const handleFocus = () => {\n    setFocussed(true);\n    if (index !== null) setActiveThumb(index);\n  };\n\n  const handleBlur = () => {\n    setFocussed(false);\n    setActiveThumb(undefined);\n  };\n\n  const showTooltip = focussed || activeThumb === index;\n\n  return (\n    <div\n      style={{ left: `${thumbPosition}%` }}\n      className={withBaseName(\"container\")}\n      onPointerOver={handlePointerOver}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n    >\n      <div\n        className={clsx(withBaseName(\"tooltip\"), {\n          [withBaseName(\"tooltip-visible\")]: showTooltip,\n        })}\n        aria-expanded={showTooltip}\n      >\n        <svg\n          className={withBaseName(\"tooltip-arrow\")}\n          aria-hidden=\"true\"\n          viewBox=\"0 1 14 14\"\n        >\n          <path d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\" />\n        </svg>\n        <Label>{value[index]}</Label>\n      </div>\n      <div\n        className={withBaseName()}\n        onKeyDown={onKeyDown}\n        role=\"slider\"\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={index === 1 ? value[1] : value[0]}\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAQ5C,SAAS,YAAY,KAAsC,EAAA;AAChE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,cAAA,EAAmB,GAAA,KAAA;AAE/C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,IAAA,EAAM,OAAO,QAAU,EAAA,SAAA,KAAc,gBAAiB,EAAA;AAExE,EAAA,MAAM,YAAY,eAAgB,CAAA,GAAA,EAAK,KAAK,IAAM,EAAA,KAAA,EAAO,UAAU,KAAK,CAAA;AAExE,EAAM,MAAA,UAAA,GAAa,MAAM,KAAK,CAAA;AAE9B,EAAA,MAAM,aAAgB,GAAA,aAAA,CAAc,GAAK,EAAA,GAAA,EAAK,UAAoB,CAAA;AAElE,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,WAAgB,KAAA,KAAA,CAAA,IAAa,KAAU,KAAA,IAAA,iBAAqB,KAAK,CAAA;AAAA,GACvE;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAI,IAAA,KAAA,KAAU,IAAM,EAAA,cAAA,CAAe,KAAK,CAAA;AAAA,GAC1C;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,WAAA,CAAY,KAAK,CAAA;AACjB,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,WAAgB,KAAA,KAAA;AAEhD,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,aAAa,CAAI,CAAA,CAAA,EAAA;AAAA,MACnC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,aAAe,EAAA,iBAAA;AAAA,MACf,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG;AAAA,aACpC,CAAA;AAAA,YACD,eAAe,EAAA,WAAA;AAAA,YAEf,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,kBACvC,aAAY,EAAA,MAAA;AAAA,kBACZ,OAAQ,EAAA,WAAA;AAAA,kBAER,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,CAAA,EAAE,0BAA2B,EAAA;AAAA;AAAA,eACrC;AAAA,8BACC,GAAA,CAAA,KAAA,EAAA,EAAO,QAAM,EAAA,KAAA,CAAA,KAAK,CAAE,EAAA;AAAA;AAAA;AAAA,SACvB;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAW,YAAa,EAAA;AAAA,YACxB,SAAA;AAAA,YACA,IAAK,EAAA,QAAA;AAAA,YACL,eAAe,EAAA,GAAA;AAAA,YACf,eAAe,EAAA,GAAA;AAAA,YACf,iBAAe,KAAU,KAAA,CAAA,GAAI,MAAM,CAAC,CAAA,GAAI,MAAM,CAAC,CAAA;AAAA,YAC/C,YAAY,EAAA,SAAA;AAAA,YACZ,kBAAiB,EAAA,YAAA;AAAA,YACjB,QAAU,EAAA;AAAA;AAAA;AACZ;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport sliderThumbCss from \"./SliderThumb.css\";\nimport { SliderTooltip } from \"./SliderTooltip\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\ninterface SliderThumbProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"onChange\" | \"defaultValue\" | \"min\" | \"max\"\n  > {\n  disabled: boolean;\n  format?: (value: number) => number | string;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  handleKeydownOnThumb: (event: React.KeyboardEvent) => void;\n  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n  index?: number;\n  max: number;\n  maxLabel?: string;\n  min: number;\n  minLabel?: string;\n  offsetPercentage?: string;\n  showTooltip?: boolean;\n  sliderValue: [number, number] | number;\n  step: number;\n  stepMultiplier: number;\n  trackDragging: boolean;\n}\n\nexport const SliderThumb = ({\n  \"aria-label\": ariaLabel,\n  \"aria-valuetext\": ariaValueText,\n  \"aria-labelledby\": ariaLabelledBy,\n  disabled,\n  format,\n  handleInputChange,\n  handleKeydownOnThumb,\n  handlePointerDown,\n  index = 0,\n  max,\n  maxLabel,\n  min,\n  minLabel,\n  offsetPercentage,\n  showTooltip,\n  sliderValue,\n  step,\n  stepMultiplier,\n  trackDragging,\n  ...rest\n}: SliderThumbProps) => {\n  {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-slider-thumb\",\n      css: sliderThumbCss,\n      window: targetWindow,\n    });\n\n    const [isFocused, setIsFocused] = useState(false);\n    const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const id = useId();\n    const accessibleTextId = `saltSlider-${id}-${index}`;\n    const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;\n    const formattedValue = format ? format(value) : value;\n\n    const handleKeyDown = useCallback((event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setIsTooltipVisible(false);\n      }\n    }, []);\n\n    useEffect(() => {\n      if (showTooltip && isTooltipVisible) {\n        targetWindow?.addEventListener(\"keydown\", handleKeyDown);\n      }\n      return () => targetWindow?.removeEventListener(\"keydown\", handleKeyDown);\n    }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);\n\n    const handlePointerEnter = () => setIsTooltipVisible(true);\n\n    const handlePointerLeave = () => {\n      // Delay hiding the tooltip to enable tooltip\n      // visibility on hover\n      setTimeout(() => {\n        setIsTooltipVisible(false);\n      }, 300);\n    };\n\n    const handleFocus = () => {\n      setIsFocused(true);\n      if (showTooltip) setIsTooltipVisible(true);\n    };\n\n    const handleBlur = () => {\n      setIsFocused(false);\n      if (showTooltip) setIsTooltipVisible(false);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), {\n          [withBaseName(\"focused\")]: isFocused,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"dragging\")]: trackDragging,\n          [withBaseName(\"secondThumb\")]: index === 1,\n        })}\n        data-testid=\"sliderThumb\"\n        onPointerDown={handlePointerDown}\n        style={{ left: offsetPercentage }}\n        {...(showTooltip && {\n          onPointerEnter: handlePointerEnter,\n          onPointerLeave: handlePointerLeave,\n        })}\n      >\n        {showTooltip && (\n          <SliderTooltip\n            value={formattedValue}\n            open={(isTooltipVisible || trackDragging) && !disabled}\n          />\n        )}\n        <input\n          disabled={disabled}\n          type=\"range\"\n          ref={inputRef}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className={withBaseName(\"input\")}\n          value={value}\n          onChange={handleInputChange}\n          onKeyDown={handleKeydownOnThumb}\n          aria-labelledby={ariaLabelledBy}\n          aria-valuenow={value}\n          aria-valuetext={ariaValueText || format?.(value).toString()}\n          aria-label={ariaLabel}\n          aria-describedby={accessibleTextId}\n          min={min}\n          max={max}\n          step={step}\n          {...rest}\n        />\n        {/* Accessible text */}\n        <span\n          aria-hidden=\"true\"\n          id={accessibleTextId}\n          className={withBaseName(\"accessibleText\")}\n        >\n          {Array.isArray(sliderValue) &&\n            `${index === 0 ? \"leading\" : \"trailing\"}, ${format?.(sliderValue[0]) || sliderValue[0]} to ${format?.(sliderValue[1]) || sliderValue[1]}, `}\n          Slider range {minLabel && `From ${minLabel}, `}\n          {maxLabel && `To ${maxLabel},`} minimum {format?.(min) || min},\n          maximum {format?.(max) || max}\n          {step !== 1 && `, Increments of ${step}`}\n        </span>\n      </div>\n    );\n  }\n};\n"],"names":["sliderThumbCss"],"mappings":"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"}

package/dist-es/slider/internal/SliderTooltip.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSliderTooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-status-info-borderColor);\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  bottom: 50%;\n  left: 50%;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: absolute;\n  transform: translate(-50%, -50%);\n  text-align: var(--saltTooltip-textAlign, left);\n  user-select: none;\n  visibility: hidden;\n  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n  visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n  fill: var(--salt-container-primary-background);\n  height: var(--salt-size-icon);\n  left: 50%;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  transform: translateX(-50%);\n  stroke: var(--salt-status-info-borderColor);\n  stroke-width: var(--salt-size-border);\n  width: var(--salt-size-icon);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SliderTooltip.css.js.map

package/dist-es/slider/internal/SliderTooltip.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import css_248z from './SliderTooltip.css.js';
+
+const withBaseName = makePrefixer("saltSliderTooltip");
+const SliderTooltip = ({ value, open }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider-tooltip",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: clsx(withBaseName(), {
+        [withBaseName("visible")]: open
+      }),
+      "data-testid": "sliderTooltip",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: withBaseName("arrow"),
+            "aria-hidden": "true",
+            viewBox: "0 1 14 14",
+            children: /* @__PURE__ */ jsx("path", { d: "M0,0 H14 L7,7 Q7,7 7,7 Z" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { children: value })
+      ]
+    }
+  );
+};
+
+export { SliderTooltip };
+//# sourceMappingURL=SliderTooltip.js.map

package/dist-es/slider/internal/SliderTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { Text, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\" />\n      </svg>\n      <Text>{value}</Text>\n    </div>\n  );\n};\n"],"names":["sliderTooltipCss"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAgB,GAAA,CAAC,EAAE,KAAA,EAAO,MAA+B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAY,EAAA,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAY,EAAA,MAAA;AAAA,YACZ,OAAQ,EAAA,WAAA;AAAA,YAER,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,CAAA,EAAE,0BAA2B,EAAA;AAAA;AAAA,SACrC;AAAA,wBACA,GAAA,CAAC,QAAM,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GACf;AAEJ;;;;"}

package/dist-es/slider/internal/SliderTrack.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSliderTrack {\n  --slider-track-background: var(--salt-track-borderColor);\n  --slider-track-fill: var(--salt-accent-borderColor);\n  --slider-progressPercentage: 0%;\n  /* For range */\n  --slider-progressPercentageStart: 0%;\n  --slider-progressPercentageEnd: 0%;\n\n  --slider-mark-percentage: 0%;\n\n  display: flex;\n  width: 100%;\n}\n\n.saltSliderTrack-disabled {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSliderTrack-container {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n  align-items: center;\n  display: flex;\n  flex: 1;\n  height: var(--salt-size-base);\n  position: relative;\n  width: 100%;\n}\n\n.saltSliderTrack-rail {\n  cursor: var(--salt-selectable-cursor-hover);\n  display: flex;\n  flex: 100%;\n  height: var(--salt-size-bar);\n  justify-content: space-between;\n  position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n  content: \"\";\n  display: block;\n  height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n  background: var(--slider-track-fill);\n  border-top-left-radius: var(--salt-palette-corner-weaker);\n  border-bottom-left-radius: var(--salt-palette-corner-weaker);\n  width: calc(var(--slider-progressPercentage) - (var(--salt-size-border-strong) / 2));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n  border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  border-top-right-radius: var(--salt-palette-corner-weaker);\n  border-bottom-right-radius: var(--salt-palette-corner-weaker);\n  width: calc(100% - var(--slider-progressPercentage) - (var(--salt-size-border-strong) * 2));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n  border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n  background: var(--slider-track-background);\n  width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 2));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 2));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n  background: var(--slider-track-fill);\n  height: 100%;\n  left: calc(var(--slider-progressPercentageStart) + (var(--salt-size-border-strong) / 2));\n  position: absolute;\n  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong));\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n  user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-rail {\n  cursor: var(--salt-draggable-grab-cursor-active);\n}\n\n.saltSliderTrack-disabled {\n  --slider-track-fill: var(--salt-accent-borderColor-disabled);\n  --slider-track-background: var(--salt-track-borderColor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-rail {\n  pointer-events: none;\n}\n\n.saltSliderTrack-marks {\n  position: absolute;\n  user-select: none;\n  width: 100%;\n  top: calc((var(--salt-size-base) / 2) + (var(--salt-size-bar) / 2));\n}\n\n.saltSliderTrack-mark {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  justify-content: center;\n  left: var(--slider-mark-percentage);\n  transform: translateX(-50%);\n  gap: 4px;\n}\n\n.saltSliderTrack-markLabel {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltSliderTrack-markTick {\n  height: 5px;\n  width: var(--salt-size-border-strong);\n  background: var(--slider-track-background);\n  visibility: hidden;\n}\n\n.saltSliderTrack-withMarkTicks .saltSliderTrack-markTick {\n  visibility: visible;\n}\n\n.saltSliderTrack-withMarkTicks .saltSliderTrack-markTickHidden {\n  visibility: hidden;\n}\n\n.saltSliderTrack-mark:last-of-type .saltSliderTrack-markTick {\n  transform: translateX(-50%);\n}\n\n.saltSliderTrack-mark:first-of-type .saltSliderTrack-markTick {\n  transform: translateX(50%);\n}\n\n.saltSliderTrack-markSelected {\n  background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:first-of-type .saltSliderTrack-markLabel {\n  transform: translateX(50%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:last-of-type .saltSliderTrack-markLabel {\n  transform: translateX(-50%);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SliderTrack.css.js.map

package/dist-es/slider/internal/SliderTrack.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}