@studiometa/ui 0.2.13 → 0.2.15

package/molecules/Accordion/AccordionItem.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Accordion/AccordionItem.ts"],
+  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport { Base, BaseConfig } from '@studiometa/js-toolkit';\nimport type { BaseProps } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\nimport { AccordionCore as Accordion } from './AccordionCore.js';\n\ntype AccordionItemStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n\nexport interface AccordionItemProps extends BaseProps {\n  $refs: {\n    btn: HTMLElement;\n    content: HTMLElement;\n    container: HTMLElement;\n  };\n  $options: {\n    isOpen: boolean;\n    styles: Partial<Record<keyof AccordionItemProps['$refs'], AccordionItemStates>>;\n  };\n}\n\n/**\n * AccordionItem class.\n */\nexport class AccordionItem<T extends BaseProps = BaseProps> extends Base<\n  T & AccordionItemProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AccordionItem',\n    refs: ['btn', 'content', 'container'],\n    emits: ['open', 'close'],\n    options: {\n      isOpen: Boolean,\n      styles: {\n        type: Object,\n        default: (): AccordionItemProps['$options']['styles'] => ({\n          container: {\n            open: '',\n            active: '',\n            closed: '',\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  /**\n   * Add aria-attributes on mounted.\n   */\n  mounted() {\n    if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {\n      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {\n        if (key in this.$options) {\n          // @ts-ignore\n          const type = AccordionItem.config.options[key].type ?? AccordionItem.config.options[key];\n          if (type === Array || type === Object) {\n            // @ts-ignore\n            this.$options[key] = deepmerge(this.$options[key], /** @type {any} */ value);\n          } else {\n            // @ts-ignore\n            this.$options[key] = value;\n          }\n        }\n      });\n    }\n\n    this.$refs.btn.setAttribute('id', this.$id);\n    this.$refs.btn.setAttribute('aria-controls', this.contentId);\n    this.$refs.content.setAttribute('aria-labelledby', this.$id);\n    this.$refs.content.setAttribute('id', this.contentId);\n\n    const { isOpen } = this.$options;\n    this.updateAttributes(isOpen);\n\n    // Update refs styles on mount\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { container, ...otherStyles } = this.$options.styles;\n\n    const { $refs } = this;\n    Object.entries(otherStyles)\n      .filter(([refName]) => $refs[refName])\n      .forEach(([refName, { open, closed } = { open: '', closed: '' }]) => {\n        transition($refs[refName] as HTMLElement, { to: isOpen ? open : closed }, 'keep');\n      });\n  }\n\n  /**\n   * Remove styles on destroy.\n   */\n  destroyed() {\n    this.$refs.container.style.visibility = '';\n    this.$refs.container.style.height = '';\n  }\n\n  /**\n   * Handler for the click event on the `btn` ref.\n   */\n  onBtnClick() {\n    if (this.$options.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Get the content ID.\n   */\n  get contentId():string {\n    return `content-${this.$id}`;\n  }\n\n  /**\n   * Update the refs' attributes according to the given type.\n   */\n  updateAttributes(isOpen:boolean) {\n    this.$refs.container.style.visibility = isOpen ? '' : 'invisible';\n    this.$refs.container.style.height = isOpen ? '' : '0';\n    this.$refs.content.setAttribute('aria-hidden', isOpen ? 'false' : 'true');\n    this.$refs.btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n  }\n\n  /**\n   * Open an item.\n   */\n  async open() {\n    if (this.$options.isOpen) {\n      return;\n    }\n\n    this.$log('open');\n    this.$emit('open');\n\n    this.$options.isOpen = true;\n    this.updateAttributes(this.$options.isOpen);\n\n    this.$refs.container.style.visibility = '';\n    const { container, ...otherStyles } = this.$options.styles;\n\n    const { $refs } = this;\n\n    await Promise.all([\n      transition($refs.container, {\n        from: { height: '0' },\n        active: container.active,\n        to: { height: `${$refs.content.offsetHeight}px` },\n      }).then(() => {\n        // Remove style only if the item has not been closed before the end\n        if (this.$options.isOpen) {\n          $refs.content.style.position = '';\n        }\n\n        return Promise.resolve();\n      }),\n      ...Object.entries(otherStyles)\n        .filter(([refName]) => $refs[refName])\n        .map(([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            $refs[refName] as HTMLElement,\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n        ),\n    ]);\n  }\n\n  /**\n   * Close an item.\n   */\n  async close() {\n    if (!this.$options.isOpen) {\n      return;\n    }\n\n    this.$log('close');\n    this.$emit('close');\n\n    this.$options.isOpen = false;\n\n    const height = this.$refs.container.offsetHeight;\n    this.$refs.content.style.position = 'absolute';\n    const { container, ...otherStyles } = this.$options.styles;\n\n    /** @type {AccordionItemRefs} */\n    const refs = this.$refs;\n\n    await Promise.all([\n      transition(refs.container, {\n        from: { height: `${height}px` },\n        active: container.active,\n        to: { height: '0' },\n      }).then(() => {\n        // Add end styles only if the item has not been re-opened before the end\n        if (!this.$options.isOpen) {\n          refs.container.style.height = '0';\n          refs.container.style.visibility = 'invisible';\n          this.updateAttributes(this.$options.isOpen);\n        }\n        return Promise.resolve();\n      }),\n      ...Object.entries(otherStyles)\n        .filter(([refName]) => refs[refName])\n        .map(([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName] as HTMLElement,\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n        ),\n    ]);\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["Accordion", "deepmerge"]
+}

package/molecules/Accordion/AccordionItem.d.ts

@@ -1,122 +1,52 @@
-/**
- * @typedef {import('@studiometa/js-toolkit/Base').BaseOptions} BaseOptions
- * @typedef {import('./AccordionCore.js').AccordionInterface} AccordionInterface
- */
-/**
- * @typedef {Object} AccordionItemRefs
- * @property {HTMLElement} btn
- * @property {HTMLElement} content
- * @property {HTMLElement} container
- */
-/**
- * @typedef {Object} StylesOption
- * @property {String|Partial<CSSStyleDeclaration>} open
- * @property {String|Partial<CSSStyleDeclaration>} active
- * @property {String|Partial<CSSStyleDeclaration>} closed
- */
-/**
- * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} AccordionItemStates
- * @typedef {Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>} AccordionItemStylesOption
- */
-/**
- * @typedef {Object} AccordionItemOptions
- * @property {Boolean} isOpen
- * @property {AccordionItemStylesOption} styles
- */
-/**
- * @typedef {Object} AccordionItemPrivateInterface
- * @property {AccordionItemOptions} $options
- * @property {AccordionItemRefs} $refs
- * @property {Accordion & AccordionInterface} $parent
- */
-/**
- * @typedef {AccordionItem & AccordionItemPrivateInterface} AccordionItemInterface
- */
+import { Base, BaseConfig } from '@studiometa/js-toolkit';
+import type { BaseProps } from '@studiometa/js-toolkit';
+declare type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
+export interface AccordionItemProps extends BaseProps {
+    $refs: {
+        btn: HTMLElement;
+        content: HTMLElement;
+        container: HTMLElement;
+    };
+    $options: {
+        isOpen: boolean;
+        styles: Partial<Record<keyof AccordionItemProps['$refs'], AccordionItemStates>>;
+    };
+}
 /**
  * AccordionItem class.
  */
-export default class AccordionItem extends Base {
+export declare class AccordionItem<T extends BaseProps = BaseProps> extends Base<T & AccordionItemProps> {
     /**
-     * AccordionItem config
-     * @return {Object}
+     * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        emits: string[];
-        options: {
-            isOpen: BooleanConstructor;
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {AccordionItemStylesOption}
-                 */
-                default: () => AccordionItemStylesOption;
-                merge: boolean;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
      * Add aria-attributes on mounted.
-     * @this {AccordionItemInterface}
      */
-    mounted(this: AccordionItemInterface): void;
+    mounted(): void;
     /**
      * Remove styles on destroy.
-     * @this {AccordionItemInterface}
      */
-    destroyed(this: AccordionItemInterface): void;
+    destroyed(): void;
     /**
      * Handler for the click event on the `btn` ref.
-     * @this {AccordionItemInterface}
      */
-    onBtnClick(this: AccordionItemInterface): void;
+    onBtnClick(): void;
     /**
      * Get the content ID.
-     * @return {String}
      */
     get contentId(): string;
     /**
      * Update the refs' attributes according to the given type.
-     *
-     * @this {AccordionItemInterface}
-     * @param  {Boolean} isOpen The state of the item.
      */
-    updateAttributes(this: AccordionItemInterface, isOpen: boolean): void;
+    updateAttributes(isOpen: boolean): void;
     /**
      * Open an item.
-     * @this {AccordionItemInterface}
      */
-    open(this: AccordionItemInterface): Promise<void>;
+    open(): Promise<void>;
     /**
      * Close an item.
-     * @this {AccordionItemInterface}
      */
-    close(this: AccordionItemInterface): Promise<void>;
+    close(): Promise<void>;
 }
-export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
-export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;
-export type AccordionItemRefs = {
-    btn: HTMLElement;
-    content: HTMLElement;
-    container: HTMLElement;
-};
-export type StylesOption = {
-    open: string | Partial<CSSStyleDeclaration>;
-    active: string | Partial<CSSStyleDeclaration>;
-    closed: string | Partial<CSSStyleDeclaration>;
-};
-export type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
-export type AccordionItemStylesOption = Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>;
-export type AccordionItemOptions = {
-    isOpen: boolean;
-    styles: AccordionItemStylesOption;
-};
-export type AccordionItemPrivateInterface = {
-    $options: AccordionItemOptions;
-    $refs: AccordionItemRefs;
-    $parent: Accordion & AccordionInterface;
-};
-export type AccordionItemInterface = AccordionItem & AccordionItemPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";
-import Accordion from "./AccordionCore.js";
+export {};

package/molecules/Accordion/AccordionItem.js

@@ -1 +1,146 @@
-import a from"deepmerge";import{Base as l}from"@studiometa/js-toolkit";import{transition as r}from"@studiometa/js-toolkit/utils";import f from"./AccordionCore.js";class c extends l{static config={name:"AccordionItem",refs:["btn","content","container"],emits:["open","close"],options:{isOpen:Boolean,styles:{type:Object,default:()=>({container:{open:"",active:"",closed:""}}),merge:!0}}};mounted(){this.$parent&&this.$parent instanceof f&&this.$parent.$options.item&&Object.entries(this.$parent.$options.item).forEach(([t,o])=>{if(t in this.$options){const n=c.config.options[t].type||c.config.options[t];n===Array||n===Object?this.$options[t]=a(this.$options[t],o):this.$options[t]=o}}),this.$refs.btn.setAttribute("id",this.$id),this.$refs.btn.setAttribute("aria-controls",this.contentId),this.$refs.content.setAttribute("aria-labelledby",this.$id),this.$refs.content.setAttribute("id",this.contentId);const{isOpen:i}=this.$options;this.updateAttributes(i);const{container:h,...s}=this.$options.styles,e=this.$refs;Object.entries(s).filter(([t])=>e[t]).forEach(([t,{open:o,closed:n}={open:"",closed:""}])=>{r(e[t],{to:i?o:n},"keep")})}destroyed(){this.$refs.container.style.visibility="",this.$refs.container.style.height=""}onBtnClick(){this.$options.isOpen?this.close():this.open()}get contentId(){return`content-${this.$id}`}updateAttributes(i){this.$refs.container.style.visibility=i?"":"invisible",this.$refs.container.style.height=i?"":"0",this.$refs.content.setAttribute("aria-hidden",i?"false":"true"),this.$refs.btn.setAttribute("aria-expanded",i?"true":"false")}async open(){if(this.$options.isOpen)return;this.$log("open"),this.$emit("open"),this.$options.isOpen=!0,this.updateAttributes(this.$options.isOpen),this.$refs.container.style.visibility="";const{container:i,...h}=this.$options.styles,s=this.$refs;await Promise.all([r(s.container,{from:{height:"0"},active:i.active,to:{height:`${s.content.offsetHeight}px`}}).then(()=>(this.$options.isOpen&&(s.content.style.position=""),Promise.resolve())),...Object.entries(h).filter(([e])=>s[e]).map(([e,{open:t,active:o,closed:n}={open:"",active:"",closed:""}])=>r(s[e],{from:n,active:o,to:t},"keep"))])}async close(){if(!this.$options.isOpen)return;this.$log("close"),this.$emit("close"),this.$options.isOpen=!1;const i=this.$refs.container.offsetHeight;this.$refs.content.style.position="absolute";const{container:h,...s}=this.$options.styles,e=this.$refs;await Promise.all([r(e.container,{from:{height:`${i}px`},active:h.active,to:{height:"0"}}).then(()=>(this.$options.isOpen||(e.container.style.height="0",e.container.style.visibility="invisible",this.updateAttributes(this.$options.isOpen)),Promise.resolve())),...Object.entries(s).filter(([t])=>e[t]).map(([t,{open:o,active:n,closed:p}={open:"",active:"",closed:""}])=>r(e[t],{from:o,active:n,to:p},"keep"))])}}export{c as default};
+import deepmerge from "deepmerge";
+import { Base } from "@studiometa/js-toolkit";
+import { transition } from "@studiometa/js-toolkit/utils";
+import { AccordionCore as Accordion } from "./AccordionCore.js";
+class AccordionItem extends Base {
+  static config = {
+    name: "AccordionItem",
+    refs: ["btn", "content", "container"],
+    emits: ["open", "close"],
+    options: {
+      isOpen: Boolean,
+      styles: {
+        type: Object,
+        default: () => ({
+          container: {
+            open: "",
+            active: "",
+            closed: ""
+          }
+        }),
+        merge: true
+      }
+    }
+  };
+  mounted() {
+    if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {
+      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
+        if (key in this.$options) {
+          const type = AccordionItem.config.options[key].type ?? AccordionItem.config.options[key];
+          if (type === Array || type === Object) {
+            this.$options[key] = deepmerge(this.$options[key], value);
+          } else {
+            this.$options[key] = value;
+          }
+        }
+      });
+    }
+    this.$refs.btn.setAttribute("id", this.$id);
+    this.$refs.btn.setAttribute("aria-controls", this.contentId);
+    this.$refs.content.setAttribute("aria-labelledby", this.$id);
+    this.$refs.content.setAttribute("id", this.contentId);
+    const { isOpen } = this.$options;
+    this.updateAttributes(isOpen);
+    const { container, ...otherStyles } = this.$options.styles;
+    const { $refs } = this;
+    Object.entries(otherStyles).filter(([refName]) => $refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
+      transition($refs[refName], { to: isOpen ? open : closed }, "keep");
+    });
+  }
+  destroyed() {
+    this.$refs.container.style.visibility = "";
+    this.$refs.container.style.height = "";
+  }
+  onBtnClick() {
+    if (this.$options.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  get contentId() {
+    return `content-${this.$id}`;
+  }
+  updateAttributes(isOpen) {
+    this.$refs.container.style.visibility = isOpen ? "" : "invisible";
+    this.$refs.container.style.height = isOpen ? "" : "0";
+    this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
+    this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  }
+  async open() {
+    if (this.$options.isOpen) {
+      return;
+    }
+    this.$log("open");
+    this.$emit("open");
+    this.$options.isOpen = true;
+    this.updateAttributes(this.$options.isOpen);
+    this.$refs.container.style.visibility = "";
+    const { container, ...otherStyles } = this.$options.styles;
+    const { $refs } = this;
+    await Promise.all([
+      transition($refs.container, {
+        from: { height: "0" },
+        active: container.active,
+        to: { height: `${$refs.content.offsetHeight}px` }
+      }).then(() => {
+        if (this.$options.isOpen) {
+          $refs.content.style.position = "";
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => $refs[refName]).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(
+          $refs[refName],
+          {
+            from: closed,
+            active,
+            to: open
+          },
+          "keep"
+        )
+      )
+    ]);
+  }
+  async close() {
+    if (!this.$options.isOpen) {
+      return;
+    }
+    this.$log("close");
+    this.$emit("close");
+    this.$options.isOpen = false;
+    const height = this.$refs.container.offsetHeight;
+    this.$refs.content.style.position = "absolute";
+    const { container, ...otherStyles } = this.$options.styles;
+    const refs = this.$refs;
+    await Promise.all([
+      transition(refs.container, {
+        from: { height: `${height}px` },
+        active: container.active,
+        to: { height: "0" }
+      }).then(() => {
+        if (!this.$options.isOpen) {
+          refs.container.style.height = "0";
+          refs.container.style.visibility = "invisible";
+          this.updateAttributes(this.$options.isOpen);
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(
+          refs[refName],
+          {
+            from: open,
+            active,
+            to: closed
+          },
+          "keep"
+        )
+      )
+    ]);
+  }
+}
+export {
+  AccordionItem
+};
+//# sourceMappingURL=AccordionItem.js.map

package/molecules/Accordion/AccordionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Accordion/AccordionItem.ts"],
+  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport { Base, BaseConfig } from '@studiometa/js-toolkit';\nimport type { BaseProps } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\nimport { AccordionCore as Accordion } from './AccordionCore.js';\n\ntype AccordionItemStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n\nexport interface AccordionItemProps extends BaseProps {\n  $refs: {\n    btn: HTMLElement;\n    content: HTMLElement;\n    container: HTMLElement;\n  };\n  $options: {\n    isOpen: boolean;\n    styles: Partial<Record<keyof AccordionItemProps['$refs'], AccordionItemStates>>;\n  };\n}\n\n/**\n * AccordionItem class.\n */\nexport class AccordionItem<T extends BaseProps = BaseProps> extends Base<\n  T & AccordionItemProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AccordionItem',\n    refs: ['btn', 'content', 'container'],\n    emits: ['open', 'close'],\n    options: {\n      isOpen: Boolean,\n      styles: {\n        type: Object,\n        default: (): AccordionItemProps['$options']['styles'] => ({\n          container: {\n            open: '',\n            active: '',\n            closed: '',\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  /**\n   * Add aria-attributes on mounted.\n   */\n  mounted() {\n    if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {\n      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {\n        if (key in this.$options) {\n          // @ts-ignore\n          const type = AccordionItem.config.options[key].type ?? AccordionItem.config.options[key];\n          if (type === Array || type === Object) {\n            // @ts-ignore\n            this.$options[key] = deepmerge(this.$options[key], /** @type {any} */ value);\n          } else {\n            // @ts-ignore\n            this.$options[key] = value;\n          }\n        }\n      });\n    }\n\n    this.$refs.btn.setAttribute('id', this.$id);\n    this.$refs.btn.setAttribute('aria-controls', this.contentId);\n    this.$refs.content.setAttribute('aria-labelledby', this.$id);\n    this.$refs.content.setAttribute('id', this.contentId);\n\n    const { isOpen } = this.$options;\n    this.updateAttributes(isOpen);\n\n    // Update refs styles on mount\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { container, ...otherStyles } = this.$options.styles;\n\n    const { $refs } = this;\n    Object.entries(otherStyles)\n      .filter(([refName]) => $refs[refName])\n      .forEach(([refName, { open, closed } = { open: '', closed: '' }]) => {\n        transition($refs[refName] as HTMLElement, { to: isOpen ? open : closed }, 'keep');\n      });\n  }\n\n  /**\n   * Remove styles on destroy.\n   */\n  destroyed() {\n    this.$refs.container.style.visibility = '';\n    this.$refs.container.style.height = '';\n  }\n\n  /**\n   * Handler for the click event on the `btn` ref.\n   */\n  onBtnClick() {\n    if (this.$options.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Get the content ID.\n   */\n  get contentId():string {\n    return `content-${this.$id}`;\n  }\n\n  /**\n   * Update the refs' attributes according to the given type.\n   */\n  updateAttributes(isOpen:boolean) {\n    this.$refs.container.style.visibility = isOpen ? '' : 'invisible';\n    this.$refs.container.style.height = isOpen ? '' : '0';\n    this.$refs.content.setAttribute('aria-hidden', isOpen ? 'false' : 'true');\n    this.$refs.btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n  }\n\n  /**\n   * Open an item.\n   */\n  async open() {\n    if (this.$options.isOpen) {\n      return;\n    }\n\n    this.$log('open');\n    this.$emit('open');\n\n    this.$options.isOpen = true;\n    this.updateAttributes(this.$options.isOpen);\n\n    this.$refs.container.style.visibility = '';\n    const { container, ...otherStyles } = this.$options.styles;\n\n    const { $refs } = this;\n\n    await Promise.all([\n      transition($refs.container, {\n        from: { height: '0' },\n        active: container.active,\n        to: { height: `${$refs.content.offsetHeight}px` },\n      }).then(() => {\n        // Remove style only if the item has not been closed before the end\n        if (this.$options.isOpen) {\n          $refs.content.style.position = '';\n        }\n\n        return Promise.resolve();\n      }),\n      ...Object.entries(otherStyles)\n        .filter(([refName]) => $refs[refName])\n        .map(([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            $refs[refName] as HTMLElement,\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n        ),\n    ]);\n  }\n\n  /**\n   * Close an item.\n   */\n  async close() {\n    if (!this.$options.isOpen) {\n      return;\n    }\n\n    this.$log('close');\n    this.$emit('close');\n\n    this.$options.isOpen = false;\n\n    const height = this.$refs.container.offsetHeight;\n    this.$refs.content.style.position = 'absolute';\n    const { container, ...otherStyles } = this.$options.styles;\n\n    /** @type {AccordionItemRefs} */\n    const refs = this.$refs;\n\n    await Promise.all([\n      transition(refs.container, {\n        from: { height: `${height}px` },\n        active: container.active,\n        to: { height: '0' },\n      }).then(() => {\n        // Add end styles only if the item has not been re-opened before the end\n        if (!this.$options.isOpen) {\n          refs.container.style.height = '0';\n          refs.container.style.visibility = 'invisible';\n          this.updateAttributes(this.$options.isOpen);\n        }\n        return Promise.resolve();\n      }),\n      ...Object.entries(otherStyles)\n        .filter(([refName]) => refs[refName])\n        .map(([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName] as HTMLElement,\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n        ),\n    ]);\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/molecules/Accordion/index.cjs

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

package/molecules/Accordion/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Accordion/index.ts"],
+  "sourcesContent": ["export * from './Accordion.js';\nexport * from './AccordionItem.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,4BAAd;AACA,8BAAc,gCADd;",
+  "names": []
+}

package/molecules/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Accordion.js';
+export * from './AccordionItem.js';

package/molecules/Accordion/index.js

@@ -0,0 +1,3 @@
+export * from "./Accordion.js";
+export * from "./AccordionItem.js";
+//# sourceMappingURL=index.js.map

package/molecules/Accordion/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Accordion/index.ts"],
+  "sourcesContent": ["export * from './Accordion.js';\nexport * from './AccordionItem.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/molecules/Menu/Menu.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,23 +15,22 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Menu/Menu.js
+// packages/ui/molecules/Menu/Menu.ts
 var Menu_exports = {};
 __export(Menu_exports, {
-  default: () => Menu
+  Menu: () => Menu
 });
 module.exports = __toCommonJS(Menu_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_MenuBtn = __toESM(require("./MenuBtn.cjs"), 1);
-var import_MenuList = __toESM(require("./MenuList.cjs"), 1);
+var import_MenuBtn = require("./MenuBtn.cjs");
+var import_MenuList = require("./MenuList.cjs");
 var _Menu = class extends import_js_toolkit.Base {
   get menuList() {
     return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuList")[0];
@@ -123,10 +120,9 @@ var _Menu = class extends import_js_toolkit.Base {
 var Menu = _Menu;
 __publicField(Menu, "config", {
   name: "Menu",
-  debug: true,
   components: {
-    MenuBtn: import_MenuBtn.default,
-    MenuList: import_MenuList.default,
+    MenuBtn: import_MenuBtn.MenuBtn,
+    MenuList: import_MenuList.MenuList,
     Menu: _Menu
   },
   options: {
@@ -137,3 +133,4 @@ __publicField(Menu, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=Menu.cjs.map

package/molecules/Menu/Menu.cjs.map

@@ -0,0 +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": ";;;;;;;;;;;;;;;;;;;;;;;;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;",
+  "names": []
+}

package/molecules/Menu/Menu.d.ts

@@ -1,140 +1,80 @@
-/**
- * @typedef {Menu & {
- *   $children: {
- *     Menu: Menu[],
- *     MenuBtn: MenuBtn[],
- *     MenuList: MenuList[],
- *   },
- *   $options: {
- *     mode: 'click'|'hover'
- *   }
- * }} MenuInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';
+import { MenuBtn } from './MenuBtn.js';
+import { MenuList } from './MenuList.js';
+export interface MenuProps extends BaseProps {
+    $children: {
+        Menu: Menu[];
+        MenutBtn: MenuBtn[];
+        MenuList: MenuList[];
+    };
+    $options: {
+        mode: 'click' | 'hover';
+    };
+}
 /**
  * Menu class.
  */
-export default class Menu extends Base {
+export declare class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        debug: boolean;
-        components: {
-            MenuBtn: typeof MenuBtn;
-            MenuList: typeof MenuList;
-            Menu: typeof Menu;
-        };
-        options: {
-            mode: {
-                type: StringConstructor;
-                default: string;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
      * Get the first `MenuList` instance.
-     *
-     * @this    {MenuInterface}
-     * @returns {MenuList}
      */
     get menuList(): MenuList;
     /**
      * Get the first `MenuBtn` instance.
-     *
-     * @this    {MenuInterface}
-     * @returns {MenuBtn}
      */
     get menuBtn(): MenuBtn;
     /**
-     * @todo test breakpoint to switch between click and hover.
+     * Test which mode to use.
      */
     get shouldReactOnClick(): boolean;
     /**
      * Wether the button or the items are hovered.
-     *
-     * @returns {boolean}
      */
     get isHover(): boolean;
     /**
      * Set attributes on mounted, destroy the component if it is missing required
      * child components.
-     *
-     * @returns {void}
      */
     mounted(): void;
     /**
      * Keyboard management.
-     *
-     * @param   {import('@studiometa/js-toolkit/services/key').KeyServiceProps} options
-     * @returns {void}
      */
-    keyed({ ENTER, ESC, isUp }: import('@studiometa/js-toolkit/services/key').KeyServiceProps): void;
+    keyed({ ENTER, ESC, isUp }: KeyServiceProps): void;
     /**
-     * Toggle menu items on button click;
-     *
-     * @this    {MenuInterface}
-     * @param   {number} index
-     * @param   {MouseEvent} event
-     * @returns {void}
+     * Toggle menu items on button click.
      */
-    onMenuBtnClick(this: MenuInterface, index: number, event: MouseEvent): void;
+    onMenuBtnClick(index: number, event: MouseEvent): void;
     /**
      * Open menu items on button mouse enter.
-     *
-     * @this    {MenuInterface}
-     * @param   {number} index
-     * @returns {void}
      */
-    onMenuBtnMouseenter(this: MenuInterface, index: number): void;
+    onMenuBtnMouseenter(index: number): void;
     /**
      * Close menu items on button mouse leave.
-     *
-     * @this    {MenuInterface}
-     * @returns {void}
      */
-    onMenuBtnMouseleave(this: MenuInterface): void;
+    onMenuBtnMouseleave(): void;
     /**
      * Close menu items on button mouse leave.
-     *
-     * @this    {MenuInterface}
-     * @returns {void}
      */
-    onMenuListMouseleave(this: MenuInterface): void;
+    onMenuListMouseleave(): void;
     /**
      * Close other non-parent menu items on menu items open.
-     *
-     * @this    {MenuInterface}
-     * @param   {number} index
-     * @returns {void}
      */
-    onMenuListItemsOpen(this: MenuInterface, index: number): void;
+    onMenuListItemsOpen(index: number): void;
     /**
      * Close the menu.
-     * @returns {void}
      */
     close(): void;
     /**
      * Open the menu.
-     * @returns {void}
      */
     open(): void;
     /**
      * Toggle the menu.
-     * @returns {void}
      */
     toggle(): void;
 }
-export type MenuInterface = Menu & {
-    $children: {
-        Menu: Menu[];
-        MenuBtn: MenuBtn[];
-        MenuList: MenuList[];
-    };
-    $options: {
-        mode: 'click' | 'hover';
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
-import MenuList from "./MenuList.js";
-import MenuBtn from "./MenuBtn.js";