@studiometa/ui 0.2.10 → 0.2.11

package/atoms/Figure/Figure.cjs

@@ -28,7 +28,11 @@ __export(Figure_exports, {
 });
 module.exports = __toCommonJS(Figure_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
-var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
+var import_primitives = require("../../primitives/index.cjs");
+var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_primitives.Transition, { threshold: [0, 1] }) {
+  get target() {
+    return this.$refs.img;
+  }
   get src() {
     return this.$refs.img.src;
   }
@@ -36,21 +40,31 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
     this.$refs.img.src = value;
   }
   mounted() {
-    if (!this.$refs.img) {
+    const { img } = this.$refs;
+    if (!img) {
       throw new Error("[Figure] The `img` ref is required.");
     }
-    if (!(this.$refs.img instanceof HTMLImageElement)) {
+    if (!(img instanceof HTMLImageElement)) {
       throw new Error("[Figure] The `img` ref must be an `<img>` element.");
     }
-    if (this.$options.lazy && this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.src) {
-      this.src = this.$refs.img.getAttribute("data-src");
+    const src = img.getAttribute("data-src");
+    if (this.$options.lazy && src && src !== this.src) {
+      let tempImg = new Image();
+      tempImg.onload = () => {
+        this.enter();
+        this.src = src;
+        tempImg = null;
+      };
+      tempImg.src = src;
     }
   }
 };
 __publicField(Figure, "config", {
+  ...import_primitives.Transition.config,
   name: "Figure",
   refs: ["img"],
   options: {
+    ...import_primitives.Transition.config.options,
     lazy: Boolean
   }
 });

package/atoms/Figure/Figure.d.ts

@@ -1,28 +1,49 @@
+declare const Figure_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
 /**
- * @typedef {Object} FigureRefs
- * @property {HTMLImageElement} img
- */
-/**
- * @typedef {Object} FigureInterface
- * @property {FigureRefs} $refs
+ * @typedef {Figure & {
+ *   $refs: {
+ *     img: HTMLImageElement
+ *   },
+ *   $options: {
+ *     lazy: boolean
+ *   }
+ * }} FigureInterface
  */
 /**
  * Figure class.
  *
  * Manager lazyloading image sources.
  */
-export default class Figure extends Base {
+export default class Figure extends Figure_base {
+    /**
+     * Config.
+     */
     static config: {
         name: string;
         refs: string[];
         options: {
             lazy: BooleanConstructor;
         };
+        debug?: boolean;
+        log?: boolean;
+        emits?: string[];
+        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
     };
+    /**
+     * Get the transition target.
+     *
+     * @this {FigureInterface}
+     * @returns {HTMLImageElement}
+     */
+    get target(): HTMLImageElement;
     /**
      * Set the image source.
      *
-     * @this {Figure & FigureInterface}
+     * @this {FigureInterface}
      * @param   {string} value
      * @returns {void}
      */
@@ -30,20 +51,22 @@ export default class Figure extends Base {
     /**
      * Get the image source.
      *
-     * @this {Figure & FigureInterface}
+     * @this {FigureInterface}
      * @returns {string}
      */
     get src(): string;
     /**
      * Load on mount.
-     * @this {Figure & FigureInterface}
+     * @this {FigureInterface}
      */
-    mounted(this: Figure & FigureInterface): void;
+    mounted(this: FigureInterface): void;
 }
-export type FigureRefs = {
-    img: HTMLImageElement;
-};
-export type FigureInterface = {
-    $refs: FigureRefs;
+export type FigureInterface = Figure & {
+    $refs: {
+        img: HTMLImageElement;
+    };
+    $options: {
+        lazy: boolean;
+    };
 };
-import { Base } from "@studiometa/js-toolkit";
+export {};

package/atoms/Figure/Figure.js

@@ -1 +1 @@
-import{Base as t,withMountWhenInView as r}from"@studiometa/js-toolkit";class i extends r(t,{threshold:[0,1]}){static config={name:"Figure",refs:["img"],options:{lazy:Boolean}};get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$options.lazy&&this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.src&&(this.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};
+import{withMountWhenInView as s}from"@studiometa/js-toolkit";import{Transition as i}from"../../primitives/index.js";class n extends s(i,{threshold:[0,1]}){static config={...i.config,name:"Figure",refs:["img"],options:{...i.config.options,lazy:Boolean}};get target(){return this.$refs.img}get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){const{img:e}=this.$refs;if(!e)throw new Error("[Figure] The `img` ref is required.");if(!(e instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");const t=e.getAttribute("data-src");if(this.$options.lazy&&t&&t!==this.src){let r=new Image;r.onload=()=>{this.enter(),this.src=t,r=null},r.src=t}}}export{n as default};

package/atoms/Figure/FigureTwicPics.cjs

@@ -41,7 +41,7 @@ var FigureTwicPics = class extends import_Figure.default {
     return url.host;
   }
   set src(value) {
-    const url = new URL(value);
+    const url = new URL(value, window.location.origin);
     url.host = this.domain;
     const width = normalizeSize(this, "offsetWidth");
     const height = normalizeSize(this, "offsetHeight");

package/atoms/Figure/FigureTwicPics.d.ts

@@ -22,6 +22,10 @@ export default class FigureTwicPics extends Figure {
             lazy: BooleanConstructor;
         };
         refs: string[];
+        debug?: boolean;
+        log?: boolean;
+        emits?: string[];
+        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
     };
     /**
      * Get the TwicPics domain.
@@ -43,6 +47,7 @@ export type FigureTwicPicsInterface = FigureTwicPics & FigureInterface & {
     $options: {
         transform: string;
         step: number;
+        mode: string;
     };
 };
 import Figure from "./Figure.js";

package/atoms/Figure/FigureTwicPics.js

@@ -1 +1 @@
-import i from"./Figure.js";function o(e,s){const{step:t}=e.$options;return Math.ceil(e.$refs.img[s]/t)*t}class c extends i{static config={...i.config,name:"FigureTwicPics",options:{...i.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};
+import e from"./Figure.js";function o(i,s){const{step:t}=i.$options;return Math.ceil(i.$refs.img[s]/t)*t}class c extends e{static config={...e.config,name:"FigureTwicPics",options:{...e.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s,window.location.origin);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};

package/atoms/ScrollReveal/ScrollReveal.cjs

@@ -0,0 +1,72 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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/atoms/ScrollReveal/ScrollReveal.js
+var ScrollReveal_exports = {};
+__export(ScrollReveal_exports, {
+  default: () => ScrollReveal
+});
+module.exports = __toCommonJS(ScrollReveal_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_primitives = require("../../primitives/index.cjs");
+var _ScrollReveal = class extends (0, import_js_toolkit.withMountWhenInView)(import_primitives.Transition) {
+  get target() {
+    return this.$refs.target ?? this.$el;
+  }
+  mounted() {
+    if (!this.$options.repeat) {
+      this.enter();
+      this.$terminate();
+      return;
+    }
+    const scroll = (0, import_js_toolkit.useScroll)();
+    if (!scroll.has("ScrollRevealRepeat")) {
+      scroll.add("ScrollRevealRepeat", (props) => {
+        _ScrollReveal.scrollDirectionY = props.direction.y;
+      });
+    }
+    if (_ScrollReveal.scrollDirectionY !== "UP") {
+      this.enter();
+    }
+  }
+};
+var ScrollReveal = _ScrollReveal;
+__publicField(ScrollReveal, "config", {
+  ...import_primitives.Transition.config,
+  name: "ScrollReveal",
+  refs: ["target"],
+  options: {
+    ...import_primitives.Transition.config.options,
+    enterKeep: {
+      type: Boolean,
+      default: true
+    },
+    repeat: Boolean,
+    intersectionObserver: {
+      type: Object,
+      default: () => ({ threshold: [0, 1] })
+    }
+  }
+});
+__publicField(ScrollReveal, "scrollDirectionY", "NONE");
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/ScrollReveal/ScrollReveal.d.ts

@@ -0,0 +1,77 @@
+declare const ScrollReveal_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>; /**
+     * Trigger the `enter` transition on mount.
+     *
+     * @this {ScrollRevealInterface}
+     * @returns {void}
+     */
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
+/**
+ * @typedef {ScrollReveal & {
+ *   $refs: {
+ *     target?: HTMLElement,
+ *   },
+ *   $options: {
+ *     repeat: boolean;
+ *   }
+ * }} ScrollRevealInterface
+ */
+/**
+ * ScrollReveal class.
+ */
+export default class ScrollReveal extends ScrollReveal_base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        options: {
+            enterKeep: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            repeat: BooleanConstructor;
+            intersectionObserver: {
+                type: ObjectConstructor;
+                default: () => {
+                    threshold: number[];
+                };
+            };
+        };
+        debug?: boolean;
+        log?: boolean;
+        emits?: string[];
+        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
+    };
+    /**
+     * Vertical scroll direction.
+     * @type {'UP'|'DOWN'|'NONE'}
+     */
+    static scrollDirectionY: 'UP' | 'DOWN' | 'NONE';
+    /**
+     * Get the transition target.
+     *
+     * @this {ScrollRevealInterface}
+     * @returns {HTMLElement}
+     */
+    get target(): HTMLElement;
+    /**
+     * Trigger the `enter` transition on mount.
+     *
+     * @this {ScrollRevealInterface}
+     * @returns {void}
+     */
+    mounted(this: ScrollRevealInterface): void;
+}
+export type ScrollRevealInterface = ScrollReveal & {
+    $refs: {
+        target?: HTMLElement;
+    };
+    $options: {
+        repeat: boolean;
+    };
+};
+export {};

package/atoms/ScrollReveal/ScrollReveal.js

@@ -0,0 +1 @@
+import{withMountWhenInView as i,useScroll as n}from"@studiometa/js-toolkit";import{Transition as t}from"../../primitives/index.js";class e extends i(t){static config={...t.config,name:"ScrollReveal",refs:["target"],options:{...t.config.options,enterKeep:{type:Boolean,default:!0},repeat:Boolean,intersectionObserver:{type:Object,default:()=>({threshold:[0,1]})}}};static scrollDirectionY="NONE";get target(){return this.$refs.target??this.$el}mounted(){if(!this.$options.repeat){this.enter(),this.$terminate();return}const r=n();r.has("ScrollRevealRepeat")||r.add("ScrollRevealRepeat",o=>{e.scrollDirectionY=o.direction.y}),e.scrollDirectionY!=="UP"&&this.enter()}}export{e as default};

package/atoms/ScrollReveal/index.cjs

@@ -0,0 +1,29 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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);
+
+// packages/ui/atoms/ScrollReveal/index.js
+var ScrollReveal_exports = {};
+__export(ScrollReveal_exports, {
+  ScrollReveal: () => import_ScrollReveal.default
+});
+module.exports = __toCommonJS(ScrollReveal_exports);
+var import_ScrollReveal = __toESM(require("./ScrollReveal.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/ScrollReveal/index.d.ts

@@ -0,0 +1 @@
+export { default as ScrollReveal } from "./ScrollReveal.js";

package/atoms/ScrollReveal/index.js

@@ -0,0 +1 @@
+import{default as a}from"./ScrollReveal.js";export{a as ScrollReveal};

package/atoms/index.cjs

@@ -32,6 +32,7 @@ module.exports = __toCommonJS(atoms_exports);
 __reExport(atoms_exports, require("./Figure/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./Prefetch/index.cjs"), module.exports);
 __reExport(atoms_exports, require("./ScrollAnimation/index.cjs"), module.exports);
+__reExport(atoms_exports, require("./ScrollReveal/index.cjs"), module.exports);
 var import_AnchorScrollTo = __toESM(require("./AnchorScrollTo/AnchorScrollTo.cjs"), 1);
 var import_Cursor = __toESM(require("./Cursor/Cursor.cjs"), 1);
 var import_LargeText = __toESM(require("./LargeText/LargeText.cjs"), 1);

package/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./Figure/index.js";
 export * from "./Prefetch/index.js";
 export * from "./ScrollAnimation/index.js";
+export * from "./ScrollReveal/index.js";
 export { default as AnchorScrollTo } from "./AnchorScrollTo/AnchorScrollTo.js";
 export { default as Cursor } from "./Cursor/Cursor.js";
 export { default as LargeText } from "./LargeText/LargeText.js";

package/atoms/index.js

@@ -1 +1 @@
-export*from"./Figure/index.js";export*from"./Prefetch/index.js";export*from"./ScrollAnimation/index.js";import{default as a}from"./AnchorScrollTo/AnchorScrollTo.js";import{default as l}from"./Cursor/Cursor.js";import{default as p}from"./LargeText/LargeText.js";import{default as d}from"./LazyInclude/LazyInclude.js";export{a as AnchorScrollTo,l as Cursor,p as LargeText,d as LazyInclude};
+export*from"./Figure/index.js";export*from"./Prefetch/index.js";export*from"./ScrollAnimation/index.js";export*from"./ScrollReveal/index.js";import{default as x}from"./AnchorScrollTo/AnchorScrollTo.js";import{default as p}from"./Cursor/Cursor.js";import{default as u}from"./LargeText/LargeText.js";import{default as s}from"./LazyInclude/LazyInclude.js";export{x as AnchorScrollTo,p as Cursor,u as LargeText,s as LazyInclude};

package/decorators/index.cjs

@@ -0,0 +1,29 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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);
+
+// packages/ui/decorators/index.js
+var decorators_exports = {};
+__export(decorators_exports, {
+  withTransition: () => import_withTransition.default
+});
+module.exports = __toCommonJS(decorators_exports);
+var import_withTransition = __toESM(require("./withTransition.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/index.d.ts

@@ -0,0 +1 @@
+export { default as withTransition } from "./withTransition.js";

package/decorators/index.js

@@ -0,0 +1 @@
+import{default as i}from"./withTransition.js";export{i as withTransition};

package/decorators/withTransition.cjs

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/decorators/withTransition.js
+var withTransition_exports = {};
+__export(withTransition_exports, {
+  default: () => withTransition
+});
+module.exports = __toCommonJS(withTransition_exports);
+var import_utils = require("@studiometa/js-toolkit/utils");
+function delegateTransition(element, name, endMode) {
+  return (0, import_utils.isArray)(element) ? Promise.all(element.map((el) => (0, import_utils.transition)(el, name, endMode))) : (0, import_utils.transition)(element, name, endMode);
+}
+function withTransition(BaseClass) {
+  class Transition extends BaseClass {
+    static config = {
+      name: "Transition",
+      options: {
+        enterFrom: String,
+        enterActive: String,
+        enterTo: String,
+        enterKeep: Boolean,
+        leaveFrom: String,
+        leaveActive: String,
+        leaveTo: String,
+        leaveKeep: Boolean
+      }
+    };
+    get target() {
+      return this.$el;
+    }
+    enter(target) {
+      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
+      return delegateTransition(target ?? this.target, {
+        from: (leaveTo + " " + enterFrom).trim(),
+        active: enterActive,
+        to: enterTo
+      }, enterKeep && "keep");
+    }
+    leave(target) {
+      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
+      return delegateTransition(target ?? this.target, {
+        from: (enterTo + " " + leaveFrom).trim(),
+        active: leaveActive,
+        to: leaveTo
+      }, leaveKeep && "keep");
+    }
+  }
+  return Transition;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withTransition.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @typedef {{
+ *   $options: {
+ *     enterFrom: string,
+ *     enterActive: string,
+ *     enterTo: string,
+ *     enterKeep: boolean,
+ *     leaveFrom: string,
+ *     leaveActive: string,
+ *     leaveTo: string,
+ *     leaveKeep: boolean,
+ *   }
+ * }} TransitionInterface
+ */
+/**
+ * Extend a class to add transition capabilities.
+ * @template {typeof import('@studiometa/js-toolkit').Base} T
+ * @param    {T} BaseClass
+ * @returns  {T & {
+ *   new(...a: any[]): {
+ *     get target(): HTMLElement|HTMLElement[];
+ *     enter(target?: HTMLElement|HTMLElement[]): Promise<void|void[]>;
+ *     leave(target?: HTMLElement|HTMLElement[]): Promise<void|void[]>;
+ *   }
+ * }}
+ */
+export default function withTransition<T extends typeof import("@studiometa/js-toolkit").Base>(BaseClass: T): T & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
+export type TransitionInterface = {
+    $options: {
+        enterFrom: string;
+        enterActive: string;
+        enterTo: string;
+        enterKeep: boolean;
+        leaveFrom: string;
+        leaveActive: string;
+        leaveTo: string;
+        leaveKeep: boolean;
+    };
+};

package/decorators/withTransition.js

@@ -0,0 +1 @@
+import{transition as v,isArray as g}from"@studiometa/js-toolkit/utils";function c(e,r,n){return g(e)?Promise.all(e.map(t=>v(t,r,n))):v(e,r,n)}function p(e){class r extends e{static config={name:"Transition",options:{enterFrom:String,enterActive:String,enterTo:String,enterKeep:Boolean,leaveFrom:String,leaveActive:String,leaveTo:String,leaveKeep:Boolean}};get target(){return this.$el}enter(t){const{enterFrom:i,enterActive:o,enterTo:a,enterKeep:s,leaveTo:l}=this.$options;return c(t??this.target,{from:(l+" "+i).trim(),active:o,to:a},s&&"keep")}leave(t){const{leaveFrom:i,leaveActive:o,leaveTo:a,leaveKeep:s,enterTo:l}=this.$options;return c(t??this.target,{from:(l+" "+i).trim(),active:o,to:a},s&&"keep")}}return r}export{p as default};

package/index.cjs

@@ -20,4 +20,5 @@ __reExport(ui_exports, require("./primitives/index.cjs"), module.exports);
 __reExport(ui_exports, require("./atoms/index.cjs"), module.exports);
 __reExport(ui_exports, require("./molecules/index.cjs"), module.exports);
 __reExport(ui_exports, require("./organisms/index.cjs"), module.exports);
+__reExport(ui_exports, require("./decorators/index.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/index.d.ts

@@ -2,3 +2,4 @@ export * from "./primitives/index.js";
 export * from "./atoms/index.js";
 export * from "./molecules/index.js";
 export * from "./organisms/index.js";
+export * from "./decorators/index.js";

package/index.js

@@ -1 +1 @@
-export*from"./primitives/index.js";export*from"./atoms/index.js";export*from"./molecules/index.js";export*from"./organisms/index.js";
+export*from"./primitives/index.js";export*from"./atoms/index.js";export*from"./molecules/index.js";export*from"./organisms/index.js";export*from"./decorators/index.js";

package/molecules/Menu/MenuList.d.ts

@@ -1,3 +1,8 @@
+declare const MenuList_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
 /**
  * @typedef {MenuList & {
  *   $children: {
@@ -8,7 +13,7 @@
 /**
  * MenuList class.
  */
-export default class MenuList extends Transition {
+export default class MenuList extends MenuList_base {
     /**
      * Config.
      */
@@ -18,16 +23,10 @@ export default class MenuList extends Transition {
         components: {
             MenuList: typeof MenuList;
         };
-        options: {
-            enterFrom: StringConstructor;
-            enterActive: StringConstructor;
-            enterTo: StringConstructor;
-            enterKeep: BooleanConstructor;
-            leaveFrom: StringConstructor;
-            leaveActive: StringConstructor;
-            leaveTo: StringConstructor;
-            leaveKeep: BooleanConstructor;
-        };
+        debug?: boolean;
+        log?: boolean;
+        refs?: string[];
+        options?: import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsSchema;
     };
     /**
      * Are the menu items visible?
@@ -97,4 +96,4 @@ export type MenuListInterface = MenuList & {
         MenuList: MenuList[];
     };
 };
-import Transition from "../../primitives/Transition/Transition.js";
+export {};

package/molecules/Slider/Slider.cjs

@@ -53,6 +53,7 @@ var Slider = class extends import_js_toolkit.Base {
     center: 0,
     right: 0
   };
+  hasFocus = false;
   get currentState() {
     return this.states[this.currentIndex];
   }
@@ -82,15 +83,46 @@ var Slider = class extends import_js_toolkit.Base {
       center: originRect.x + originRect.width / 2,
       right: originRect.x + originRect.width
     };
-    return this.$children.SliderItem.map((item) => {
-      return {
-        x: {
-          left: (item.rect.x - this.origins.left) * -1,
-          center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
-          right: (item.rect.x + item.rect.width - this.origins.right) * -1
+    const states = this.$children.SliderItem.map((item) => ({
+      x: {
+        left: (item.rect.x - this.origins.left) * -1,
+        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
+        right: (item.rect.x + item.rect.width - this.origins.right) * -1
+      }
+    }));
+    if (this.$options.contain) {
+      const { mode } = this.$options;
+      if (mode === "left") {
+        const lastChild = this.$children.SliderItem.at(-1);
+        const maxState = states.find((state) => {
+          const lastChildPosition = lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;
+          const diffWithWrapperBound = originRect.width - lastChildPosition;
+          if (diffWithWrapperBound > 0) {
+            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);
+            return true;
+          }
+          return false;
+        });
+        if (maxState) {
+          return states.map((state) => {
+            state.x.left = Math.max(state.x.left, maxState.x.left);
+            return state;
+          });
         }
-      };
-    });
+      }
+      if (mode === "right") {
+        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);
+        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];
+        return states.map((state) => {
+          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);
+          return state;
+        });
+      }
+      if (mode === "center" && import_utils.isDev) {
+        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];
@@ -128,21 +160,19 @@ var Slider = class extends import_js_toolkit.Base {
     if (index < 0 || index > this.indexMax) {
       throw new Error("Index out of bound.");
     }
-    let state = this.getStateValueByMode(this.states[index].x);
-    if (this.$options.contain) {
-      if (this.$children.SliderItem[this.indexMax].willBeFullyVisible(state)) {
-        state = this.getStateValueByMode(this.lastState.x, "right");
-      } else if (this.$children.SliderItem[0].willBeFullyVisible(state)) {
-        state = this.getStateValueByMode(this.firstState.x, "left");
-      }
-    }
+    const currentState = this.getStateValueByMode(this.currentState.x);
+    const state = this.getStateValueByMode(this.states[index].x);
     const itemsToMove = this.getVisibleItems(state);
-    if (index < this.currentIndex) {
-      itemsToMove.reverse();
-    }
+    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);
     itemsToMove.forEach((item) => {
+      if (currentState !== state) {
+        item.moveInstantly(currentState);
+      }
       (0, import_utils.nextFrame)(() => item.move(state));
     });
+    invisibleItemsToMoveInstantly.forEach((item) => {
+      item.moveInstantly(state);
+    });
     this.currentIndex = index;
     this.$emit("goto", index);
   }
@@ -162,7 +192,7 @@ 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.sensitivity), 0, this.getStateValueByMode(this.lastState.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);
@@ -179,6 +209,21 @@ var Slider = class extends import_js_toolkit.Base {
       this.currentIndex = closestIndex;
     }
   }
+  onWrapperFocus() {
+    this.hasFocus = true;
+  }
+  onWrapperBlur() {
+    this.hasFocus = false;
+  }
+  keyed({ LEFT, RIGHT, isDown }) {
+    if (this.hasFocus && isDown) {
+      if (LEFT) {
+        this.goPrev();
+      } else if (RIGHT) {
+        this.goNext();
+      }
+    }
+  }
   prepareInvisibleItems() {
     const state = this.states[this.currentIndex];
     const nextItemsToPrepare = [];
@@ -222,7 +267,7 @@ var Slider = class extends import_js_toolkit.Base {
 };
 __publicField(Slider, "config", {
   name: "Slider",
-  refs: ["wrapper"],
+  refs: ["wrapper", "debug"],
   emits: ["goto", "index"],
   components: {
     SliderItem: import_SliderItem.default,
@@ -232,7 +277,8 @@ __publicField(Slider, "config", {
     mode: { type: String, default: "left" },
     fitBounds: Boolean,
     contain: Boolean,
-    sensitivity: { type: Number, default: 1 }
+    sensitivity: { type: Number, default: 1 },
+    dropSensitivity: { type: Number, default: 2 }
   }
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/Slider.d.ts

@@ -25,7 +25,6 @@
 /**
  * Orchestrate the slider items state transition.
  * @todo a11y
- * @todo better state management with `mode` option
  */
 export default class Slider extends Base {
     /**
@@ -50,6 +49,10 @@ export default class Slider extends Base {
                 type: NumberConstructor;
                 default: number;
             };
+            dropSensitivity: {
+                type: NumberConstructor;
+                default: number;
+            };
         };
     };
     __distanceX: number;
@@ -80,6 +83,11 @@ export default class Slider extends Base {
      * @type {Record<SliderModes, number>}
      */
     origins: Record<SliderModes, number>;
+    /**
+     * Wether or not the wrapper is focused.
+     * @type {boolean}
+     */
+    hasFocus: boolean;
     /**
      * Get the current state.
      * @returns {SliderState}
@@ -122,7 +130,6 @@ export default class Slider extends Base {
     /**
      * Get the states for each SliderItem.
      *
-     * @todo save value for every available modes to avoid recalculation when switching
      * @this {SliderInterface}
      */
     getStates(this: SliderInterface): {
@@ -199,6 +206,22 @@ export default class Slider extends Base {
      * @returns {void}
      */
     onSliderDragDrop(this: SliderInterface, props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    /**
+     * Enable focus.
+     * @returns {void}
+     */
+    onWrapperFocus(): void;
+    /**
+     * Disable focus.
+     * @returns {void}
+     */
+    onWrapperBlur(): void;
+    /**
+     * Go prev or next when focus is on the wrapper and pressing arrow keys.
+     * @param   {import('@studiometa/js-toolkit/services/key').KeyServiceProps} props
+     * @returns {void}
+     */
+    keyed({ LEFT, RIGHT, isDown }: import('@studiometa/js-toolkit/services/key').KeyServiceProps): void;
     /**
      * Prepare invisible items.
      * @returns {void}

package/molecules/Slider/Slider.js

@@ -1 +1 @@
-import{Base as o}from"@studiometa/js-toolkit";import{clamp as d,inertiaFinalValue as c,nextFrame as h}from"@studiometa/js-toolkit/utils";import u from"./SliderDrag.js";import g from"./SliderItem.js";class x extends o{static config={name:"Slider",refs:["wrapper"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:u},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:e}=this.$refs,t=e.getBoundingClientRect();return this.origins={left:t.left,center:t.x+t.width/2,right:t.x+t.width},this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-this.origins.left)*-1,center:(i.rect.x+i.rect.width/2-this.origins.center)*-1,right:(i.rect.x+i.rect.width-this.origins.right)*-1}}))}getOriginByMode(e){return this.origins[e??this.$options.mode]}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");let t=this.getStateValueByMode(this.states[e].x);this.$options.contain&&(this.$children.SliderItem[this.indexMax].willBeFullyVisible(t)?t=this.getStateValueByMode(this.lastState.x,"right"):this.$children.SliderItem[0].willBeFullyVisible(t)&&(t=this.getStateValueByMode(this.firstState.x,"left")));const i=this.getVisibleItems(t);e<this.currentIndex&&i.reverse(),i.forEach(s=>{h(()=>s.move(t))}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=d(c(this.__distanceX,e.delta.x*this.$options.sensitivity),0,this.getStateValueByMode(this.lastState.x));const i=this.states.map(n=>Math.abs(t-this.getStateValueByMode(n.x))),s=Math.min(...i),r=i.findIndex(n=>n===s);this.$options.fitBounds?this.goTo(r):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(n=>{n.move(t)}),this.currentIndex=r)}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],i=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((s,r)=>{if(r>this.currentIndex){t.push(s);return}r<this.currentIndex&&i.push(s)}),t.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s);r&&s.moveInstantly(this.getStateValueByMode(r.x))}),i.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s,{reversed:!0});r&&s.moveInstantly(this.getStateValueByMode(r.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const i=this.states.filter(a=>e.willBeVisible(this.getStateValueByMode(a.x))),s=i[0],r=i[i.length-1],n=this.states.findIndex(a=>this.getStateValueByMode(a.x)===this.getStateValueByMode(s.x)),l=this.states.findIndex(a=>a.x===r.x);return t?this.states[l+1]:this.states[n-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{x as default};
+import{Base as d}from"@studiometa/js-toolkit";import{clamp as c,inertiaFinalValue as u,nextFrame as h,isDev as f}from"@studiometa/js-toolkit/utils";import x from"./SliderDrag.js";import g from"./SliderItem.js";class I extends d{static config={name:"Slider",refs:["wrapper","debug"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:x},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1},dropSensitivity:{type:Number,default:2}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};hasFocus=!1;get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:e}=this.$refs,t=e.getBoundingClientRect();this.origins={left:t.left,center:t.x+t.width/2,right:t.x+t.width};const i=this.$children.SliderItem.map(s=>({x:{left:(s.rect.x-this.origins.left)*-1,center:(s.rect.x+s.rect.width/2-this.origins.center)*-1,right:(s.rect.x+s.rect.width-this.origins.right)*-1}}));if(this.$options.contain){const{mode:s}=this.$options;if(s==="left"){const n=this.$children.SliderItem.at(-1),r=i.find(a=>{const o=n.rect.x-this.origins.left+n.rect.width+a.x.left,l=t.width-o;return l>0?(a.x.left=Math.min(a.x.left+l,0),!0):!1});if(r)return i.map(a=>(a.x.left=Math.max(a.x.left,r.x.left),a))}if(s==="right"){const n=i.findIndex(a=>a.x.right<=0),r=n<0?i.at(-1):i[n-1];return i.map(a=>(a.x.right=n<0?r.x.right:Math.min(a.x.right,0),a))}s==="center"&&f&&console.warn(`[${this.$id}]`,"The `center` mode is not yet compatible with the `contain` mode.")}return i}getOriginByMode(e){return this.origins[e??this.$options.mode]}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");const t=this.getStateValueByMode(this.currentState.x),i=this.getStateValueByMode(this.states[e].x),s=this.getVisibleItems(i),n=this.getInvisibleItems(i);s.forEach(r=>{t!==i&&r.moveInstantly(t),h(()=>r.move(i))}),n.forEach(r=>{r.moveInstantly(i)}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=c(u(this.__distanceX,e.delta.x*this.$options.dropSensitivity),0,this.getStateValueByMode(this.lastState.x));const i=this.states.map(r=>Math.abs(t-this.getStateValueByMode(r.x))),s=Math.min(...i),n=i.findIndex(r=>r===s);this.$options.fitBounds?this.goTo(n):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(r=>{r.move(t)}),this.currentIndex=n)}onWrapperFocus(){this.hasFocus=!0}onWrapperBlur(){this.hasFocus=!1}keyed({LEFT:e,RIGHT:t,isDown:i}){this.hasFocus&&i&&(e?this.goPrev():t&&this.goNext())}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],i=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((s,n)=>{if(n>this.currentIndex){t.push(s);return}n<this.currentIndex&&i.push(s)}),t.forEach(s=>{const n=this.getStateWhereItemWillBeInvisible(s);n&&s.moveInstantly(this.getStateValueByMode(n.x))}),i.forEach(s=>{const n=this.getStateWhereItemWillBeInvisible(s,{reversed:!0});n&&s.moveInstantly(this.getStateValueByMode(n.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const i=this.states.filter(o=>e.willBeVisible(this.getStateValueByMode(o.x))),s=i[0],n=i[i.length-1],r=this.states.findIndex(o=>this.getStateValueByMode(o.x)===this.getStateValueByMode(s.x)),a=this.states.findIndex(o=>o.x===n.x);return t?this.states[a+1]:this.states[r-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{I as default};

package/molecules/Slider/SliderDots.cjs

@@ -30,12 +30,17 @@ __export(SliderDots_exports, {
   default: () => SliderDots
 });
 module.exports = __toCommonJS(SliderDots_exports);
+var import_decorators = require("../../decorators/index.cjs");
 var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
-var SliderDots = class extends import_AbstractSliderChild.default {
+var SliderDots = class extends (0, import_decorators.withTransition)(import_AbstractSliderChild.default) {
+  get target() {
+    return this.$refs.dots;
+  }
+  currentIndex = 0;
   update(index) {
-    this.$refs.dots.forEach((dot, i) => {
-      dot.classList.toggle("is-active", index === i);
-    });
+    this.leave(this.$refs.dots[this.currentIndex]);
+    this.enter(this.$refs.dots[index]);
+    this.currentIndex = index;
   }
   onDotsClick(event, index) {
     this.$parent.goTo(index);

package/molecules/Slider/SliderDots.d.ts

@@ -1,3 +1,8 @@
+declare const SliderDots_base: typeof AbstractSliderChild & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
 /**
  * @typedef {SliderDots & {
  *   $refs: {
@@ -8,7 +13,7 @@
 /**
  * SliderDots class.
  */
-export default class SliderDots extends AbstractSliderChild {
+export default class SliderDots extends SliderDots_base {
     /**
      * Config.
      */
@@ -16,6 +21,17 @@ export default class SliderDots extends AbstractSliderChild {
         name: string;
         refs: string[];
     };
+    /**
+     * Get target.
+     * @this {SliderDotsInterface}
+     * @returns {HTMLButtonElement[]}
+     */
+    get target(): HTMLButtonElement[];
+    /**
+     * The current active index.
+     * @type {number}
+     */
+    currentIndex: number;
     /**
      * Update dots classes according to the new index.
      *
@@ -39,3 +55,4 @@ export type SliderDotsInterface = SliderDots & {
     };
 };
 import AbstractSliderChild from "./AbstractSliderChild.js";
+export {};

package/molecules/Slider/SliderDots.js

@@ -1 +1 @@
-import o from"./AbstractSliderChild.js";class i extends o{static config={name:"SliderDots",refs:["dots[]"]};update(s){this.$refs.dots.forEach((t,e)=>{t.classList.toggle("is-active",s===e)})}onDotsClick(s,t){this.$parent.goTo(t)}}export{i as default};
+import{withTransition as r}from"../../decorators/index.js";import s from"./AbstractSliderChild.js";class i extends r(s){static config={name:"SliderDots",refs:["dots[]"]};get target(){return this.$refs.dots}currentIndex=0;update(t){this.leave(this.$refs.dots[this.currentIndex]),this.enter(this.$refs.dots[t]),this.currentIndex=t}onDotsClick(t,e){this.$parent.goTo(e)}}export{i as default};

package/molecules/Slider/SliderDrag.cjs

@@ -29,6 +29,15 @@ __export(SliderDrag_exports, {
 module.exports = __toCommonJS(SliderDrag_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var SliderDrag = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
+  get shouldPreventScroll() {
+    const { distance } = this.$services.get("dragged");
+    return Math.abs(distance.x) > this.$options.scrollLockThreshold && Math.abs(distance.x) > Math.abs(distance.y);
+  }
+  onTouchmove(event) {
+    if (this.shouldPreventScroll) {
+      event.preventDefault();
+    }
+  }
   dragged(props) {
     this.$emit(props.mode, props);
   }
@@ -36,9 +45,11 @@ var SliderDrag = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit
 __publicField(SliderDrag, "config", {
   name: "SliderDrag",
   emits: ["start", "drag", "drop", "inertia", "stop"],
-  sensitivity: {
-    type: Number,
-    default: 1
+  options: {
+    scrollLockThreshold: {
+      type: Number,
+      default: 10
+    }
   }
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/SliderDrag.d.ts

@@ -1,3 +1,10 @@
+/**
+ * @typedef {SliderDrag & {
+ *   $options: {
+ *     scrollLockThreshold: number;
+ *   }
+ * }} SliderDragInterface
+ */
 /**
  * SliderDrag class.
  */
@@ -8,11 +15,27 @@ export default class SliderDrag extends Base {
     static config: {
         name: string;
         emits: string[];
-        sensitivity: {
-            type: NumberConstructor;
-            default: number;
+        options: {
+            scrollLockThreshold: {
+                type: NumberConstructor;
+                default: number;
+            };
         };
     };
+    /**
+     * Test if the scroll should be blocked. Used with the touchmove event to prevent
+     * scrolling vertically when trying to drag the slider.
+     *
+     * @this {SliderDragInterface}
+     * @returns {boolean}
+     */
+    get shouldPreventScroll(): boolean;
+    /**
+     * Touchmove handler.
+     * @param   {TouchEvent} event
+     * @returns {void}
+     */
+    onTouchmove(event: TouchEvent): void;
     /**
      * Emit drag events.
      * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
@@ -20,4 +43,9 @@ export default class SliderDrag extends Base {
      */
     dragged(props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
 }
+export type SliderDragInterface = SliderDrag & {
+    $options: {
+        scrollLockThreshold: number;
+    };
+};
 import { Base } from "@studiometa/js-toolkit";

package/molecules/Slider/SliderDrag.js

@@ -1 +1 @@
-import{Base as e,withDrag as i}from"@studiometa/js-toolkit";class a extends i(e){static config={name:"SliderDrag",emits:["start","drag","drop","inertia","stop"],sensitivity:{type:Number,default:1}};dragged(t){this.$emit(t.mode,t)}}export{a as default};
+import{Base as t,withDrag as r}from"@studiometa/js-toolkit";class s extends r(t){static config={name:"SliderDrag",emits:["start","drag","drop","inertia","stop"],options:{scrollLockThreshold:{type:Number,default:10}}};get shouldPreventScroll(){const{distance:e}=this.$services.get("dragged");return Math.abs(e.x)>this.$options.scrollLockThreshold&&Math.abs(e.x)>Math.abs(e.y)}onTouchmove(e){this.shouldPreventScroll&&e.preventDefault()}dragged(e){this.$emit(e.mode,e)}}export{s as default};

package/molecules/Slider/SliderItem.cjs

@@ -56,7 +56,7 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
     this.isVisible = isIntersecting;
   }
   ticked() {
-    this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.2, 1e-5);
+    this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.1, 1e-5);
     this.render();
     if (this.dampedX === this.x) {
       this.$services.disable("ticked");

package/molecules/Slider/SliderItem.js

@@ -1 +1 @@
-import{Base as t,withIntersectionObserver as s}from"@studiometa/js-toolkit";import{damp as d,domScheduler as h,transform as r}from"@studiometa/js-toolkit/utils";class l extends s(t,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:e,isIntersecting:i}]){e>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):e>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=i}ticked(){this.dampedX=d(this.x,this.dampedX,.2,1e-5),this.render(),this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(e){this.x=e,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(e){this.x=e,this.dampedX=e,this.render()}render(){h.write(()=>{r(this.$el,{x:this.dampedX})})}willBeVisible(e){return this.rect.x+e<window.innerWidth*1.5&&this.rect.x+e+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(e){return this.rect.x+e<window.innerWidth&&this.rect.x+e>0&&this.rect.x+e+this.rect.width<window.innerWidth&&this.rect.x+e+this.rect.width>0}updateRectAdjustedWithX(){const e=this.x*-1,i=this.$el.getBoundingClientRect().toJSON();this.rect={...i,left:i.left+e,right:i.left+e+i.width,x:i.left+e}}}export{l as default};
+import{Base as t,withIntersectionObserver as s}from"@studiometa/js-toolkit";import{damp as d,domScheduler as h,transform as r}from"@studiometa/js-toolkit/utils";class l extends s(t,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:e,isIntersecting:i}]){e>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):e>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=i}ticked(){this.dampedX=d(this.x,this.dampedX,.1,1e-5),this.render(),this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(e){this.x=e,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(e){this.x=e,this.dampedX=e,this.render()}render(){h.write(()=>{r(this.$el,{x:this.dampedX})})}willBeVisible(e){return this.rect.x+e<window.innerWidth*1.5&&this.rect.x+e+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(e){return this.rect.x+e<window.innerWidth&&this.rect.x+e>0&&this.rect.x+e+this.rect.width<window.innerWidth&&this.rect.x+e+this.rect.width>0}updateRectAdjustedWithX(){const e=this.x*-1,i=this.$el.getBoundingClientRect().toJSON();this.rect={...i,left:i.left+e,right:i.left+e+i.width,x:i.left+e}}}export{l as default};

package/molecules/Slider/SliderProgress.cjs

@@ -35,11 +35,10 @@ var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1
 var SliderProgress = class extends import_AbstractSliderChild.default {
   update(index) {
     import_utils.domScheduler.read(() => {
-      const unit = this.$refs.progress.clientWidth / (this.$parent.indexMax + 1);
+      const { progress } = this.$refs;
+      const x = (0, import_utils.map)(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);
       import_utils.domScheduler.write(() => {
-        this.$refs.progress.style.transform = (0, import_utils.matrix)({
-          translateX: (0, import_utils.map)(index, 0, this.$parent.indexMax, (this.$refs.progress.clientWidth - unit) * -1, 0)
-        });
+        (0, import_utils.transform)(progress, { x });
       });
     });
   }

package/molecules/Slider/SliderProgress.js

@@ -1 +1 @@
-import{matrix as t,map as i,domScheduler as r}from"@studiometa/js-toolkit/utils";import a from"./AbstractSliderChild.js";class o extends a{static config={name:"SliderProgress",refs:["progress"]};update(e){r.read(()=>{const s=this.$refs.progress.clientWidth/(this.$parent.indexMax+1);r.write(()=>{this.$refs.progress.style.transform=t({translateX:i(e,0,this.$parent.indexMax,(this.$refs.progress.clientWidth-s)*-1,0)})})})}}export{o as default};
+import{transform as i,map as o,domScheduler as e}from"@studiometa/js-toolkit/utils";import d from"./AbstractSliderChild.js";class a extends d{static config={name:"SliderProgress",refs:["progress"]};update(s){e.read(()=>{const{progress:r}=this.$refs,t=o(s,0,this.$parent.indexMax,r.clientWidth*-1,0);e.write(()=>{i(r,{x:t})})})}}export{a as default};

package/organisms/Frame/FrameTarget.d.ts

@@ -1,7 +1,12 @@
+declare const FrameTarget_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
 /**
  * FrameTarget class.
  */
-export default class FrameTarget extends Transition {
+export default class FrameTarget extends FrameTarget_base {
     /**
      * Config.
      */
@@ -14,15 +19,11 @@ export default class FrameTarget extends Transition {
                 default: string;
             };
             id: StringConstructor;
-            enterFrom: StringConstructor;
-            enterActive: StringConstructor;
-            enterTo: StringConstructor;
-            enterKeep: BooleanConstructor;
-            leaveFrom: StringConstructor;
-            leaveActive: StringConstructor;
-            leaveTo: StringConstructor;
-            leaveKeep: BooleanConstructor;
         };
+        debug?: boolean;
+        refs?: string[];
+        emits?: string[];
+        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
     };
     /**
      * Insert modes.
@@ -36,6 +37,11 @@ export default class FrameTarget extends Transition {
      * @returns {string}
      */
     get id(): string;
+    /**
+     * Enter transition.
+     * @returns {Promise<void>}
+     */
+    enter(): Promise<void>;
     /**
      * Update the content from the new target.
      *
@@ -44,4 +50,4 @@ export default class FrameTarget extends Transition {
      */
     updateContent(newTarget: FrameTarget): void;
 }
-import { Transition } from "../../primitives/index.js";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"

package/primitives/Transition/Transition.cjs

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,51 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 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/primitives/Transition/Transition.js
 var Transition_exports = {};
 __export(Transition_exports, {
-  default: () => Transition
+  default: () => Transition_default
 });
 module.exports = __toCommonJS(Transition_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
-var import_utils = require("@studiometa/js-toolkit/utils");
-var Transition = class extends import_js_toolkit.Base {
-  get target() {
-    return this.$el;
-  }
-  enter() {
-    const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
-    return (0, import_utils.transition)(this.target, {
-      from: (leaveTo + " " + enterFrom).trim(),
-      active: enterActive,
-      to: enterTo
-    }, enterKeep && "keep");
-  }
-  leave() {
-    const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
-    return (0, import_utils.transition)(this.target, {
-      from: (enterTo + " " + leaveFrom).trim(),
-      active: leaveActive,
-      to: leaveTo
-    }, leaveKeep && "keep");
-  }
-};
-__publicField(Transition, "config", {
-  name: "Transition",
-  options: {
-    enterFrom: String,
-    enterActive: String,
-    enterTo: String,
-    enterKeep: Boolean,
-    leaveFrom: String,
-    leaveActive: String,
-    leaveTo: String,
-    leaveKeep: Boolean
-  }
-});
+var import_decorators = require("../../decorators/index.cjs");
+var Transition_default = (0, import_decorators.withTransition)(import_js_toolkit.Base);
 if (module.exports.default) module.exports = module.exports.default;

package/primitives/Transition/Transition.d.ts

@@ -1,67 +1,7 @@
-/**
- * @typedef {Object} TransitionOptions
- * @property {string} enterFrom
- * @property {string} enterActive
- * @property {string} enterTo
- * @property {boolean} enterKeep
- * @property {string} leaveFrom
- * @property {string} leaveActive
- * @property {string} leaveTo
- * @property {boolean} leaveKeep
- */
-/**
- * Transition class.
- * @typedef {Transition & { $options: TransitionOptions }} TransitionInterface
- */
-export default class Transition extends Base {
-    static config: {
-        name: string;
-        options: {
-            enterFrom: StringConstructor;
-            enterActive: StringConstructor;
-            enterTo: StringConstructor;
-            enterKeep: BooleanConstructor;
-            leaveFrom: StringConstructor;
-            leaveActive: StringConstructor;
-            leaveTo: StringConstructor;
-            leaveKeep: BooleanConstructor;
-        };
-    };
-    /**
-     * Get the transition target.
-     *
-     * @returns {HTMLElement}
-     */
-    get target(): HTMLElement;
-    /**
-     * Trigger the enter transition.
-     *
-     * @this {TransitionInterface}
-     * @returns {Promise<void>}
-     */
-    enter(this: TransitionInterface): Promise<void>;
-    /**
-     * Trigger the leave transition.
-     *
-     * @this {TransitionInterface}
-     * @returns {Promise<void>}
-     */
-    leave(this: TransitionInterface): Promise<void>;
-}
-export type TransitionOptions = {
-    enterFrom: string;
-    enterActive: string;
-    enterTo: string;
-    enterKeep: boolean;
-    leaveFrom: string;
-    leaveActive: string;
-    leaveTo: string;
-    leaveKeep: boolean;
-};
-/**
- * Transition class.
- */
-export type TransitionInterface = Transition & {
-    $options: TransitionOptions;
-};
+declare const _default: typeof Base & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
+export default _default;
 import { Base } from "@studiometa/js-toolkit";

package/primitives/Transition/Transition.js

@@ -1 +1 @@
-import{Base as a}from"@studiometa/js-toolkit";import{transition as i}from"@studiometa/js-toolkit/utils";class s extends a{static config={name:"Transition",options:{enterFrom:String,enterActive:String,enterTo:String,enterKeep:Boolean,leaveFrom:String,leaveActive:String,leaveTo:String,leaveKeep:Boolean}};get target(){return this.$el}enter(){const{enterFrom:e,enterActive:t,enterTo:r,enterKeep:n,leaveTo:o}=this.$options;return i(this.target,{from:(o+" "+e).trim(),active:t,to:r},n&&"keep")}leave(){const{leaveFrom:e,leaveActive:t,leaveTo:r,leaveKeep:n,enterTo:o}=this.$options;return i(this.target,{from:(o+" "+e).trim(),active:t,to:r},n&&"keep")}}export{s as default};
+import{Base as o}from"@studiometa/js-toolkit";import{withTransition as r}from"../../decorators/index.js";var m=r(o);export{m as default};