@studiometa/ui 0.2.23 → 0.2.25

package/molecules/Menu/Menu.cjs

@@ -32,18 +32,34 @@ var import_utils = require("@studiometa/js-toolkit/utils");
 var import_MenuBtn = require("./MenuBtn.cjs");
 var import_MenuList = require("./MenuList.cjs");
 var _Menu = class extends import_js_toolkit.Base {
+  /**
+   * Get the first `MenuList` instance.
+   */
   get menuList() {
     return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuList")[0];
   }
+  /**
+   * Get the first `MenuBtn` instance.
+   */
   get menuBtn() {
     return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuBtn")[0];
   }
+  /**
+   * Test which mode to use.
+   */
   get shouldReactOnClick() {
     return this.$options.mode === "click";
   }
+  /**
+   * Wether the button or the items are hovered.
+   */
   get isHover() {
     return this.menuBtn.isHover || this.menuList.isHover;
   }
+  /**
+   * Set attributes on mounted, destroy the component if it is missing required
+   * child components.
+   */
   mounted() {
     if (!this.menuBtn || !this.menuList) {
       this.$destroy();
@@ -53,6 +69,9 @@ var _Menu = class extends import_js_toolkit.Base {
     this.menuList.$el.setAttribute("id", this.$id);
     this.menuList.close();
   }
+  /**
+   * Keyboard management.
+   */
   keyed({ ENTER, ESC, isUp }) {
     if (!isUp) {
       return;
@@ -68,17 +87,26 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     }
   }
+  /**
+   * Toggle menu items on button click.
+   */
   onMenuBtnClick(index, event) {
     if ((0, import_js_toolkit.isDirectChild)(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
       event.preventDefault();
       this.toggle();
     }
   }
+  /**
+   * Open menu items on button mouse enter.
+   */
   onMenuBtnMouseenter(index) {
     if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
       this.open();
     }
   }
+  /**
+   * Close menu items on button mouse leave.
+   */
   onMenuBtnMouseleave() {
     if (this.shouldReactOnClick) {
       return;
@@ -89,6 +117,9 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     });
   }
+  /**
+   * Close menu items on button mouse leave.
+   */
   onMenuListMouseleave() {
     if (this.shouldReactOnClick) {
       return;
@@ -99,6 +130,9 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     });
   }
+  /**
+   * Close other non-parent menu items on menu items open.
+   */
   onMenuListItemsOpen(index) {
     const targetMenu = this.$children.MenuList[index];
     this.$children.MenuList.forEach((menuItem) => {
@@ -107,17 +141,29 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     });
   }
+  /**
+   * Close the menu.
+   */
   close() {
     this.menuList.close();
   }
+  /**
+   * Open the menu.
+   */
   open() {
     this.menuList.open();
   }
+  /**
+   * Toggle the menu.
+   */
   toggle() {
     this.menuList.toggle();
   }
 };
 var Menu = _Menu;
+/**
+ * Config.
+ */
 __publicField(Menu, "config", {
   name: "Menu",
   components: {
@@ -129,6 +175,7 @@ __publicField(Menu, "config", {
     mode: {
       type: String,
       default: "click"
+      // or 'hover'
     }
   }
 });

package/molecules/Menu/Menu.cjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Menu/Menu.ts"],
   "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    Menu: Menu[];\n    MenutBtn: MenuBtn[];\n    MenuList: MenuList[];\n  };\n  $options: {\n    mode: 'click' | 'hover';\n  };\n}\n\n/**\n * Menu class.\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Menu',\n    components: {\n      MenuBtn,\n      MenuList,\n      Menu,\n    },\n    options: {\n      mode: {\n        type: String,\n        default: 'click', // or 'hover'\n      },\n    },\n  };\n\n  /**\n   * Get the first `MenuList` instance.\n   */\n  get menuList(): MenuList {\n    return getDirectChildren<MenuList>(this, 'Menu', 'MenuList')[0];\n  }\n\n  /**\n   * Get the first `MenuBtn` instance.\n   */\n  get menuBtn(): MenuBtn {\n    return getDirectChildren<MenuBtn>(this, 'Menu', 'MenuBtn')[0];\n  }\n\n  /**\n   * Test which mode to use.\n   */\n  get shouldReactOnClick(): boolean {\n    return this.$options.mode === 'click';\n  }\n\n  /**\n   * Wether the button or the items are hovered.\n   */\n  get isHover(): boolean {\n    return this.menuBtn.isHover || this.menuList.isHover;\n  }\n\n  /**\n   * Set attributes on mounted, destroy the component if it is missing required\n   * child components.\n   */\n  mounted() {\n    if (!this.menuBtn || !this.menuList) {\n      this.$destroy();\n      return;\n    }\n\n    this.menuBtn.$el.setAttribute('aria-controls', this.$id);\n    this.menuList.$el.setAttribute('id', this.$id);\n    this.menuList.close();\n  }\n\n  /**\n   * Keyboard management.\n   */\n  keyed({ ENTER, ESC, isUp }: KeyServiceProps) {\n    if (!isUp) {\n      return;\n    }\n\n    if (ESC) {\n      this.close();\n      return;\n    }\n\n    if (!this.shouldReactOnClick) {\n      const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;\n\n      if (ENTER && hasFocusElementWithin) {\n        this.toggle();\n      }\n    }\n  }\n\n  /**\n   * Toggle menu items on button click.\n   */\n  onMenuBtnClick(index: number, event: MouseEvent) {\n    if (\n      isDirectChild(this, 'Menu', 'MenuBtn', this.$children.MenuBtn[index]) &&\n      this.shouldReactOnClick\n    ) {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Open menu items on button mouse enter.\n   */\n  onMenuBtnMouseenter(index: number) {\n    if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {\n      this.open();\n    }\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuBtnMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuListMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close other non-parent menu items on menu items open.\n   */\n  onMenuListItemsOpen(index: number) {\n    const targetMenu = this.$children.MenuList[index];\n    this.$children.MenuList.forEach((menuItem) => {\n      if (!menuItem.$el.contains(targetMenu.$el)) {\n        menuItem.close();\n      }\n    });\n  }\n\n  /**\n   * Close the menu.\n   */\n  close() {\n    this.menuList.close();\n  }\n\n  /**\n   * Open the menu.\n   */\n  open() {\n    this.menuList.open();\n  }\n\n  /**\n   * Toggle the menu.\n   */\n  toggle() {\n    this.menuList.toggle();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuD;AAEvD,mBAAyB;AACzB,qBAAwB;AACxB,sBAAyB;AAiBlB,IAAM,QAAN,cAAoD,uBAAoB;AAAA,EAsB7E,IAAI,WAAqB;AACvB,eAAO,qCAA4B,MAAM,QAAQ,UAAU,EAAE;AAAA,EAC/D;AAAA,EAKA,IAAI,UAAmB;AACrB,eAAO,qCAA2B,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC7D;AAAA,EAKA,IAAI,qBAA8B;AAChC,WAAO,KAAK,SAAS,SAAS;AAAA,EAChC;AAAA,EAKA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,WAAW,KAAK,SAAS;AAAA,EAC/C;AAAA,EAMA,UAAU;AACR,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,UAAU;AACnC,WAAK,SAAS;AACd;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,aAAa,iBAAiB,KAAK,GAAG;AACvD,SAAK,SAAS,IAAI,aAAa,MAAM,KAAK,GAAG;AAC7C,SAAK,SAAS,MAAM;AAAA,EACtB;AAAA,EAKA,MAAM,EAAE,OAAO,KAAK,KAAK,GAAoB;AAC3C,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,QAAI,KAAK;AACP,WAAK,MAAM;AACX;AAAA,IACF;AAEA,QAAI,CAAC,KAAK,oBAAoB;AAC5B,YAAM,wBAAwB,SAAS,kBAAkB,KAAK,QAAQ;AAEtE,UAAI,SAAS,uBAAuB;AAClC,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA,EAKA,eAAe,OAAe,OAAmB;AAC/C,YACE,iCAAc,MAAM,QAAQ,WAAW,KAAK,UAAU,QAAQ,MAAM,KACpE,KAAK,oBACL;AACA,YAAM,eAAe;AACrB,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA,EAKA,oBAAoB,OAAe;AACjC,QAAI,KAAK,UAAU,QAAQ,WAAW,KAAK,WAAW,CAAC,KAAK,oBAAoB;AAC9E,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA,EAKA,sBAAsB;AACpB,QAAI,KAAK,oBAAoB;AAC3B;AAAA,IACF;AAEA,+BAAS,MAAM;AACb,UAAI,CAAC,KAAK,SAAS;AACjB,aAAK,MAAM;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAKA,uBAAuB;AACrB,QAAI,KAAK,oBAAoB;AAC3B;AAAA,IACF;AAEA,+BAAS,MAAM;AACb,UAAI,CAAC,KAAK,SAAS;AACjB,aAAK,MAAM;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAKA,oBAAoB,OAAe;AACjC,UAAM,aAAa,KAAK,UAAU,SAAS;AAC3C,SAAK,UAAU,SAAS,QAAQ,CAAC,aAAa;AAC5C,UAAI,CAAC,SAAS,IAAI,SAAS,WAAW,GAAG,GAAG;AAC1C,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAKA,QAAQ;AACN,SAAK,SAAS,MAAM;AAAA,EACtB;AAAA,EAKA,OAAO;AACL,SAAK,SAAS,KAAK;AAAA,EACrB;AAAA,EAKA,SAAS;AACP,SAAK,SAAS,OAAO;AAAA,EACvB;AACF;AAxKO,IAAM,OAAN;AAIL,cAJW,MAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
+  "mappings": "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",
   "names": []
 }

package/molecules/Menu/Menu.js

@@ -3,6 +3,9 @@ import { nextTick } from "@studiometa/js-toolkit/utils";
 import { MenuBtn } from "./MenuBtn.js";
 import { MenuList } from "./MenuList.js";
 class Menu extends Base {
+  /**
+   * Config.
+   */
   static config = {
     name: "Menu",
     components: {
@@ -14,21 +17,38 @@ class Menu extends Base {
       mode: {
         type: String,
         default: "click"
+        // or 'hover'
       }
     }
   };
+  /**
+   * Get the first `MenuList` instance.
+   */
   get menuList() {
     return getDirectChildren(this, "Menu", "MenuList")[0];
   }
+  /**
+   * Get the first `MenuBtn` instance.
+   */
   get menuBtn() {
     return getDirectChildren(this, "Menu", "MenuBtn")[0];
   }
+  /**
+   * Test which mode to use.
+   */
   get shouldReactOnClick() {
     return this.$options.mode === "click";
   }
+  /**
+   * Wether the button or the items are hovered.
+   */
   get isHover() {
     return this.menuBtn.isHover || this.menuList.isHover;
   }
+  /**
+   * Set attributes on mounted, destroy the component if it is missing required
+   * child components.
+   */
   mounted() {
     if (!this.menuBtn || !this.menuList) {
       this.$destroy();
@@ -38,6 +58,9 @@ class Menu extends Base {
     this.menuList.$el.setAttribute("id", this.$id);
     this.menuList.close();
   }
+  /**
+   * Keyboard management.
+   */
   keyed({ ENTER, ESC, isUp }) {
     if (!isUp) {
       return;
@@ -53,17 +76,26 @@ class Menu extends Base {
       }
     }
   }
+  /**
+   * Toggle menu items on button click.
+   */
   onMenuBtnClick(index, event) {
     if (isDirectChild(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
       event.preventDefault();
       this.toggle();
     }
   }
+  /**
+   * Open menu items on button mouse enter.
+   */
   onMenuBtnMouseenter(index) {
     if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
       this.open();
     }
   }
+  /**
+   * Close menu items on button mouse leave.
+   */
   onMenuBtnMouseleave() {
     if (this.shouldReactOnClick) {
       return;
@@ -74,6 +106,9 @@ class Menu extends Base {
       }
     });
   }
+  /**
+   * Close menu items on button mouse leave.
+   */
   onMenuListMouseleave() {
     if (this.shouldReactOnClick) {
       return;
@@ -84,6 +119,9 @@ class Menu extends Base {
       }
     });
   }
+  /**
+   * Close other non-parent menu items on menu items open.
+   */
   onMenuListItemsOpen(index) {
     const targetMenu = this.$children.MenuList[index];
     this.$children.MenuList.forEach((menuItem) => {
@@ -92,12 +130,21 @@ class Menu extends Base {
       }
     });
   }
+  /**
+   * Close the menu.
+   */
   close() {
     this.menuList.close();
   }
+  /**
+   * Open the menu.
+   */
   open() {
     this.menuList.open();
   }
+  /**
+   * Toggle the menu.
+   */
   toggle() {
     this.menuList.toggle();
   }

package/molecules/Menu/Menu.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Menu/Menu.ts"],
   "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    Menu: Menu[];\n    MenutBtn: MenuBtn[];\n    MenuList: MenuList[];\n  };\n  $options: {\n    mode: 'click' | 'hover';\n  };\n}\n\n/**\n * Menu class.\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Menu',\n    components: {\n      MenuBtn,\n      MenuList,\n      Menu,\n    },\n    options: {\n      mode: {\n        type: String,\n        default: 'click', // or 'hover'\n      },\n    },\n  };\n\n  /**\n   * Get the first `MenuList` instance.\n   */\n  get menuList(): MenuList {\n    return getDirectChildren<MenuList>(this, 'Menu', 'MenuList')[0];\n  }\n\n  /**\n   * Get the first `MenuBtn` instance.\n   */\n  get menuBtn(): MenuBtn {\n    return getDirectChildren<MenuBtn>(this, 'Menu', 'MenuBtn')[0];\n  }\n\n  /**\n   * Test which mode to use.\n   */\n  get shouldReactOnClick(): boolean {\n    return this.$options.mode === 'click';\n  }\n\n  /**\n   * Wether the button or the items are hovered.\n   */\n  get isHover(): boolean {\n    return this.menuBtn.isHover || this.menuList.isHover;\n  }\n\n  /**\n   * Set attributes on mounted, destroy the component if it is missing required\n   * child components.\n   */\n  mounted() {\n    if (!this.menuBtn || !this.menuList) {\n      this.$destroy();\n      return;\n    }\n\n    this.menuBtn.$el.setAttribute('aria-controls', this.$id);\n    this.menuList.$el.setAttribute('id', this.$id);\n    this.menuList.close();\n  }\n\n  /**\n   * Keyboard management.\n   */\n  keyed({ ENTER, ESC, isUp }: KeyServiceProps) {\n    if (!isUp) {\n      return;\n    }\n\n    if (ESC) {\n      this.close();\n      return;\n    }\n\n    if (!this.shouldReactOnClick) {\n      const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;\n\n      if (ENTER && hasFocusElementWithin) {\n        this.toggle();\n      }\n    }\n  }\n\n  /**\n   * Toggle menu items on button click.\n   */\n  onMenuBtnClick(index: number, event: MouseEvent) {\n    if (\n      isDirectChild(this, 'Menu', 'MenuBtn', this.$children.MenuBtn[index]) &&\n      this.shouldReactOnClick\n    ) {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Open menu items on button mouse enter.\n   */\n  onMenuBtnMouseenter(index: number) {\n    if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {\n      this.open();\n    }\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuBtnMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuListMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close other non-parent menu items on menu items open.\n   */\n  onMenuListItemsOpen(index: number) {\n    const targetMenu = this.$children.MenuList[index];\n    this.$children.MenuList.forEach((menuItem) => {\n      if (!menuItem.$el.contains(targetMenu.$el)) {\n        menuItem.close();\n      }\n    });\n  }\n\n  /**\n   * Close the menu.\n   */\n  close() {\n    this.menuList.close();\n  }\n\n  /**\n   * Open the menu.\n   */\n  open() {\n    this.menuList.open();\n  }\n\n  /**\n   * Toggle the menu.\n   */\n  toggle() {\n    this.menuList.toggle();\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,eAAe,yBAAyB;AAEvD,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAiBlB,MAAM,aAA8C,KAAoB;AAAA,EAI7E,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAKA,IAAI,WAAqB;AACvB,WAAO,kBAA4B,MAAM,QAAQ,UAAU,EAAE;AAAA,EAC/D;AAAA,EAKA,IAAI,UAAmB;AACrB,WAAO,kBAA2B,MAAM,QAAQ,SAAS,EAAE;AAAA,EAC7D;AAAA,EAKA,IAAI,qBAA8B;AAChC,WAAO,KAAK,SAAS,SAAS;AAAA,EAChC;AAAA,EAKA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,WAAW,KAAK,SAAS;AAAA,EAC/C;AAAA,EAMA,UAAU;AACR,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,UAAU;AACnC,WAAK,SAAS;AACd;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,aAAa,iBAAiB,KAAK,GAAG;AACvD,SAAK,SAAS,IAAI,aAAa,MAAM,KAAK,GAAG;AAC7C,SAAK,SAAS,MAAM;AAAA,EACtB;AAAA,EAKA,MAAM,EAAE,OAAO,KAAK,KAAK,GAAoB;AAC3C,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,QAAI,KAAK;AACP,WAAK,MAAM;AACX;AAAA,IACF;AAEA,QAAI,CAAC,KAAK,oBAAoB;AAC5B,YAAM,wBAAwB,SAAS,kBAAkB,KAAK,QAAQ;AAEtE,UAAI,SAAS,uBAAuB;AAClC,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA,EAKA,eAAe,OAAe,OAAmB;AAC/C,QACE,cAAc,MAAM,QAAQ,WAAW,KAAK,UAAU,QAAQ,MAAM,KACpE,KAAK,oBACL;AACA,YAAM,eAAe;AACrB,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA,EAKA,oBAAoB,OAAe;AACjC,QAAI,KAAK,UAAU,QAAQ,WAAW,KAAK,WAAW,CAAC,KAAK,oBAAoB;AAC9E,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA,EAKA,sBAAsB;AACpB,QAAI,KAAK,oBAAoB;AAC3B;AAAA,IACF;AAEA,aAAS,MAAM;AACb,UAAI,CAAC,KAAK,SAAS;AACjB,aAAK,MAAM;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAKA,uBAAuB;AACrB,QAAI,KAAK,oBAAoB;AAC3B;AAAA,IACF;AAEA,aAAS,MAAM;AACb,UAAI,CAAC,KAAK,SAAS;AACjB,aAAK,MAAM;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAKA,oBAAoB,OAAe;AACjC,UAAM,aAAa,KAAK,UAAU,SAAS;AAC3C,SAAK,UAAU,SAAS,QAAQ,CAAC,aAAa;AAC5C,UAAI,CAAC,SAAS,IAAI,SAAS,WAAW,GAAG,GAAG;AAC1C,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAKA,QAAQ;AACN,SAAK,SAAS,MAAM;AAAA,EACtB;AAAA,EAKA,OAAO;AACL,SAAK,SAAS,KAAK;AAAA,EACrB;AAAA,EAKA,SAAS;AACP,SAAK,SAAS,OAAO;AAAA,EACvB;AACF;",
+  "mappings": "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",
   "names": []
 }

package/molecules/Menu/MenuBtn.cjs

@@ -29,19 +29,43 @@ __export(MenuBtn_exports, {
 module.exports = __toCommonJS(MenuBtn_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var MenuBtn = class extends import_js_toolkit.Base {
+  /**
+   * Wether the button is hovered or not.
+   * @type {boolean}
+   */
   isHover = false;
+  /**
+   * Dispatch the click event.
+   *
+   * @param   {MouseEvent} event
+   * @returns {void}
+   */
   onClick(event) {
     event.stopPropagation();
   }
+  /**
+   * Dispatch the mouseenter event.
+   *
+   * @param   {MouseEvent} event
+   * @returns {void}
+   */
   onMouseenter(event) {
     this.isHover = true;
     event.stopPropagation();
   }
+  /**
+   * Dispatch the mouseleave event.
+   * @param   {MouseEvent} event
+   * @returns {void}
+   */
   onMouseleave(event) {
     this.isHover = false;
     event.stopPropagation();
   }
 };
+/**
+ * Config.
+ */
 __publicField(MenuBtn, "config", {
   name: "MenuBtn"
 });

package/molecules/Menu/MenuBtn.cjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Menu/MenuBtn.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\n/**\n * MenuBtn class.\n */\nexport class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'MenuBtn',\n  };\n\n  /**\n   * Wether the button is hovered or not.\n   * @type {boolean}\n   */\n  isHover = false;\n\n  /**\n   * Dispatch the click event.\n   *\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onClick(event) {\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseenter event.\n   *\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onMouseenter(event) {\n    this.isHover = true;\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseleave event.\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onMouseleave(event) {\n    this.isHover = false;\n    event.stopPropagation();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAMd,IAAM,UAAN,cAAuD,uBAAQ;AAAA,EAYpE,UAAU;AAAA,EAQV,QAAQ,OAAO;AACb,UAAM,gBAAgB;AAAA,EACxB;AAAA,EAQA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA,EAOA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;AAxCE,cAJW,SAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAMd,IAAM,UAAN,cAAuD,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYpE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV,QAAQ,OAAO;AACb,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;AAAA;AAAA;AAAA;AAxCE,cAJW,SAIJ,UAAqB;AAAA,EAC1B,MAAM;AACR;",
   "names": []
 }

package/molecules/Menu/MenuBtn.js

@@ -1,16 +1,40 @@
 import { Base } from "@studiometa/js-toolkit";
 class MenuBtn extends Base {
+  /**
+   * Config.
+   */
   static config = {
     name: "MenuBtn"
   };
+  /**
+   * Wether the button is hovered or not.
+   * @type {boolean}
+   */
   isHover = false;
+  /**
+   * Dispatch the click event.
+   *
+   * @param   {MouseEvent} event
+   * @returns {void}
+   */
   onClick(event) {
     event.stopPropagation();
   }
+  /**
+   * Dispatch the mouseenter event.
+   *
+   * @param   {MouseEvent} event
+   * @returns {void}
+   */
   onMouseenter(event) {
     this.isHover = true;
     event.stopPropagation();
   }
+  /**
+   * Dispatch the mouseleave event.
+   * @param   {MouseEvent} event
+   * @returns {void}
+   */
   onMouseleave(event) {
     this.isHover = false;
     event.stopPropagation();

package/molecules/Menu/MenuBtn.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Menu/MenuBtn.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\n/**\n * MenuBtn class.\n */\nexport class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'MenuBtn',\n  };\n\n  /**\n   * Wether the button is hovered or not.\n   * @type {boolean}\n   */\n  isHover = false;\n\n  /**\n   * Dispatch the click event.\n   *\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onClick(event) {\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseenter event.\n   *\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onMouseenter(event) {\n    this.isHover = true;\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseleave event.\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onMouseleave(event) {\n    this.isHover = false;\n    event.stopPropagation();\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAMd,MAAM,gBAAiD,KAAQ;AAAA,EAIpE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA,EAMA,UAAU;AAAA,EAQV,QAAQ,OAAO;AACb,UAAM,gBAAgB;AAAA,EACxB;AAAA,EAQA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA,EAOA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;",
+  "mappings": "AAAA,SAAS,YAAY;AAMd,MAAM,gBAAiD,KAAQ;AAAA;AAAA;AAAA;AAAA,EAIpE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV,QAAQ,OAAO;AACb,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;",
   "names": []
 }

package/molecules/Menu/MenuList.cjs

@@ -42,23 +42,45 @@ var FOCUSABLE_ELEMENTS = [
   "[tabindex]:not([inert])"
 ].join(",");
 var _MenuList = class extends import_primitives.Transition {
+  /**
+   * Are the menu items visible?
+   */
   isOpen = false;
+  /**
+   * Wether the component is hovered.
+   */
   isHover = false;
+  /**
+   * Override `Transition` options.
+   */
+  // @ts-ignore
   get $options() {
     const options = super.$options;
     options.leaveKeep = true;
     options.enterKeep = true;
     return options;
   }
+  /**
+   * Update tab indexes on mount.
+   */
   mounted() {
     this.__updateTabIndexes("close");
   }
+  /**
+   * Set hover state.
+   */
   onMouseenter() {
     this.isHover = true;
   }
+  /**
+   * Unset hover state.
+   */
   onMouseleave() {
     this.isHover = false;
   }
+  /**
+   * Display the menu items.
+   */
   open() {
     if (this.isOpen) {
       return;
@@ -76,6 +98,9 @@ var _MenuList = class extends import_primitives.Transition {
     this.enter();
     this.$emit("items-open");
   }
+  /**
+   * Hide the menu items.
+   */
   close() {
     if (!this.isOpen) {
       return;
@@ -92,6 +117,9 @@ var _MenuList = class extends import_primitives.Transition {
     this.leave();
     this.$emit("items-close");
   }
+  /**
+   * Toggle the menu items.
+   */
   toggle() {
     if (this.isOpen) {
       this.close();
@@ -99,6 +127,10 @@ var _MenuList = class extends import_primitives.Transition {
       this.open();
     }
   }
+  /**
+   * Update `tabindex` attribute of child focusable elements.
+   * @private
+   */
   __updateTabIndexes(mode = "open") {
     const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(
       (item) => this.__filterFocusableItems(item)
@@ -111,6 +143,10 @@ var _MenuList = class extends import_primitives.Transition {
       }
     });
   }
+  /**
+   * Filter out items which are inside a child `MenuList` instance.
+   * @private
+   */
   __filterFocusableItems(item) {
     let ancestor = item.parentElement;
     while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {
@@ -120,6 +156,9 @@ var _MenuList = class extends import_primitives.Transition {
   }
 };
 var MenuList = _MenuList;
+/**
+ * Config.
+ */
 __publicField(MenuList, "config", {
   ...import_primitives.Transition.config,
   name: "MenuList",

package/molecules/Menu/MenuList.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Menu/MenuList.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([inert])',\n  'area[href]:not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([inert])',\n  'audio:not([inert])',\n  'video:not([inert])',\n  '[contenteditable]:not([inert])',\n  '[tabindex]:not([inert])',\n].join(',');\n\nexport interface MenuListProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    MenuList: MenuList[];\n  };\n}\n\n/**\n * MenuList class.\n */\nexport class MenuList<T extends BaseProps = BaseProps> extends Transition<T & MenuListProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    ...Transition.config,\n    name: 'MenuList',\n    emits: ['items-open', 'items-close', 'items-mouseleave'],\n    components: {\n      MenuList,\n    },\n  };\n\n  /**\n   * Are the menu items visible?\n   */\n  isOpen = false;\n\n  /**\n   * Wether the component is hovered.\n   */\n  isHover = false;\n\n  /**\n   * Override `Transition` options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n    options.enterKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Update tab indexes on mount.\n   */\n  mounted() {\n    this.__updateTabIndexes('close');\n  }\n\n  /**\n   * Set hover state.\n   */\n  onMouseenter() {\n    this.isHover = true;\n  }\n\n  /**\n   * Unset hover state.\n   */\n  onMouseleave() {\n    this.isHover = false;\n  }\n\n  /**\n   * Display the menu items.\n   */\n  open() {\n    if (this.isOpen) {\n      return;\n    }\n\n    // @todo Remove event listener when the close method is called.\n    const clickOutsideHandler = (event) => {\n      if (!this.$el.contains(event.target)) {\n        document.removeEventListener('click', clickOutsideHandler);\n        this.close();\n      }\n    };\n    document.addEventListener('click', clickOutsideHandler);\n\n    this.__updateTabIndexes('open');\n    this.$el.setAttribute('aria-hidden', 'false');\n    this.isOpen = true;\n    this.enter();\n    this.$emit('items-open');\n  }\n\n  /**\n   * Hide the menu items.\n   */\n  close() {\n    if (!this.isOpen) {\n      return;\n    }\n\n    // Close child menu items.\n    this.$children.MenuList.forEach((menuItem) => {\n      menuItem.close();\n    });\n\n    if (\n      document.activeElement instanceof HTMLElement &&\n      this.$el.contains(document.activeElement)\n    ) {\n      document.activeElement.blur();\n    }\n\n    this.$el.setAttribute('aria-hidden', 'true');\n    this.__updateTabIndexes('close');\n    this.isOpen = false;\n    this.leave();\n    this.$emit('items-close');\n  }\n\n  /**\n   * Toggle the menu items.\n   */\n  toggle() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Update `tabindex` attribute of child focusable elements.\n   * @private\n   */\n  __updateTabIndexes(mode:'open'|'close' = 'open') {\n    const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(\n      (item) => this.__filterFocusableItems(item as HTMLElement),\n    );\n\n    focusableItems.forEach((item) => {\n      if (mode === 'close') {\n        item.setAttribute('tabindex', '-1');\n      } else {\n        item.removeAttribute('tabindex');\n      }\n    });\n  }\n\n  /**\n   * Filter out items which are inside a child `MenuList` instance.\n   * @private\n   */\n  __filterFocusableItems(item:HTMLElement):boolean {\n    let ancestor = item.parentElement;\n\n    // @ts-ignore\n    while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {\n      ancestor = ancestor.parentElement;\n    }\n\n    return ancestor === null || ancestor === this.$el;\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA2B;AAE3B,IAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAYH,IAAM,YAAN,cAAwD,6BAA8B;AAAA,EAgB3F,SAAS;AAAA,EAKT,UAAU;AAAA,EAMV,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AACpB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA,EAKA,UAAU;AACR,SAAK,mBAAmB,OAAO;AAAA,EACjC;AAAA,EAKA,eAAe;AACb,SAAK,UAAU;AAAA,EACjB;AAAA,EAKA,eAAe;AACb,SAAK,UAAU;AAAA,EACjB;AAAA,EAKA,OAAO;AACL,QAAI,KAAK,QAAQ;AACf;AAAA,IACF;AAGA,UAAM,sBAAsB,CAAC,UAAU;AACrC,UAAI,CAAC,KAAK,IAAI,SAAS,MAAM,MAAM,GAAG;AACpC,iBAAS,oBAAoB,SAAS,mBAAmB;AACzD,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AACA,aAAS,iBAAiB,SAAS,mBAAmB;AAEtD,SAAK,mBAAmB,MAAM;AAC9B,SAAK,IAAI,aAAa,eAAe,OAAO;AAC5C,SAAK,SAAS;AACd,SAAK,MAAM;AACX,SAAK,MAAM,YAAY;AAAA,EACzB;AAAA,EAKA,QAAQ;AACN,QAAI,CAAC,KAAK,QAAQ;AAChB;AAAA,IACF;AAGA,SAAK,UAAU,SAAS,QAAQ,CAAC,aAAa;AAC5C,eAAS,MAAM;AAAA,IACjB,CAAC;AAED,QACE,SAAS,yBAAyB,eAClC,KAAK,IAAI,SAAS,SAAS,aAAa,GACxC;AACA,eAAS,cAAc,KAAK;AAAA,IAC9B;AAEA,SAAK,IAAI,aAAa,eAAe,MAAM;AAC3C,SAAK,mBAAmB,OAAO;AAC/B,SAAK,SAAS;AACd,SAAK,MAAM;AACX,SAAK,MAAM,aAAa;AAAA,EAC1B;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,QAAQ;AACf,WAAK,MAAM;AAAA,IACb,OAAO;AACL,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA,EAMA,mBAAmB,OAAsB,QAAQ;AAC/C,UAAM,iBAAiB,MAAM,KAAK,KAAK,IAAI,iBAAiB,kBAAkB,CAAC,EAAE;AAAA,MAC/E,CAAC,SAAS,KAAK,uBAAuB,IAAmB;AAAA,IAC3D;AAEA,mBAAe,QAAQ,CAAC,SAAS;AAC/B,UAAI,SAAS,SAAS;AACpB,aAAK,aAAa,YAAY,IAAI;AAAA,MACpC,OAAO;AACL,aAAK,gBAAgB,UAAU;AAAA,MACjC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAMA,uBAAuB,MAA0B;AAC/C,QAAI,WAAW,KAAK;AAGpB,WAAO,aAAa,CAAC,SAAS,YAAY,CAAC,SAAS,SAAS,IAAI,KAAK,WAAW,IAAI;AACnF,iBAAW,SAAS;AAAA,IACtB;AAEA,WAAO,aAAa,QAAQ,aAAa,KAAK;AAAA,EAChD;AACF;AAvJO,IAAM,WAAN;AAIL,cAJW,UAIJ,UAAoB;AAAA,EACzB,GAAG,6BAAW;AAAA,EACd,MAAM;AAAA,EACN,OAAO,CAAC,cAAc,eAAe,kBAAkB;AAAA,EACvD,YAAY;AAAA,IACV;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([inert])',\n  'area[href]:not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([inert])',\n  'audio:not([inert])',\n  'video:not([inert])',\n  '[contenteditable]:not([inert])',\n  '[tabindex]:not([inert])',\n].join(',');\n\nexport interface MenuListProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    MenuList: MenuList[];\n  };\n}\n\n/**\n * MenuList class.\n */\nexport class MenuList<T extends BaseProps = BaseProps> extends Transition<T & MenuListProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'MenuList',\n    emits: ['items-open', 'items-close', 'items-mouseleave'],\n    components: {\n      MenuList,\n    },\n  };\n\n  /**\n   * Are the menu items visible?\n   */\n  isOpen = false;\n\n  /**\n   * Wether the component is hovered.\n   */\n  isHover = false;\n\n  /**\n   * Override `Transition` options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n    options.enterKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Update tab indexes on mount.\n   */\n  mounted() {\n    this.__updateTabIndexes('close');\n  }\n\n  /**\n   * Set hover state.\n   */\n  onMouseenter() {\n    this.isHover = true;\n  }\n\n  /**\n   * Unset hover state.\n   */\n  onMouseleave() {\n    this.isHover = false;\n  }\n\n  /**\n   * Display the menu items.\n   */\n  open() {\n    if (this.isOpen) {\n      return;\n    }\n\n    // @todo Remove event listener when the close method is called.\n    const clickOutsideHandler = (event) => {\n      if (!this.$el.contains(event.target)) {\n        document.removeEventListener('click', clickOutsideHandler);\n        this.close();\n      }\n    };\n    document.addEventListener('click', clickOutsideHandler);\n\n    this.__updateTabIndexes('open');\n    this.$el.setAttribute('aria-hidden', 'false');\n    this.isOpen = true;\n    this.enter();\n    this.$emit('items-open');\n  }\n\n  /**\n   * Hide the menu items.\n   */\n  close() {\n    if (!this.isOpen) {\n      return;\n    }\n\n    // Close child menu items.\n    this.$children.MenuList.forEach((menuItem) => {\n      menuItem.close();\n    });\n\n    if (\n      document.activeElement instanceof HTMLElement &&\n      this.$el.contains(document.activeElement)\n    ) {\n      document.activeElement.blur();\n    }\n\n    this.$el.setAttribute('aria-hidden', 'true');\n    this.__updateTabIndexes('close');\n    this.isOpen = false;\n    this.leave();\n    this.$emit('items-close');\n  }\n\n  /**\n   * Toggle the menu items.\n   */\n  toggle() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Update `tabindex` attribute of child focusable elements.\n   * @private\n   */\n  __updateTabIndexes(mode: 'open' | 'close' = 'open') {\n    const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(\n      (item) => this.__filterFocusableItems(item as HTMLElement),\n    );\n\n    focusableItems.forEach((item) => {\n      if (mode === 'close') {\n        item.setAttribute('tabindex', '-1');\n      } else {\n        item.removeAttribute('tabindex');\n      }\n    });\n  }\n\n  /**\n   * Filter out items which are inside a child `MenuList` instance.\n   * @private\n   */\n  __filterFocusableItems(item: HTMLElement): boolean {\n    let ancestor = item.parentElement;\n\n    // @ts-ignore\n    while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {\n      ancestor = ancestor.parentElement;\n    }\n\n    return ancestor === null || ancestor === this.$el;\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/molecules/Menu/MenuList.d.ts

@@ -24,7 +24,7 @@ export declare class MenuList<T extends BaseProps = BaseProps> extends Transitio
     /**
      * Override `Transition` options.
      */
-    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit/Base/index.js").BaseOptions & (T & MenuListProps & import("../../index.js").TransitionProps)["$options"];
+    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit/Base/Base.js").BaseOptions & (T & MenuListProps & import("../../index.js").TransitionProps)["$options"];
     /**
      * Update tab indexes on mount.
      */

package/molecules/Menu/MenuList.js

@@ -13,6 +13,9 @@ const FOCUSABLE_ELEMENTS = [
   "[tabindex]:not([inert])"
 ].join(",");
 class MenuList extends Transition {
+  /**
+   * Config.
+   */
   static config = {
     ...Transition.config,
     name: "MenuList",
@@ -21,23 +24,45 @@ class MenuList extends Transition {
       MenuList
     }
   };
+  /**
+   * Are the menu items visible?
+   */
   isOpen = false;
+  /**
+   * Wether the component is hovered.
+   */
   isHover = false;
+  /**
+   * Override `Transition` options.
+   */
+  // @ts-ignore
   get $options() {
     const options = super.$options;
     options.leaveKeep = true;
     options.enterKeep = true;
     return options;
   }
+  /**
+   * Update tab indexes on mount.
+   */
   mounted() {
     this.__updateTabIndexes("close");
   }
+  /**
+   * Set hover state.
+   */
   onMouseenter() {
     this.isHover = true;
   }
+  /**
+   * Unset hover state.
+   */
   onMouseleave() {
     this.isHover = false;
   }
+  /**
+   * Display the menu items.
+   */
   open() {
     if (this.isOpen) {
       return;
@@ -55,6 +80,9 @@ class MenuList extends Transition {
     this.enter();
     this.$emit("items-open");
   }
+  /**
+   * Hide the menu items.
+   */
   close() {
     if (!this.isOpen) {
       return;
@@ -71,6 +99,9 @@ class MenuList extends Transition {
     this.leave();
     this.$emit("items-close");
   }
+  /**
+   * Toggle the menu items.
+   */
   toggle() {
     if (this.isOpen) {
       this.close();
@@ -78,6 +109,10 @@ class MenuList extends Transition {
       this.open();
     }
   }
+  /**
+   * Update `tabindex` attribute of child focusable elements.
+   * @private
+   */
   __updateTabIndexes(mode = "open") {
     const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(
       (item) => this.__filterFocusableItems(item)
@@ -90,6 +125,10 @@ class MenuList extends Transition {
       }
     });
   }
+  /**
+   * Filter out items which are inside a child `MenuList` instance.
+   * @private
+   */
   __filterFocusableItems(item) {
     let ancestor = item.parentElement;
     while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {