@studiometa/ui 1.0.0-rc.0 → 1.0.0-rc.1

package/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { Base } from "@studiometa/js-toolkit";
-import { clamp, inertiaFinalValue, nextFrame, isDev } from "@studiometa/js-toolkit/utils";
+import { clamp, inertiaFinalValue, nextFrame } from "@studiometa/js-toolkit/utils";
 import { SliderDrag } from "./SliderDrag.js";
 import { SliderItem } from "./SliderItem.js";
 class Slider extends Base {
@@ -8,7 +8,7 @@ class Slider extends Base {
    */
   static config = {
     name: "Slider",
-    refs: ["wrapper", "debug"],
+    refs: ["wrapper"],
     emits: ["goto", "index"],
     components: {
       SliderItem,
@@ -22,28 +22,26 @@ class Slider extends Base {
       dropSensitivity: { type: Number, default: 2 }
     }
   };
+  /**
+   * Distance on the x axis.
+   * @private
+   */
   __distanceX = 0;
+  /**
+   * Initial x position.
+   * @private
+   */
   __initialX = 0;
   /**
    * Index of the current active slide.
+   * @private
    */
   __currentIndex = 0;
-  __isDragging = false;
-  /**
-   * Get the current index.
-   */
-  get currentIndex() {
-    return this.__currentIndex;
-  }
   /**
-   * Set the current index and emit the `index` event.
+   * Drag state.
+   * @private
    */
-  set currentIndex(value) {
-    this.currentSliderItem.disactivate();
-    this.$emit("index", value);
-    this.__currentIndex = value;
-    this.currentSliderItem.activate();
-  }
+  __isDragging = false;
   /**
    * Store all the states.
    */
@@ -58,9 +56,23 @@ class Slider extends Base {
   };
   /**
    * Wether or not the wrapper is focused.
-   * @type {boolean}
    */
   hasFocus = false;
+  /**
+   * Get the current index.
+   */
+  get currentIndex() {
+    return this.__currentIndex;
+  }
+  /**
+   * Set the current index and emit the `index` event.
+   */
+  set currentIndex(value) {
+    this.currentSliderItem.disactivate();
+    this.$emit("index", value);
+    this.__currentIndex = value;
+    this.currentSliderItem.activate();
+  }
   /**
    * Get the current state.
    */
@@ -149,11 +161,8 @@ class Slider extends Base {
           return state;
         });
       }
-      if (mode === "center" && isDev) {
-        console.warn(
-          `[${this.$id}]`,
-          "The `center` mode is not yet compatible with the `contain` mode."
-        );
+      if (mode === "center") {
+        this.$warn("The `center` mode is not yet compatible with the `contain` mode.");
       }
     }
     return states;
@@ -176,7 +185,6 @@ class Slider extends Base {
   mounted() {
     this.states = this.getStates();
     this.setAccessibilityAttributes();
-    this.prepareInvisibleItems();
     this.goTo(this.currentIndex);
   }
   /**
@@ -186,7 +194,6 @@ class Slider extends Base {
     nextFrame(() => {
       this.states = this.getStates();
       nextFrame(() => {
-        this.prepareInvisibleItems();
         this.goTo(this.currentIndex);
       });
     });
@@ -219,23 +226,14 @@ class Slider extends Base {
   /**
    * Go to the given index.
    */
-  goTo(index, { withInstantMove = true } = {}) {
+  goTo(index) {
     if (index < 0 || index > this.indexMax) {
       throw new Error("Index out of bound.");
     }
-    const currentState = this.getStateValueByMode(this.currentState.x);
     const state = this.getStateValueByMode(this.states[index].x);
-    const itemsToMove = this.getVisibleItems(state);
-    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);
-    itemsToMove.forEach((item) => {
-      if (currentState !== state && withInstantMove) {
-        item.moveInstantly(currentState);
-      }
-      nextFrame(() => item.move(state));
-    });
-    invisibleItemsToMoveInstantly.forEach((item) => {
-      item.moveInstantly(state);
-    });
+    for (const item of this.$children.SliderItem) {
+      item.move(state);
+    }
     this.currentIndex = index;
     this.$emit("goto", index);
   }
@@ -255,9 +253,9 @@ class Slider extends Base {
       return;
     }
     this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;
-    this.getVisibleItems(this.__distanceX).forEach((item) => {
+    for (const item of this.$children.SliderItem) {
       item.moveInstantly(this.__distanceX);
-    });
+    }
   }
   /**
    * Listen to the Draggable `drop` event and find the new active slide.
@@ -281,15 +279,15 @@ class Slider extends Base {
     const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
     const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);
     if (this.$options.fitBounds) {
-      this.goTo(closestIndex, { withInstantMove: false });
+      this.goTo(closestIndex);
     } else {
       if (this.$options.contain) {
         finalX = Math.min(this.containMinState, finalX);
         finalX = Math.max(this.containMaxState, finalX);
       }
-      this.$children.SliderItem.forEach((item) => {
+      for (const item of this.$children.SliderItem) {
         item.move(finalX);
-      });
+      }
       this.currentIndex = closestIndex;
     }
   }
@@ -317,64 +315,6 @@ class Slider extends Base {
       }
     }
   }
-  /**
-   * Prepare invisible items.
-   */
-  prepareInvisibleItems() {
-    const state = this.states[this.currentIndex];
-    const nextItemsToPrepare = [];
-    const previousItemsToPrepare = [];
-    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {
-      if (i > this.currentIndex) {
-        nextItemsToPrepare.push(item);
-        return;
-      }
-      if (i < this.currentIndex) {
-        previousItemsToPrepare.push(item);
-      }
-    });
-    nextItemsToPrepare.forEach((item) => {
-      const invisibleState = this.getStateWhereItemWillBeInvisible(item);
-      if (invisibleState) {
-        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
-      }
-    });
-    previousItemsToPrepare.forEach((item) => {
-      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });
-      if (invisibleState) {
-        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
-      }
-    });
-  }
-  /**
-   * Get the state where the given item will be visible.
-   */
-  getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
-    const visibleStates = this.states.filter(
-      (state) => item.willBeVisible(this.getStateValueByMode(state.x))
-    );
-    const firstVisibleState = visibleStates[0];
-    const lastVisibleState = visibleStates.at(-1);
-    const firstVisibleStateIndex = this.states.findIndex(
-      (state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x)
-    );
-    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);
-    return reversed ? this.states[lastVisibleStateIndex + 1] : this.states[firstVisibleStateIndex - 1];
-  }
-  /**
-   * Get the visible slides for the given position.
-   */
-  getVisibleItems(target) {
-    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
-  }
-  /**
-   * Get the invisible slides for the given position.
-   */
-  getInvisibleItems(target) {
-    return this.$children.SliderItem.filter(
-      (item) => !item.isVisible && !item.willBeVisible(target)
-    );
-  }
 }
 export {
   Slider

package/Slider/Slider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/Slider.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n  BaseProps,\n  BaseConfig,\n  DragServiceProps,\n  KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n  $refs: {\n    wrapper: HTMLElement;\n  };\n  $children: {\n    SliderItem: SliderItem[];\n    SliderDrag: SliderDrag[];\n  };\n  $options: {\n    mode: SliderModes;\n    fitBounds: boolean;\n    contain: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  };\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Slider',\n    refs: ['wrapper', 'debug'],\n    emits: ['goto', 'index'],\n    components: {\n      SliderItem,\n      SliderDrag,\n    },\n    options: {\n      mode: { type: String, default: 'left' },\n      fitBounds: Boolean,\n      contain: Boolean,\n      sensitivity: { type: Number, default: 1 },\n      dropSensitivity: { type: Number, default: 2 },\n    },\n  };\n\n  __distanceX = 0;\n\n  __initialX = 0;\n\n  /**\n   * Index of the current active slide.\n   */\n  __currentIndex = 0;\n\n  __isDragging = false;\n\n  /**\n   * Get the current index.\n   */\n  get currentIndex() {\n    return this.__currentIndex;\n  }\n\n  /**\n   * Set the current index and emit the `index` event.\n   */\n  set currentIndex(value: number) {\n    this.currentSliderItem.disactivate();\n    this.$emit('index', value);\n    this.__currentIndex = value;\n    this.currentSliderItem.activate();\n  }\n\n  /**\n   * Store all the states.\n   */\n  states: SliderState[] = [];\n\n  /**\n   * Origins for the different modes.\n   */\n  origins: Record<SliderModes, number> = {\n    left: 0,\n    center: 0,\n    right: 0,\n  };\n\n  /**\n   * Wether or not the wrapper is focused.\n   * @type {boolean}\n   */\n  hasFocus = false;\n\n  /**\n   * Get the current state.\n   */\n  get currentState() {\n    return this.states[this.currentIndex];\n  }\n\n  /**\n   * Get the first state.\n   */\n  get firstState() {\n    return this.states[0];\n  }\n\n  /**\n   * Get the last state.\n   */\n  get lastState() {\n    return this.states.at(-1);\n  }\n\n  /**\n   * Get the minimal contain state value.\n   */\n  get containMinState(): number {\n    return this.getStateValueByMode(this.firstState.x, 'left');\n  }\n\n  /**\n   * Get the maximal contain state value.\n   */\n  get containMaxState(): number {\n    return this.getStateValueByMode(this.lastState.x, 'right');\n  }\n\n  /**\n   * Get the last index.\n   */\n  get indexMax(): number {\n    return this.$children.SliderItem.length - 1;\n  }\n\n  /**\n   * Get the current SliderItem\n   */\n  get currentSliderItem() {\n    return this.$children.SliderItem[this.currentIndex];\n  }\n\n  /**\n   * Get the states for each SliderItem.\n   */\n  getStates(): SliderState[] {\n    const { wrapper } = this.$refs;\n    const originRect = wrapper.getBoundingClientRect();\n\n    this.origins = {\n      left: originRect.left,\n      center: originRect.x + originRect.width / 2,\n      right: originRect.x + originRect.width,\n    };\n\n    const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n      x: {\n        left: (item.rect.x - this.origins.left) * -1,\n        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n        right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n      },\n    }));\n\n    if (this.$options.contain) {\n      const { mode } = this.$options;\n      // Find state where last child has passed the wrapper bound completely\n      if (mode === 'left') {\n        const lastChild = this.$children.SliderItem.at(-1);\n\n        const maxState = states.find((state) => {\n          const lastChildPosition =\n            lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n          const diffWithWrapperBound = originRect.width - lastChildPosition;\n          if (diffWithWrapperBound > 0) {\n            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n            return true;\n          }\n\n          return false;\n        });\n\n        if (maxState) {\n          return states.map((state) => {\n            state.x.left = Math.max(state.x.left, maxState.x.left);\n            return state;\n          });\n        }\n      }\n\n      if (mode === 'right') {\n        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n        return states.map((state) => {\n          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n          return state;\n        });\n      }\n\n      if (mode === 'center' && isDev) {\n        console.warn(\n          `[${this.$id}]`,\n          'The `center` mode is not yet compatible with the `contain` mode.',\n        );\n      }\n    }\n\n    return states;\n  }\n\n  /**\n   * Get an origin by mode.\n   */\n  getOriginByMode(mode?: SliderModes) {\n    return this.origins[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Get a state value according to the given mode.\n   */\n  getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n    return state[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.states = this.getStates();\n    this.setAccessibilityAttributes();\n    this.prepareInvisibleItems();\n    this.goTo(this.currentIndex);\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    nextFrame(() => {\n      this.states = this.getStates();\n      nextFrame(() => {\n        this.prepareInvisibleItems();\n        this.goTo(this.currentIndex);\n      });\n    });\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'carousel');\n  }\n\n  /**\n   * Go to the next slide.\n   */\n  goNext() {\n    if (this.currentIndex + 1 > this.indexMax) {\n      return;\n    }\n\n    this.goTo(this.currentIndex + 1);\n  }\n\n  /**\n   * Go to the previous slide.\n   */\n  goPrev() {\n    if (this.currentIndex - 1 < 0) {\n      return;\n    }\n\n    this.goTo(this.currentIndex - 1);\n  }\n\n  /**\n   * Go to the given index.\n   */\n  goTo(index: number, { withInstantMove = true } = {}) {\n    if (index < 0 || index > this.indexMax) {\n      throw new Error('Index out of bound.');\n    }\n\n    const currentState = this.getStateValueByMode(this.currentState.x);\n    const state = this.getStateValueByMode(this.states[index].x);\n    const itemsToMove = this.getVisibleItems(state);\n    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n    itemsToMove.forEach((item) => {\n      // Better perfs when going fast through the slides\n      if (currentState !== state && withInstantMove) {\n        item.moveInstantly(currentState);\n      }\n      nextFrame(() => item.move(state));\n    });\n    invisibleItemsToMoveInstantly.forEach((item) => {\n      item.moveInstantly(state);\n    });\n\n    this.currentIndex = index;\n    this.$emit('goto', index);\n  }\n\n  /**\n   * Listen to the Draggable `start` event.\n   */\n  onSliderDragStart() {\n    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n    this.__distanceX = this.__initialX;\n\n    this.__isDragging = true;\n  }\n\n  /**\n   * Listen to the Draggable `drag` event.\n   */\n  onSliderDragDrag({ args: [props] }: { args: [DragServiceProps] }) {\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n    this.getVisibleItems(this.__distanceX).forEach((item) => {\n      item.moveInstantly(this.__distanceX);\n    });\n  }\n\n  /**\n   * Listen to the Draggable `drop` event and find the new active slide.\n   */\n  onSliderDragDrop({ args: [props] }: { args: [DragServiceProps] }) {\n    if (!this.__isDragging) {\n      return;\n    }\n    this.__isDragging = false;\n\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    let finalX = clamp(\n      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n      this.getStateValueByMode(this.firstState.x),\n      this.getStateValueByMode(this.lastState.x),\n    );\n\n    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n      Math.abs(finalX - this.getStateValueByMode(state.x)),\n    );\n    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n    if (this.$options.fitBounds) {\n      this.goTo(closestIndex, { withInstantMove: false });\n    } else {\n      if (this.$options.contain) {\n        finalX = Math.min(this.containMinState, finalX);\n        finalX = Math.max(this.containMaxState, finalX);\n      }\n      this.$children.SliderItem.forEach((item) => {\n        item.move(finalX);\n      });\n      this.currentIndex = closestIndex;\n    }\n  }\n\n  /**\n   * Enable focus.\n   */\n  onWrapperFocus() {\n    this.hasFocus = true;\n  }\n\n  /**\n   * Disable focus.\n   */\n  onWrapperBlur() {\n    this.hasFocus = false;\n  }\n\n  /**\n   * Go prev or next when focus is on the wrapper and pressing arrow keys.\n   */\n  keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n    if (this.hasFocus && isDown) {\n      if (LEFT) {\n        this.goPrev();\n      } else if (RIGHT) {\n        this.goNext();\n      }\n    }\n  }\n\n  /**\n   * Prepare invisible items.\n   */\n  prepareInvisibleItems() {\n    const state = this.states[this.currentIndex];\n    const nextItemsToPrepare = [];\n    const previousItemsToPrepare = [];\n\n    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n      if (i > this.currentIndex) {\n        nextItemsToPrepare.push(item);\n        return;\n      }\n\n      if (i < this.currentIndex) {\n        previousItemsToPrepare.push(item);\n      }\n    });\n\n    nextItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n\n    previousItemsToPrepare.forEach((item) => {\n      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n      if (invisibleState) {\n        item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n      }\n    });\n  }\n\n  /**\n   * Get the state where the given item will be visible.\n   */\n  getStateWhereItemWillBeInvisible(item: SliderItem, { reversed = false } = {}): SliderState {\n    const visibleStates = this.states.filter((state) =>\n      item.willBeVisible(this.getStateValueByMode(state.x)),\n    );\n    const firstVisibleState = visibleStates[0];\n    const lastVisibleState = visibleStates.at(-1);\n    const firstVisibleStateIndex = this.states.findIndex(\n      (state) =>\n        this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n    );\n    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n    return reversed\n      ? this.states[lastVisibleStateIndex + 1]\n      : this.states[firstVisibleStateIndex - 1];\n  }\n\n  /**\n   * Get the visible slides for the given position.\n   */\n  getVisibleItems(target: number) {\n    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n  }\n\n  /**\n   * Get the invisible slides for the given position.\n   */\n  getInvisibleItems(target: number) {\n    return this.$children.SliderItem.filter(\n      (item) => !item.isVisible && !item.willBeVisible(target),\n    );\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n  BaseProps,\n  BaseConfig,\n  DragServiceProps,\n  KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n  $refs: {\n    wrapper: HTMLElement;\n  };\n  $children: {\n    SliderItem: SliderItem[];\n    SliderDrag: SliderDrag[];\n  };\n  $options: {\n    mode: SliderModes;\n    fitBounds: boolean;\n    contain: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  };\n}\n\n/**\n * Slider class.\n * @see https://ui.studiometa.dev/-/components/Slider/\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Slider',\n    refs: ['wrapper'],\n    emits: ['goto', 'index'],\n    components: {\n      SliderItem,\n      SliderDrag,\n    },\n    options: {\n      mode: { type: String, default: 'left' },\n      fitBounds: Boolean,\n      contain: Boolean,\n      sensitivity: { type: Number, default: 1 },\n      dropSensitivity: { type: Number, default: 2 },\n    },\n  };\n\n  /**\n   * Distance on the x axis.\n   * @private\n   */\n  __distanceX = 0;\n\n  /**\n   * Initial x position.\n   * @private\n   */\n  __initialX = 0;\n\n  /**\n   * Index of the current active slide.\n   * @private\n   */\n  __currentIndex = 0;\n\n  /**\n   * Drag state.\n   * @private\n   */\n  __isDragging = false;\n\n  /**\n   * Store all the states.\n   */\n  states: SliderState[] = [];\n\n  /**\n   * Origins for the different modes.\n   */\n  origins: Record<SliderModes, number> = {\n    left: 0,\n    center: 0,\n    right: 0,\n  };\n\n  /**\n   * Wether or not the wrapper is focused.\n   */\n  hasFocus = false;\n\n  /**\n   * Get the current index.\n   */\n  get currentIndex() {\n    return this.__currentIndex;\n  }\n\n  /**\n   * Set the current index and emit the `index` event.\n   */\n  set currentIndex(value: number) {\n    this.currentSliderItem.disactivate();\n    this.$emit('index', value);\n    this.__currentIndex = value;\n    this.currentSliderItem.activate();\n  }\n\n  /**\n   * Get the current state.\n   */\n  get currentState() {\n    return this.states[this.currentIndex];\n  }\n\n  /**\n   * Get the first state.\n   */\n  get firstState() {\n    return this.states[0];\n  }\n\n  /**\n   * Get the last state.\n   */\n  get lastState() {\n    return this.states.at(-1);\n  }\n\n  /**\n   * Get the minimal contain state value.\n   */\n  get containMinState(): number {\n    return this.getStateValueByMode(this.firstState.x, 'left');\n  }\n\n  /**\n   * Get the maximal contain state value.\n   */\n  get containMaxState(): number {\n    return this.getStateValueByMode(this.lastState.x, 'right');\n  }\n\n  /**\n   * Get the last index.\n   */\n  get indexMax(): number {\n    return this.$children.SliderItem.length - 1;\n  }\n\n  /**\n   * Get the current SliderItem\n   */\n  get currentSliderItem() {\n    return this.$children.SliderItem[this.currentIndex];\n  }\n\n  /**\n   * Get the states for each SliderItem.\n   */\n  getStates(): SliderState[] {\n    const { wrapper } = this.$refs;\n    const originRect = wrapper.getBoundingClientRect();\n\n    this.origins = {\n      left: originRect.left,\n      center: originRect.x + originRect.width / 2,\n      right: originRect.x + originRect.width,\n    };\n\n    const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n      x: {\n        left: (item.rect.x - this.origins.left) * -1,\n        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n        right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n      },\n    }));\n\n    if (this.$options.contain) {\n      const { mode } = this.$options;\n      // Find state where last child has passed the wrapper bound completely\n      if (mode === 'left') {\n        const lastChild = this.$children.SliderItem.at(-1);\n\n        const maxState = states.find((state) => {\n          const lastChildPosition =\n            lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n          const diffWithWrapperBound = originRect.width - lastChildPosition;\n          if (diffWithWrapperBound > 0) {\n            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n            return true;\n          }\n\n          return false;\n        });\n\n        if (maxState) {\n          return states.map((state) => {\n            state.x.left = Math.max(state.x.left, maxState.x.left);\n            return state;\n          });\n        }\n      }\n\n      if (mode === 'right') {\n        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n        return states.map((state) => {\n          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n          return state;\n        });\n      }\n\n      if (mode === 'center') {\n        this.$warn('The `center` mode is not yet compatible with the `contain` mode.');\n      }\n    }\n\n    return states;\n  }\n\n  /**\n   * Get an origin by mode.\n   */\n  getOriginByMode(mode?: SliderModes) {\n    return this.origins[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Get a state value according to the given mode.\n   */\n  getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n    return state[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.states = this.getStates();\n    this.setAccessibilityAttributes();\n    this.goTo(this.currentIndex);\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    nextFrame(() => {\n      this.states = this.getStates();\n      nextFrame(() => {\n        this.goTo(this.currentIndex);\n      });\n    });\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'carousel');\n  }\n\n  /**\n   * Go to the next slide.\n   */\n  goNext() {\n    if (this.currentIndex + 1 > this.indexMax) {\n      return;\n    }\n\n    this.goTo(this.currentIndex + 1);\n  }\n\n  /**\n   * Go to the previous slide.\n   */\n  goPrev() {\n    if (this.currentIndex - 1 < 0) {\n      return;\n    }\n\n    this.goTo(this.currentIndex - 1);\n  }\n\n  /**\n   * Go to the given index.\n   */\n  goTo(index: number) {\n    if (index < 0 || index > this.indexMax) {\n      throw new Error('Index out of bound.');\n    }\n\n    const state = this.getStateValueByMode(this.states[index].x);\n\n    for (const item of this.$children.SliderItem) {\n      item.move(state);\n    }\n\n    this.currentIndex = index;\n    this.$emit('goto', index);\n  }\n\n  /**\n   * Listen to the Draggable `start` event.\n   */\n  onSliderDragStart() {\n    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n    this.__distanceX = this.__initialX;\n\n    this.__isDragging = true;\n  }\n\n  /**\n   * Listen to the Draggable `drag` event.\n   */\n  onSliderDragDrag({ args: [props] }: { args: [DragServiceProps] }) {\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n    for (const item of this.$children.SliderItem) {\n      item.moveInstantly(this.__distanceX);\n    }\n  }\n\n  /**\n   * Listen to the Draggable `drop` event and find the new active slide.\n   */\n  onSliderDragDrop({ args: [props] }: { args: [DragServiceProps] }) {\n    if (!this.__isDragging) {\n      return;\n    }\n    this.__isDragging = false;\n\n    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n      return;\n    }\n\n    let finalX = clamp(\n      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n      this.getStateValueByMode(this.firstState.x),\n      this.getStateValueByMode(this.lastState.x),\n    );\n\n    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n      Math.abs(finalX - this.getStateValueByMode(state.x)),\n    );\n    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n    if (this.$options.fitBounds) {\n      this.goTo(closestIndex);\n    } else {\n      if (this.$options.contain) {\n        finalX = Math.min(this.containMinState, finalX);\n        finalX = Math.max(this.containMaxState, finalX);\n      }\n      for (const item of this.$children.SliderItem) {\n        item.move(finalX);\n      }\n      this.currentIndex = closestIndex;\n    }\n  }\n\n  /**\n   * Enable focus.\n   */\n  onWrapperFocus() {\n    this.hasFocus = true;\n  }\n\n  /**\n   * Disable focus.\n   */\n  onWrapperBlur() {\n    this.hasFocus = false;\n  }\n\n  /**\n   * Go prev or next when focus is on the wrapper and pressing arrow keys.\n   */\n  keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n    if (this.hasFocus && isDown) {\n      if (LEFT) {\n        this.goPrev();\n      } else if (RIGHT) {\n        this.goNext();\n      }\n    }\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Slider/SliderBtn.d.ts

@@ -17,13 +17,10 @@ export declare class SliderBtn<T extends BaseProps = BaseProps> extends Abstract
     static config: BaseConfig;
     /**
      * Update attributes.
-     * @param   {number} index
-     * @returns {void}
      */
     update(index: number): void;
     /**
      * Go prev or next on click.
-     * @returns {void}
      */
     onClick(): void;
 }

package/Slider/SliderBtn.js

@@ -1,4 +1,3 @@
-import { isDev } from "@studiometa/js-toolkit/utils";
 import { AbstractSliderChild } from "./AbstractSliderChild.js";
 class SliderBtn extends AbstractSliderChild {
   /**
@@ -14,13 +13,11 @@ class SliderBtn extends AbstractSliderChild {
   };
   /**
    * Update attributes.
-   * @param   {number} index
-   * @returns {void}
    */
   update(index) {
-    if (isDev && this.$options.contain && !this.$parent.$options.contain) {
-      console.warn(
-        `[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`
+    if (this.$options.contain && !this.$parent.$options.contain) {
+      this.$warn(
+        `The contain option will only works if the parent Slider also has the contain option.`
       );
     }
     const isContainMaxState = this.$options.contain && this.$parent.$options.contain && this.$parent.containMaxState === this.$parent.getStates()[index].x[this.$parent.$options.mode];
@@ -32,7 +29,6 @@ class SliderBtn extends AbstractSliderChild {
   }
   /**
    * Go prev or next on click.
-   * @returns {void}
    */
   onClick() {
     const { prev, next } = this.$options;

package/Slider/SliderBtn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderBtn.ts"],
-  "sourcesContent": ["import { isDev } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n  $options: {\n    prev: boolean;\n    next: boolean;\n    contain: boolean;\n  };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderBtnProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderBtn',\n    options: {\n      prev: Boolean,\n      next: Boolean,\n      contain: Boolean,\n    },\n  };\n\n  /**\n   * Update attributes.\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    if (isDev && this.$options.contain && !this.$parent.$options.contain) {\n      console.warn(\n        `[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`,\n      );\n    }\n\n    const isContainMaxState =\n      this.$options.contain &&\n      this.$parent.$options.contain &&\n      this.$parent.containMaxState ===\n        this.$parent.getStates()[index].x[this.$parent.$options.mode];\n\n    if (\n      (index === 0 && this.$options.prev) ||\n      ((index === this.$parent.indexMax || isContainMaxState) && this.$options.next)\n    ) {\n      this.$el.setAttribute('disabled', '');\n    } else {\n      this.$el.removeAttribute('disabled');\n    }\n  }\n\n  /**\n   * Go prev or next on click.\n   * @returns {void}\n   */\n  onClick() {\n    const { prev, next } = this.$options;\n\n    if (prev) {\n      this.$parent.goPrev();\n    } else if (next) {\n      this.$parent.goNext();\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,2BAA2B;AAa7B,MAAM,kBAAmD,oBAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,QAAI,SAAS,KAAK,SAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,SAAS;AACpE,cAAQ;AAAA,QACN,IAAI,KAAK,GAAG;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBACJ,KAAK,SAAS,WACd,KAAK,QAAQ,SAAS,WACtB,KAAK,QAAQ,oBACX,KAAK,QAAQ,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,SAAS,IAAI;AAEhE,QACG,UAAU,KAAK,KAAK,SAAS,SAC5B,UAAU,KAAK,QAAQ,YAAY,sBAAsB,KAAK,SAAS,MACzE;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n  $options: {\n    prev: boolean;\n    next: boolean;\n    contain: boolean;\n  };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderBtnProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderBtn',\n    options: {\n      prev: Boolean,\n      next: Boolean,\n      contain: Boolean,\n    },\n  };\n\n  /**\n   * Update attributes.\n   */\n  update(index: number) {\n    if (this.$options.contain && !this.$parent.$options.contain) {\n      this.$warn(\n        `The contain option will only works if the parent Slider also has the contain option.`,\n      );\n    }\n\n    const isContainMaxState =\n      this.$options.contain &&\n      this.$parent.$options.contain &&\n      this.$parent.containMaxState ===\n        this.$parent.getStates()[index].x[this.$parent.$options.mode];\n\n    if (\n      (index === 0 && this.$options.prev) ||\n      ((index === this.$parent.indexMax || isContainMaxState) && this.$options.next)\n    ) {\n      this.$el.setAttribute('disabled', '');\n    } else {\n      this.$el.removeAttribute('disabled');\n    }\n  }\n\n  /**\n   * Go prev or next on click.\n   */\n  onClick() {\n    const { prev, next } = this.$options;\n\n    if (prev) {\n      this.$parent.goPrev();\n    } else if (next) {\n      this.$parent.goNext();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,2BAA2B;AAa7B,MAAM,kBAAmD,oBAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OAAe;AACpB,QAAI,KAAK,SAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,SAAS;AAC3D,WAAK;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,UAAM,oBACJ,KAAK,SAAS,WACd,KAAK,QAAQ,SAAS,WACtB,KAAK,QAAQ,oBACX,KAAK,QAAQ,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,SAAS,IAAI;AAEhE,QACG,UAAU,KAAK,KAAK,SAAS,SAC5B,UAAU,KAAK,QAAQ,YAAY,sBAAsB,KAAK,SAAS,MACzE;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;",
   "names": []
 }

package/Slider/SliderCount.d.ts

@@ -15,8 +15,6 @@ export declare class SliderCount<T extends BaseProps = BaseProps> extends Abstra
     static config: BaseConfig;
     /**
      * Update the current counter indicator.
-     * @param   {number} index The new active index.
-     * @returns {void}
      */
     update(index: number): void;
 }

package/Slider/SliderCount.js

@@ -1,3 +1,4 @@
+import { domScheduler } from "@studiometa/js-toolkit/utils";
 import { AbstractSliderChild } from "./AbstractSliderChild.js";
 class SliderCount extends AbstractSliderChild {
   /**
@@ -9,11 +10,11 @@ class SliderCount extends AbstractSliderChild {
   };
   /**
    * Update the current counter indicator.
-   * @param   {number} index The new active index.
-   * @returns {void}
    */
   update(index) {
-    this.$refs.current.innerHTML = `${index + 1}`;
+    domScheduler.write(() => {
+      this.$refs.current.textContent = `${index + 1}`;
+    });
   }
 }
 export {

package/Slider/SliderCount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderCount.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n  $refs: {\n    current: HTMLElement;\n  };\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderCountProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderCount',\n    refs: ['current'],\n  };\n\n  /**\n   * Update the current counter indicator.\n   * @param   {number} index The new active index.\n   * @returns {void}\n   */\n  update(index: number) {\n    this.$refs.current.innerHTML = `${index + 1}`;\n  }\n}\n"],
-  "mappings": "AACA,SAAS,2BAA2B;AAW7B,MAAM,oBAAqD,oBAEhE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ,CAAC;AAAA,EAC7C;AACF;",
+  "sourcesContent": ["import { domScheduler } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n  $refs: {\n    current: HTMLElement;\n  };\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderCountProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderCount',\n    refs: ['current'],\n  };\n\n  /**\n   * Update the current counter indicator.\n   */\n  update(index: number) {\n    domScheduler.write(() => {\n      this.$refs.current.textContent = `${index + 1}`;\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AAW7B,MAAM,oBAAqD,oBAEhE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OAAe;AACpB,iBAAa,MAAM,MAAM;AACvB,WAAK,MAAM,QAAQ,cAAc,GAAG,QAAQ,CAAC;AAAA,IAC/C,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/Slider/SliderDots.d.ts

@@ -16,7 +16,6 @@ export declare class SliderDots<T extends BaseProps = BaseProps> extends SliderD
     static config: BaseConfig;
     /**
      * Get target.
-     * @returns {HTMLButtonElement[]}
      */
     get target(): HTMLButtonElement[];
     /**
@@ -25,8 +24,6 @@ export declare class SliderDots<T extends BaseProps = BaseProps> extends SliderD
     currentIndex: number;
     /**
      * Update dots classes according to the new index.
-     * @param   {number} index
-     * @returns {void}
      */
     update(index: number): void;
     /**

package/Slider/SliderDots.js

@@ -10,7 +10,6 @@ class SliderDots extends withTransition(AbstractSliderChild) {
   };
   /**
    * Get target.
-   * @returns {HTMLButtonElement[]}
    */
   get target() {
     return this.$refs.dots;
@@ -18,16 +17,16 @@ class SliderDots extends withTransition(AbstractSliderChild) {
   /**
    * The current active index.
    */
-  currentIndex = 0;
+  currentIndex = -1;
   /**
    * Update dots classes according to the new index.
-   * @param   {number} index
-   * @returns {void}
    */
   update(index) {
-    this.leave(this.$refs.dots[this.currentIndex]);
-    this.enter(this.$refs.dots[index]);
-    this.currentIndex = index;
+    if (index !== this.currentIndex) {
+      this.leave(this.$refs.dots[this.currentIndex]);
+      this.enter(this.$refs.dots[index]);
+      this.currentIndex = index;
+    }
   }
   /**
    * Go to the given index on dot click.

package/Slider/SliderDots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderDots.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   * @returns {HTMLButtonElement[]}\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = 0;\n\n  /**\n   * Update dots classes according to the new index.\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    this.leave(this.$refs.dots[this.currentIndex]);\n    this.enter(this.$refs.dots[index]);\n    this.currentIndex = index;\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick({ index }: { index: number }) {\n    this.$parent.goTo(index);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,MAAM,GAAsB;AACxC,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = -1;\n\n  /**\n   * Update dots classes according to the new index.\n   */\n  update(index: number) {\n    if (index !== this.currentIndex) {\n      this.leave(this.$refs.dots[this.currentIndex]);\n      this.enter(this.$refs.dots[index]);\n      this.currentIndex = index;\n    }\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick({ index }: { index: number }) {\n    this.$parent.goTo(index);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA,EAKf,OAAO,OAAe;AACpB,QAAI,UAAU,KAAK,cAAc;AAC/B,WAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,WAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,MAAM,GAAsB;AACxC,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
   "names": []
 }

package/Slider/SliderDrag.d.ts

@@ -21,8 +21,6 @@ export declare class SliderDrag<T extends BaseProps = BaseProps> extends SliderD
     get shouldPreventScroll(): boolean;
     /**
      * Touchmove handler.
-     * @param   {TouchEvent} event
-     * @returns {void}
      */
     onTouchmove({ event }: {
         event: TouchEvent;

package/Slider/SliderDrag.js

@@ -23,8 +23,6 @@ class SliderDrag extends withDrag(Base) {
   }
   /**
    * Touchmove handler.
-   * @param   {TouchEvent} event
-   * @returns {void}
    */
   onTouchmove({ event }) {
     if (this.shouldPreventScroll) {

package/Slider/SliderDrag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderDrag.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove({ event }: { event: TouchEvent }) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,EAAE,MAAM,GAA0B;AAC5C,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   */\n  onTouchmove({ event }: { event: TouchEvent }) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,MAAM,GAA0B;AAC5C,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
   "names": []
 }

package/Slider/SliderItem.d.ts

@@ -1,27 +1,21 @@
 import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
-declare const SliderItem_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithIntersectionObserverInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithIntersectionObserverProps>;
+export interface SliderItemProps extends BaseProps {
+}
 /**
- * Manage a slider item and its state transition.
+ * SliderItem class.
  */
-export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderItem_base<T> {
+export declare class SliderItem<T extends BaseProps = BaseProps> extends Base<T & SliderItemProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
-    /**
-     * Wether the SliderItem is visible or not.
-     * @type {boolean}
-     */
-    isVisible: boolean;
     /**
      * The SliderItem `x` position.
-     * @type {number}
      */
     x: number;
     /**
      * The smoothed `x` position.
-     * @type {number}
      */
     dampedX: number;
     /**
@@ -37,7 +31,13 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
         width: number;
         height: number;
     };
+    /**
+     * Wether the slider item size should be evaluated or not.
+     */
     shouldEvaluateRect: boolean;
+    /**
+     * Size of the slider item.
+     */
     get rect(): {
         x: number;
         y: number;
@@ -60,16 +60,11 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
      * Reset position to `0` on destroy.
      */
     destroyed(): void;
-    /**
-     * Intersected hook.
-     */
-    intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]): void;
     /**
      * Ticked hook.
      * @todo create AbstractSliderItem with `render` method
      * @todo add state to SliderItem
      * @todo add origin to SliderItem
-     * @returns {void}
      */
     ticked(): void;
     /**
@@ -96,15 +91,4 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
      * Render the component.
      */
     render(): void;
-    /**
-     * Check if SliderItem is partially visible for the given target position.
-     */
-    willBeVisible(targetPosition: number): boolean;
-    /**
-     * Check if SliderItem is fully visible for the given target position.
-     * @param   {number} targetPosition
-     * @returns {boolean}
-     */
-    willBeFullyVisible(targetPosition: any): boolean;
 }
-export {};