@agnos-ui/core 0.7.0 → 0.8.0-next.0

package/services/intersection.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
-const func = require("../func-Qd3cD9a3.cjs");
+const utils_func = require("../utils/func.cjs");
 const utils_stores = require("../utils/stores.cjs");
 const defaultValues = {
   elements: [],
@@ -32,7 +32,7 @@ const createIntersection = (config) => {
           observer.disconnect();
         };
       }
-      return func.noop;
+      return utils_func.noop;
     },
     /* @__PURE__ */ new Map()
   );

package/services/intersection.js

@@ -1,5 +1,5 @@
 import { derived, asReadable } from "@amadeus-it-group/tansu";
-import { n as noop } from "../func-DR0n-ShK.js";
+import { noop } from "../utils/func.js";
 import { writablesForProps } from "../utils/stores.js";
 const defaultValues = {
   elements: [],

package/services/matchMedia.cjs

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
 const esmEnv = require("esm-env");
-const utils_directive = require("../directive-DdlwGFtf.cjs");
+const utils_directive = require("../dom-CuBx1JPZ.cjs");
+const utils_stores = require("../utils/stores.cjs");
 const createMatchMedia = (query) => esmEnv.BROWSER ? tansu.readable(false, {
   onUse({ set }) {
     const mql = window.matchMedia(query.trim());
     set(mql.matches);
     return utils_directive.addEvent(mql, "change", (val) => set(val.matches));
   }
-}) : tansu.readable(false);
+}) : utils_stores.false$;
 exports.createMatchMedia = createMatchMedia;

package/services/matchMedia.js

@@ -1,13 +1,14 @@
 import { readable } from "@amadeus-it-group/tansu";
 import { BROWSER } from "esm-env";
-import { u as addEvent } from "../directive-CKEccryv.js";
+import { u as addEvent } from "../dom-BB9jLllr.js";
+import { false$ } from "../utils/stores.js";
 const createMatchMedia = (query) => BROWSER ? readable(false, {
   onUse({ set }) {
     const mql = window.matchMedia(query.trim());
     set(mql.matches);
     return addEvent(mql, "change", (val) => set(val.matches));
   }
-}) : readable(false);
+}) : false$;
 export {
   createMatchMedia
 };

package/services/navManager.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
-const utils_directive = require("../directive-DdlwGFtf.cjs");
+const utils_directive = require("../dom-CuBx1JPZ.cjs");
 const isInertOrInvisible = (element) => {
   let curElement = element;
   while (curElement) {

package/services/navManager.js

@@ -1,5 +1,5 @@
 import { writable, computed } from "@amadeus-it-group/tansu";
-import { r as registrationArray, y as computeCommonAncestor, b as browserDirective } from "../directive-CKEccryv.js";
+import { r as registrationArray, y as computeCommonAncestor, b as browserDirective } from "../dom-BB9jLllr.js";
 const isInertOrInvisible = (element) => {
   let curElement = element;
   while (curElement) {

package/services/portal.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_directive = require("../directive-DdlwGFtf.cjs");
+const utils_directive = require("../dom-CuBx1JPZ.cjs");
 const portal = utils_directive.browserDirective((content, newArg) => {
   let arg;
   let replaceComment;

package/services/portal.js

@@ -1,4 +1,4 @@
-import { b as browserDirective } from "../directive-CKEccryv.js";
+import { b as browserDirective } from "../dom-BB9jLllr.js";
 const portal = browserDirective((content, newArg) => {
   let arg;
   let replaceComment;

package/services/resizeObserver.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
-const utils_directive = require("../directive-DdlwGFtf.cjs");
-const func = require("../func-Qd3cD9a3.cjs");
+const utils_directive = require("../dom-CuBx1JPZ.cjs");
+const utils_func = require("../utils/func.cjs");
 const createResizeObserver = () => {
   const { element$, directive } = utils_directive.createBrowserStoreDirective();
   const observedElement$ = tansu.derived(
     element$,
     (element, set) => {
       if (element === null) {
-        return func.noop;
+        return utils_func.noop;
       }
       const observer = new ResizeObserver((entries) => {
         set(entries[0]);

package/services/resizeObserver.js

@@ -1,6 +1,6 @@
 import { derived } from "@amadeus-it-group/tansu";
-import { j as createBrowserStoreDirective } from "../directive-CKEccryv.js";
-import { n as noop } from "../func-DR0n-ShK.js";
+import { j as createBrowserStoreDirective } from "../dom-BB9jLllr.js";
+import { noop } from "../utils/func.js";
 const createResizeObserver = () => {
   const { element$, directive } = createBrowserStoreDirective();
   const observedElement$ = derived(

package/services/siblingsInert.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
-const func = require("../func-Qd3cD9a3.cjs");
-const utils_directive = require("../directive-DdlwGFtf.cjs");
+const utils_func = require("../utils/func.cjs");
+const utils_directive = require("../dom-CuBx1JPZ.cjs");
 const internalSetSiblingsInert = (element) => {
   const inertValues = /* @__PURE__ */ new Map();
   const recursiveHelper = (element2) => {
@@ -22,10 +22,10 @@ const internalSetSiblingsInert = (element) => {
     element2.toggleAttribute("inert", value);
   });
 };
-let internalRevert = func.noop;
+let internalRevert = utils_func.noop;
 const setSiblingsInert = (element) => {
   internalRevert();
-  internalRevert = element ? internalSetSiblingsInert(element) : func.noop;
+  internalRevert = element ? internalSetSiblingsInert(element) : utils_func.noop;
 };
 const { directive: storeArrayDirective, elements$ } = utils_directive.createBrowserStoreArrayDirective();
 const lastElement$ = tansu.computed(

package/services/siblingsInert.js

@@ -1,6 +1,6 @@
 import { computed } from "@amadeus-it-group/tansu";
-import { n as noop } from "../func-DR0n-ShK.js";
-import { g as createBrowserStoreArrayDirective, k as mergeDirectives, d as directiveSubscribe } from "../directive-CKEccryv.js";
+import { noop } from "../utils/func.js";
+import { g as createBrowserStoreArrayDirective, k as mergeDirectives, d as directiveSubscribe } from "../dom-BB9jLllr.js";
 const internalSetSiblingsInert = (element) => {
   const inertValues = /* @__PURE__ */ new Map();
   const recursiveHelper = (element2) => {

package/services/transitions/baseTransitions.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
 const utils_writables = require("../../writables-BPAJvaL_.cjs");
-const promise = require("../../promise-BMJ8qhA8.cjs");
-const func = require("../../func-Qd3cD9a3.cjs");
+const promise = require("../../promise-CxCD3NYv.cjs");
+const utils_func = require("../../utils/func.cjs");
 const utils_stores = require("../../utils/stores.cjs");
-const utils_directive = require("../../directive-DdlwGFtf.cjs");
-const neverEndingPromise = new Promise(func.noop);
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
+const neverEndingPromise = new Promise(utils_func.noop);
 const noAnimation = (element, direction) => {
   element.style.display = direction === "show" ? "" : "none";
 };
@@ -16,9 +16,9 @@ const defaultValues = {
   initDone: null,
   visible: true,
   transition: noAnimation,
-  onShown: func.noop,
-  onHidden: func.noop,
-  onVisibleChange: func.noop
+  onShown: utils_func.noop,
+  onHidden: utils_func.noop,
+  onVisibleChange: utils_func.noop
 };
 const configValidator = {
   animated: utils_writables.typeBoolean,

package/services/transitions/baseTransitions.js

@@ -1,9 +1,9 @@
 import { computed, writable, derived, batch } from "@amadeus-it-group/tansu";
 import { c as typeBoolean, f as typeFunction, d as typeBooleanOrNull } from "../../writables-DCiBdIBK.js";
-import { c as promiseWithResolve } from "../../promise-CY2U8bTP.js";
-import { n as noop } from "../../func-DR0n-ShK.js";
+import { c as promiseWithResolve } from "../../promise-CBh_HbSK.js";
+import { noop } from "../../utils/func.js";
 import { writablesForProps, bindableDerived, stateStores } from "../../utils/stores.js";
-import { h as createStoreDirective, k as mergeDirectives, d as directiveSubscribe } from "../../directive-CKEccryv.js";
+import { h as createStoreDirective, k as mergeDirectives, d as directiveSubscribe } from "../../dom-BB9jLllr.js";
 const neverEndingPromise = new Promise(noop);
 const noAnimation = (element, direction) => {
   element.style.display = direction === "show" ? "" : "none";

package/services/transitions/collapse.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_directive = require("../../directive-DdlwGFtf.cjs");
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
 const services_transitions_cssTransitions = require("./cssTransitions.cjs");
 const createCollapseTransition = ({
   dimension = "height",

package/services/transitions/collapse.js

@@ -1,4 +1,4 @@
-import { i as isBrowserHTMLElement, v as removeClasses, w as addClasses, x as reflow } from "../../directive-CKEccryv.js";
+import { i as isBrowserHTMLElement, v as removeClasses, w as addClasses, x as reflow } from "../../dom-BB9jLllr.js";
 import { createCSSTransition } from "./cssTransitions.js";
 const createCollapseTransition = ({
   dimension = "height",

package/services/transitions/cssTransitions.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_directive = require("../../directive-DdlwGFtf.cjs");
-const func = require("../../func-Qd3cD9a3.cjs");
-const promise = require("../../promise-BMJ8qhA8.cjs");
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
+const utils_func = require("../../utils/func.cjs");
+const promise = require("../../promise-CxCD3NYv.cjs");
 function hasTransition(element) {
   return window.getComputedStyle(element).transitionProperty !== "none";
 }
@@ -13,7 +13,7 @@ function getTransitionDurationMs(element) {
   return (transitionDelaySec + transitionDurationSec) * 1e3;
 }
 const createCSSTransition = (start) => async (element, direction, animated, signal, context) => {
-  const endFn = start(element, direction, animated, context) ?? func.noop;
+  const endFn = start(element, direction, animated, context) ?? utils_func.noop;
   if (utils_directive.isBrowserHTMLElement(element) && animated && hasTransition(element)) {
     const abort = promise.promiseFromEvent(signal, "abort");
     const transitionEnd = promise.promiseFromEvent(element, "transitionend");

package/services/transitions/cssTransitions.js

@@ -1,6 +1,6 @@
-import { i as isBrowserHTMLElement } from "../../directive-CKEccryv.js";
-import { n as noop } from "../../func-DR0n-ShK.js";
-import { a as promiseFromEvent, b as promiseFromTimeout } from "../../promise-CY2U8bTP.js";
+import { i as isBrowserHTMLElement } from "../../dom-BB9jLllr.js";
+import { noop } from "../../utils/func.js";
+import { a as promiseFromEvent, b as promiseFromTimeout } from "../../promise-CBh_HbSK.js";
 function hasTransition(element) {
   return window.getComputedStyle(element).transitionProperty !== "none";
 }

package/services/transitions/simpleClassTransition.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const services_transitions_cssTransitions = require("./cssTransitions.cjs");
-const utils_directive = require("../../directive-DdlwGFtf.cjs");
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
 const createSimpleClassTransition = (config) => {
   const { animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses } = config;
   return services_transitions_cssTransitions.createCSSTransition((element, direction, animated, context) => {

package/services/transitions/simpleClassTransition.js

@@ -1,5 +1,5 @@
 import { createCSSTransition } from "./cssTransitions.js";
-import { v as removeClasses, w as addClasses, x as reflow } from "../../directive-CKEccryv.js";
+import { v as removeClasses, w as addClasses, x as reflow } from "../../dom-BB9jLllr.js";
 const createSimpleClassTransition = (config) => {
   const { animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses } = config;
   return createCSSTransition((element, direction, animated, context) => {

package/{slider-1OSwok7u.cjs → slider-B2JFXDLt.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
-const utils_directive = require("./directive-DdlwGFtf.cjs");
-const func = require("./func-Qd3cD9a3.cjs");
+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 services_resizeObserver = require("./services/resizeObserver.cjs");
@@ -24,12 +24,16 @@ const defaultSliderConfig = {
   disabled: false,
   vertical: false,
   className: "",
-  ariaLabelHandle: (value) => "" + value,
-  ariaValueText: (value) => "" + value,
-  onValuesChange: func.noop,
+  ariaLabel: () => "Value",
+  ariaLabelledBy: () => "",
+  ariaValueText: () => "",
+  onValuesChange: utils_func.noop,
   values: [0],
   showValueLabels: true,
   showMinMaxLabels: true,
+  showTicks: false,
+  showTickValues: true,
+  tickInterval: 0,
   rtl: false
 };
 function getSliderDefaultConfig() {
@@ -42,12 +46,16 @@ const configValidator = {
   readonly: utils_writables.typeBoolean,
   disabled: utils_writables.typeBoolean,
   vertical: utils_writables.typeBoolean,
-  ariaLabelHandle: utils_writables.typeFunction,
+  ariaLabel: utils_writables.typeFunction,
+  ariaLabelledBy: utils_writables.typeFunction,
   ariaValueText: utils_writables.typeFunction,
   onValuesChange: utils_writables.typeFunction,
   values: utils_writables.typeArray,
   showValueLabels: utils_writables.typeBoolean,
   showMinMaxLabels: utils_writables.typeBoolean,
+  showTicks: utils_writables.typeBoolean,
+  showTickValues: utils_writables.typeBoolean,
+  tickInterval: utils_writables.typeNumberInRangeFactory(0, Infinity, { strict: true }),
   rtl: utils_writables.typeBoolean,
   className: utils_writables.typeString
 };
@@ -92,11 +100,15 @@ function createSlider(config) {
       stepSize$,
       rtl$,
       values$: _dirtyValues$,
-      ariaLabelHandle$,
+      ariaLabel$,
+      ariaLabelledBy$,
       ariaValueText$,
       onValuesChange$,
       showValueLabels$,
       showMinMaxLabels$,
+      showTicks$,
+      showTickValues$,
+      tickInterval$,
       ...stateProps
     },
     patch
@@ -178,12 +190,13 @@ function createSlider(config) {
     }).sort((a, b) => a.value - b.value);
   });
   const sortedHandles$ = tansu.computed(() => {
-    const ariaLabelHandle = ariaLabelHandle$(), ariaValueText = ariaValueText$();
+    const ariaLabelHandle = ariaLabel$(), ariaValueText = ariaValueText$(), ariaLabelledBy = ariaLabelledBy$();
     return _sortedHandlesValues$().map((sortedValue, index) => {
       return {
         ...sortedValue,
-        ariaLabel: ariaLabelHandle(sortedValue.value, index, sortedValue.id),
-        ariaValueText: ariaValueText(sortedValue.value, index, sortedValue.id)
+        ariaLabel: ariaLabelledBy(index) ? void 0 : ariaLabelHandle(index),
+        ariaLabelledBy: ariaLabelledBy(index) || void 0,
+        ariaValueText: ariaValueText(sortedValue.value, index) || void 0
       };
     });
   });
@@ -191,8 +204,9 @@ function createSlider(config) {
   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 adjustedShowValueLabels$ = tansu.computed(() => showValueLabels$() && (!showTicks$() || !showTickValues$()));
   const minValueLabelDisplay$ = tansu.computed(() => {
-    if (!showMinMaxLabels$()) {
+    if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
       return false;
     } else if (!showValueLabels$()) {
       return true;
@@ -201,7 +215,7 @@ function createSlider(config) {
     return rtl$() ? !valuesPercent$().some((percent2) => 100 - percent2 > 100 - minLabelWidth - 1) : !valuesPercent$().some((percent2) => percent2 < minLabelWidth + 1);
   });
   const maxValueLabelDisplay$ = tansu.computed(() => {
-    if (!showMinMaxLabels$()) {
+    if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
       return false;
     } else if (!showValueLabels$()) {
       return true;
@@ -261,9 +275,48 @@ function createSlider(config) {
       }).slice(0, sortedValuesPercent.length - 1);
     }
   });
-  const percentCompute = (value) => {
+  const computeTicks$ = tansu.computed(() => {
+    if (!showTicks$()) {
+      return [];
+    }
+    const vertical = vertical$();
     const min = min$();
-    return (value - min) * 100 / (max$() - min);
+    const max = max$();
+    const rtl = rtl$();
+    const showTickValues = showTickValues$();
+    const tickInterval = tickInterval$() || stepSize$();
+    const tickArray = [];
+    const intStepSize = _intStepSize$();
+    const decimalPrecision = _decimalPrecision$();
+    const positionCompute = (position) => {
+      return !!rtl !== !!vertical ? 100 - position : position;
+    };
+    for (let step = min; step < max; step += tickInterval) {
+      const cleanValue = computeCleanValue(step, min, max, intStepSize, decimalPrecision);
+      const stepPercent = percentCompute(cleanValue);
+      tickArray.push({ position: positionCompute(stepPercent), selected: false, value: cleanValue, displayLabel: showTickValues });
+    }
+    tickArray.push({ position: positionCompute(100), selected: false, value: max, displayLabel: showTickValues });
+    return tickArray;
+  });
+  const ticks$ = tansu.computed(() => {
+    const sortedValues = sortedValues$();
+    const isTickSelected = (value) => {
+      const isMultiHandle = sortedValues.length > 1;
+      const currentMax = isMultiHandle ? sortedValues[sortedValues.length - 1] : sortedValues[0];
+      const currentMin = isMultiHandle ? sortedValues[0] : 0;
+      return value <= currentMax && value >= currentMin;
+    };
+    return computeTicks$().map((tick) => {
+      return {
+        ...tick,
+        selected: isTickSelected(tick.value)
+      };
+    });
+  });
+  const percentCompute = (value) => {
+    const min = min$(), max = max$();
+    return (value - min) * 100 / (max - min);
   };
   const getClosestSliderHandle = (clickedPercent) => {
     const values = values$();
@@ -271,9 +324,11 @@ function createSlider(config) {
       return 0;
     }
     const sortedValues = sortedValues$();
-    const closestBigger = sortedValues.find((sv) => sv > clickedPercent * 100);
+    const closestBigger = sortedValues.find((sv) => percentCompute(sv) > clickedPercent * 100);
     const closestBiggerIndex = closestBigger ? sortedValues.indexOf(closestBigger) : sortedValues.length - 1;
-    const midPoint = sortedValues[closestBiggerIndex - 1] + (sortedValues[closestBiggerIndex] - sortedValues[closestBiggerIndex - 1]) / 2;
+    const midPoint = percentCompute(
+      sortedValues[closestBiggerIndex - 1] + (sortedValues[closestBiggerIndex] - sortedValues[closestBiggerIndex - 1]) / 2
+    );
     const closestValue = sortedValues[clickedPercent * 100 <= midPoint ? closestBiggerIndex - 1 : closestBiggerIndex];
     return values.indexOf(closestValue);
   };
@@ -298,7 +353,7 @@ function createSlider(config) {
       class: stateProps.className$
     },
     classNames: {
-      "au-slider": true,
+      "au-slider": utils_stores.true$,
       "au-slider-vertical": vertical$,
       "au-slider-horizontal": horizontal$,
       disabled: disabled$
@@ -312,6 +367,9 @@ function createSlider(config) {
       "au-slider-label-min": horizontal$,
       "au-slider-rtl": rtl$,
       invisible: tansu.computed(() => !minValueLabelDisplay$())
+    },
+    attributes: {
+      "aria-hidden": tansu.readable("true")
     }
   }));
   const maxLabelDirective = utils_directive.createAttributesDirective(() => ({
@@ -322,6 +380,9 @@ function createSlider(config) {
       "au-slider-label-max": horizontal$,
       "au-slider-rtl": rtl$,
       invisible: tansu.computed(() => !maxValueLabelDisplay$())
+    },
+    attributes: {
+      "aria-hidden": tansu.readable("true")
     }
   }));
   const handleEventsDirective = utils_directive.createAttributesDirective((handleContext$) => ({
@@ -366,7 +427,6 @@ function createSlider(config) {
               return;
           }
           event.preventDefault();
-          event.stopPropagation();
         }
       },
       mousedown: (event) => {
@@ -395,7 +455,6 @@ function createSlider(config) {
         }
       },
       touchstart: (event) => {
-        event.preventDefault();
         const handleDrag = (e) => {
           e.preventDefault();
           const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
@@ -445,9 +504,11 @@ function createSlider(config) {
       combinedLabelPositionTop$,
       progressDisplayOptions$,
       handleDisplayOptions$,
-      showValueLabels$,
+      showValueLabels$: adjustedShowValueLabels$,
       showMinMaxLabels$,
+      showTicks$,
       rtl$,
+      ticks$,
       ...stateProps
     }),
     patch,
@@ -464,7 +525,7 @@ function createSlider(config) {
           height: tansu.computed(() => percent(progressContext$().option.height))
         },
         classNames: {
-          "au-slider-progress": true
+          "au-slider-progress": utils_stores.true$
         }
       })),
       clickableAreaDirective: utils_directive.createAttributesDirective(() => ({
@@ -475,7 +536,8 @@ function createSlider(config) {
         },
         classNames: {
           "au-slider-clickable-area": horizontal$,
-          "au-slider-clickable-area-vertical": vertical$
+          "au-slider-clickable-area-vertical": vertical$,
+          "au-slider-clickable-area-with-ticks": tansu.computed(() => showTicks$() && tickInterval$() === 0)
         }
       })),
       handleEventsDirective,
@@ -483,12 +545,13 @@ function createSlider(config) {
         handleEventsDirective,
         utils_directive.createAttributesDirective((handleContext$) => ({
           attributes: {
-            role: "slider",
+            role: tansu.readable("slider"),
             "aria-valuemin": min$,
             "aria-valuemax": max$,
             "aria-valuenow": tansu.computed(() => handleContext$().item.value),
             "aria-valuetext": tansu.computed(() => handleContext$().item.ariaValueText),
             "aria-label": tansu.computed(() => handleContext$().item.ariaLabel),
+            "aria-labelledBy": tansu.computed(() => handleContext$().item.ariaLabelledBy),
             "aria-orientation": tansu.computed(() => vertical$() ? "vertical" : void 0),
             "aria-disabled": tansu.computed(() => disabled$() ? "true" : void 0),
             disabled: disabled$,
@@ -499,7 +562,7 @@ function createSlider(config) {
             top: tansu.computed(() => percent(handleDisplayOptions$()[handleContext$().item.id].top))
           },
           classNames: {
-            "au-slider-handle": true,
+            "au-slider-handle": utils_stores.true$,
             "au-slider-handle-vertical": vertical$,
             "au-slider-handle-horizontal": horizontal$
           }
@@ -517,6 +580,9 @@ function createSlider(config) {
         styles: {
           left: tansu.computed(() => percent(combinedLabelPositionLeft$())),
           top: tansu.computed(() => percent(combinedLabelPositionTop$()))
+        },
+        attributes: {
+          "aria-hidden": tansu.readable("true")
         }
       })),
       handleLabelDisplayDirective: utils_directive.createAttributesDirective((labelDisplayContext$) => ({
@@ -529,6 +595,41 @@ function createSlider(config) {
         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$,
+          "au-slider-tick-horizontal": horizontal$,
+          "au-slider-tick-vertical": vertical$
+        },
+        styles: {
+          left: tansu.computed(() => vertical$() ? null : percent(tickContext$().tick.position)),
+          top: tansu.computed(() => vertical$() ? percent(tickContext$().tick.position) : null)
+        },
+        events: {
+          click: (event) => {
+            adjustCoordinate(vertical$() ? event.clientY : event.clientX);
+          }
+        },
+        attributes: {
+          "aria-hidden": tansu.readable("true")
+        }
+      })),
+      tickLabelDirective: utils_directive.createAttributesDirective((tickContext$) => ({
+        classNames: {
+          "au-slider-tick-label": utils_stores.true$,
+          "au-slider-tick-label-vertical": vertical$
+        },
+        styles: {
+          left: tansu.computed(() => vertical$() ? null : percent(tickContext$().tick.position)),
+          top: tansu.computed(() => vertical$() ? percent(tickContext$().tick.position) : null)
+        },
+        attributes: {
+          "aria-hidden": tansu.readable("true")
         }
       }))
     }