@studiometa/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/atoms/AnchorScrollTo/AnchorScrollTo.d.ts

@@ -15,8 +15,8 @@ export declare class AnchorScrollTo<T extends BaseProps = BaseProps> extends Bas
     get targetSelector(): string;
     /**
      * Scroll to the target selector on click.
-     * @param   {MouseEvent} event
-     * @returns {void}
      */
-    onClick(event: any): void;
+    onClick({ event }: {
+        event: MouseEvent;
+    }): void;
 }

package/atoms/AnchorScrollTo/AnchorScrollTo.js

@@ -13,10 +13,8 @@ class AnchorScrollTo extends Base {
   }
   /**
    * Scroll to the target selector on click.
-   * @param   {MouseEvent} event
-   * @returns {void}
    */
-  onClick(event) {
+  onClick({ event }) {
     try {
       scrollTo(this.targetSelector);
       event.preventDefault();

package/atoms/AnchorScrollTo/AnchorScrollTo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/AnchorScrollTo/AnchorScrollTo.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { scrollTo } from '@studiometa/js-toolkit/utils';\n\nexport interface AnchorScrollToProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * AncorScrollTo class.\n */\nexport class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {\n  static config: BaseConfig = {\n    name: 'AnchorScrollTo',\n  };\n\n  /**\n   * Get the target selector.\n   * @returns {string}\n   */\n  get targetSelector() {\n    return this.$el.hash;\n  }\n\n  /**\n   * Scroll to the target selector on click.\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onClick(event) {\n    try {\n      scrollTo(this.targetSelector);\n      event.preventDefault();\n    } catch {\n      // Silence is golden.\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AASlB,MAAM,uBAAwD,KAA8B;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,iBAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,QAAQ,OAAO;AACb,QAAI;AACF,eAAS,KAAK,cAAc;AAC5B,YAAM,eAAe;AAAA,IACvB,QAAQ;AAAA,IAER;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { scrollTo } from '@studiometa/js-toolkit/utils';\n\nexport interface AnchorScrollToProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * AncorScrollTo class.\n */\nexport class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {\n  static config: BaseConfig = {\n    name: 'AnchorScrollTo',\n  };\n\n  /**\n   * Get the target selector.\n   * @returns {string}\n   */\n  get targetSelector() {\n    return this.$el.hash;\n  }\n\n  /**\n   * Scroll to the target selector on click.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    try {\n      scrollTo(this.targetSelector);\n      event.preventDefault();\n    } catch {\n      // Silence is golden.\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AASlB,MAAM,uBAAwD,KAA8B;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,iBAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA0B;AACxC,QAAI;AACF,eAAS,KAAK,cAAc;AAC5B,YAAM,eAAe;AAAA,IACvB,QAAQ;AAAA,IAER;AAAA,EACF;AACF;",
   "names": []
 }

package/atoms/Data/DataBind.d.ts

@@ -17,7 +17,7 @@ export declare class DataBind<T extends BaseProps = BaseProps> extends Base<Data
     get value(): any;
     set value(value: any);
     get(): any;
-    set(value: boolean | string | string[]): void;
+    set(value: boolean | string | string[], dispatch?: boolean): void;
     mounted(): void;
     destroyed(): void;
 }

package/atoms/Data/DataBind.js

@@ -69,8 +69,15 @@ class DataBind extends Base {
     }
     return target[this.prop];
   }
-  set(value) {
-    const { target, multiple } = this;
+  set(value, dispatch = true) {
+    const { target, multiple, relatedInstances } = this;
+    if (dispatch) {
+      for (const instance of relatedInstances) {
+        if (instance !== this && instance.value !== value) {
+          instance.set(value, false);
+        }
+      }
+    }
     if (isSelect(target)) {
       for (const option of target.options) {
         option.selected = multiple && isArray(value) ? value.includes(option.value) : option.value === value;

package/atoms/Data/DataBind.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Data/DataBind.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nconst instances = new Map<string, Set<DataBind>>();\n\nexport interface DataBindProps extends BaseProps {\n  $options: {\n    prop: string;\n    name: string;\n  };\n}\n\nexport class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {\n  static config: BaseConfig = {\n    name: 'DataBind',\n    options: {\n      prop: String,\n      name: String,\n    },\n  };\n\n  get relatedInstances() {\n    const { name } = this.$options;\n\n    if (!instances.has(name)) {\n      instances.set(name, new Set());\n    }\n\n    return instances.get(name);\n  }\n\n  get multiple() {\n    return this.$options.name.endsWith('[]');\n  }\n\n  get target() {\n    return this.$el;\n  }\n\n  get prop() {\n    if (this.$options.prop) {\n      return this.$options.prop;\n    }\n\n    const { target } = this;\n    if (target instanceof HTMLInputElement) {\n      return 'value';\n    }\n\n    return 'textContent';\n  }\n\n  get value() {\n    return this.get();\n  }\n\n  set value(value) {\n    this.set(value);\n  }\n\n  get() {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\n      if (multiple) {\n        const values = [];\n        for (const option of target.options) {\n          if (option.selected) {\n            values.push(option.value);\n          }\n        }\n\n        return values;\n      }\n\n      const option = target.options.item(target.selectedIndex);\n      return option.value;\n    }\n\n    if (isCheckbox(target)) {\n      if (multiple) {\n        const values = new Set();\n        for (const instance of this.relatedInstances) {\n          if (isCheckbox(instance.target) && instance.target.checked) {\n            values.add(instance.target.value);\n          }\n        }\n        return Array.from(values);\n      } else {\n        return target.checked;\n      }\n    }\n\n    return target[this.prop];\n  }\n\n  set(value: boolean | string | string[]) {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\n      for (const option of target.options) {\n        option.selected =\n          multiple && isArray(value) ? value.includes(option.value) : option.value === value;\n      }\n      return;\n    }\n\n    if (isInput(target)) {\n      switch (target.type) {\n        case 'radio':\n          target.checked = target.value === value;\n          return;\n        case 'checkbox':\n          target.checked =\n            multiple && isArray(value) ? value.includes(target.value) : Boolean(value);\n          return;\n      }\n    }\n\n    target[this.prop] = value;\n  }\n\n  mounted() {\n    this.relatedInstances.add(this);\n  }\n\n  destroyed() {\n    this.relatedInstances.delete(this);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,eAAe;AACxB,SAAS,SAAS,YAAY,gBAAgB;AAE9C,MAAM,YAAY,oBAAI,IAA2B;AAS1C,MAAM,iBAAkD,KAAwB;AAAA,EACrF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAEA,IAAI,mBAAmB;AACrB,UAAM,EAAE,KAAK,IAAI,KAAK;AAEtB,QAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,gBAAU,IAAI,MAAM,oBAAI,IAAI,CAAC;AAAA,IAC/B;AAEA,WAAO,UAAU,IAAI,IAAI;AAAA,EAC3B;AAAA,EAEA,IAAI,WAAW;AACb,WAAO,KAAK,SAAS,KAAK,SAAS,IAAI;AAAA,EACzC;AAAA,EAEA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,OAAO;AACT,QAAI,KAAK,SAAS,MAAM;AACtB,aAAO,KAAK,SAAS;AAAA,IACvB;AAEA,UAAM,EAAE,OAAO,IAAI;AACnB,QAAI,kBAAkB,kBAAkB;AACtC,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,QAAQ;AACV,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA,EAEA,IAAI,MAAM,OAAO;AACf,SAAK,IAAI,KAAK;AAAA,EAChB;AAAA,EAEA,MAAM;AACJ,UAAM,EAAE,QAAQ,SAAS,IAAI;AAE7B,QAAI,SAAS,MAAM,GAAG;AACpB,UAAI,UAAU;AACZ,cAAM,SAAS,CAAC;AAChB,mBAAWA,WAAU,OAAO,SAAS;AACnC,cAAIA,QAAO,UAAU;AACnB,mBAAO,KAAKA,QAAO,KAAK;AAAA,UAC1B;AAAA,QACF;AAEA,eAAO;AAAA,MACT;AAEA,YAAM,SAAS,OAAO,QAAQ,KAAK,OAAO,aAAa;AACvD,aAAO,OAAO;AAAA,IAChB;AAEA,QAAI,WAAW,MAAM,GAAG;AACtB,UAAI,UAAU;AACZ,cAAM,SAAS,oBAAI,IAAI;AACvB,mBAAW,YAAY,KAAK,kBAAkB;AAC5C,cAAI,WAAW,SAAS,MAAM,KAAK,SAAS,OAAO,SAAS;AAC1D,mBAAO,IAAI,SAAS,OAAO,KAAK;AAAA,UAClC;AAAA,QACF;AACA,eAAO,MAAM,KAAK,MAAM;AAAA,MAC1B,OAAO;AACL,eAAO,OAAO;AAAA,MAChB;AAAA,IACF;AAEA,WAAO,OAAO,KAAK,IAAI;AAAA,EACzB;AAAA,EAEA,IAAI,OAAoC;AACtC,UAAM,EAAE,QAAQ,SAAS,IAAI;AAE7B,QAAI,SAAS,MAAM,GAAG;AACpB,iBAAW,UAAU,OAAO,SAAS;AACnC,eAAO,WACL,YAAY,QAAQ,KAAK,IAAI,MAAM,SAAS,OAAO,KAAK,IAAI,OAAO,UAAU;AAAA,MACjF;AACA;AAAA,IACF;AAEA,QAAI,QAAQ,MAAM,GAAG;AACnB,cAAQ,OAAO,MAAM;AAAA,QACnB,KAAK;AACH,iBAAO,UAAU,OAAO,UAAU;AAClC;AAAA,QACF,KAAK;AACH,iBAAO,UACL,YAAY,QAAQ,KAAK,IAAI,MAAM,SAAS,OAAO,KAAK,IAAI,QAAQ,KAAK;AAC3E;AAAA,MACJ;AAAA,IACF;AAEA,WAAO,KAAK,IAAI,IAAI;AAAA,EACtB;AAAA,EAEA,UAAU;AACR,SAAK,iBAAiB,IAAI,IAAI;AAAA,EAChC;AAAA,EAEA,YAAY;AACV,SAAK,iBAAiB,OAAO,IAAI;AAAA,EACnC;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nconst instances = new Map<string, Set<DataBind>>();\n\nexport interface DataBindProps extends BaseProps {\n  $options: {\n    prop: string;\n    name: string;\n  };\n}\n\nexport class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {\n  static config: BaseConfig = {\n    name: 'DataBind',\n    options: {\n      prop: String,\n      name: String,\n    },\n  };\n\n  get relatedInstances() {\n    const { name } = this.$options;\n\n    if (!instances.has(name)) {\n      instances.set(name, new Set());\n    }\n\n    return instances.get(name);\n  }\n\n  get multiple() {\n    return this.$options.name.endsWith('[]');\n  }\n\n  get target() {\n    return this.$el;\n  }\n\n  get prop() {\n    if (this.$options.prop) {\n      return this.$options.prop;\n    }\n\n    const { target } = this;\n    if (target instanceof HTMLInputElement) {\n      return 'value';\n    }\n\n    return 'textContent';\n  }\n\n  get value() {\n    return this.get();\n  }\n\n  set value(value) {\n    this.set(value);\n  }\n\n  get() {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\n      if (multiple) {\n        const values = [];\n        // @ts-ignore\n        for (const option of target.options) {\n          if (option.selected) {\n            values.push(option.value);\n          }\n        }\n\n        return values;\n      }\n\n      const option = target.options.item(target.selectedIndex);\n      return option.value;\n    }\n\n    if (isCheckbox(target)) {\n      if (multiple) {\n        const values = new Set();\n        for (const instance of this.relatedInstances) {\n          if (isCheckbox(instance.target) && instance.target.checked) {\n            values.add(instance.target.value);\n          }\n        }\n        return Array.from(values);\n      } else {\n        return target.checked;\n      }\n    }\n\n    return target[this.prop];\n  }\n\n  set(value: boolean | string | string[], dispatch = true) {\n    const { target, multiple, relatedInstances } = this;\n\n    if (dispatch) {\n      for (const instance of relatedInstances) {\n        if (instance !== this && instance.value !== value) {\n          instance.set(value, false);\n        }\n      }\n    }\n\n    if (isSelect(target)) {\n      // @ts-ignore\n      for (const option of target.options) {\n        option.selected =\n          multiple && isArray(value) ? value.includes(option.value) : option.value === value;\n      }\n      return;\n    }\n\n    if (isInput(target)) {\n      switch (target.type) {\n        case 'radio':\n          target.checked = target.value === value;\n          return;\n        case 'checkbox':\n          target.checked =\n            multiple && isArray(value) ? value.includes(target.value) : Boolean(value);\n          return;\n      }\n    }\n\n    target[this.prop] = value;\n  }\n\n  mounted() {\n    this.relatedInstances.add(this);\n  }\n\n  destroyed() {\n    this.relatedInstances.delete(this);\n  }\n}\n"],
+  "mappings": "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",
   "names": ["option"]
 }

package/atoms/Data/DataComputed.js

@@ -19,7 +19,7 @@ class DataComputed extends DataBind {
     } catch (error) {
       console.error("Failed", error);
     }
-    super.set(newValue);
+    super.set(newValue, false);
   }
 }
 export {

package/atoms/Data/DataComputed.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Data/DataComputed.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataComputedProps extends DataBindProps {\n  $options: {\n    compute: string;\n  } & DataBindProps['$options'];\n}\n\nconst callbacks = new Map<string, Function>();\n\nexport class DataComputed<T extends BaseProps = BaseProps> extends DataBind<DataComputedProps & T> {\n  static config: BaseConfig = {\n    name: 'DataComputed',\n    options: {\n      compute: String,\n    },\n  };\n\n  get compute() {\n    const { name, compute } = this.$options;\n    return getCallback(name, `return ${compute};`);\n  }\n\n  set(value: boolean | string | string[]) {\n    let newValue = value;\n\n    try {\n      newValue = this.compute(value, this.target);\n    } catch (error) {\n      // @todo better handling of errors?\n      console.error('Failed', error);\n    }\n\n    super.set(newValue);\n  }\n}\n"],
-  "mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQ5B,MAAM,YAAY,oBAAI,IAAsB;AAErC,MAAM,qBAAsD,SAAgC;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,MAAM,QAAQ,IAAI,KAAK;AAC/B,WAAO,YAAY,MAAM,UAAU,OAAO,GAAG;AAAA,EAC/C;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI,WAAW;AAEf,QAAI;AACF,iBAAW,KAAK,QAAQ,OAAO,KAAK,MAAM;AAAA,IAC5C,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAEA,UAAM,IAAI,QAAQ;AAAA,EACpB;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataComputedProps extends DataBindProps {\n  $options: {\n    compute: string;\n  } & DataBindProps['$options'];\n}\n\nconst callbacks = new Map<string, Function>();\n\nexport class DataComputed<T extends BaseProps = BaseProps> extends DataBind<DataComputedProps & T> {\n  static config: BaseConfig = {\n    name: 'DataComputed',\n    options: {\n      compute: String,\n    },\n  };\n\n  get compute() {\n    const { name, compute } = this.$options;\n    return getCallback(name, `return ${compute};`);\n  }\n\n  set(value: boolean | string | string[]) {\n    let newValue = value;\n\n    try {\n      newValue = this.compute(value, this.target);\n    } catch (error) {\n      // @todo better handling of errors?\n      console.error('Failed', error);\n    }\n\n    super.set(newValue, false);\n  }\n}\n"],
+  "mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQ5B,MAAM,YAAY,oBAAI,IAAsB;AAErC,MAAM,qBAAsD,SAAgC;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,MAAM,QAAQ,IAAI,KAAK;AAC/B,WAAO,YAAY,MAAM,UAAU,OAAO,GAAG;AAAA,EAC/C;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI,WAAW;AAEf,QAAI;AACF,iBAAW,KAAK,QAAQ,OAAO,KAAK,MAAM;AAAA,IAC5C,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAEA,UAAM,IAAI,UAAU,KAAK;AAAA,EAC3B;AACF;",
   "names": []
 }

package/atoms/Data/DataModel.js

@@ -13,7 +13,7 @@ class DataModel extends DataBind {
       value = Array.from(set);
     }
     for (const instance of this.relatedInstances) {
-      instance.set(value);
+      instance.set(value, false);
     }
   }
   onInput() {

package/atoms/Data/DataModel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Data/DataModel.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { isCheckbox } from './utils.js';\n\nexport interface DataModelProps extends DataBindProps {}\n\nexport class DataModel<T extends BaseProps = BaseProps> extends DataBind<DataModelProps & T> {\n  static config: BaseConfig = {\n    name: 'DataModel',\n  };\n\n  dispatch() {\n    const { target, multiple } = this;\n    let value = this.get();\n\n    if (multiple && isCheckbox(target) && !target.checked) {\n      const set = new Set(value);\n      set.delete(target.value);\n      value = Array.from(set);\n    }\n\n    for (const instance of this.relatedInstances) {\n      instance.set(value);\n    }\n  }\n\n  onInput() {\n    this.dispatch();\n  }\n}\n"],
-  "mappings": "AACA,SAAS,gBAAgB;AAEzB,SAAS,kBAAkB;AAIpB,MAAM,kBAAmD,SAA6B;AAAA,EAC3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA,EAEA,WAAW;AACT,UAAM,EAAE,QAAQ,SAAS,IAAI;AAC7B,QAAI,QAAQ,KAAK,IAAI;AAErB,QAAI,YAAY,WAAW,MAAM,KAAK,CAAC,OAAO,SAAS;AACrD,YAAM,MAAM,IAAI,IAAI,KAAK;AACzB,UAAI,OAAO,OAAO,KAAK;AACvB,cAAQ,MAAM,KAAK,GAAG;AAAA,IACxB;AAEA,eAAW,YAAY,KAAK,kBAAkB;AAC5C,eAAS,IAAI,KAAK;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,UAAU;AACR,SAAK,SAAS;AAAA,EAChB;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { isCheckbox } from './utils.js';\n\nexport interface DataModelProps extends DataBindProps {}\n\nexport class DataModel<T extends BaseProps = BaseProps> extends DataBind<DataModelProps & T> {\n  static config: BaseConfig = {\n    name: 'DataModel',\n  };\n\n  dispatch() {\n    const { target, multiple } = this;\n    let value = this.get();\n\n    if (multiple && isCheckbox(target) && !target.checked) {\n      const set = new Set(value);\n      set.delete(target.value);\n      value = Array.from(set);\n    }\n\n    for (const instance of this.relatedInstances) {\n      instance.set(value, false);\n    }\n  }\n\n  onInput() {\n    this.dispatch();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,gBAAgB;AAEzB,SAAS,kBAAkB;AAIpB,MAAM,kBAAmD,SAA6B;AAAA,EAC3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA,EAEA,WAAW;AACT,UAAM,EAAE,QAAQ,SAAS,IAAI;AAC7B,QAAI,QAAQ,KAAK,IAAI;AAErB,QAAI,YAAY,WAAW,MAAM,KAAK,CAAC,OAAO,SAAS;AACrD,YAAM,MAAM,IAAI,IAAI,KAAK;AACzB,UAAI,OAAO,OAAO,KAAK;AACvB,cAAQ,MAAM,KAAK,GAAG;AAAA,IACxB;AAEA,eAAW,YAAY,KAAK,kBAAkB;AAC5C,eAAS,IAAI,OAAO,KAAK;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,UAAU;AACR,SAAK,SAAS;AAAA,EAChB;AACF;",
   "names": []
 }

package/atoms/LazyInclude/LazyInclude.d.ts

@@ -33,7 +33,9 @@ export declare class LazyInclude<T extends BaseProps = BaseProps> extends Base<T
     /**
      * Set content.
      */
-    onContent(content: string): void;
+    onContent({ args: [content] }: {
+        args: [string];
+    }): void;
     /**
      * Set error.
      */

package/atoms/LazyInclude/LazyInclude.js

@@ -31,7 +31,7 @@ class LazyInclude extends Base {
   /**
    * Set content.
    */
-  onContent(content) {
+  onContent({ args: [content] }) {
     this.$refs.loading.style.display = "none";
     this.$el.innerHTML = content;
   }

package/atoms/LazyInclude/LazyInclude.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/LazyInclude/LazyInclude.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface } from '@studiometa/js-toolkit';\n\nexport interface LazyIncludeProps extends BaseProps {\n  $refs: {\n    loading: HTMLElement;\n    error: HTMLElement;\n  };\n  $options: {\n    src: string;\n    terminateOnLoad: boolean;\n  };\n}\n\n/**\n * LazyInclude class.\n */\nexport class LazyInclude<T extends BaseProps = BaseProps>\n  extends Base<T & LazyIncludeProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LazyInclude',\n    refs: ['loading', 'error'],\n    emits: ['content', 'error', 'always'],\n    options: {\n      src: String,\n      terminateOnLoad: Boolean,\n    },\n  };\n\n  /**\n   * Load the lazy content on mount.\n   */\n  mounted() {\n    if (!this.$options.src) {\n      this.$log('The `src` option is missing. Define it with the `data-option-src` attribute');\n      return;\n    }\n\n    fetch(this.$options.src)\n      .then((response) => response.text())\n      .then((content) => {\n        this.$emit('content', content);\n      })\n      .catch((error) => {\n        this.$emit('error', error);\n      })\n      .finally(() => {\n        this.$emit('always');\n      });\n  }\n\n  /**\n   * Set content.\n   */\n  onContent(content: string) {\n    this.$refs.loading.style.display = 'none';\n    this.$el.innerHTML = content;\n  }\n\n  /**\n   * Set error.\n   */\n  onError() {\n    this.$refs.error.style.display = 'block';\n  }\n\n  /**\n   * Always.\n   */\n  onAlways() {\n    if (this.$options.terminateOnLoad) {\n      this.$terminate();\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAiBd,MAAM,oBACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,WAAW,SAAS,QAAQ;AAAA,IACpC,SAAS;AAAA,MACP,KAAK;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,KAAK;AACtB,WAAK,KAAK,6EAA6E;AACvF;AAAA,IACF;AAEA,UAAM,KAAK,SAAS,GAAG,EACpB,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC,EAClC,KAAK,CAAC,YAAY;AACjB,WAAK,MAAM,WAAW,OAAO;AAAA,IAC/B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,WAAK,MAAM,SAAS,KAAK;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACb,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,SAAiB;AACzB,SAAK,MAAM,QAAQ,MAAM,UAAU;AACnC,SAAK,IAAI,YAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,MAAM,MAAM,UAAU;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,QAAI,KAAK,SAAS,iBAAiB;AACjC,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface } from '@studiometa/js-toolkit';\n\nexport interface LazyIncludeProps extends BaseProps {\n  $refs: {\n    loading: HTMLElement;\n    error: HTMLElement;\n  };\n  $options: {\n    src: string;\n    terminateOnLoad: boolean;\n  };\n}\n\n/**\n * LazyInclude class.\n */\nexport class LazyInclude<T extends BaseProps = BaseProps>\n  extends Base<T & LazyIncludeProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LazyInclude',\n    refs: ['loading', 'error'],\n    emits: ['content', 'error', 'always'],\n    options: {\n      src: String,\n      terminateOnLoad: Boolean,\n    },\n  };\n\n  /**\n   * Load the lazy content on mount.\n   */\n  mounted() {\n    if (!this.$options.src) {\n      this.$log('The `src` option is missing. Define it with the `data-option-src` attribute');\n      return;\n    }\n\n    fetch(this.$options.src)\n      .then((response) => response.text())\n      .then((content) => {\n        this.$emit('content', content);\n      })\n      .catch((error) => {\n        this.$emit('error', error);\n      })\n      .finally(() => {\n        this.$emit('always');\n      });\n  }\n\n  /**\n   * Set content.\n   */\n  onContent({ args: [content] }: { args: [string] }) {\n    this.$refs.loading.style.display = 'none';\n    this.$el.innerHTML = content;\n  }\n\n  /**\n   * Set error.\n   */\n  onError() {\n    this.$refs.error.style.display = 'block';\n  }\n\n  /**\n   * Always.\n   */\n  onAlways() {\n    if (this.$options.terminateOnLoad) {\n      this.$terminate();\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAiBd,MAAM,oBACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,WAAW,SAAS,QAAQ;AAAA,IACpC,SAAS;AAAA,MACP,KAAK;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,KAAK;AACtB,WAAK,KAAK,6EAA6E;AACvF;AAAA,IACF;AAEA,UAAM,KAAK,SAAS,GAAG,EACpB,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC,EAClC,KAAK,CAAC,YAAY;AACjB,WAAK,MAAM,WAAW,OAAO;AAAA,IAC/B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,WAAK,MAAM,SAAS,KAAK;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACb,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,GAAuB;AACjD,SAAK,MAAM,QAAQ,MAAM,UAAU;AACnC,SAAK,IAAI,YAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,MAAM,MAAM,UAAU;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,QAAI,KAAK,SAAS,iBAAiB;AACjC,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;",
   "names": []
 }

package/molecules/Accordion/AccordionCore.d.ts

@@ -25,9 +25,13 @@ export declare class AccordionCore<T extends BaseProps = BaseProps> extends Base
     /**
      * Synchronize close on open.
      */
-    onAccordionItemOpen(index: number): void;
+    onAccordionItemOpen({ index }: {
+        index: number;
+    }): void;
     /**
      * Emit close event.
      */
-    onAccordionItemClose(index: number): void;
+    onAccordionItemClose({ index }: {
+        index: number;
+    }): void;
 }

package/molecules/Accordion/AccordionCore.js

@@ -17,7 +17,7 @@ class AccordionCore extends Base {
   /**
    * Synchronize close on open.
    */
-  onAccordionItemOpen(index) {
+  onAccordionItemOpen({ index }) {
     this.$emit("open", this.$children.AccordionItem[index], index);
     if (this.$options.autoclose) {
       this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());
@@ -26,7 +26,7 @@ class AccordionCore extends Base {
   /**
    * Emit close event.
    */
-  onAccordionItemClose(index) {
+  onAccordionItemClose({ index }) {
     this.$emit("close", this.$children.AccordionItem[index], index);
   }
 }

package/molecules/Accordion/AccordionCore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Accordion/AccordionCore.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport type { AccordionItem, AccordionItemProps } from './AccordionItem';\n\nexport interface AccordionProps extends BaseProps {\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n  $options: {\n    autoclose: boolean;\n    item: AccordionItemProps['$options'];\n  };\n  $children: {\n    AccordionItem: AccordionItem[];\n  };\n}\n\n/**\n * Accordion class.\n */\nexport class AccordionCore<T extends BaseProps = BaseProps> extends Base<T & AccordionProps> {\n  /**\n   * Accordion config.\n   */\n  static config: BaseConfig = {\n    name: 'Accordion',\n    emits: ['open', 'close'],\n    options: {\n      autoclose: Boolean,\n      item: {\n        type: Object,\n        default: (): Partial<AccordionItemProps['$options']> => ({}),\n      },\n    },\n  };\n\n  /**\n   * Synchronize close on open.\n   */\n  onAccordionItemOpen(index: number) {\n    this.$emit('open', this.$children.AccordionItem[index], index);\n    if (this.$options.autoclose) {\n      this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());\n    }\n  }\n\n  /**\n   * Emit close event.\n   */\n  onAccordionItemClose(index: number) {\n    this.$emit('close', this.$children.AccordionItem[index], index);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAqBd,MAAM,sBAAuD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,QAAQ,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,WAAW;AAAA,MACX,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAgD,CAAC;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB,OAAe;AACjC,SAAK,MAAM,QAAQ,KAAK,UAAU,cAAc,KAAK,GAAG,KAAK;AAC7D,QAAI,KAAK,SAAS,WAAW;AAC3B,WAAK,UAAU,cAAc,OAAO,CAAC,IAAI,MAAM,UAAU,CAAC,EAAE,QAAQ,CAAC,SAAS,KAAK,MAAM,CAAC;AAAA,IAC5F;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,qBAAqB,OAAe;AAClC,SAAK,MAAM,SAAS,KAAK,UAAU,cAAc,KAAK,GAAG,KAAK;AAAA,EAChE;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport type { AccordionItem, AccordionItemProps } from './AccordionItem';\n\nexport interface AccordionProps extends BaseProps {\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n  $options: {\n    autoclose: boolean;\n    item: AccordionItemProps['$options'];\n  };\n  $children: {\n    AccordionItem: AccordionItem[];\n  };\n}\n\n/**\n * Accordion class.\n */\nexport class AccordionCore<T extends BaseProps = BaseProps> extends Base<T & AccordionProps> {\n  /**\n   * Accordion config.\n   */\n  static config: BaseConfig = {\n    name: 'Accordion',\n    emits: ['open', 'close'],\n    options: {\n      autoclose: Boolean,\n      item: {\n        type: Object,\n        default: (): Partial<AccordionItemProps['$options']> => ({}),\n      },\n    },\n  };\n\n  /**\n   * Synchronize close on open.\n   */\n  onAccordionItemOpen({ index }: { index: number }) {\n    this.$emit('open', this.$children.AccordionItem[index], index);\n    if (this.$options.autoclose) {\n      this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());\n    }\n  }\n\n  /**\n   * Emit close event.\n   */\n  onAccordionItemClose({ index }: { index: number }) {\n    this.$emit('close', this.$children.AccordionItem[index], index);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAqBd,MAAM,sBAAuD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,QAAQ,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,WAAW;AAAA,MACX,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAgD,CAAC;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB,EAAE,MAAM,GAAsB;AAChD,SAAK,MAAM,QAAQ,KAAK,UAAU,cAAc,KAAK,GAAG,KAAK;AAC7D,QAAI,KAAK,SAAS,WAAW;AAC3B,WAAK,UAAU,cAAc,OAAO,CAAC,IAAI,MAAM,UAAU,CAAC,EAAE,QAAQ,CAAC,SAAS,KAAK,MAAM,CAAC;AAAA,IAC5F;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,qBAAqB,EAAE,MAAM,GAAsB;AACjD,SAAK,MAAM,SAAS,KAAK,UAAU,cAAc,KAAK,GAAG,KAAK;AAAA,EAChE;AACF;",
   "names": []
 }

package/molecules/AnchorNav/AnchorNav.d.ts

@@ -16,9 +16,13 @@ export declare class AnchorNav<T extends BaseProps = BaseProps> extends Base<T &
     /**
      * Listen to the AnchorNavTarget that is mounted
      */
-    onAnchorNavTargetMounted(index: any): void;
+    onAnchorNavTargetMounted({ target }: {
+        target: AnchorNavTarget;
+    }): void;
     /**
      * Listen to the AnchorNavTarget that is destroyed
      */
-    onAnchorNavTargetDestroyed(index: any): void;
+    onAnchorNavTargetDestroyed({ target }: {
+        target: AnchorNavTarget;
+    }): void;
 }

package/molecules/AnchorNav/AnchorNav.js

@@ -15,8 +15,8 @@ class AnchorNav extends Base {
   /**
    * Listen to the AnchorNavTarget that is mounted
    */
-  onAnchorNavTargetMounted(index) {
-    const { id } = this.$children.AnchorNavTarget[index].$el;
+  onAnchorNavTargetMounted({ target }) {
+    const { id } = target.$el;
     this.$children.AnchorNavLink.forEach((anchorNavLink) => {
       if (id === anchorNavLink.targetId) {
         anchorNavLink.enter();
@@ -26,8 +26,8 @@ class AnchorNav extends Base {
   /**
    * Listen to the AnchorNavTarget that is destroyed
    */
-  onAnchorNavTargetDestroyed(index) {
-    const { id } = this.$children.AnchorNavTarget[index].$el;
+  onAnchorNavTargetDestroyed({ target }) {
+    const { id } = target.$el;
     this.$children.AnchorNavLink.forEach((anchorNavLink) => {
       if (id === anchorNavLink.targetId) {
         anchorNavLink.leave();

package/molecules/AnchorNav/AnchorNav.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/AnchorNav/AnchorNav.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorNavLink } from './AnchorNavLink.js';\nimport { AnchorNavTarget } from './AnchorNavTarget.js';\n\nexport interface AnchorNavProps extends BaseProps {\n  $children: {\n    AnchorNavLink: AnchorNavLink[];\n    AnchorNavTarget: AnchorNavTarget[];\n  };\n}\n\nexport class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {\n  /**\n   * Config\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNav',\n    components: {\n      AnchorNavLink,\n      AnchorNavTarget,\n    },\n  };\n\n  /**\n   * Listen to the AnchorNavTarget that is mounted\n   */\n  onAnchorNavTargetMounted(index) {\n    const { id } = this.$children.AnchorNavTarget[index].$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.enter();\n      }\n    });\n  }\n\n  /**\n   * Listen to the AnchorNavTarget that is destroyed\n   */\n  onAnchorNavTargetDestroyed(index) {\n    const { id } = this.$children.AnchorNavTarget[index].$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.leave();\n      }\n    });\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AASzB,MAAM,kBAAmD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,yBAAyB,OAAO;AAC9B,UAAM,EAAE,GAAG,IAAI,KAAK,UAAU,gBAAgB,KAAK,EAAE;AACrD,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,2BAA2B,OAAO;AAChC,UAAM,EAAE,GAAG,IAAI,KAAK,UAAU,gBAAgB,KAAK,EAAE;AACrD,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorNavLink } from './AnchorNavLink.js';\nimport { AnchorNavTarget } from './AnchorNavTarget.js';\n\nexport interface AnchorNavProps extends BaseProps {\n  $children: {\n    AnchorNavLink: AnchorNavLink[];\n    AnchorNavTarget: AnchorNavTarget[];\n  };\n}\n\nexport class AnchorNav<T extends BaseProps = BaseProps> extends Base<T & AnchorNavProps> {\n  /**\n   * Config\n   */\n  static config: BaseConfig = {\n    name: 'AnchorNav',\n    components: {\n      AnchorNavLink,\n      AnchorNavTarget,\n    },\n  };\n\n  /**\n   * Listen to the AnchorNavTarget that is mounted\n   */\n  onAnchorNavTargetMounted({ target }: { target: AnchorNavTarget }) {\n    const { id } = target.$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.enter();\n      }\n    });\n  }\n\n  /**\n   * Listen to the AnchorNavTarget that is destroyed\n   */\n  onAnchorNavTargetDestroyed({ target }: { target: AnchorNavTarget }) {\n    const { id } = target.$el;\n    this.$children.AnchorNavLink.forEach((anchorNavLink) => {\n      if (id === anchorNavLink.targetId) {\n        anchorNavLink.leave();\n      }\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AASzB,MAAM,kBAAmD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,yBAAyB,EAAE,OAAO,GAAgC;AAChE,UAAM,EAAE,GAAG,IAAI,OAAO;AACtB,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,2BAA2B,EAAE,OAAO,GAAgC;AAClE,UAAM,EAAE,GAAG,IAAI,OAAO;AACtB,SAAK,UAAU,cAAc,QAAQ,CAAC,kBAAkB;AACtD,UAAI,OAAO,cAAc,UAAU;AACjC,sBAAc,MAAM;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/molecules/Menu/Menu.d.ts

@@ -40,7 +40,7 @@ export declare class Menu<T extends BaseProps = BaseProps> extends Base<T & Menu
      * Set attributes on mounted, destroy the component if it is missing required
      * child components.
      */
-    mounted(): void;
+    mounted(): Promise<this>;
     /**
      * Keyboard management.
      */
@@ -48,11 +48,16 @@ export declare class Menu<T extends BaseProps = BaseProps> extends Base<T & Menu
     /**
      * Toggle menu items on button click.
      */
-    onMenuBtnClick(index: number, event: MouseEvent): void;
+    onMenuBtnClick({ event, target }: {
+        event: MouseEvent;
+        target: MenuBtn;
+    }): void;
     /**
      * Open menu items on button mouse enter.
      */
-    onMenuBtnMouseenter(index: number): void;
+    onMenuBtnMouseenter({ target }: {
+        target: MenuBtn;
+    }): void;
     /**
      * Close menu items on button mouse leave.
      */
@@ -64,7 +69,9 @@ export declare class Menu<T extends BaseProps = BaseProps> extends Base<T & Menu
     /**
      * Close other non-parent menu items on menu items open.
      */
-    onMenuListItemsOpen(index: number): void;
+    onMenuListItemsOpen({ target }: {
+        target: MenuList;
+    }): void;
     /**
      * Close the menu.
      */

package/molecules/Menu/Menu.js

@@ -51,8 +51,7 @@ class Menu extends Base {
    */
   mounted() {
     if (!this.menuBtn || !this.menuList) {
-      this.$destroy();
-      return;
+      return this.$destroy();
     }
     this.menuBtn.$el.setAttribute("aria-controls", this.$id);
     this.menuList.$el.setAttribute("id", this.$id);
@@ -79,8 +78,8 @@ class Menu extends Base {
   /**
    * Toggle menu items on button click.
    */
-  onMenuBtnClick(index, event) {
-    if (isDirectChild(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
+  onMenuBtnClick({ event, target }) {
+    if (isDirectChild(this, "Menu", "MenuBtn", target) && this.shouldReactOnClick) {
       event.preventDefault();
       this.toggle();
     }
@@ -88,8 +87,8 @@ class Menu extends Base {
   /**
    * Open menu items on button mouse enter.
    */
-  onMenuBtnMouseenter(index) {
-    if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
+  onMenuBtnMouseenter({ target }) {
+    if (target === this.menuBtn && !this.shouldReactOnClick) {
       this.open();
     }
   }
@@ -122,10 +121,9 @@ class Menu extends Base {
   /**
    * Close other non-parent menu items on menu items open.
    */
-  onMenuListItemsOpen(index) {
-    const targetMenu = this.$children.MenuList[index];
+  onMenuListItemsOpen({ target }) {
     this.$children.MenuList.forEach((menuItem) => {
-      if (!menuItem.$el.contains(targetMenu.$el)) {
+      if (!menuItem.$el.contains(target.$el)) {
         menuItem.close();
       }
     });

package/molecules/Menu/Menu.js.map

@@ -1,7 +1,7 @@
 {
   "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": "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",
+  "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      return this.$destroy();\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({ event, target }: { event: MouseEvent; target: MenuBtn }) {\n    if (isDirectChild(this, 'Menu', 'MenuBtn', target) && this.shouldReactOnClick) {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Open menu items on button mouse enter.\n   */\n  onMenuBtnMouseenter({ target }: { target: MenuBtn }) {\n    if (target === 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({ target }: { target: MenuList }) {\n    this.$children.MenuList.forEach((menuItem) => {\n      if (!menuItem.$el.contains(target.$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": "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",
   "names": []
 }

package/molecules/Menu/MenuBtn.d.ts

@@ -18,17 +18,23 @@ export declare class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onClick(event: any): void;
+    onClick({ event }: {
+        event: MouseEvent;
+    }): void;
     /**
      * Dispatch the mouseenter event.
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMouseenter(event: any): void;
+    onMouseenter({ event }: {
+        event: MouseEvent;
+    }): void;
     /**
      * Dispatch the mouseleave event.
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMouseleave(event: any): void;
+    onMouseleave({ event }: {
+        event: MouseEvent;
+    }): void;
 }

package/molecules/Menu/MenuBtn.js

@@ -16,7 +16,7 @@ class MenuBtn extends Base {
    * @param   {MouseEvent} event
    * @returns {void}
    */
-  onClick(event) {
+  onClick({ event }) {
     event.stopPropagation();
   }
   /**
@@ -24,7 +24,7 @@ class MenuBtn extends Base {
    * @param   {MouseEvent} event
    * @returns {void}
    */
-  onMouseenter(event) {
+  onMouseenter({ event }) {
     this.isHover = true;
     event.stopPropagation();
   }
@@ -33,7 +33,7 @@ class MenuBtn extends Base {
    * @param   {MouseEvent} event
    * @returns {void}
    */
-  onMouseleave(event) {
+  onMouseleave({ event }) {
     this.isHover = false;
     event.stopPropagation();
   }

package/molecules/Menu/MenuBtn.js.map

@@ -1,7 +1,7 @@
 {
   "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   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onClick(event) {\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseenter event.\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;AAAA;AAAA;AAAA,EAIpE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,QAAQ,OAAO;AACb,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,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;",
+  "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   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseenter event.\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onMouseenter({ event }: { event: MouseEvent }) {\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 }: { event: MouseEvent }) {\n    this.isHover = false;\n    event.stopPropagation();\n  }\n}\n"],
+  "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,EAOV,QAAQ,EAAE,MAAM,GAA0B;AACxC,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,EAAE,MAAM,GAA0B;AAC7C,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,EAAE,MAAM,GAA0B;AAC7C,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;",
   "names": []
 }

package/molecules/Slider/Slider.d.ts

@@ -132,11 +132,15 @@ export declare class Slider<T extends BaseProps = BaseProps> extends Base<T & Sl
     /**
      * Listen to the Draggable `drag` event.
      */
-    onSliderDragDrag(props: DragServiceProps): void;
+    onSliderDragDrag({ args: [props] }: {
+        args: [DragServiceProps];
+    }): void;
     /**
      * Listen to the Draggable `drop` event and find the new active slide.
      */
-    onSliderDragDrop(props: DragServiceProps): void;
+    onSliderDragDrop({ args: [props] }: {
+        args: [DragServiceProps];
+    }): void;
     /**
      * Enable focus.
      */

package/molecules/Slider/Slider.js

@@ -250,7 +250,7 @@ class Slider extends Base {
   /**
    * Listen to the Draggable `drag` event.
    */
-  onSliderDragDrag(props) {
+  onSliderDragDrag({ args: [props] }) {
     if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
       return;
     }
@@ -262,7 +262,7 @@ class Slider extends Base {
   /**
    * Listen to the Draggable `drop` event and find the new active slide.
    */
-  onSliderDragDrop(props) {
+  onSliderDragDrop({ args: [props] }) {
     if (!this.__isDragging) {
       return;
     }