@studiometa/ui 0.2.13 → 0.2.14

package/molecules/Panel/Panel.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,24 +15,29 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Panel/Panel.js
+// packages/ui/molecules/Panel/Panel.ts
 var Panel_exports = {};
 __export(Panel_exports, {
-  default: () => Panel
+  Panel: () => Panel
 });
 module.exports = __toCommonJS(Panel_exports);
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_Modal = __toESM(require("../Modal/Modal.cjs"), 1);
-var _Panel = class extends import_Modal.default {
+var import_Modal = require("../Modal/index.cjs");
+var DEFAULT_POSITION = "left";
+var _Panel = class extends import_Modal.Modal {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isClosing", false);
+  }
   get translateClass() {
-    return _Panel.translateClasses[this.$options.position] ?? _Panel.translateClasses[_Panel.config.options.position.default];
+    var _a;
+    return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[DEFAULT_POSITION];
   }
   get containerOffset() {
     const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
@@ -59,14 +62,18 @@ var _Panel = class extends import_Modal.default {
       return Promise.resolve();
     }
     this.$refs.modal.classList.remove("pointer-events-none");
-    (0, import_utils.transition)(this.$refs.container, {
-      from: {
-        transform: this.containerOffset
+    (0, import_utils.transition)(
+      this.$refs.container,
+      {
+        from: {
+          transform: this.containerOffset
+        },
+        to: {
+          transform: "none"
+        }
       },
-      to: {
-        transform: "none"
-      }
-    }, "keep");
+      "keep"
+    );
     (0, import_utils.transition)(this.$refs.overlay, {
       from: "opacity-0"
     });
@@ -79,17 +86,25 @@ var _Panel = class extends import_Modal.default {
     this.isClosing = true;
     this.$refs.modal.classList.add("pointer-events-none");
     await Promise.all([
-      (0, import_utils.transition)(this.$refs.container, {
-        from: {
-          transform: "none"
+      (0, import_utils.transition)(
+        this.$refs.container,
+        {
+          from: {
+            transform: "none"
+          },
+          to: {
+            transform: this.containerOffset
+          }
         },
-        to: {
-          transform: this.containerOffset
-        }
-      }, "keep"),
-      (0, import_utils.transition)(this.$refs.overlay, {
-        to: "opacity-0"
-      }, "keep")
+        "keep"
+      ),
+      (0, import_utils.transition)(
+        this.$refs.overlay,
+        {
+          to: "opacity-0"
+        },
+        "keep"
+      )
     ]);
     this.isClosing = false;
     return super.close();
@@ -101,7 +116,7 @@ __publicField(Panel, "config", {
   options: {
     position: {
       type: String,
-      default: "left"
+      default: DEFAULT_POSITION
     }
   }
 });

package/molecules/Panel/Panel.d.ts

@@ -1,42 +1,43 @@
-/**
- * @typedef {import('../Modal/Modal.js').ModalInterface} ModalInterface
- * @typedef {Panel & ModalInterface} PanelInterface
- * @typedef {typeof Modal} ModalConstructor
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { Modal } from '../Modal/index.js';
+export interface PanelProps extends BaseProps {
+    $options: {
+        position: 'top' | 'right' | 'bottom' | 'left';
+    };
+}
 /**
  * Panel class.
  */
-export default class Panel extends Modal {
+export declare class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        options: {
-            position: {
-                type: StringConstructor;
-                default: string;
-            };
-        };
-    };
+    static config: BaseConfig;
     static translateClasses: {
         top: string;
         right: string;
         bottom: string;
         left: string;
     };
+    isClosing: boolean;
     /**
      * Get the translation class.
      * @returns {string}
      */
     get translateClass(): string;
+    get containerOffset(): string;
     /**
+     * Animate before opening.
+     *
      * @this {PanelInterface}
+     * @returns {Promise<void>}
      */
-    get containerOffset(): string;
-    isClosing: boolean;
+    open(): Promise<void>;
+    /**
+     * Animate before closing.
+     *
+     * @this {PanelInterface}
+     * @returns {Promise<void>}
+     */
+    close(): Promise<void>;
 }
-export type ModalInterface = import('../Modal/Modal.js').ModalInterface;
-export type PanelInterface = Panel & ModalInterface;
-export type ModalConstructor = typeof Modal;
-import Modal from "../Modal/Modal.js";

package/molecules/Panel/Panel.js

@@ -1 +1,108 @@
-import{transition as s,matrix as a}from"@studiometa/js-toolkit/utils";import l from"../Modal/Modal.js";class t extends l{static config={name:"Panel",options:{position:{type:String,default:"left"}}};static translateClasses={top:"-translate-y-full",right:"translate-x-full",bottom:"translate-y-full",left:"-translate-x-full"};get translateClass(){return t.translateClasses[this.$options.position]??t.translateClasses[t.config.options.position.default]}get containerOffset(){const{offsetTop:e,offsetLeft:o,offsetWidth:n,offsetHeight:i}=this.$refs.container,r={top:{translateY:(e+i)*-1},right:{translateX:window.innerWidth-o+n*2},bottom:{translateY:window.innerHeight-e+i*2},left:{translateX:(o+n)*-1}};return a(r[this.$options.position])}async open(){return this.isOpen?Promise.resolve():(this.$refs.modal.classList.remove("pointer-events-none"),s(this.$refs.container,{from:{transform:this.containerOffset},to:{transform:"none"}},"keep"),s(this.$refs.overlay,{from:"opacity-0"}),super.open())}async close(){return!this.isOpen||this.isClosing?Promise.resolve():(this.isClosing=!0,this.$refs.modal.classList.add("pointer-events-none"),await Promise.all([s(this.$refs.container,{from:{transform:"none"},to:{transform:this.containerOffset}},"keep"),s(this.$refs.overlay,{to:"opacity-0"},"keep")]),this.isClosing=!1,super.close())}}export{t as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { transition, matrix } from "@studiometa/js-toolkit/utils";
+import { Modal } from "../Modal/index.js";
+const DEFAULT_POSITION = "left";
+const _Panel = class extends Modal {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isClosing", false);
+  }
+  get translateClass() {
+    var _a;
+    return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[DEFAULT_POSITION];
+  }
+  get containerOffset() {
+    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
+    const store = {
+      top: {
+        translateY: (offsetTop + offsetHeight) * -1
+      },
+      right: {
+        translateX: window.innerWidth - offsetLeft + offsetWidth * 2
+      },
+      bottom: {
+        translateY: window.innerHeight - offsetTop + offsetHeight * 2
+      },
+      left: {
+        translateX: (offsetLeft + offsetWidth) * -1
+      }
+    };
+    return matrix(store[this.$options.position]);
+  }
+  async open() {
+    if (this.isOpen) {
+      return Promise.resolve();
+    }
+    this.$refs.modal.classList.remove("pointer-events-none");
+    transition(
+      this.$refs.container,
+      {
+        from: {
+          transform: this.containerOffset
+        },
+        to: {
+          transform: "none"
+        }
+      },
+      "keep"
+    );
+    transition(this.$refs.overlay, {
+      from: "opacity-0"
+    });
+    return super.open();
+  }
+  async close() {
+    if (!this.isOpen || this.isClosing) {
+      return Promise.resolve();
+    }
+    this.isClosing = true;
+    this.$refs.modal.classList.add("pointer-events-none");
+    await Promise.all([
+      transition(
+        this.$refs.container,
+        {
+          from: {
+            transform: "none"
+          },
+          to: {
+            transform: this.containerOffset
+          }
+        },
+        "keep"
+      ),
+      transition(
+        this.$refs.overlay,
+        {
+          to: "opacity-0"
+        },
+        "keep"
+      )
+    ]);
+    this.isClosing = false;
+    return super.close();
+  }
+};
+let Panel = _Panel;
+__publicField(Panel, "config", {
+  name: "Panel",
+  options: {
+    position: {
+      type: String,
+      default: DEFAULT_POSITION
+    }
+  }
+});
+__publicField(Panel, "translateClasses", {
+  top: "-translate-y-full",
+  right: "translate-x-full",
+  bottom: "translate-y-full",
+  left: "-translate-x-full"
+});
+export {
+  Panel
+};

package/molecules/Panel/index.cjs

@@ -0,0 +1,20 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/molecules/Panel/index.ts
+var Panel_exports = {};
+module.exports = __toCommonJS(Panel_exports);
+__reExport(Panel_exports, require("./Panel.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Panel/index.d.ts

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

package/molecules/Panel/index.js

@@ -0,0 +1 @@
+export * from "./Panel.js";

package/molecules/Slider/AbstractSliderChild.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,27 +15,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Slider/AbstractSliderChild.js
+// packages/ui/molecules/Slider/AbstractSliderChild.ts
 var AbstractSliderChild_exports = {};
 __export(AbstractSliderChild_exports, {
-  default: () => AbstractSliderChild
+  AbstractSliderChild: () => AbstractSliderChild
 });
 module.exports = __toCommonJS(AbstractSliderChild_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_Slider = __toESM(require("./Slider.cjs"), 1);
+var import_Slider = require("./Slider.cjs");
 var AbstractSliderChild = class extends import_js_toolkit.Base {
-  $parent;
   mounted() {
-    if (!(this.$parent instanceof import_Slider.default)) {
-      throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);
+    if (!(this.$parent instanceof import_Slider.Slider)) {
+      throw new Error(
+        `The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`
+      );
     }
     this.$parent.$on("index", this);
   }

package/molecules/Slider/AbstractSliderChild.d.ts

@@ -1,36 +1,27 @@
-/**
- * @typedef {AbstractSliderChild & { $parent: Slider, $refs: { progress: HTMLElement } }} AbstractSliderChildInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig, BaseInterface } from '@studiometa/js-toolkit';
+import { Slider } from './Slider.js';
+export interface AbstractSliderChildProps extends BaseProps {
+    $parent: Slider;
+}
 /**
  * AbstractSliderChild class.
  */
-export default class AbstractSliderChild extends Base {
+export declare class AbstractSliderChild<T extends BaseProps = BaseProps> extends Base<T & AbstractSliderChildProps> implements BaseInterface {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-    };
-    /**
-     * @type {Slider}
-     */
-    $parent: Slider;
+    static config: BaseConfig;
     /**
      * Listen to the `goto` event of the parent on mount.
-     * @returns {void}
      */
     mounted(): void;
     /**
      * Trigger update on resize.
-     *
-     * @this    {AbstractSliderChildInterface}
-     * @returns {void}
      */
-    resized(this: AbstractSliderChildInterface): void;
+    resized(): void;
     /**
      * Remove the event listener.
-     *
-     * @returns {void}
      */
     destroyed(): void;
     /**
@@ -39,21 +30,11 @@ export default class AbstractSliderChild extends Base {
      * @param   {CustomEvent} event
      * @returns {void}
      */
-    handleEvent(event: CustomEvent): void;
+    handleEvent(event: any): void;
     /**
      * Update the child component with the given index.
-     *
-     * @this    {AbstractSliderChildInterface}
      * @param   {number} index The new active index.
      * @returns {void|(()=>void)}
      */
-    update(this: AbstractSliderChildInterface, index: number): void | (() => void);
+    update(index: any): void | (() => void);
 }
-export type AbstractSliderChildInterface = AbstractSliderChild & {
-    $parent: Slider;
-    $refs: {
-        progress: HTMLElement;
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
-import Slider from "./Slider.js";

package/molecules/Slider/AbstractSliderChild.js

@@ -1 +1,48 @@
-import{Base as r}from"@studiometa/js-toolkit";import{nextFrame as d,domScheduler as i,isFunction as n}from"@studiometa/js-toolkit/utils";import o from"./Slider.js";class a extends r{static config={name:"AbstractSliderChild"};$parent;mounted(){if(!(this.$parent instanceof o))throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);this.$parent.$on("index",this)}resized(){d(()=>{this.update(this.$parent.currentIndex)})}destroyed(){this.$parent.$off("index",this)}handleEvent(e){e.type==="index"&&i.read(()=>{const t=this.update(e.detail[0]);n(t)&&i.write(()=>{t()})})}update(e){throw new Error(`The \`AbstractSliderChild.update(${e})\` method must be implemented.`)}}export{a as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { nextFrame, domScheduler, isFunction } from "@studiometa/js-toolkit/utils";
+import { Slider } from "./Slider.js";
+class AbstractSliderChild extends Base {
+  mounted() {
+    if (!(this.$parent instanceof Slider)) {
+      throw new Error(
+        `The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`
+      );
+    }
+    this.$parent.$on("index", this);
+  }
+  resized() {
+    nextFrame(() => {
+      this.update(this.$parent.currentIndex);
+    });
+  }
+  destroyed() {
+    this.$parent.$off("index", this);
+  }
+  handleEvent(event) {
+    if (event.type === "index") {
+      domScheduler.read(() => {
+        const callback = this.update(event.detail[0]);
+        if (isFunction(callback)) {
+          domScheduler.write(() => {
+            callback();
+          });
+        }
+      });
+    }
+  }
+  update(index) {
+    throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
+  }
+}
+__publicField(AbstractSliderChild, "config", {
+  name: "AbstractSliderChild"
+});
+export {
+  AbstractSliderChild
+};

package/molecules/Slider/Slider.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,27 +15,36 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Slider/Slider.js
+// packages/ui/molecules/Slider/Slider.ts
 var Slider_exports = {};
 __export(Slider_exports, {
-  default: () => Slider
+  Slider: () => Slider
 });
 module.exports = __toCommonJS(Slider_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_SliderDrag = __toESM(require("./SliderDrag.cjs"), 1);
-var import_SliderItem = __toESM(require("./SliderItem.cjs"), 1);
+var import_SliderDrag = require("./SliderDrag.cjs");
+var import_SliderItem = require("./SliderItem.cjs");
 var Slider = class extends import_js_toolkit.Base {
-  __distanceX = 0;
-  __initialX = 0;
-  __currentIndex = 0;
+  constructor() {
+    super(...arguments);
+    __publicField(this, "__distanceX", 0);
+    __publicField(this, "__initialX", 0);
+    __publicField(this, "__currentIndex", 0);
+    __publicField(this, "states", []);
+    __publicField(this, "origins", {
+      left: 0,
+      center: 0,
+      right: 0
+    });
+    __publicField(this, "hasFocus", false);
+  }
   get currentIndex() {
     return this.__currentIndex;
   }
@@ -47,13 +54,6 @@ var Slider = class extends import_js_toolkit.Base {
     this.__currentIndex = value;
     this.currentSliderItem.activate();
   }
-  states = [];
-  origins = {
-    left: 0,
-    center: 0,
-    right: 0
-  };
-  hasFocus = false;
   get currentState() {
     return this.states[this.currentIndex];
   }
@@ -61,7 +61,7 @@ var Slider = class extends import_js_toolkit.Base {
     return this.states[0];
   }
   get lastState() {
-    return this.states[this.states.length - 1];
+    return this.states.at(-1);
   }
   get containMinState() {
     return this.getStateValueByMode(this.firstState.x, "left");
@@ -119,16 +119,19 @@ var Slider = class extends import_js_toolkit.Base {
         });
       }
       if (mode === "center" && import_utils.isDev) {
-        console.warn(`[${this.$id}]`, "The `center` mode is not yet compatible with the `contain` mode.");
+        console.warn(
+          `[${this.$id}]`,
+          "The `center` mode is not yet compatible with the `contain` mode."
+        );
       }
     }
     return states;
   }
   getOriginByMode(mode) {
-    return this.origins[mode ?? this.$options.mode];
+    return this.origins[mode != null ? mode : this.$options.mode];
   }
   getStateValueByMode(state, mode) {
-    return state[mode ?? this.$options.mode];
+    return state[mode != null ? mode : this.$options.mode];
   }
   mounted() {
     this.states = this.getStates();
@@ -193,10 +196,16 @@ var Slider = class extends import_js_toolkit.Base {
     if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
       return;
     }
-    let finalX = (0, import_utils.clamp)((0, import_utils.inertiaFinalValue)(this.__distanceX, props.delta.x * this.$options.dropSensitivity), 0, this.getStateValueByMode(this.lastState.x));
-    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) => Math.abs(finalX - this.getStateValueByMode(state.x)));
+    let finalX = (0, import_utils.clamp)(
+      (0, import_utils.inertiaFinalValue)(this.__distanceX, props.delta.x * this.$options.dropSensitivity),
+      0,
+      this.getStateValueByMode(this.lastState.x)
+    );
+    const absoluteDifferencesBetweenDistanceAndState = this.states.map(
+      (state) => Math.abs(finalX - this.getStateValueByMode(state.x))
+    );
     const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
-    const closestIndex = absoluteDifferencesBetweenDistanceAndState.findIndex((number) => number === minimumDifference);
+    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);
     if (this.$options.fitBounds) {
       this.goTo(closestIndex, { withInstantMove: false });
     } else {
@@ -252,10 +261,14 @@ var Slider = class extends import_js_toolkit.Base {
     });
   }
   getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
-    const visibleStates = this.states.filter((state) => item.willBeVisible(this.getStateValueByMode(state.x)));
+    const visibleStates = this.states.filter(
+      (state) => item.willBeVisible(this.getStateValueByMode(state.x))
+    );
     const firstVisibleState = visibleStates[0];
-    const lastVisibleState = visibleStates[visibleStates.length - 1];
-    const firstVisibleStateIndex = this.states.findIndex((state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x));
+    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];
   }
@@ -263,7 +276,9 @@ var Slider = class extends import_js_toolkit.Base {
     return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
   }
   getInvisibleItems(target) {
-    return this.$children.SliderItem.filter((item) => !item.isVisible && !item.willBeVisible(target));
+    return this.$children.SliderItem.filter(
+      (item) => !item.isVisible && !item.willBeVisible(target)
+    );
   }
 };
 __publicField(Slider, "config", {
@@ -271,8 +286,8 @@ __publicField(Slider, "config", {
   refs: ["wrapper", "debug"],
   emits: ["goto", "index"],
   components: {
-    SliderItem: import_SliderItem.default,
-    SliderDrag: import_SliderDrag.default
+    SliderItem: import_SliderItem.SliderItem,
+    SliderDrag: import_SliderDrag.SliderDrag
   },
   options: {
     mode: { type: String, default: "left" },