draft-components 2.9.1 → 2.10.0

package/css/draft-components.css

@@ -1969,392 +1969,241 @@
 }
 
 .dc-slider {
+  --dc-slider-icon-color: var(--dc-secondary-text-color);
+
+  /* Track properties */
   --dc-slider-track-height: 4px;
+  --dc-slider-track-radius: 2px;
   --dc-slider-track-bg: var(--dc-control-bg-inset);
-  --dc-slider-track-bg-fill: var(--dc-control-primary-color);
-  --dc-slider-tick-color: var(--dc-control-border-color);
-  --dc-slider-tick-label-color: var(--dc-control-secondary-text-color);
-  --dc-slider-focus-ring-color: var(--dc-focus-ring-color);
+  --dc-slider-active-track-bg: var(--dc-control-primary-color);
 
   /* Thumb properties */
-  --dc-slider-thumb-width: 20px;
   --dc-slider-thumb-height: 20px;
-  --dc-slider-thumb-bg: var(--dc-control-on-primary-color);
+  --dc-slider-thumb-width: 20px;
+  --dc-slider-thumb-radius: 50%;
+  --dc-slider-thumb-bg: var(--dc-control-primary-color);
+  --dc-slider-thumb-border: 2px solid var(--dc-control-bg);
+  --dc-slider-thumb-transition: box-shadow 150ms ease-in-out;
   --dc-slider-thumb-shadow:
-    0 0 0 1px rgb(var(--dc-black-rgb) / 0.1),
-    0 2px 3px rgb(var(--dc-black-rgb) / 0.2);
-  --dc-slider-thumb-shadow-focus:
+    var(--dc-shadow-sm),
+    var(--dc-shadow),
+    var(--dc-shadow-md);
+  --dc-slider-thumb-focus-ring:
     var(--dc-slider-thumb-shadow),
-    0 0 0 3px var(--dc-slider-focus-ring-color);
+    0 0 0 4px var(--dc-focus-ring-color);
 
-  color-scheme: light;
-  font-family: var(--dc-primary-font);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
+  /* Label properties */
+  --dc-slider-label-gap: 4px;
+  --dc-slider-label-height: 24px;
+  --dc-slider-label-padding-x: 0.5em;
+  --dc-slider-label-radius: 6px;
+  --dc-slider-label-border: 1px solid var(--dc-white);
+  --dc-slider-label-text-color: var(--dc-gray-50);
+  --dc-slider-label-bg: var(--dc-gray-800);
 
-.dc-slider_disabled {
-  opacity: var(--dc-disabled-state-opacity);
-}
+  /* Tick mark properties */
+  --dc-slider-tick-mark-width: 1px;
+  --dc-slider-tick-mark-height: 6px;
+  --dc-slider-tick-mark-color: rgb(var(--dc-gray-900-rgb) / 0.3);
+  --dc-slider-tick-marks-gap: 4px;
 
-.dc-slider_thumb_rect {
-  --dc-slider-thumb-width: 10px;
+  color-scheme: light;
+  display: inline-flex;
+  width: 240px;
+  min-width: 0;
+  max-width: 100%;
 }
 
-.dc-slider__input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  height: var(--dc-slider-track-height);
-  margin: calc((var(--dc-slider-thumb-height) - var(--dc-slider-track-height)) / 2) 0;
+.dc-slider_range {
+  margin: 0;
   padding: 0;
-  border-radius: 2px;
-  background: var(--dc-slider-track-bg);
-}
-
-.dc-slider__input:focus {
-  outline: none;
-}
-
-.dc-slider__input::-webkit-slider-thumb {
-  -webkit-appearance: none;
-          appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  width: var(--dc-slider-thumb-width);
-  height: var(--dc-slider-thumb-height);
-  border: none;
-  border-radius: 50%;
-  background: var(--dc-slider-thumb-bg);
-  box-shadow: var(--dc-slider-thumb-shadow);
-}
-
-.dc-slider__input::-moz-range-thumb {
-  -moz-appearance: none;
-       appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  width: var(--dc-slider-thumb-width);
-  height: var(--dc-slider-thumb-height);
-  border: none;
-  border-radius: 50%;
-  background: var(--dc-slider-thumb-bg);
-  box-shadow: var(--dc-slider-thumb-shadow);
-}
-
-.dc-slider__input::-ms-thumb {
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  width: var(--dc-slider-thumb-width);
-  height: var(--dc-slider-thumb-height);
   border: none;
-  border-radius: 50%;
-  background: var(--dc-slider-thumb-bg);
-  box-shadow: var(--dc-slider-thumb-shadow);
-}
-
-.dc-slider__input:disabled::-webkit-slider-thumb {
-  cursor: default;
 }
 
-.dc-slider__input:disabled::-moz-range-thumb {
-  cursor: default;
-}
-
-.dc-slider__input:disabled::-ms-thumb {
-  cursor: default;
-}
-
-.dc-slider__input:focus::-webkit-slider-thumb {
-  box-shadow: var(--dc-slider-thumb-shadow-focus);
-}
-
-.dc-slider__input:focus::-moz-range-thumb {
-  box-shadow: var(--dc-slider-thumb-shadow-focus);
-}
-
-.dc-slider__input:focus::-ms-thumb {
-  box-shadow: var(--dc-slider-thumb-shadow-focus);
-}
-
-.dc-slider_thumb_rect .dc-slider__input::-webkit-slider-thumb {
-  border-radius: calc(var(--dc-slider-thumb-width) / 2);
-}
-
-.dc-slider_thumb_rect .dc-slider__input::-moz-range-thumb {
-  border-radius: calc(var(--dc-slider-thumb-width) / 2);
-}
-
-.dc-slider_thumb_rect .dc-slider__input::-ms-thumb {
-  border-radius: calc(var(--dc-slider-thumb-width) / 2);
+.dc-slider_disabled {
+  opacity: var(--dc-disabled-state-opacity);
 }
 
-.dc-slider__tick-marks {
+.dc-slider_full-width {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-top: 4px;
-}
-
-.dc-slider-tick-mark {
-  font-size: 12px;
-  color: var(--dc-slider-tick-label-color);
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  width: var(--dc-slider-thumb-width);
-  text-align: center;
-  white-space: nowrap;
-}
-
-.dc-slider-tick-mark::before {
-  content: "";
-  display: inline-block;
-  flex: none;
-  width: 2px;
-  height: 8px;
-  background: var(--dc-slider-tick-color);
-}
-
-.dc-slider-tick-mark__label {
-  padding-top: 4px;
-}
-
-.dc-slider-range {
-  --dc-slider-range-active-track-left: 0%;
-  --dc-slider-range-active-track-right: 0%;
-  --dc-slider-range-labels-margin-bottom: 12px;
-  --dc-slider-range-tick-marks-margin-top: 2px;
-
-  /* Label properties */
-  --dc-slider-range-label-height: 24px;
-  --dc-slider-range-label-padding-x: 8px;
-  --dc-slider-range-label-radius: 6px;
-  --dc-slider-range-label-text-color: var(--dc-white);
-  --dc-slider-range-label-bg: var(--dc-gray-800);
-
-  /* Track properties */
-  --dc-slider-range-track-width: 100%;
-  --dc-slider-range-track-height: 4px;
-  --dc-slider-range-track-radius: 0;
-  --dc-slider-range-track-border-color: transparent;
-  --dc-slider-range-track-bg: var(--dc-control-bg-inset);
-  --dc-slider-range-active-track-bg: var(--dc-control-primary-color);
-
-  /* Thumb properties */
-  --dc-slider-range-thumb-width: 20px;
-  --dc-slider-range-thumb-height: 20px;
-  --dc-slider-range-thumb-border: 4px solid var(--dc-control-primary-color);
-  --dc-slider-range-thumb-radius: 50%;
-  --dc-slider-range-thumb-bg: var(--dc-control-bg);
-  --dc-slider-range-thumb-shadow: 0 0 0 transparent;
-  --dc-slider-focus-ring:
-    var(--dc-slider-range-thumb-shadow),
-    0 0 0 1px white,
-    0 0 0 4px var(--dc-focus-ring-color);
-
-  /* Tick mark properties */
-  --dc-slider-range-tick-mark-font: var(--dc-text-xs);
-  --dc-slider-range-tick-mark-gap: 4px;
-  --dc-slider-range-tick-mark-width: 2px;
-  --dc-slider-range-tick-mark-height: 8px;
-  --dc-slider-range-tick-mark-color: var(--dc-control-border-color);
-  --dc-slider-range-tick-mark-label-color: var(--dc-control-secondary-text-color);
-
-  color-scheme: light;
-  font-family: var(--dc-primary-font);
-  position: relative;
-}
-
-.dc-slider-range__labels-container {
-  position: relative;
   width: 100%;
-  height: var(--dc-slider-range-thumb-height);
-  margin-bottom: var(--dc-slider-range-labels-margin-bottom);
-  border: none;
 }
 
-.dc-slider-range__label {
-  font: var(--dc-text-xs);
-  color: var(--dc-slider-range-label-text-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: inline-flex;
+.dc-slider__body {
+  color: var(--dc-slider-icon-color);
+  display: flex;
+  gap: 8px;
   align-items: center;
-  box-sizing: border-box;
-  height: var(--dc-slider-range-label-height);
-  max-width: 100%;
-  padding: 0 var(--dc-slider-range-label-padding-x);
-  text-align: center;
-  border-radius: var(--dc-slider-range-label-radius);
-  background: var(--dc-slider-range-label-bg);
-  font-variant-numeric: tabular-nums;
+  width: 100%;
+  min-height: var(--dc-slider-thumb-height);
 }
 
-.dc-slider-range__label[hidden] {
-  opacity: 0;
-  pointer-events: none;
+.dc-slider__body_has_label {
+  margin-top: calc(
+    var(--dc-slider-label-height) +
+    var(--dc-slider-label-gap)
+  );
 }
 
-.dc-slider-range__label-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.dc-slider__body_has_tick-marks {
+  margin-bottom: calc(
+    var(--dc-slider-tick-mark-height) -
+    var(--dc-slider-thumb-height) / 2 +
+    var(--dc-slider-track-height) / 2 +
+    var(--dc-slider-tick-marks-gap)
+  );
 }
 
-.dc-slider-range__track {
+.dc-slider__track {
   position: relative;
-  display: block;
-  width: var(--dc-slider-range-track-width);
-  height: max(var(--dc-slider-range-track-height), var(--dc-slider-range-thumb-height));
-}
-
-.dc-slider-range__track::before,
-.dc-slider-range__track::after {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  top: 50%;
-  display: block;
-  box-sizing: border-box;
-  height: var(--dc-slider-range-track-height);
-  transform: translateY(-50%);
-  border-radius: var(--dc-slider-range-track-radius);
-}
-
-.dc-slider-range__track::before {
   width: 100%;
-  background: var(--dc-slider-range-track-bg);
-  box-shadow: inset 0 0 0 1px var(--dc-slider-range-track-border-color);
-}
-
-.dc-slider-range__track::after {
-  right: var(--dc-slider-range-active-track-right);
-  left: var(--dc-slider-range-active-track-left);
-  background: var(--dc-slider-range-active-track-bg);
-}
-
-.dc-slider-range_disabled .dc-slider-range__track {
-  opacity: var(--dc-disabled-state-opacity);
+  height: var(--dc-slider-track-height);
+  border-radius: var(--dc-slider-track-radius);
+  background-color: var(--dc-slider-track-bg);
 }
 
-.dc-slider-range__input {
+.dc-slider__input {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   position: absolute;
-  z-index: 1;
   top: 0;
   left: 0;
-  cursor: default;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
-  pointer-events: none;
+  border: none;
   background: none;
 }
 
-.dc-slider-range__input_active {
-  z-index: 2;
+.dc-slider__input:focus {
+  outline: none;
 }
 
-.dc-slider-range__input:focus {
-  outline: none;
+.dc-slider_range .dc-slider__input {
+  pointer-events: none;
+}
+
+.dc-slider__input::-moz-range-track {
+  -moz-appearance: none;
+       appearance: none;
+  background: none;
 }
 
-.dc-slider-range__input::-webkit-slider-runnable-track {
+.dc-slider__input::-webkit-slider-runnable-track {
   -webkit-appearance: none;
           appearance: none;
-  width: 100%;
-  height: 100%;
   background: none;
 }
 
-.dc-slider-range__input::-moz-range-track {
+.dc-slider__input::-moz-range-thumb {
   -moz-appearance: none;
        appearance: none;
-  width: 100%;
-  height: 100%;
-  background: none;
+  display: inline-flex;
+  box-sizing: border-box;
+  width: var(--dc-slider-thumb-width);
+  height: var(--dc-slider-thumb-height);
+  -moz-transition: var(--dc-slider-thumb-transition);
+  transition: var(--dc-slider-thumb-transition);
+  border: var(--dc-slider-thumb-border);
+  border-radius: var(--dc-slider-thumb-radius);
+  background: var(--dc-slider-thumb-bg);
+  box-shadow: var(--dc-slider-thumb-shadow);
+}
+
+.dc-slider_range .dc-slider__input::-moz-range-thumb {
+  pointer-events: all;
 }
 
-.dc-slider-range__input::-webkit-slider-thumb {
+.dc-slider__input:focus::-moz-range-thumb {
+  box-shadow: var(--dc-slider-thumb-focus-ring);
+}
+
+.dc-slider__input:focus:not(:focus-visible)::-moz-range-thumb {
+  box-shadow: var(--dc-slider-thumb-shadow);
+}
+
+.dc-slider__input::-webkit-slider-thumb {
   -webkit-appearance: none;
           appearance: none;
   display: inline-block;
   box-sizing: border-box;
-  width: var(--dc-slider-range-thumb-width);
-  height: var(--dc-slider-range-thumb-height);
-  margin: 0;
-  padding: 0;
+  width: var(--dc-slider-thumb-width);
+  height: var(--dc-slider-thumb-height);
+  -webkit-transition: var(--dc-slider-thumb-transition);
+  transition: var(--dc-slider-thumb-transition);
+  border: var(--dc-slider-thumb-border);
+  border-radius: var(--dc-slider-thumb-radius);
+  background: var(--dc-slider-thumb-bg);
+  box-shadow: var(--dc-slider-thumb-shadow);
+}
+
+.dc-slider_range .dc-slider__input::-webkit-slider-thumb {
   pointer-events: all;
-  border: var(--dc-slider-range-thumb-border);
-  border-radius: var(--dc-slider-range-thumb-radius);
-  background: var(--dc-slider-range-thumb-bg);
-  box-shadow: var(--dc-slider-range-thumb-shadow);
 }
 
-.dc-slider-range__input:focus::-webkit-slider-thumb {
-  box-shadow: var(--dc-slider-focus-ring);
+.dc-slider__input:focus::-webkit-slider-thumb {
+  box-shadow: var(--dc-slider-thumb-focus-ring);
 }
 
-.dc-slider-range input::-moz-range-thumb {
-  -moz-appearance: none;
-       appearance: none;
-  display: inline-block;
+.dc-slider__input:focus:not(:focus-visible)::-webkit-slider-thumb {
+  box-shadow: var(--dc-slider-thumb-shadow);
+}
+
+.dc-slider__input-label {
+  font: var(--dc-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--dc-slider-label-text-color);
+  position: absolute;
+  bottom: calc(
+    var(--dc-slider-thumb-height) / 2 -
+    var(--dc-slider-track-height) / 2 +
+    var(--dc-slider-label-gap) +
+    var(--dc-slider-track-height)
+  );
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
-  width: var(--dc-slider-range-thumb-width);
-  height: var(--dc-slider-range-thumb-height);
-  margin: 0;
-  padding: 0;
-  pointer-events: all;
-  border: var(--dc-slider-range-thumb-border);
-  border-radius: var(--dc-slider-range-thumb-radius);
-  background: var(--dc-slider-range-thumb-bg);
-  box-shadow: var(--dc-slider-range-thumb-shadow);
+  height: var(--dc-slider-label-height);
+  min-width: var(--dc-slider-label-height);
+  padding: 0 var(--dc-slider-label-padding-x);
+  transform: translateX(-50%);
+  border: var(--dc-slider-label-border);
+  border-radius: var(--dc-slider-label-radius);
+  background: var(--dc-slider-label-bg);
 }
 
-.dc-slider-range__input:focus::-moz-range-thumb {
-  box-shadow: var(--dc-slider-focus-ring);
+.dc-slider__input_active,
+.dc-slider__input-label_active {
+  z-index: 1;
 }
 
-.dc-slider-range__tick-marks {
-  display: flex;
-  justify-content: space-between;
+.dc-slider__tick-marks {
+  position: relative;
+  top: calc(
+    var(--dc-slider-track-height) +
+    var(--dc-slider-tick-marks-gap)
+  );
+  left: 0;
   width: 100%;
-  margin: var(--dc-slider-range-tick-marks-margin-top) 0 0;
+  height: var(--dc-slider-tick-mark-height);
+  margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.dc-slider-range__tick-marks > li {
-  font: var(--dc-slider-range-tick-mark-font);
-  color: var(--dc-slider-range-tick-mark-label-color);
-  display: inline-flex;
-  cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-direction: column;
-  gap: var(--dc-slider-range-tick-mark-gap);
-  align-items: center;
-  width: var(--dc-slider-range-thumb-width);
-  min-width: var(--dc-slider-range-thumb-width);
-  white-space: nowrap;
-}
-
-.dc-slider-range__tick-marks > li::before {
-  content: "";
+.dc-slider__tick-marks > li {
+  position: absolute;
+  top: 0;
+  left: 0;
   display: inline-flex;
-  flex-shrink: 0;
-  width: var(--dc-slider-range-tick-mark-width);
-  height: var(--dc-slider-range-tick-mark-height);
-  background: var(--dc-slider-range-tick-mark-color);
+  width: var(--dc-slider-tick-mark-width);
+  height: var(--dc-slider-tick-mark-height);
+  transform: translateX(-50%);
+  background: var(--dc-slider-tick-mark-color);
 }
 
 .dc-file-picker {

package/css/draft-components.dark.css

@@ -401,7 +401,18 @@
 
 .dark .dc-slider,
 .dark.dc-slider {
-  color-scheme: dark;
+  /* Thumb properties */
+  --dc-slider-thumb-border: 2px solid var(--dc-gray-200);
+  --dc-slider-thumb-focus-ring:
+    var(--dc-slider-thumb-shadow),
+    0 0 0 4px var(--dc-focus-ring-color);
+
+  /* Label properties */
+  --dc-slider-label-border: 1px solid var(--dc-gray-600);
+  --dc-slider-label-bg: var(--dc-gray-700);
+
+  /* Tick mark properties */
+  --dc-slider-tick-mark-color: rgb(var(--dc-gray-50-rgb) / 0.5);
 }
 
 .dark .dc-file-picker,

package/dist/components/index.d.ts

@@ -28,7 +28,6 @@ export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './selection-control/index.js';
 export * from './slide-over/index.js';
-export * from './slider-range/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';

package/dist/components/index.js

@@ -28,7 +28,6 @@ export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './selection-control/index.js';
 export * from './slide-over/index.js';
-export * from './slider-range/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';

package/dist/components/slider/get-offset-relative-to-thumb.d.ts

@@ -0,0 +1 @@
+export declare function getOffsetRelativeToThumb(position: number): string;

package/dist/components/slider/get-offset-relative-to-thumb.js

@@ -0,0 +1,8 @@
+import { formatNumber, formatPercent } from '../../lib/index.js';
+export function getOffsetRelativeToThumb(position) {
+    return 'calc(' +
+        `${formatPercent(position)} - ` +
+        `var(--dc-slider-thumb-width) * ${formatNumber(position / 2)} + ` +
+        `var(--dc-slider-thumb-width) * ${formatNumber((1 - position) / 2)}` +
+        ')';
+}

package/dist/components/slider/index.d.ts

@@ -1,2 +1,3 @@
+export { type SliderTickMark } from './slider-tick-marks.js';
 export * from './slider.js';
-export { SliderTickMarks } from './slider-tick-marks.js';
+export * from './range-slider.js';

package/dist/components/slider/index.js

@@ -1,2 +1,2 @@
 export * from './slider.js';
-export { SliderTickMarks } from './slider-tick-marks.js';
+export * from './range-slider.js';

package/dist/components/slider/range-slider.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SliderTickMark } from './slider-track.js';
+export type RangeSliderValue = {
+    readonly min: number;
+    readonly max: number;
+};
+export type RangeSliderProps = {
+    'aria-label'?: string;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    showLabel?: boolean;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    tickMarks?: SliderTickMark[];
+    name?: string;
+    step?: number;
+    min?: number;
+    minThumbName?: string;
+    minThumbAriaLabel?: string;
+    max?: number;
+    maxThumbName?: string;
+    maxThumbAriaLabel?: string;
+    value: RangeSliderValue;
+    onChange: (value: RangeSliderValue) => void;
+    formatValue?: (value: number) => ReactNode;
+};
+export declare function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step, min, minThumbName, minThumbAriaLabel, max, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/range-slider.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { SliderTrack } from './slider-track.js';
+import { SliderThumb } from './slider-thumb.js';
+import { classNames } from '../../lib/index.js';
+import { SliderTickMarks } from './slider-tick-marks.js';
+const numberFormatter = new Intl.NumberFormat();
+export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel = true, iconLeft, iconRight, tickMarks, step = 1, min = 0, minThumbName, minThumbAriaLabel, max = 100, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue = numberFormatter.format, }) {
+    const defaultId = useId();
+    const [focusedThumb, setFocusedThumb] = useState('min');
+    const positionMin = range.min / (max - min);
+    const positionMax = range.max / (max - min);
+    let dataListId;
+    let tickMarksElement;
+    if (tickMarks && tickMarks.length > 0) {
+        dataListId = `${defaultId}slider-datalist`;
+        tickMarksElement = (_jsx(SliderTickMarks, { tickMarks: tickMarks, dataListId: dataListId, min: min, max: max }));
+    }
+    const handleChangeMin = (value) => {
+        onChange({
+            ...range,
+            min: Math.min(range.max, value),
+        });
+    };
+    const handleFocusMinThumb = () => {
+        setFocusedThumb('min');
+    };
+    const handleChangeMax = (value) => {
+        onChange({
+            ...range,
+            max: Math.max(range.min, value),
+        });
+    };
+    const handleFocusMaxThumb = () => {
+        setFocusedThumb('max');
+    };
+    return (_jsx("fieldset", { id: id, style: style, className: classNames(className, {
+            'dc-slider': true,
+            'dc-slider_range': true,
+            'dc-slider_disabled': disabled,
+            'dc-slider_full-width': fullWidth,
+        }), name: name, disabled: disabled, "aria-label": ariaLabel, children: _jsxs("div", { className: classNames({
+                'dc-slider__body': true,
+                'dc-slider__body_has_label': showLabel,
+                'dc-slider__body_has_tick-marks': tickMarksElement,
+            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: positionMin, positionEnd: positionMax, children: [tickMarksElement, _jsx(SliderThumb, { name: minThumbName || (name && `${name}[min]`), active: focusedThumb === 'min', "aria-label": minThumbAriaLabel, showLabel: showLabel, dataListId: dataListId, position: positionMin, step: step, min: min, max: max, value: range.min, formatValue: formatValue, onChange: handleChangeMin, onFocus: handleFocusMinThumb }), _jsx(SliderThumb, { name: maxThumbName || (name && `${name}[max]`), active: focusedThumb === 'max', "aria-label": maxThumbAriaLabel, showLabel: showLabel, dataListId: dataListId, position: positionMax, step: step, min: min, max: max, value: range.max, formatValue: formatValue, onChange: handleChangeMax, onFocus: handleFocusMaxThumb })] }), iconRight] }) }));
+}

package/dist/components/slider/slider-thumb.d.ts

@@ -0,0 +1,20 @@
+import { FocusEventHandler, ReactNode } from 'react';
+export type SliderThumbProps = {
+    'aria-label'?: string;
+    id?: string;
+    name?: string;
+    active?: boolean;
+    disabled?: boolean;
+    showLabel?: boolean;
+    dataListId?: string;
+    position: number;
+    step: number;
+    min: number;
+    max: number;
+    value: number;
+    formatValue: (value: number) => ReactNode;
+    onChange: (value: number) => void;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+};
+export declare function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, formatValue, onChange, onFocus, onBlur, }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider-thumb.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getOffsetRelativeToThumb } from './get-offset-relative-to-thumb.js';
+import { classNames } from '../../lib/index.js';
+export function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, formatValue, onChange, onFocus, onBlur, }) {
+    const handleChange = (event) => {
+        onChange(event.target.valueAsNumber);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { id: id, className: classNames({
+                    'dc-slider__input': true,
+                    'dc-slider__input_active': active,
+                }), type: "range", name: name, "aria-label": ariaLabel, list: dataListId, step: step, min: min, max: max, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }), showLabel && (_jsx("output", { style: { left: getOffsetRelativeToThumb(position) }, className: classNames({
+                    'dc-slider__input-label': true,
+                    'dc-slider__input-label_active': active,
+                }), htmlFor: id, children: formatValue(value) }))] }));
+}

package/dist/components/slider/slider-tick-marks.d.ts

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
-export type RenderTickMarkLabel = (index: number) => ReactNode;
+export type SliderTickMark = {
+    value: number;
+    label?: ReactNode;
+};
 export type SliderTickMarksProps = {
-    tickMarksCount: number;
-    renderTickMarkLabel?: RenderTickMarkLabel;
+    dataListId: string;
+    min: number;
+    max: number;
+    tickMarks: SliderTickMark[];
 };
-export declare function SliderTickMarks({ tickMarksCount, renderTickMarkLabel, }: SliderTickMarksProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SliderTickMarks({ dataListId, min, max, tickMarks, }: SliderTickMarksProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider-tick-marks.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function SliderTickMarks({ tickMarksCount, renderTickMarkLabel, }) {
-    if (tickMarksCount < 1) {
-        return null;
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getOffsetRelativeToThumb } from './get-offset-relative-to-thumb.js';
+export function SliderTickMarks({ dataListId, min, max, tickMarks, }) {
+    const options = [];
+    const listItems = [];
+    for (let index = 0; index < tickMarks.length; index += 1) {
+        const { value, label } = tickMarks[index];
+        const key = `tick-mark-${value}:${index}`;
+        options.push(_jsx("option", { value: value, "data-testid": "slider-data-list-option", children: label }, key));
+        listItems.push(_jsx("li", { className: "dc-slider__tick-mark", "data-value": value, style: { left: getOffsetRelativeToThumb(value / (max - min)) } }, key));
     }
-    const tickMarks = [];
-    for (let index = 0; index < tickMarksCount; index += 1) {
-        const label = renderTickMarkLabel?.(index);
-        tickMarks.push((_jsx("div", { className: "dc-slider-tick-mark", "data-testid": "tick-mark", children: Boolean(label) && (_jsx("span", { className: "dc-slider-tick-mark__label", children: label })) }, index)));
-    }
-    return _jsx("div", { className: "dc-slider__tick-marks", children: tickMarks });
+    return (_jsxs(_Fragment, { children: [_jsx("datalist", { id: dataListId, children: options }), _jsx("ol", { className: "dc-slider__tick-marks", children: listItems })] }));
 }

package/dist/components/slider/slider-track.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type SliderTickMark = {
+    value: number;
+    label?: ReactNode;
+};
+export type SliderTrackProps = {
+    positionStart: number;
+    positionEnd: number;
+    children: ReactNode;
+};
+export declare function SliderTrack({ positionStart, positionEnd, children, }: SliderTrackProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider-track.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatPercent } from '../../lib/index.js';
+export function SliderTrack({ positionStart, positionEnd, children, }) {
+    const start = formatPercent(positionStart);
+    const end = formatPercent(positionEnd);
+    const background = 'linear-gradient(' +
+        'to right, ' +
+        `var(--dc-slider-track-bg) ${start}, ` +
+        `var(--dc-slider-active-track-bg) ${start}, ` +
+        `var(--dc-slider-active-track-bg) ${end}, ` +
+        `var(--dc-slider-track-bg) ${end}` +
+        ')';
+    return (_jsx("div", { style: { background }, className: "dc-slider__track", children: children }));
+}

package/dist/components/slider/slider.d.ts

@@ -1,17 +1,22 @@
-import { ComponentPropsWithRef } from 'react';
-import { SliderTickMarksProps } from './slider-tick-marks.js';
-type SliderHTMLProps = ComponentPropsWithRef<'input'>;
-type SliderBaseProps = Omit<SliderHTMLProps, 'type' | 'min' | 'max' | 'step' | 'value' | 'defaultValue'>;
-export type SliderThumbStyle = 'round' | 'rect';
-export type SliderChangeValueHandler = (value: number) => void;
+import { CSSProperties, ReactNode } from 'react';
+import { SliderTickMark } from './slider-track.js';
 export type SliderProps = {
-    thumbStyle?: SliderThumbStyle;
+    'aria-label'?: string;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    showLabel?: boolean;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    tickMarks?: SliderTickMark[];
+    name?: string;
     step?: number;
     min?: number;
     max?: number;
-    value?: number;
-    defaultValue?: number;
-    onChangeValue?: SliderChangeValueHandler;
-} & SliderBaseProps & Partial<SliderTickMarksProps>;
-export declare const Slider: import("react").ForwardRefExoticComponent<Omit<SliderProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+    value: number;
+    onChange: (value: number) => void;
+    formatValue?: (value: number) => ReactNode;
+};
+export declare function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step, min, max, name, value, onChange, formatValue, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider.js

@@ -1,36 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { classNames } from '../../lib/react-helpers.js';
+import { useId } from 'react';
+import { SliderTrack } from './slider-track.js';
+import { SliderThumb } from './slider-thumb.js';
+import { classNames } from '../../lib/index.js';
 import { SliderTickMarks } from './slider-tick-marks.js';
-export const Slider = forwardRef(function Slider({ thumbStyle = 'round', tickMarksCount = 0, renderTickMarkLabel, step = 1, min = 0, max = 100, style, className, disabled, value, defaultValue, onChange, onChangeValue, ...props }, ref) {
-    defaultValue = value == null ? defaultValue || 0 : undefined;
-    return (_jsxs("div", { style: style, className: classNames(className, 'dc-slider', {
-            [`dc-slider_thumb_${thumbStyle}`]: thumbStyle !== undefined,
+const numberFormatter = new Intl.NumberFormat();
+export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel = true, iconLeft, iconRight, tickMarks, step = 1, min = 0, max = 100, name, value, onChange, formatValue = numberFormatter.format, }) {
+    const defaultId = useId();
+    const thumbId = id || `${defaultId}slider-thumb`;
+    const position = value / (max - min);
+    let dataListId;
+    let tickMarksElement;
+    if (tickMarks && tickMarks.length > 0) {
+        dataListId = `${defaultId}slider-datalist`;
+        tickMarksElement = (_jsx(SliderTickMarks, { tickMarks: tickMarks, dataListId: dataListId, min: min, max: max }));
+    }
+    return (_jsx("div", { style: style, className: classNames(className, {
+            'dc-slider': true,
             'dc-slider_disabled': disabled,
-        }), children: [_jsx("input", { ...props, ref: ref, style: {
-                    background: getTrackBackground({
-                        min,
-                        max,
-                        value: value ?? defaultValue,
-                    }),
-                }, className: "dc-slider__input", type: "range", value: value, defaultValue: defaultValue, min: min, max: max, step: step, disabled: disabled, onChange: (event) => {
-                    const target = event.target;
-                    const value = Number(target.value);
-                    onChange?.(event);
-                    onChangeValue?.(value);
-                    target.style.background = getTrackBackground({ min, max, value });
-                } }), _jsx(SliderTickMarks, { tickMarksCount: tickMarksCount, renderTickMarkLabel: renderTickMarkLabel })] }));
-});
-function getTrackBackground(params) {
-    const value = params.value || 0;
-    const min = params.min || 0;
-    const max = params.max || 0;
-    const valuePct = ((value - min) / (max - min) * 100).toFixed(2);
-    return `linear-gradient(
-    to right,
-    var(--dc-slider-track-bg-fill) 0%,
-    var(--dc-slider-track-bg-fill) ${valuePct}%,
-    var(--dc-slider-track-bg) ${valuePct}%,
-    var(--dc-slider-track-bg) ${valuePct}%
-  )`;
+            'dc-slider_full-width': fullWidth,
+        }), children: _jsxs("div", { className: classNames({
+                'dc-slider__body': true,
+                'dc-slider__body_has_label': showLabel,
+                'dc-slider__body_has_tick-marks': tickMarksElement,
+            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: 0, positionEnd: position, children: [tickMarksElement, _jsx(SliderThumb, { id: thumbId, name: name, "aria-label": ariaLabel, disabled: disabled, showLabel: showLabel, dataListId: dataListId, position: position, step: step, min: min, max: max, value: value, onChange: onChange, formatValue: formatValue })] }), iconRight] }) }));
 }

package/dist/lib/react-helpers.d.ts

@@ -12,4 +12,3 @@ export type ReactElementWithRef = ReactElement & {
 export declare function isReactElementWithRef(element: unknown): element is ReactElementWithRef;
 export declare function focusElement(element: EventTarget | null | undefined): void;
 export declare function getRefElement<T extends HTMLElement>(ref: RefObject<T> | MutableRefObject<T>, message?: string): NonNullable<T>;
-export declare function getCustomPropertyValue(element: HTMLElement, property: string): string;

package/dist/lib/react-helpers.js

@@ -47,6 +47,3 @@ export function getRefElement(ref, message = 'getElementFromRef: ref value is nu
     }
     return value;
 }
-export function getCustomPropertyValue(element, property) {
-    return window.getComputedStyle(element).getPropertyValue(property) || '';
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/dist/components/slider-range/index.d.ts

@@ -1,2 +0,0 @@
-export * from './slider-range.js';
-export { type SliderRangeTickMarkDescriptor } from './slider-range-data-list.js';

package/dist/components/slider-range/index.js

@@ -1 +0,0 @@
-export * from './slider-range.js';

package/dist/components/slider-range/slider-range-data-list.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-export type SliderRangeTickMarkDescriptor = {
-    value: number;
-    label?: ReactNode;
-};
-export declare function SliderRangeDataList({ className, id, tickMarks, }: {
-    className?: string;
-    id: string;
-    tickMarks: SliderRangeTickMarkDescriptor[];
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider-range/slider-range-data-list.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../lib/index.js';
-export function SliderRangeDataList({ className, id, tickMarks, }) {
-    const renderedOptions = [];
-    const renderedTickMarks = [];
-    for (const { value, label } of tickMarks) {
-        const key = `${value}-tick-mark`;
-        renderedOptions.push(_jsx("option", { value: value }, key));
-        renderedTickMarks.push(_jsx("li", { children: label }, key));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("datalist", { id: id, children: renderedOptions }), _jsx("ol", { className: classNames('dc-slider-range__tick-marks', className), children: renderedTickMarks })] }));
-}

package/dist/components/slider-range/slider-range-label.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-type SliderRangeLabelProps = {
-    className?: string;
-    hidden?: boolean;
-    htmlFor: string | string[];
-    children: ReactNode;
-};
-export declare const SliderRangeLabel: import("react").ForwardRefExoticComponent<SliderRangeLabelProps & import("react").RefAttributes<HTMLOutputElement>>;
-export {};

package/dist/components/slider-range/slider-range-label.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { classNames } from '../../lib/index.js';
-export const SliderRangeLabel = forwardRef(({ className, hidden, htmlFor, children, }, ref) => (_jsx("output", { ref: ref, hidden: hidden, htmlFor: Array.isArray(htmlFor) ? htmlFor.join(' ') : htmlFor, className: classNames('dc-slider-range__label', className), children: _jsx("span", { className: "dc-slider-range__label-text", children: children }) })));
-SliderRangeLabel.displayName = 'SliderRangeLabel';

package/dist/components/slider-range/slider-range.d.ts

@@ -1,20 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { SliderRangeTickMarkDescriptor } from './slider-range-data-list.js';
-export type SliderRangeValue = {
-    readonly min: number;
-    readonly max: number;
-};
-export type SliderRangeProps = {
-    style?: CSSProperties;
-    className?: string;
-    tickMarks?: SliderRangeTickMarkDescriptor[];
-    disabled?: boolean;
-    min?: number;
-    max?: number;
-    step?: number;
-    name?: string;
-    value: SliderRangeValue;
-    onChange: (value: SliderRangeValue) => void;
-    renderValue?: (value: number) => ReactNode;
-};
-export declare function SliderRange({ style, className, tickMarks, disabled, min, max, step, name, value: range, onChange: onChangeRange, renderValue, }: SliderRangeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider-range/slider-range.js

@@ -1,147 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useRef, useState, } from 'react';
-import { classNames, formatNumber, formatPercent, getCustomPropertyValue } from '../../lib/index.js';
-import { SliderRangeLabel } from './slider-range-label.js';
-import { SliderRangeDataList } from './slider-range-data-list.js';
-const inputKeys = ['min', 'max'];
-const numberFormatter = new Intl.NumberFormat();
-export function SliderRange({ style, className, tickMarks, disabled, min = 0, max = 100, step = 1, name, value: range, onChange: onChangeRange, renderValue = numberFormatter.format, }) {
-    const id = useId();
-    const containerRef = useRef(null);
-    const labelsContainerRef = useRef(null);
-    const minValueLabelRef = useRef(null);
-    const maxValueLabelRef = useRef(null);
-    const rangeLabelRef = useRef(null);
-    const [focusedInputKey, setFocusedInputKey] = useState('min');
-    let dataListId;
-    let dataList;
-    if (tickMarks && tickMarks.length > 0) {
-        dataListId = `${id}data-list`;
-        dataList = _jsx(SliderRangeDataList, { id: dataListId, tickMarks: tickMarks });
-    }
-    const handleFocus = (key) => () => {
-        setFocusedInputKey(key);
-    };
-    const handleChange = (key) => (event) => {
-        const value = Number(event.target.value);
-        const { min, max } = range;
-        if (key === 'min') {
-            onChangeRange({ max, min: Math.min(max, value) });
-        }
-        else {
-            onChangeRange({ min, max: Math.max(min, value) });
-        }
-    };
-    const activeTrackLeft = calcTrackOffsetInPercent(range.min, {
-        min,
-        max,
-        step,
-    });
-    const activeTrackRight = calcTrackOffsetInPercent(range.max, {
-        min,
-        max,
-        step,
-    });
-    useLayoutEffect(() => {
-        const container = containerRef.current;
-        if (!container) {
-            throw new Error('container ref is not set');
-        }
-        const labelsContainer = labelsContainerRef.current;
-        if (!labelsContainer) {
-            throw new Error('labelsContainer ref is not set');
-        }
-        const minLabel = minValueLabelRef.current;
-        if (!minLabel) {
-            throw new Error('minValueLabel ref is not set');
-        }
-        const maxLabel = maxValueLabelRef.current;
-        if (!maxLabel) {
-            throw new Error('maxValueLabel ref is not set');
-        }
-        const rangeLabel = rangeLabelRef.current;
-        if (!rangeLabel) {
-            throw new Error('rangeLabel ref is not set');
-        }
-        const resizeObserver = new ResizeObserver(() => {
-            const thumbWidth = parseFloat(getCustomPropertyValue(container, '--dc-slider-range-thumb-width'));
-            const labelsContainerWidth = getElementWidth(labelsContainer);
-            const minLabelWidth = getElementWidth(minLabel);
-            const maxLabelWidth = getElementWidth(maxLabel);
-            const rangeLabelWidth = getElementWidth(rangeLabel);
-            const minLabelOffset = calcLabelOffsetInPixels(minLabelWidth, {
-                thumbWidth,
-                containerWidth: labelsContainerWidth,
-                offsetInPercent: activeTrackLeft,
-            });
-            setElementTranslateX(minLabel, minLabelOffset);
-            const maxLabelOffset = calcLabelOffsetInPixels(maxLabelWidth, {
-                thumbWidth,
-                containerWidth: labelsContainerWidth,
-                offsetInPercent: activeTrackRight,
-            });
-            setElementTranslateX(maxLabel, maxLabelOffset);
-            let rangeLabelOffset;
-            if (focusedInputKey === 'max') {
-                rangeLabelOffset = minLabelOffset;
-            }
-            else {
-                rangeLabelOffset = (maxLabelOffset + maxLabelWidth) - rangeLabelWidth;
-            }
-            setElementTranslateX(rangeLabel, rangeLabelOffset);
-            const shouldShowRangeLabel = (minLabelOffset + minLabelWidth) >= maxLabelOffset;
-            if (shouldShowRangeLabel) {
-                minLabel.hidden = true;
-                maxLabel.hidden = true;
-                rangeLabel.hidden = false;
-            }
-            else {
-                minLabel.hidden = false;
-                maxLabel.hidden = false;
-                rangeLabel.hidden = true;
-            }
-        });
-        resizeObserver.observe(labelsContainer);
-        return () => resizeObserver.unobserve(labelsContainer);
-    }, [focusedInputKey, activeTrackLeft, activeTrackRight]);
-    return (_jsxs("div", { ref: containerRef, style: {
-            ...style,
-            '--dc-slider-range-active-track-left': formatPercent(activeTrackLeft),
-            '--dc-slider-range-active-track-right': formatPercent(1 - activeTrackRight),
-        }, className: classNames(className, {
-            'dc-slider-range': true,
-            'dc-slider-range_disabled': disabled,
-        }), children: [_jsxs("div", { ref: labelsContainerRef, className: "dc-slider-range__labels-container", children: [_jsx(SliderRangeLabel, { ref: minValueLabelRef, htmlFor: generateInputId(id, 'min'), children: renderValue(range.min) }), _jsx(SliderRangeLabel, { ref: maxValueLabelRef, htmlFor: generateInputId(id, 'max'), children: renderValue(range.max) }), _jsx(SliderRangeLabel, { ref: rangeLabelRef, hidden: true, htmlFor: [generateInputId(id, 'min'), generateInputId(id, 'max')], children: range.min === range.max
-                            ? _jsx(_Fragment, { children: renderValue(range.min) })
-                            : _jsxs(_Fragment, { children: [renderValue(range.min), " - ", renderValue(range.max)] }) })] }), _jsx("div", { className: "dc-slider-range__track", children: inputKeys.map((inputKey) => (_jsx("input", { id: generateInputId(id, inputKey), className: classNames({
-                        'dc-slider-range__input': true,
-                        'dc-slider-range__input_active': focusedInputKey === inputKey,
-                    }), type: "range", min: min, max: max, step: step, list: dataListId, name: name ? `${name}[${inputKey}]` : undefined, value: range[inputKey], disabled: disabled, onChange: handleChange(inputKey), onFocus: handleFocus(inputKey) }, inputKey))) }), dataList] }));
-}
-function generateInputId(id, inputKey) {
-    return `${id}input-range-${inputKey}`;
-}
-function calcTrackOffsetInPercent(value, opts) {
-    return Math.round(value / opts.step) * opts.step / (opts.max - opts.min);
-}
-function calcLabelOffsetInPixels(labelWidth, opts) {
-    let offset = ((opts.offsetInPercent * opts.containerWidth) -
-        (opts.offsetInPercent * opts.thumbWidth) -
-        ((labelWidth - opts.thumbWidth) / 2));
-    const min = 0;
-    const max = opts.containerWidth - labelWidth;
-    if (offset < min) {
-        offset = min;
-    }
-    if (offset > max) {
-        offset = max;
-    }
-    return offset;
-}
-function getElementWidth(element) {
-    const rect = element.getBoundingClientRect();
-    return rect.width;
-}
-function setElementTranslateX(element, offsetX) {
-    element.style.transform = `translateX(${formatNumber(offsetX)}px)`;
-}