@agnos-ui/core 0.8.0-next.1 → 0.8.0

package/index.js

@@ -1,14 +1,14 @@
 import { INVALID_VALUE } from "./types.js";
-import { a, c, f, g } from "./accordion-OTiJtxDi.js";
-import { c as c2, g as g2 } from "./alert-DH-mO6WX.js";
-import { c as c3, g as g3, a as a2, m } from "./modal-85Sw8xuV.js";
-import { c as c4, g as g4 } from "./pagination-4g3N8ktf.js";
-import { c as c5, g as g5 } from "./progressbar-BoJsBPH1.js";
-import { c as c6, g as g6 } from "./rating-B3xktzOf.js";
+import { a, c, f, g } from "./accordion-BLVIYePx.js";
+import { c as c2, g as g2 } from "./alert-BpepSIHu.js";
+import { c as c3, g as g3, a as a2, m } from "./modal-CGK3h9pR.js";
+import { c as c4, g as g4 } from "./pagination-CRAKaOuh.js";
+import { c as c5, g as g5 } from "./progressbar-Csnqx_Pk.js";
+import { c as c6, g as g6 } from "./rating-CvTnNxgN.js";
 import { c as c7, g as g7 } from "./select-C-77MJfC.js";
-import { c as c8, g as g8 } from "./slider-Cs69pziL.js";
-import { c as c9, g as g9 } from "./toast-4HGIz3Bu.js";
-import { c as c10, g as g10 } from "./tree-C_goOyCv.js";
+import { c as c8, g as g8 } from "./slider-BF6a0eh_.js";
+import { T, c as c9, d, g as g9 } from "./toaster-PwfLC7FH.js";
+import { c as c10, g as g10 } from "./tree-DUU_TWqy.js";
 import { createWidgetsConfig, mergeInto } from "./config.js";
 import { extendWidgetProps } from "./services/extendWidget.js";
 import { createFloatingUI } from "./services/floatingUI.js";
@@ -23,11 +23,12 @@ import { hash$ } from "./services/hash.js";
 import { createTransition, noAnimation } from "./services/transitions/baseTransitions.js";
 import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
 import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
-import { o, a as a3, c as c11, b, p, n, g as g11, j, f as f2, h, q, d, e, i, m as m2, k, l, r, s } from "./dom-gfxqXJpK.js";
+import { o, a as a3, c as c11, b, p, n, g as g11, j, f as f2, h, q, d as d2, e, i, m as m2, k, l, r, s } from "./dom-gfxqXJpK.js";
 import { bindableDerived, bindableProp, createPatch, false$, findChangedProperties, idWithDefault, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, true$, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
-import { i as i2, t, h as h2, c as c12, d as d2, f as f3, g as g12, a as a4, b as b2, e as e2 } from "./writables-DCiBdIBK.js";
+import { j as j2, t, i as i2, c as c12, d as d3, g as g12, h as h2, a as a4, b as b2, e as e2, f as f3 } from "./writables-CgpOQ4hA.js";
 export {
   INVALID_VALUE,
+  T as Toaster,
   activeElement$,
   o as attributesData,
   a3 as bindDirective,
@@ -62,10 +63,11 @@ export {
   c9 as createToast,
   createTransition,
   c10 as createTree,
-  i2 as createTypeEnum,
+  j2 as createTypeEnum,
   createWidgetsConfig,
+  d as defaultToasterProps,
   q as directiveAttributes,
-  d as directiveSubscribe,
+  d2 as directiveSubscribe,
   e as directiveUpdate,
   extendWidgetProps,
   f as factoryCreateAccordion,
@@ -107,14 +109,15 @@ export {
   toReadableStore,
   toWritableStore,
   true$,
-  h2 as typeArray,
+  i2 as typeArray,
   c12 as typeBoolean,
-  d2 as typeBooleanOrNull,
-  f3 as typeFunction,
-  g12 as typeHTMLElementOrNull,
+  d3 as typeBooleanOrNull,
+  g12 as typeFunction,
+  h2 as typeHTMLElementOrNull,
   a4 as typeNumber,
   b2 as typeNumberInRangeFactory,
   e2 as typeString,
+  f3 as typeStringOrNull,
   writableWithDefault,
   writablesForProps,
   writablesWithDefault

package/{modal-85Sw8xuV.js → modal-CGK3h9pR.js}

@@ -1,5 +1,5 @@
 import { computed, readable } from "@amadeus-it-group/tansu";
-import { c as typeBoolean, f as typeFunction, e as typeString, g as typeHTMLElementOrNull } from "./writables-DCiBdIBK.js";
+import { c as typeBoolean, g as typeFunction, e as typeString, h as typeHTMLElementOrNull } from "./writables-CgpOQ4hA.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { d as promiseFromStore } from "./promise-XSP94FjG.js";

package/{modal-B7bYoubx.cjs → modal-Dw1MuWPV.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 const utils_stores = require("./utils/stores.cjs");
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const promise = require("./promise-CxCD3NYv.cjs");

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/core",
 	"description": "Framework-agnostic headless component library.",
-	"version": "0.8.0-next.1",
+	"version": "0.8.0",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",
@@ -49,6 +49,7 @@
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^2.0.0",
 		"@floating-ui/dom": "^1.6.12",
+		"embla-carousel": "^8.5.2",
 		"esm-env": "^1.2.1"
 	},
 	"sideEffects": false,
@@ -65,6 +66,7 @@
 		"accordion",
 		"AgnosUI",
 		"alert",
+		"carousel",
 		"collapse",
 		"components",
 		"modal",
@@ -73,6 +75,7 @@
 		"rating",
 		"slider",
 		"toast",
+		"tree",
 		"widgets"
 	]
 }

package/{pagination-5YARuB3V.cjs → pagination-BzyKulaI.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 const utils_func = require("./utils/func.cjs");
 const utils_directive = require("./dom-CuBx1JPZ.cjs");
 const PAGE_LINK_DEFAULT = "#";

package/{pagination-4g3N8ktf.js → pagination-CRAKaOuh.js}

@@ -1,6 +1,6 @@
 import { computed } from "@amadeus-it-group/tansu";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
-import { e as typeString, f as typeFunction, c as typeBoolean, a as typeNumber, j as clamp, k as isNumber } from "./writables-DCiBdIBK.js";
+import { e as typeString, g as typeFunction, c as typeBoolean, a as typeNumber, k as clamp, l as isNumber } from "./writables-CgpOQ4hA.js";
 import { noop } from "./utils/func.js";
 import { n as createAttributesDirective } from "./dom-gfxqXJpK.js";
 const PAGE_LINK_DEFAULT = "#";

package/{progressbar-BoJsBPH1.js → progressbar-Csnqx_Pk.js}

@@ -1,4 +1,4 @@
-import { j as clamp, f as typeFunction, e as typeString, a as typeNumber } from "./writables-DCiBdIBK.js";
+import { k as clamp, g as typeFunction, e as typeString, a as typeNumber } from "./writables-CgpOQ4hA.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
 import { computed, readable } from "@amadeus-it-group/tansu";
 import { n as createAttributesDirective } from "./dom-gfxqXJpK.js";

package/{progressbar-BpSrg4HG.cjs → progressbar-D9rvrxXi.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 const utils_stores = require("./utils/stores.cjs");
 const tansu = require("@amadeus-it-group/tansu");
 const utils_directive = require("./dom-CuBx1JPZ.cjs");

package/{rating-C8tn9xTO.cjs → rating-C4c8Paz-.cjs}

@@ -2,7 +2,7 @@
 const tansu = require("@amadeus-it-group/tansu");
 const types = require("./types.cjs");
 const utils_directive = require("./dom-CuBx1JPZ.cjs");
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 const utils_func = require("./utils/func.cjs");
 const utils_stores = require("./utils/stores.cjs");
 const defaultConfig = {

package/{rating-B3xktzOf.js → rating-CvTnNxgN.js}

@@ -1,7 +1,7 @@
 import { computed, writable, readable } from "@amadeus-it-group/tansu";
 import { INVALID_VALUE } from "./types.js";
 import { n as createAttributesDirective } from "./dom-gfxqXJpK.js";
-import { e as typeString, f as typeFunction, c as typeBoolean, a as typeNumber, j as clamp, k as isNumber } from "./writables-DCiBdIBK.js";
+import { e as typeString, g as typeFunction, c as typeBoolean, a as typeNumber, k as clamp, l as isNumber } from "./writables-CgpOQ4hA.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
 const defaultConfig = {

package/services/transitions/baseTransitions.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
-const utils_writables = require("../../writables-BPAJvaL_.cjs");
+const utils_writables = require("../../writables-Bn3uhKEG.cjs");
 const promise = require("../../promise-CxCD3NYv.cjs");
 const utils_func = require("../../utils/func.cjs");
 const utils_stores = require("../../utils/stores.cjs");

package/services/transitions/baseTransitions.js

@@ -1,5 +1,5 @@
 import { computed, writable, derived, batch } from "@amadeus-it-group/tansu";
-import { d as typeBooleanOrNull, f as typeFunction, c as typeBoolean } from "../../writables-DCiBdIBK.js";
+import { d as typeBooleanOrNull, g as typeFunction, c as typeBoolean } from "../../writables-CgpOQ4hA.js";
 import { c as promiseWithResolve } from "../../promise-XSP94FjG.js";
 import { noop } from "../../utils/func.js";
 import { writablesForProps, bindableDerived, stateStores } from "../../utils/stores.js";

package/{slider-B2JFXDLt.cjs → slider-B0ZfAY0K.cjs}

@@ -3,7 +3,7 @@ const tansu = require("@amadeus-it-group/tansu");
 const utils_directive = require("./dom-CuBx1JPZ.cjs");
 const utils_func = require("./utils/func.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 const services_resizeObserver = require("./services/resizeObserver.cjs");
 const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
 function getDecimalPrecision(number) {
@@ -115,6 +115,7 @@ function createSlider(config) {
   ] = utils_stores.writablesForProps(defaultSliderConfig, config, configValidator);
   const { vertical$, disabled$, readonly$ } = stateProps;
   let _prevCoordinate = -1;
+  const _handleElements = /* @__PURE__ */ new Map();
   const min$ = tansu.computed(() => {
     const _dirtyMinimum = _dirtyMinimum$(), _dirtyMaximum = _dirtyMaximum$();
     if (_dirtyMinimum === _dirtyMaximum) {
@@ -146,8 +147,20 @@ function createSlider(config) {
   const { directive: sliderDirective, element$: sliderDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: minLabelDomDirective, element$: minLabelDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: maxLabelDomDirective, element$: maxLabelDom$ } = utils_directive.createBrowserStoreDirective();
+  const { directive: combinedLabelDomDirective, element$: combinedLabelDom$ } = utils_directive.createBrowserStoreDirective();
+  const { directive: handleLabelDirective, elements$: currentLabelDoms$ } = utils_directive.createBrowserStoreArrayDirective();
   const { directive: resizeDirective, dimensions$ } = services_resizeObserver.createResizeObserver();
   const updateSliderSize$ = tansu.writable({});
+  const currentLabelDomsRect$ = tansu.computed(
+    () => {
+      dimensions$();
+      updateSliderSize$();
+      return currentLabelDoms$().map((element) => element.getBoundingClientRect());
+    },
+    {
+      equal: Object.is
+    }
+  );
   const sliderDomRect$ = tansu.computed(
     () => {
       var _a;
@@ -202,17 +215,43 @@ function createSlider(config) {
   });
   const valuesPercent$ = tansu.computed(() => values$().map((val) => percentCompute(val)));
   const sortedValuesPercent$ = tansu.computed(() => [...valuesPercent$()].sort((a, b) => a - b));
-  const minLabelWidth$ = tansu.computed(() => minLabelDomRect$().width / sliderDomRectSize$() * 100);
-  const maxLabelWidth$ = tansu.computed(() => maxLabelDomRect$().width / sliderDomRectSize$() * 100);
+  const minLabelSize$ = tansu.computed(() => {
+    const minLabelDomRect = minLabelDomRect$();
+    return pixelToPercent(vertical$() ? minLabelDomRect.height : minLabelDomRect.width);
+  });
+  const maxLabelSize$ = tansu.computed(() => {
+    const maxLabelDomRect = maxLabelDomRect$();
+    return pixelToPercent(vertical$() ? maxLabelDomRect.height : maxLabelDomRect.width);
+  });
   const adjustedShowValueLabels$ = tansu.computed(() => showValueLabels$() && (!showTicks$() || !showTickValues$()));
+  const pixelToPercent = (pixels) => pixels ? pixels / sliderDomRectSize$() * 100 : 0;
+  const combinedLabelSize$ = tansu.computed(
+    () => {
+      var _a, _b;
+      return pixelToPercent(vertical$() ? (_a = combinedLabelDom$()) == null ? void 0 : _a.getBoundingClientRect().height : (_b = combinedLabelDom$()) == null ? void 0 : _b.getBoundingClientRect().width);
+    }
+  );
+  const combinedLabelPosition$ = tansu.computed(() => vertical$() ? combinedLabelPositionTop$() : combinedLabelPositionLeft$());
+  const currentLabelSizeByIndex = (index) => {
+    var _a, _b;
+    return pixelToPercent(vertical$() ? (_a = currentLabelDomsRect$()[index]) == null ? void 0 : _a.height : (_b = currentLabelDomsRect$()[index]) == null ? void 0 : _b.width);
+  };
   const minValueLabelDisplay$ = tansu.computed(() => {
     if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
       return false;
     } else if (!showValueLabels$()) {
       return true;
     }
-    const minLabelWidth = minLabelWidth$();
-    return rtl$() ? !valuesPercent$().some((percent2) => 100 - percent2 > 100 - minLabelWidth - 1) : !valuesPercent$().some((percent2) => percent2 < minLabelWidth + 1);
+    const minLabelSize = minLabelSize$();
+    const vertical = vertical$();
+    const rtl = rtl$();
+    if (combinedLabelDisplay$()) {
+      const combinedLabelSize = combinedLabelSize$();
+      const combinedLabelPosition = combinedLabelPosition$();
+      return rtl && !vertical || vertical && !rtl ? combinedLabelPosition + combinedLabelSize / 2 < 100 - minLabelSize - 1 : combinedLabelPosition - combinedLabelSize / 2 > minLabelSize + 1;
+    }
+    const sortedValuesPercent = sortedValuesPercent$();
+    return rtl ? sortedValuesPercent[0] - currentLabelSizeByIndex(sortedValuesPercent.length - 1) / 2 > minLabelSize + 1 : sortedValuesPercent[0] - currentLabelSizeByIndex(0) / 2 > minLabelSize + 1;
   });
   const maxValueLabelDisplay$ = tansu.computed(() => {
     if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
@@ -220,12 +259,29 @@ function createSlider(config) {
     } else if (!showValueLabels$()) {
       return true;
     }
-    const maxLabelWidth = maxLabelWidth$();
-    return rtl$() ? !valuesPercent$().some((percent2) => 100 - percent2 < maxLabelWidth + 1) : !valuesPercent$().some((percent2) => percent2 > 100 - maxLabelWidth - 1);
+    const maxLabelSize = maxLabelSize$();
+    const vertical = vertical$();
+    const rtl = rtl$();
+    if (combinedLabelDisplay$()) {
+      const combinedLabelSize = combinedLabelSize$();
+      const combinedLabelPosition = combinedLabelPosition$();
+      return rtl && !vertical || vertical && !rtl ? combinedLabelPosition - combinedLabelSize / 2 > maxLabelSize + 1 : combinedLabelPosition + combinedLabelSize / 2 < 100 - maxLabelSize - 1;
+    }
+    const sortedValuesPercent = sortedValuesPercent$();
+    return rtl ? 100 - sortedValuesPercent[sortedValuesPercent.length - 1] - currentLabelSizeByIndex(0) / 2 > maxLabelSize + 1 : sortedValuesPercent[sortedValuesPercent.length - 1] + currentLabelSizeByIndex(sortedValuesPercent.length - 1) / 2 < 100 - maxLabelSize - 1;
   });
+  const storedLabelSize$ = tansu.writable([]);
   const combinedLabelDisplay$ = tansu.computed(() => {
-    const values = values$();
-    return values.length == 2 && Math.abs(values[0] - values[1]) * 100 / (max$() - min$()) < 10;
+    const values = sortedValuesPercent$();
+    if (currentLabelDomsRect$().length === values.length) {
+      storedLabelSize$.set(values.map((_, index) => currentLabelSizeByIndex(index) / 2));
+    }
+    const storedLabelSize = storedLabelSize$();
+    const firstLabelSize = (storedLabelSize == null ? void 0 : storedLabelSize[0]) ?? 0;
+    const secondLabelSize = (storedLabelSize == null ? void 0 : storedLabelSize[1]) ?? 0;
+    const biggestLabelSize = Math.max(firstLabelSize, secondLabelSize);
+    const intersectionLimit = biggestLabelSize !== 50 ? biggestLabelSize * 2 + 2 : 15;
+    return values.length == 2 && values[1] - secondLabelSize - values[0] + firstLabelSize < intersectionLimit;
   });
   const interactive$ = tansu.computed(() => !disabled$() && !readonly$());
   const combinedLabelPositionLeft$ = tansu.computed(() => {
@@ -332,11 +388,15 @@ function createSlider(config) {
     const closestValue = sortedValues[clickedPercent * 100 <= midPoint ? closestBiggerIndex - 1 : closestBiggerIndex];
     return values.indexOf(closestValue);
   };
+  const getClickedPercent = (clickedCoordinate) => {
+    const sliderDomRectSize = sliderDomRectSize$(), sliderDomRectOffset = sliderDomRectOffset$();
+    let clickedPercent = vertical$() ? (sliderDomRectSize - clickedCoordinate + sliderDomRectOffset) / sliderDomRectSize : (clickedCoordinate - sliderDomRectOffset) / sliderDomRectSize;
+    clickedPercent = rtl$() ? 1 - clickedPercent : clickedPercent;
+    return clickedPercent;
+  };
   const adjustCoordinate = (clickedCoordinate, handleNumber) => {
     if (interactive$()) {
-      const sliderDomRectSize = sliderDomRectSize$(), sliderDomRectOffset = sliderDomRectOffset$();
-      let clickedPercent = vertical$() ? (sliderDomRectSize - clickedCoordinate + sliderDomRectOffset) / sliderDomRectSize : (clickedCoordinate - sliderDomRectOffset) / sliderDomRectSize;
-      clickedPercent = rtl$() ? 1 - clickedPercent : clickedPercent;
+      const clickedPercent = getClickedPercent(clickedCoordinate);
       const derivedHandleIndex = handleNumber ?? getClosestSliderHandle(clickedPercent);
       const newValue = clickedPercent * (max$() - min$()) + min$();
       values$.update((dh) => {
@@ -385,6 +445,77 @@ function createSlider(config) {
       "aria-hidden": tansu.readable("true")
     }
   }));
+  const handleElementDirective = utils_directive.browserDirective((handleItem, args) => {
+    const destroy = () => {
+      _handleElements.delete(args.item.id);
+    };
+    const update = (args2) => {
+      _handleElements.set(args2.item.id, handleItem);
+    };
+    update(args);
+    return {
+      update,
+      destroy
+    };
+  });
+  const mouseDown = (event, handleId) => {
+    event.preventDefault();
+    const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
+    const handleDrag = (e) => {
+      e.preventDefault();
+      const newCoord = vertical$() ? e.clientY : e.clientX;
+      currentTarget == null ? void 0 : currentTarget.focus();
+      if (_prevCoordinate !== newCoord) {
+        _prevCoordinate = newCoord;
+        adjustCoordinate(newCoord, handleId);
+      }
+    };
+    if (interactive$()) {
+      updateSliderSize$.set({});
+      currentTarget == null ? void 0 : currentTarget.focus();
+      document.addEventListener("mousemove", handleDrag);
+      document.addEventListener(
+        "mouseup",
+        () => {
+          document.removeEventListener("mousemove", handleDrag);
+        },
+        { once: true }
+      );
+    }
+  };
+  const touchStart = (event, handleId) => {
+    const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
+    const handleDrag = (e) => {
+      e.preventDefault();
+      const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
+      currentTarget == null ? void 0 : currentTarget.focus();
+      if (_prevCoordinate !== newCoord) {
+        _prevCoordinate = newCoord;
+        adjustCoordinate(newCoord, handleId);
+      }
+    };
+    if (interactive$()) {
+      updateSliderSize$.set({});
+      currentTarget == null ? void 0 : currentTarget.focus();
+      document.addEventListener("touchmove", handleDrag, { passive: false });
+      document.addEventListener(
+        "touchend",
+        () => {
+          document.removeEventListener("touchmove", handleDrag);
+          document.removeEventListener("touchcancel", handleDrag);
+        },
+        { once: true }
+      );
+      document.addEventListener(
+        "touchcancel",
+        () => {
+          document.removeEventListener("touchmove", handleDrag);
+          document.removeEventListener("touchend", handleDrag);
+        },
+        { once: true }
+      );
+    }
+  };
   const handleEventsDirective = utils_directive.createAttributesDirective((handleContext$) => ({
     events: {
       keydown: (event) => {
@@ -430,61 +561,13 @@ function createSlider(config) {
         }
       },
       mousedown: (event) => {
-        event.preventDefault();
-        const currentTarget = event.target;
-        const handleDrag = (e) => {
-          e.preventDefault();
-          const newCoord = vertical$() ? e.clientY : e.clientX;
-          currentTarget.focus();
-          if (_prevCoordinate !== newCoord) {
-            _prevCoordinate = newCoord;
-            adjustCoordinate(newCoord, handleContext$().item.id);
-          }
-        };
-        if (interactive$()) {
-          updateSliderSize$.set({});
-          currentTarget.focus();
-          document.addEventListener("mousemove", handleDrag);
-          document.addEventListener(
-            "mouseup",
-            () => {
-              document.removeEventListener("mousemove", handleDrag);
-            },
-            { once: true }
-          );
+        if (event.button !== 0) {
+          return;
         }
+        mouseDown(event, handleContext$().item.id);
       },
       touchstart: (event) => {
-        const handleDrag = (e) => {
-          e.preventDefault();
-          const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
-          event.target.focus();
-          if (_prevCoordinate !== newCoord) {
-            _prevCoordinate = newCoord;
-            adjustCoordinate(newCoord, handleContext$().item.id);
-          }
-        };
-        if (interactive$()) {
-          updateSliderSize$.set({});
-          event.target.focus();
-          document.addEventListener("touchmove", handleDrag, { passive: false });
-          document.addEventListener(
-            "touchend",
-            () => {
-              document.removeEventListener("touchmove", handleDrag);
-              document.removeEventListener("touchcancel", handleDrag);
-            },
-            { once: true }
-          );
-          document.addEventListener(
-            "touchcancel",
-            () => {
-              document.removeEventListener("touchmove", handleDrag);
-              document.removeEventListener("touchend", handleDrag);
-            },
-            { once: true }
-          );
-        }
+        touchStart(event, handleContext$().item.id);
       }
     }
   }));
@@ -530,8 +613,20 @@ function createSlider(config) {
       })),
       clickableAreaDirective: utils_directive.createAttributesDirective(() => ({
         events: {
-          click: (event) => {
-            adjustCoordinate(vertical$() ? event.clientY : event.clientX);
+          mousedown: (event) => {
+            if (event.button !== 0) {
+              return;
+            }
+            const clickedCoordinate = vertical$() ? event.clientY : event.clientX;
+            const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
+            adjustCoordinate(clickedCoordinate, closestHandle);
+            mouseDown(event, closestHandle);
+          },
+          touchstart: (event) => {
+            const clickedCoordinate = vertical$() ? event.touches[0].clientY : event.touches[0].clientX;
+            const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
+            adjustCoordinate(clickedCoordinate, closestHandle);
+            touchStart(event, closestHandle);
           }
         },
         classNames: {
@@ -542,6 +637,7 @@ function createSlider(config) {
       })),
       handleEventsDirective,
       handleDirective: utils_directive.mergeDirectives(
+        handleElementDirective,
         handleEventsDirective,
         utils_directive.createAttributesDirective((handleContext$) => ({
           attributes: {
@@ -570,36 +666,42 @@ function createSlider(config) {
       ),
       minLabelDirective: utils_directive.mergeDirectives(minLabelDomDirective, minLabelDirective),
       maxLabelDirective: utils_directive.mergeDirectives(maxLabelDomDirective, maxLabelDirective),
-      combinedHandleLabelDisplayDirective: utils_directive.createAttributesDirective(() => ({
-        classNames: {
-          "au-slider-label-vertical": vertical$,
-          "au-slider-label-vertical-now": vertical$,
-          "au-slider-label": horizontal$,
-          "au-slider-label-now": horizontal$
-        },
-        styles: {
-          left: tansu.computed(() => percent(combinedLabelPositionLeft$())),
-          top: tansu.computed(() => percent(combinedLabelPositionTop$()))
-        },
-        attributes: {
-          "aria-hidden": tansu.readable("true")
-        }
-      })),
-      handleLabelDisplayDirective: utils_directive.createAttributesDirective((labelDisplayContext$) => ({
-        classNames: {
-          "au-slider-label-vertical": vertical$,
-          "au-slider-label-vertical-now": vertical$,
-          "au-slider-label": horizontal$,
-          "au-slider-label-now": horizontal$
-        },
-        styles: {
-          left: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
-          top: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top))
-        },
-        attributes: {
-          "aria-hidden": tansu.readable("true")
-        }
-      })),
+      combinedHandleLabelDisplayDirective: utils_directive.mergeDirectives(
+        combinedLabelDomDirective,
+        utils_directive.createAttributesDirective(() => ({
+          classNames: {
+            "au-slider-label-vertical": vertical$,
+            "au-slider-label-vertical-now": vertical$,
+            "au-slider-label": horizontal$,
+            "au-slider-label-now": horizontal$
+          },
+          styles: {
+            left: tansu.computed(() => percent(combinedLabelPositionLeft$())),
+            top: tansu.computed(() => percent(combinedLabelPositionTop$()))
+          },
+          attributes: {
+            "aria-hidden": tansu.readable("true")
+          }
+        }))
+      ),
+      handleLabelDisplayDirective: utils_directive.mergeDirectives(
+        handleLabelDirective,
+        utils_directive.createAttributesDirective((labelDisplayContext$) => ({
+          classNames: {
+            "au-slider-label-vertical": vertical$,
+            "au-slider-label-vertical-now": vertical$,
+            "au-slider-label": horizontal$,
+            "au-slider-label-now": horizontal$
+          },
+          styles: {
+            left: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
+            top: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top))
+          },
+          attributes: {
+            "aria-hidden": tansu.readable("true")
+          }
+        }))
+      ),
       tickDirective: utils_directive.createAttributesDirective((tickContext$) => ({
         classNames: {
           "au-slider-tick": utils_stores.true$,
@@ -622,7 +724,8 @@ function createSlider(config) {
       tickLabelDirective: utils_directive.createAttributesDirective((tickContext$) => ({
         classNames: {
           "au-slider-tick-label": utils_stores.true$,
-          "au-slider-tick-label-vertical": vertical$
+          "au-slider-tick-label-vertical": vertical$,
+          "au-slider-tick-label-now": tansu.computed(() => sortedValues$().some((sv) => sv === tickContext$().tick.value))
         },
         styles: {
           left: tansu.computed(() => vertical$() ? null : percent(tickContext$().tick.position)),