@studiometa/ui 0.2.8 → 0.2.11

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/Menu.cjs

@@ -35,20 +35,11 @@ var import_utils = require("@studiometa/js-toolkit/utils");
 var import_MenuBtn = __toESM(require("./MenuBtn.cjs"), 1);
 var import_MenuList = __toESM(require("./MenuList.cjs"), 1);
 var _Menu = class extends import_js_toolkit.Base {
-  getDirectChildren(name) {
-    if (!this.$children[name]) {
-      return [];
-    }
-    if (!this.$children.Menu) {
-      return this.$children[name];
-    }
-    return this.$children[name].filter((child) => this.$children.Menu.every((menu) => menu.$children[name] ? !menu.$children[name].includes(child) : true));
-  }
   get menuList() {
-    return this.getDirectChildren("MenuList")[0];
+    return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuList")[0];
   }
   get menuBtn() {
-    return this.getDirectChildren("MenuBtn")[0];
+    return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuBtn")[0];
   }
   get shouldReactOnClick() {
     return this.$options.mode === "click";
@@ -80,18 +71,18 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     }
   }
-  onMenuBtnBtnClick(event, index) {
-    if (this.$children.MenuBtn[index] === this.menuBtn && this.shouldReactOnClick) {
+  onMenuBtnClick(index, event) {
+    if ((0, import_js_toolkit.isDirectChild)(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
       event.preventDefault();
       this.toggle();
     }
   }
-  onMenuBtnBtnMouseenter(event, index) {
+  onMenuBtnMouseenter(index) {
     if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
       this.open();
     }
   }
-  onMenuBtnBtnMouseleave() {
+  onMenuBtnMouseleave() {
     if (this.shouldReactOnClick) {
       return;
     }
@@ -101,7 +92,7 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     });
   }
-  onMenuListItemsMouseleave() {
+  onMenuListMouseleave() {
     if (this.shouldReactOnClick) {
       return;
     }

package/molecules/Menu/Menu.d.ts

@@ -4,6 +4,9 @@
  *     Menu: Menu[],
  *     MenuBtn: MenuBtn[],
  *     MenuList: MenuList[],
+ *   },
+ *   $options: {
+ *     mode: 'click'|'hover'
  *   }
  * }} MenuInterface
  */
@@ -29,14 +32,6 @@ export default class Menu extends Base {
             };
         };
     };
-    /**
-     * Get direct children.
-     *
-     * @this    {MenuInterface}
-     * @param   {string} name
-     * @returns {any[]}
-     */
-    getDirectChildren(this: MenuInterface, name: string): any[];
     /**
      * Get the first `MenuList` instance.
      *
@@ -79,31 +74,33 @@ export default class Menu extends Base {
      * Toggle menu items on button click;
      *
      * @this    {MenuInterface}
+     * @param   {number} index
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMenuBtnBtnClick(this: MenuInterface, event: MouseEvent, index: any): void;
+    onMenuBtnClick(this: MenuInterface, index: number, event: MouseEvent): void;
     /**
      * Open menu items on button mouse enter.
      *
      * @this    {MenuInterface}
+     * @param   {number} index
      * @returns {void}
      */
-    onMenuBtnBtnMouseenter(this: MenuInterface, event: any, index: any): void;
+    onMenuBtnMouseenter(this: MenuInterface, index: number): void;
     /**
      * Close menu items on button mouse leave.
      *
      * @this    {MenuInterface}
      * @returns {void}
      */
-    onMenuBtnBtnMouseleave(this: MenuInterface): void;
+    onMenuBtnMouseleave(this: MenuInterface): void;
     /**
      * Close menu items on button mouse leave.
      *
      * @this    {MenuInterface}
      * @returns {void}
      */
-    onMenuListItemsMouseleave(this: MenuInterface): void;
+    onMenuListMouseleave(this: MenuInterface): void;
     /**
      * Close other non-parent menu items on menu items open.
      *
@@ -134,6 +131,9 @@ export type MenuInterface = Menu & {
         MenuBtn: MenuBtn[];
         MenuList: MenuList[];
     };
+    $options: {
+        mode: 'click' | 'hover';
+    };
 };
 import { Base } from "@studiometa/js-toolkit";
 import MenuList from "./MenuList.js";

package/molecules/Menu/Menu.js

@@ -1 +1 @@
-import{Base as h}from"@studiometa/js-toolkit";import{nextTick as s}from"@studiometa/js-toolkit/utils";import u from"./MenuBtn.js";import o from"./MenuList.js";class n extends h{static config={name:"Menu",debug:!0,components:{MenuBtn:u,MenuList:o,Menu:n},options:{mode:{type:String,default:"click"}}};getDirectChildren(t){return this.$children[t]?this.$children.Menu?this.$children[t].filter(e=>this.$children.Menu.every(i=>i.$children[t]?!i.$children[t].includes(e):!0)):this.$children[t]:[]}get menuList(){return this.getDirectChildren("MenuList")[0]}get menuBtn(){return this.getDirectChildren("MenuBtn")[0]}get shouldReactOnClick(){return this.$options.mode==="click"}get isHover(){return this.menuBtn.isHover||this.menuList.isHover}mounted(){if(!this.menuBtn||!this.menuList){this.$destroy();return}this.menuBtn.$el.setAttribute("aria-controls",this.$id),this.menuList.$el.setAttribute("id",this.$id),this.menuList.close()}keyed({ENTER:t,ESC:e,isUp:i}){if(!!i){if(e){this.close();return}if(!this.shouldReactOnClick){const r=document.activeElement===this.menuBtn.$el;t&&r&&this.toggle()}}}onMenuBtnBtnClick(t,e){this.$children.MenuBtn[e]===this.menuBtn&&this.shouldReactOnClick&&(t.preventDefault(),this.toggle())}onMenuBtnBtnMouseenter(t,e){this.$children.MenuBtn[e]===this.menuBtn&&!this.shouldReactOnClick&&this.open()}onMenuBtnBtnMouseleave(){this.shouldReactOnClick||s(()=>{this.isHover||this.close()})}onMenuListItemsMouseleave(){this.shouldReactOnClick||s(()=>{this.isHover||this.close()})}onMenuListItemsOpen(t){const e=this.$children.MenuList[t];this.$children.MenuList.forEach(i=>{i.$el.contains(e.$el)||i.close()})}close(){this.menuList.close()}open(){this.menuList.open()}toggle(){this.menuList.toggle()}}export{n as default};
+import{Base as h,isDirectChild as r,getDirectChildren as s}from"@studiometa/js-toolkit";import{nextTick as o}from"@studiometa/js-toolkit/utils";import l from"./MenuBtn.js";import c from"./MenuList.js";class n extends h{static config={name:"Menu",debug:!0,components:{MenuBtn:l,MenuList:c,Menu:n},options:{mode:{type:String,default:"click"}}};get menuList(){return s(this,"Menu","MenuList")[0]}get menuBtn(){return s(this,"Menu","MenuBtn")[0]}get shouldReactOnClick(){return this.$options.mode==="click"}get isHover(){return this.menuBtn.isHover||this.menuList.isHover}mounted(){if(!this.menuBtn||!this.menuList){this.$destroy();return}this.menuBtn.$el.setAttribute("aria-controls",this.$id),this.menuList.$el.setAttribute("id",this.$id),this.menuList.close()}keyed({ENTER:t,ESC:e,isUp:i}){if(!!i){if(e){this.close();return}if(!this.shouldReactOnClick){const u=document.activeElement===this.menuBtn.$el;t&&u&&this.toggle()}}}onMenuBtnClick(t,e){r(this,"Menu","MenuBtn",this.$children.MenuBtn[t])&&this.shouldReactOnClick&&(e.preventDefault(),this.toggle())}onMenuBtnMouseenter(t){this.$children.MenuBtn[t]===this.menuBtn&&!this.shouldReactOnClick&&this.open()}onMenuBtnMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListItemsOpen(t){const e=this.$children.MenuList[t];this.$children.MenuList.forEach(i=>{i.$el.contains(e.$el)||i.close()})}close(){this.menuList.close()}open(){this.menuList.open()}toggle(){this.menuList.toggle()}}export{n as default};

package/molecules/Menu/MenuBtn.cjs

@@ -32,22 +32,18 @@ var MenuBtn = class extends import_js_toolkit.Base {
   isHover = false;
   onClick(event) {
     event.stopPropagation();
-    this.$emit("btn-click", event);
   }
   onMouseenter(event) {
     this.isHover = true;
     event.stopPropagation();
-    this.$emit("btn-mouseenter", event);
   }
   onMouseleave(event) {
     this.isHover = false;
     event.stopPropagation();
-    this.$emit("btn-mouseleave", event);
   }
 };
 __publicField(MenuBtn, "config", {
   name: "MenuBtn",
-  debug: true,
-  emits: ["btn-click", "btn-mouseenter", "btn-mouseleave"]
+  debug: true
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Menu/MenuBtn.d.ts

@@ -8,7 +8,6 @@ export default class MenuBtn extends Base {
     static config: {
         name: string;
         debug: boolean;
-        emits: string[];
     };
     /**
      * Wether the button is hovered or not.

package/molecules/Menu/MenuBtn.js

@@ -1 +1 @@
-import{Base as t}from"@studiometa/js-toolkit";class o extends t{static config={name:"MenuBtn",debug:!0,emits:["btn-click","btn-mouseenter","btn-mouseleave"]};isHover=!1;onClick(e){e.stopPropagation(),this.$emit("btn-click",e)}onMouseenter(e){this.isHover=!0,e.stopPropagation(),this.$emit("btn-mouseenter",e)}onMouseleave(e){this.isHover=!1,e.stopPropagation(),this.$emit("btn-mouseleave",e)}}export{o as default};
+import{Base as o}from"@studiometa/js-toolkit";class t extends o{static config={name:"MenuBtn",debug:!0};isHover=!1;onClick(e){e.stopPropagation()}onMouseenter(e){this.isHover=!0,e.stopPropagation()}onMouseleave(e){this.isHover=!1,e.stopPropagation()}}export{t as default};

package/molecules/Menu/MenuList.cjs

@@ -59,9 +59,8 @@ var _MenuList = class extends import_Transition.default {
   onMouseenter() {
     this.isHover = true;
   }
-  onMouseleave(event) {
+  onMouseleave() {
     this.isHover = false;
-    this.$emit("items-mouseleave", event);
   }
   open() {
     if (this.isOpen) {
@@ -97,7 +96,6 @@ var _MenuList = class extends import_Transition.default {
     this.$emit("items-close");
   }
   toggle() {
-    console.log(this.$id, "toggle", this.isOpen);
     if (this.isOpen) {
       this.close();
     } else {

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?
@@ -54,10 +53,9 @@ export default class MenuList extends Transition {
     /**
      * Unset hover state.
      *
-     * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMouseleave(event: MouseEvent): void;
+    onMouseleave(): void;
     /**
      * Display the menu items.
      *
@@ -98,4 +96,4 @@ export type MenuListInterface = MenuList & {
         MenuList: MenuList[];
     };
 };
-import Transition from "../../primitives/Transition/Transition.js";
+export {};

package/molecules/Menu/MenuList.js

@@ -1 +1 @@
-import n from"../../primitives/Transition/Transition.js";const o=["a[href]:not([inert])","area[href]:not([inert])","input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])","iframe:not([inert])","audio:not([inert])","video:not([inert])","[contenteditable]:not([inert])","[tabindex]:not([inert])"].join(",");class s extends n{static config={...n.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:s}};isOpen=!1;isHover=!1;get $options(){const e=super.$options;return e.leaveKeep=!0,e.enterKeep=!0,e}mounted(){this.__updateTabIndexes("close")}onMouseenter(){this.isHover=!0}onMouseleave(e){this.isHover=!1,this.$emit("items-mouseleave",e)}open(){if(this.isOpen)return;const e=t=>{this.$el.contains(t.target)||(document.removeEventListener("click",e),this.close())};document.addEventListener("click",e),this.__updateTabIndexes("open"),this.$el.setAttribute("aria-hidden","false"),this.isOpen=!0,this.enter(),this.$emit("items-open")}close(){!this.isOpen||(this.$children.MenuList.forEach(e=>{e.close()}),document.activeElement instanceof HTMLElement&&this.$el.contains(document.activeElement)&&document.activeElement.blur(),this.$el.setAttribute("aria-hidden","true"),this.__updateTabIndexes("close"),this.isOpen=!1,this.leave(),this.$emit("items-close"))}toggle(){console.log(this.$id,"toggle",this.isOpen),this.isOpen?this.close():this.open()}__updateTabIndexes(e="open"){Array.from(this.$el.querySelectorAll(o)).filter(i=>this.__filterFocusableItems(i)).forEach(i=>{e==="close"?i.setAttribute("tabindex","-1"):i.removeAttribute("tabindex")})}__filterFocusableItems(e){let t=e.parentElement;for(;t&&(!t.__base__||!t.__base__.has(this.constructor));)t=t.parentElement;return t===null||t===this.$el}}export{s as default};
+import s from"../../primitives/Transition/Transition.js";const o=["a[href]:not([inert])","area[href]:not([inert])","input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])","iframe:not([inert])","audio:not([inert])","video:not([inert])","[contenteditable]:not([inert])","[tabindex]:not([inert])"].join(",");class n extends s{static config={...s.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:n}};isOpen=!1;isHover=!1;get $options(){const e=super.$options;return e.leaveKeep=!0,e.enterKeep=!0,e}mounted(){this.__updateTabIndexes("close")}onMouseenter(){this.isHover=!0}onMouseleave(){this.isHover=!1}open(){if(this.isOpen)return;const e=t=>{this.$el.contains(t.target)||(document.removeEventListener("click",e),this.close())};document.addEventListener("click",e),this.__updateTabIndexes("open"),this.$el.setAttribute("aria-hidden","false"),this.isOpen=!0,this.enter(),this.$emit("items-open")}close(){!this.isOpen||(this.$children.MenuList.forEach(e=>{e.close()}),document.activeElement instanceof HTMLElement&&this.$el.contains(document.activeElement)&&document.activeElement.blur(),this.$el.setAttribute("aria-hidden","true"),this.__updateTabIndexes("close"),this.isOpen=!1,this.leave(),this.$emit("items-close"))}toggle(){this.isOpen?this.close():this.open()}__updateTabIndexes(e="open"){Array.from(this.$el.querySelectorAll(o)).filter(i=>this.__filterFocusableItems(i)).forEach(i=>{e==="close"?i.setAttribute("tabindex","-1"):i.removeAttribute("tabindex")})}__filterFocusableItems(e){let t=e.parentElement;for(;t&&(!t.__base__||!t.__base__.has(this.constructor));)t=t.parentElement;return t===null||t===this.$el}}export{n as default};

package/molecules/Modal/Modal.cjs

@@ -89,7 +89,9 @@ var Modal = class extends import_js_toolkit.Base {
       return Promise.resolve();
     }
     this.$refs.modal.setAttribute("aria-hidden", "false");
-    document.documentElement.style.overflow = "hidden";
+    if (this.$options.scrollLock) {
+      document.documentElement.style.overflow = "hidden";
+    }
     this.isOpen = true;
     this.$emit("open");
     const refs = this.$refs;
@@ -111,7 +113,9 @@ var Modal = class extends import_js_toolkit.Base {
       return Promise.resolve();
     }
     this.$refs.modal.setAttribute("aria-hidden", "true");
-    document.documentElement.style.overflow = "";
+    if (this.$options.scrollLock) {
+      document.documentElement.style.overflow = "";
+    }
     this.isOpen = false;
     untrap();
     this.$emit("close");
@@ -125,7 +129,7 @@ var Modal = class extends import_js_toolkit.Base {
 };
 __publicField(Modal, "config", {
   name: "Modal",
-  refs: ["close", "container", "content", "modal", "open", "overlay"],
+  refs: ["close[]", "container", "content", "modal", "open[]", "overlay"],
   emits: ["open", "close"],
   options: {
     move: String,
@@ -141,6 +145,10 @@ __publicField(Modal, "config", {
           }
         }
       })
+    },
+    scrollLock: {
+      type: Boolean,
+      default: true
     }
   }
 });

package/molecules/Modal/Modal.d.ts

@@ -1,10 +1,10 @@
 /**
  * @typedef {Object} ModalRefs
- * @property {HTMLElement} close
+ * @property {HTMLElement} close[]
  * @property {HTMLElement} container
  * @property {HTMLElement} content
  * @property {HTMLElement} modal
- * @property {HTMLElement} open
+ * @property {HTMLElement} open[]
  * @property {HTMLElement} overlay
  */
 /**
@@ -13,9 +13,10 @@
  */
 /**
  * @typedef {Object} ModalOptions
- * @property {String}            move      A selector where to move the modal to.
- * @property {String}            autofocus A selector for the element to set the focus to when the modal opens.
- * @property {ModalStylesOption} styles    The styles for the different state of the modal.
+ * @property {String}            move       A selector where to move the modal to.
+ * @property {String}            autofocus  A selector for the element to set the focus to when the modal opens.
+ * @property {Boolean}           scrollLock Lock or allow scroll in the documentElement.
+ * @property {ModalStylesOption} styles     The styles for the different state of the modal.
  */
 /**
  * @typedef {Object} ModalPrivateInterface
@@ -54,6 +55,13 @@ export default class Modal extends Base {
                  */
                 default: () => ModalStylesOption;
             };
+            /**
+             * @return {ModalScrollLockOption}
+             */
+            scrollLock: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         };
     };
     /**
@@ -141,6 +149,10 @@ export type ModalOptions = {
      * A selector for the element to set the focus to when the modal opens.
      */
     autofocus: string;
+    /**
+     * Lock or allow scroll in the documentElement.
+     */
+    scrollLock: boolean;
     /**
      * The styles for the different state of the modal.
      */

package/molecules/Modal/Modal.js

@@ -1 +1 @@
-import{Base as n}from"@studiometa/js-toolkit";import{transition as r,focusTrap as l}from"@studiometa/js-toolkit/utils";const{trap:a,untrap:c,saveActiveElement:f}=l();class h extends n{static config={name:"Modal",refs:["close","container","content","modal","open","overlay"],emits:["open","close"],options:{move:String,autofocus:{type:String,default:"[autofocus]"},styles:{type:Object,default:()=>({modal:{closed:{opacity:"0",pointerEvents:"none",visibility:"hidden"}}})}}};get onOpenClick(){return this.open}get onCloseClick(){return this.close}get onOverlayClick(){return this.close}mounted(){if(this.isOpen=!1,this.close(),this.$options.move){const e=document.querySelector(this.$options.move)||document.body;this.__refsBackup=this.$refs,this.__refModalPlaceholder=document.createComment(""),this.__refModalParentBackup=this.$refs.modal.parentElement||this.$el,this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder,this.$refs.modal),e.appendChild(this.$refs.modal)}}get $refs(){const e=super.$refs;return this.$options.move&&this.__refsBackup&&Object.entries(this.__refsBackup).forEach(([t,s])=>{e[t]||(e[t]=s)}),e}destroyed(){return this.close(),this.$options.move&&this.__refModalParentBackup&&(this.__refModalParentBackup.insertBefore(this.$refs.modal,this.__refModalPlaceholder),this.__refModalPlaceholder.remove(),delete this.__refModalPlaceholder,delete this.__refModalParentBackup),this}keyed({event:e,isUp:t,isDown:s,ESC:o}){!this.isOpen||(s&&a(this.$refs.modal,e),o&&t&&this.close())}async open(){if(this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","false"),document.documentElement.style.overflow="hidden",this.isOpen=!0,this.$emit("open");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:i,active:o,to:s},"keep"))).then(()=>(this.$options.autofocus&&this.$refs.modal.querySelector(this.$options.autofocus)&&(f(),this.$refs.modal.querySelector(this.$options.autofocus).focus()),Promise.resolve()))}async close(){if(!this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","true"),document.documentElement.style.overflow="",this.isOpen=!1,c(),this.$emit("close");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:s,active:o,to:i},"keep"))).then(()=>Promise.resolve())}}export{h as default};
+import{Base as n}from"@studiometa/js-toolkit";import{transition as r,focusTrap as l}from"@studiometa/js-toolkit/utils";const{trap:a,untrap:c,saveActiveElement:f}=l();class h extends n{static config={name:"Modal",refs:["close[]","container","content","modal","open[]","overlay"],emits:["open","close"],options:{move:String,autofocus:{type:String,default:"[autofocus]"},styles:{type:Object,default:()=>({modal:{closed:{opacity:"0",pointerEvents:"none",visibility:"hidden"}}})},scrollLock:{type:Boolean,default:!0}}};get onOpenClick(){return this.open}get onCloseClick(){return this.close}get onOverlayClick(){return this.close}mounted(){if(this.isOpen=!1,this.close(),this.$options.move){const e=document.querySelector(this.$options.move)||document.body;this.__refsBackup=this.$refs,this.__refModalPlaceholder=document.createComment(""),this.__refModalParentBackup=this.$refs.modal.parentElement||this.$el,this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder,this.$refs.modal),e.appendChild(this.$refs.modal)}}get $refs(){const e=super.$refs;return this.$options.move&&this.__refsBackup&&Object.entries(this.__refsBackup).forEach(([t,s])=>{e[t]||(e[t]=s)}),e}destroyed(){return this.close(),this.$options.move&&this.__refModalParentBackup&&(this.__refModalParentBackup.insertBefore(this.$refs.modal,this.__refModalPlaceholder),this.__refModalPlaceholder.remove(),delete this.__refModalPlaceholder,delete this.__refModalParentBackup),this}keyed({event:e,isUp:t,isDown:s,ESC:o}){!this.isOpen||(s&&a(this.$refs.modal,e),o&&t&&this.close())}async open(){if(this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","false"),this.$options.scrollLock&&(document.documentElement.style.overflow="hidden"),this.isOpen=!0,this.$emit("open");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:i,active:o,to:s},"keep"))).then(()=>(this.$options.autofocus&&this.$refs.modal.querySelector(this.$options.autofocus)&&(f(),this.$refs.modal.querySelector(this.$options.autofocus).focus()),Promise.resolve()))}async close(){if(!this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","true"),this.$options.scrollLock&&(document.documentElement.style.overflow=""),this.isOpen=!1,c(),this.$emit("close");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:s,active:o,to:i},"keep"))).then(()=>Promise.resolve())}}export{h as default};

package/molecules/Modal/Modal.twig

@@ -83,7 +83,10 @@
 
 <div {{ html_attributes(attributes) }}>
   {% block open %}
-    {% include '@ui/atoms/Button/Button.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+    {% include '@ui/atoms/Button/Button.twig' with {
+      label: 'Open',
+      attr: { data_ref: 'open[]' }
+    } %}
   {% endblock %}
   <div {{ html_attributes(modal_attributes) }}>
     <div {{ html_attributes(overlay_attributes) }}></div>
@@ -93,7 +96,7 @@
           <div class="absolute top-0 right-0 m-2">
             {% include '@ui/atoms/Button/Button.twig' with {
               label: 'Close',
-              attr: { data_ref: 'close' }
+              attr: { data_ref: 'close[]' }
             } %}
           </div>
         {% endblock %}

package/molecules/Modal/StyledModal.twig

@@ -26,14 +26,17 @@
 {% extends '@ui/molecules/Modal/Modal.twig' %}
 
 {% block open %}
-  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with {
+    label: 'Open',
+    attr: { data_ref: 'open[]' }
+  } %}
 {% endblock %}
 
 {% block close %}
   <div class="absolute top-0 right-0 m-2">
     {% include '@ui/atoms/Button/StyledButton.twig' with {
       label: 'Close',
-      attr: { data_ref: 'close' }
+      attr: { data_ref: 'close[]' }
     } %}
   </div>
 {% endblock %}

package/molecules/Panel/StyledPanel.twig

@@ -12,17 +12,22 @@
 
 {% extends '@ui/molecules/Panel/Panel.twig' %}
 
-{% set container_attr = merge_html_attributes(container_attr ?? null, required={ class: 'bg-white' }) %}
+{% set container_attr =
+  merge_html_attributes(container_attr ?? null, required = { class: 'bg-white' })
+%}
 
 {% block open %}
-  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with {
+    label: 'Open',
+    attr: { data_ref: 'open[]' }
+  } %}
 {% endblock %}
 
 {% block close %}
   <div class="absolute top-0 right-0 m-2">
     {% include '@ui/atoms/Button/StyledButton.twig' with {
       label: 'Close',
-      attr: { data_ref: 'close' }
+      attr: { data_ref: 'close[]' }
     } %}
   </div>
 {% endblock %}

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;