@studiometa/ui 1.6.0 → 1.7.0

package/Sticky/Sticky.d.ts

@@ -16,7 +16,7 @@ export interface StickyProps extends BaseProps {
 }
 /**
  * Sticky class.
- * @link https://ui.studiometa.dev/-/components/Sticky/
+ * @link https://ui.studiometa.dev/components/Sticky/
  */
 export declare class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {
     /**

package/Sticky/Sticky.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Sticky/Sticky.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../Sentinel/index.js';\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n  };\n  $options: {\n    zIndex: number;\n    hideWhenUp: boolean;\n    hideWhenDown: boolean;\n  };\n  $children: {\n    Sentinel: Sentinel[];\n  };\n}\n\n/**\n * Sticky class.\n * @link https://ui.studiometa.dev/-/components/Sticky/\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sticky',\n    refs: ['inner'],\n    components: {\n      Sentinel,\n    },\n    options: {\n      zIndex: {\n        type: Number,\n        default: 100,\n      },\n      hideWhenUp: Boolean,\n      hideWhenDown: Boolean,\n    },\n  };\n\n  /**\n   * Holder for all instances.\n   */\n  // eslint-disable-next-line no-use-before-define\n  static instances: Set<Sticky> = new Set();\n\n  /**\n   * Is the component sticky?\n   */\n  isSticky = false;\n\n  /**\n   * Is the component visible?\n   */\n  isVisible = true;\n\n  /**\n   * Set the Y value.\n   */\n  set y(value: number) {\n    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n  }\n\n  /**\n   * Get instances as array.\n   */\n  get instances(): Sticky[] {\n    return Array.from(Sticky.instances);\n  }\n\n  /**\n   * Get the sentinel instance.\n   */\n  get sentinel(): Sentinel {\n    return this.$children.Sentinel[0];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    Sticky.instances.add(this);\n    this.setSentinelSize();\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    this.setSentinelSize();\n  }\n\n  /**\n   * Destroyed hook.\n   */\n  destroyed() {\n    Sticky.instances.delete(this);\n  }\n\n  /**\n   * Scrolled hook.\n   */\n  scrolled(props) {\n    if (!this.isSticky || props.y === props.last.y) {\n      return;\n    }\n\n    if (\n      (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n      (props.direction.y === 'UP' && this.$options.hideWhenUp)\n    ) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected({ args: [[entry]] }: { args: [IntersectionObserverEntry[]] }) {\n    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n    this.setPosition();\n  }\n\n  /**\n   * Hide the sticky component when another one is sticky.\n   */\n  hide() {\n    if (!this.isVisible) {\n      return;\n    }\n\n    this.isVisible = false;\n    this.$el.classList.add('pointer-events-none');\n\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Show the sticky component when the other one is not sticky anymore.\n   */\n  show() {\n    if (this.isVisible) {\n      return;\n    }\n\n    this.isVisible = true;\n    this.$el.classList.remove('pointer-events-none');\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Set the sentinel height based on the previous instances.\n   */\n  setSentinelSize() {\n    const { instances } = this;\n    const index = instances.indexOf(this);\n    const height = instances\n      .slice(0, index)\n      .filter(\n        // Test each instance sticky context against the current element\n        (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n      )\n      .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n    this.sentinel.$el.style.height = `${height + 1}px`;\n    this.$el.style.top = `${height}px`;\n    this.$el.style.zIndex = String(this.$options.zIndex - index);\n  }\n\n  /**\n   * Set the component's position.\n   * @param   {number} [index] The instance index in all the pages' instances.\n   * @returns {void}\n   */\n  setPosition(index?: number) {\n    if (!this.isSticky) {\n      this.y = 0;\n      return;\n    }\n\n    const { instances } = this;\n\n    // eslint-disable-next-line no-param-reassign\n    index = index ?? instances.indexOf(this);\n\n    this.y = instances\n      .slice(0, index)\n      .filter((instance) => instance.isSticky && !instance.isVisible)\n      .reduce<number>(\n        (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n        this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n      ) as number;\n  }\n\n  /**\n   * Find the first parent which has a relative position.\n   */\n  closestRelativeElement(element: HTMLElement) {\n    let parent = element.parentElement;\n\n    while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n      parent = parent.parentElement;\n    }\n\n    return parent;\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../Sentinel/index.js';\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n  };\n  $options: {\n    zIndex: number;\n    hideWhenUp: boolean;\n    hideWhenDown: boolean;\n  };\n  $children: {\n    Sentinel: Sentinel[];\n  };\n}\n\n/**\n * Sticky class.\n * @link https://ui.studiometa.dev/components/Sticky/\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sticky',\n    refs: ['inner'],\n    components: {\n      Sentinel,\n    },\n    options: {\n      zIndex: {\n        type: Number,\n        default: 100,\n      },\n      hideWhenUp: Boolean,\n      hideWhenDown: Boolean,\n    },\n  };\n\n  /**\n   * Holder for all instances.\n   */\n  // eslint-disable-next-line no-use-before-define\n  static instances: Set<Sticky> = new Set();\n\n  /**\n   * Is the component sticky?\n   */\n  isSticky = false;\n\n  /**\n   * Is the component visible?\n   */\n  isVisible = true;\n\n  /**\n   * Set the Y value.\n   */\n  set y(value: number) {\n    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n  }\n\n  /**\n   * Get instances as array.\n   */\n  get instances(): Sticky[] {\n    return Array.from(Sticky.instances);\n  }\n\n  /**\n   * Get the sentinel instance.\n   */\n  get sentinel(): Sentinel {\n    return this.$children.Sentinel[0];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    Sticky.instances.add(this);\n    this.setSentinelSize();\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    this.setSentinelSize();\n  }\n\n  /**\n   * Destroyed hook.\n   */\n  destroyed() {\n    Sticky.instances.delete(this);\n  }\n\n  /**\n   * Scrolled hook.\n   */\n  scrolled(props) {\n    if (!this.isSticky || props.y === props.last.y) {\n      return;\n    }\n\n    if (\n      (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n      (props.direction.y === 'UP' && this.$options.hideWhenUp)\n    ) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected({ args: [[entry]] }: { args: [IntersectionObserverEntry[]] }) {\n    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n    this.setPosition();\n  }\n\n  /**\n   * Hide the sticky component when another one is sticky.\n   */\n  hide() {\n    if (!this.isVisible) {\n      return;\n    }\n\n    this.isVisible = false;\n    this.$el.classList.add('pointer-events-none');\n\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Show the sticky component when the other one is not sticky anymore.\n   */\n  show() {\n    if (this.isVisible) {\n      return;\n    }\n\n    this.isVisible = true;\n    this.$el.classList.remove('pointer-events-none');\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Set the sentinel height based on the previous instances.\n   */\n  setSentinelSize() {\n    const { instances } = this;\n    const index = instances.indexOf(this);\n    const height = instances\n      .slice(0, index)\n      .filter(\n        // Test each instance sticky context against the current element\n        (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n      )\n      .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n    this.sentinel.$el.style.height = `${height + 1}px`;\n    this.$el.style.top = `${height}px`;\n    this.$el.style.zIndex = String(this.$options.zIndex - index);\n  }\n\n  /**\n   * Set the component's position.\n   * @param   {number} [index] The instance index in all the pages' instances.\n   * @returns {void}\n   */\n  setPosition(index?: number) {\n    if (!this.isSticky) {\n      this.y = 0;\n      return;\n    }\n\n    const { instances } = this;\n\n    // eslint-disable-next-line no-param-reassign\n    index = index ?? instances.indexOf(this);\n\n    this.y = instances\n      .slice(0, index)\n      .filter((instance) => instance.isSticky && !instance.isVisible)\n      .reduce<number>(\n        (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n        this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n      ) as number;\n  }\n\n  /**\n   * Find the first parent which has a relative position.\n   */\n  closestRelativeElement(element: HTMLElement) {\n    let parent = element.parentElement;\n\n    while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n      parent = parent.parentElement;\n    }\n\n    return parent;\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAoBlB,MAAM,eAAgD,KAAsB;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,OAAO;AAAA,IACd,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,YAAyB,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKxC,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,IAAI,EAAE,OAAe;AACnB,SAAK,MAAM,MAAM,MAAM,YAAY,cAAc,KAAK;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAsB;AACxB,WAAO,MAAM,KAAK,OAAO,SAAS;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAqB;AACvB,WAAO,KAAK,UAAU,SAAS,CAAC;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,WAAO,UAAU,IAAI,IAAI;AACzB,SAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,WAAO,UAAU,OAAO,IAAI;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,OAAO;AACd,QAAI,CAAC,KAAK,YAAY,MAAM,MAAM,MAAM,KAAK,GAAG;AAC9C;AAAA,IACF;AAEA,QACG,MAAM,UAAU,MAAM,UAAU,KAAK,SAAS,gBAC9C,MAAM,UAAU,MAAM,QAAQ,KAAK,SAAS,YAC7C;AACA,WAAK,KAAK;AAAA,IACZ,OAAO;AACL,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,sBAAsB,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,GAA4C;AAClF,SAAK,WAAW,MAAM,kBAAkB,MAAM,mBAAmB,IAAI;AACrE,SAAK,YAAY;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,SAAK,YAAY;AACjB,SAAK,IAAI,UAAU,IAAI,qBAAqB;AAE5C,SAAK,UAAU,QAAQ,CAAC,UAAU,UAAU,SAAS,YAAY,KAAK,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,KAAK,WAAW;AAClB;AAAA,IACF;AAEA,SAAK,YAAY;AACjB,SAAK,IAAI,UAAU,OAAO,qBAAqB;AAC/C,SAAK,UAAU,QAAQ,CAAC,UAAU,UAAU,SAAS,YAAY,KAAK,CAAC;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AAChB,UAAM,EAAE,UAAU,IAAI;AACtB,UAAM,QAAQ,UAAU,QAAQ,IAAI;AACpC,UAAM,SAAS,UACZ,MAAM,GAAG,KAAK,EACd;AAAA;AAAA,MAEC,CAAC,aAAa,KAAK,uBAAuB,SAAS,GAAG,EAAE,SAAS,KAAK,GAAG;AAAA,IAC3E,EACC,OAAO,CAAC,KAAK,aAAa,MAAM,SAAS,IAAI,cAAc,CAAC;AAE/D,SAAK,SAAS,IAAI,MAAM,SAAS,GAAG,SAAS,CAAC;AAC9C,SAAK,IAAI,MAAM,MAAM,GAAG,MAAM;AAC9B,SAAK,IAAI,MAAM,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAgB;AAC1B,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,IAAI;AACT;AAAA,IACF;AAEA,UAAM,EAAE,UAAU,IAAI;AAGtB,YAAQ,SAAS,UAAU,QAAQ,IAAI;AAEvC,SAAK,IAAI,UACN,MAAM,GAAG,KAAK,EACd,OAAO,CAAC,aAAa,SAAS,YAAY,CAAC,SAAS,SAAS,EAC7D;AAAA,MACC,CAAC,GAAW,aAAa,IAAI,SAAS,MAAM,MAAM;AAAA,MAClD,KAAK,YAAY,IAAI,KAAK,MAAM,MAAM,eAAe;AAAA,IACvD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB,SAAsB;AAC3C,QAAI,SAAS,QAAQ;AAErB,WAAO,iBAAiB,MAAM,EAAE,aAAa,cAAc,OAAO,eAAe;AAC/E,eAAS,OAAO;AAAA,IAClB;AAEA,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/Tabs/Tabs.d.ts

@@ -18,7 +18,7 @@ export interface TabsProps extends BaseProps {
 }
 /**
  * Tabs class.
- * @link https://ui.studiometa.dev/-/components/Tabs/
+ * @link https://ui.studiometa.dev/components/Tabs/
  */
 export declare class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {
     /**

package/Tabs/Tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Tabs/Tabs.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n  btn: HTMLElement;\n  content: HTMLElement;\n  isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n  $options: {\n    styles: TabsStylesOption;\n  };\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n}\n\n/**\n * Tabs class.\n * @link https://ui.studiometa.dev/-/components/Tabs/\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Tabs',\n    refs: ['btn[]', 'content[]'],\n    emits: ['enable', 'disable'],\n    options: {\n      styles: {\n        type: Object,\n        default: (): TabsStylesOption => ({\n          content: {\n            closed: {\n              position: 'absolute',\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  items: TabItem[];\n\n  /**\n   * Initialize the component's behaviours.\n   * @returns {void}\n   */\n  mounted() {\n    this.items = this.$refs.btn.map((btn, index) => {\n      const id = `${this.$id}-${index}`;\n      const content = this.$refs.content[index];\n      btn.setAttribute('id', id);\n      content.setAttribute('aria-labelledby', id);\n\n      const item = { btn, content, isEnabled: index > 0 };\n      if (index > 0) {\n        this.disableItem(item);\n      } else {\n        this.enableItem(item);\n      }\n      return item;\n    });\n  }\n\n  /**\n   * Switch tab on button click.\n   */\n  onBtnClick({ index }: { index: number }) {\n    this.items.forEach((item, i) => {\n      if (i !== index) {\n        this.disableItem(item);\n      }\n    });\n\n    this.enableItem(this.items[index]);\n  }\n\n  /**\n   * Enable the given tab and its associated content.\n   */\n  async enableItem(item: TabItem): Promise<this> {\n    if (!item || item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = true;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'false');\n    this.$emit('enable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.closed,\n          active: btnStyles.active,\n          to: btnStyles.open,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.closed,\n          active: contentStyles.active,\n          to: contentStyles.open,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n\n  /**\n   * Disable the given tab and its associated content.\n   */\n  async disableItem(item: TabItem): Promise<this> {\n    if (!item || !item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = false;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'true');\n    this.$emit('disable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.open,\n          active: btnStyles.active,\n          to: btnStyles.closed,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.open,\n          active: contentStyles.active,\n          to: contentStyles.closed,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n  btn: HTMLElement;\n  content: HTMLElement;\n  isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n  $options: {\n    styles: TabsStylesOption;\n  };\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n}\n\n/**\n * Tabs class.\n * @link https://ui.studiometa.dev/components/Tabs/\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Tabs',\n    refs: ['btn[]', 'content[]'],\n    emits: ['enable', 'disable'],\n    options: {\n      styles: {\n        type: Object,\n        default: (): TabsStylesOption => ({\n          content: {\n            closed: {\n              position: 'absolute',\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  items: TabItem[];\n\n  /**\n   * Initialize the component's behaviours.\n   * @returns {void}\n   */\n  mounted() {\n    this.items = this.$refs.btn.map((btn, index) => {\n      const id = `${this.$id}-${index}`;\n      const content = this.$refs.content[index];\n      btn.setAttribute('id', id);\n      content.setAttribute('aria-labelledby', id);\n\n      const item = { btn, content, isEnabled: index > 0 };\n      if (index > 0) {\n        this.disableItem(item);\n      } else {\n        this.enableItem(item);\n      }\n      return item;\n    });\n  }\n\n  /**\n   * Switch tab on button click.\n   */\n  onBtnClick({ index }: { index: number }) {\n    this.items.forEach((item, i) => {\n      if (i !== index) {\n        this.disableItem(item);\n      }\n    });\n\n    this.enableItem(this.items[index]);\n  }\n\n  /**\n   * Enable the given tab and its associated content.\n   */\n  async enableItem(item: TabItem): Promise<this> {\n    if (!item || item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = true;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'false');\n    this.$emit('enable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.closed,\n          active: btnStyles.active,\n          to: btnStyles.open,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.closed,\n          active: contentStyles.active,\n          to: contentStyles.open,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n\n  /**\n   * Disable the given tab and its associated content.\n   */\n  async disableItem(item: TabItem): Promise<this> {\n    if (!item || !item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = false;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'true');\n    this.$emit('disable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.open,\n          active: btnStyles.active,\n          to: btnStyles.closed,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.open,\n          active: contentStyles.active,\n          to: contentStyles.closed,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/Transition/Transition.d.ts

@@ -1,11 +1,33 @@
 import { Base, BaseProps } from '@studiometa/js-toolkit';
 import type { BaseConfig } from '@studiometa/js-toolkit';
+export type TransitionConstructor<T extends Transition = Transition> = {
+    new (...args: any[]): T;
+    prototype: Transition;
+    EVENTS: {
+        TRANSITION_TOGGLE: 'transition-toggle';
+        TRANSITION_ENTER: 'transition-enter';
+        TRANSITION_ENTER_START: 'transition-enter-start';
+        TRANSITION_ENTER_END: 'transition-enter-end';
+        TRANSITION_LEAVE: 'transition-leave';
+        TRANSITION_LEAVE_START: 'transition-leave-start';
+        TRANSITION_LEAVE_END: 'transition-leave-end';
+    };
+    STATES: {
+        ENTERING: 'entering';
+        LEAVING: 'leaving';
+    };
+} & Pick<typeof Transition, keyof typeof Transition>;
 declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").TransitionInterface, Base<BaseProps>, import("#private/index.js").TransitionProps>;
 /**
  * Transition class.
- * @link https://ui.studiometa.dev/-/components/Transition/
+ * @link https://ui.studiometa.dev/components/Transition/
  */
 export declare class Transition<T extends BaseProps = BaseProps> extends Transition_base<T> {
+    /**
+     * Declare the `this.constructor` type
+     * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311
+     */
+    ['constructor']: TransitionConstructor;
     /**
      * Config.
      */

package/Transition/Transition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Transition/Transition.ts"],
-  "sourcesContent": ["import { Base, BaseProps } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\n\n/**\n * Transition class.\n * @link https://ui.studiometa.dev/-/components/Transition/\n */\nexport class Transition<T extends BaseProps = BaseProps> extends withTransition<Base>(Base)<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Transition',\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,YAAuB;AAEhC,SAAS,sBAAsB;AAMxB,MAAM,mBAAoD,eAAqB,IAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAI7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { Base, BaseProps } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\n\nexport type TransitionConstructor<T extends Transition = Transition> = {\n  new (...args: any[]): T;\n  prototype: Transition;\n  EVENTS: {\n    TRANSITION_TOGGLE: 'transition-toggle';\n    TRANSITION_ENTER: 'transition-enter';\n    TRANSITION_ENTER_START: 'transition-enter-start';\n    TRANSITION_ENTER_END: 'transition-enter-end';\n    TRANSITION_LEAVE: 'transition-leave';\n    TRANSITION_LEAVE_START: 'transition-leave-start';\n    TRANSITION_LEAVE_END: 'transition-leave-end';\n  };\n\n  STATES: {\n    ENTERING: 'entering';\n    LEAVING: 'leaving';\n  };\n} & Pick<typeof Transition, keyof typeof Transition>;\n\n/**\n * Transition class.\n * @link https://ui.studiometa.dev/components/Transition/\n */\nexport class Transition<T extends BaseProps = BaseProps> extends withTransition<Base>(Base)<T> {\n  /**\n   * Declare the `this.constructor` type\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: TransitionConstructor;\n\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Transition',\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,YAAuB;AAEhC,SAAS,sBAAsB;AAyBxB,MAAM,mBAAoD,eAAqB,IAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAU7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/decorators/withTransition.d.ts

@@ -21,6 +21,11 @@ export interface TransitionInterface extends BaseInterface {
      * Get the group targets.
      */
     get targets(): HTMLElement[];
+    /**
+     * Current state.
+     * @internal
+     */
+    state: null | 'entering' | 'leaving';
     /**
      * Trigger the enter transition.
      */
@@ -29,8 +34,14 @@ export interface TransitionInterface extends BaseInterface {
      * Trigger the leave transition.
      */
     leave(target?: HTMLElement | HTMLElement[]): Promise<void>;
+    /**
+     * Toggle the leave or enter transition.
+     * Defaults to the enter transition if no transition has been triggered yet.
+     */
+    toggle(target?: HTMLElement | HTMLElement[]): Promise<void>;
 }
 /**
  * Extend a class to add transition capabilities.
+ * @link https://ui.studiometa.dev/components/Transition/
  */
 export declare function withTransition<S extends Base>(BaseClass: typeof Base): BaseDecorator<TransitionInterface, S, TransitionProps>;

package/decorators/withTransition.js

@@ -2,11 +2,24 @@ import { getInstances } from "@studiometa/js-toolkit";
 import { nextFrame, removeClass, transition } from "@studiometa/js-toolkit/utils";
 function withTransition(BaseClass) {
   class Transition extends BaseClass {
+    /**
+     * Events.
+     */
+    static EVENTS = {
+      TRANSITION_TOGGLE: "transition-toggle",
+      TRANSITION_ENTER: "transition-enter",
+      TRANSITION_ENTER_START: "transition-enter-start",
+      TRANSITION_ENTER_END: "transition-enter-end",
+      TRANSITION_LEAVE: "transition-leave",
+      TRANSITION_LEAVE_START: "transition-leave-start",
+      TRANSITION_LEAVE_END: "transition-leave-end"
+    };
     /**
      * Config.
      */
     static config = {
       name: "Transition",
+      emits: Object.values(this.EVENTS),
       options: {
         enterFrom: String,
         enterActive: String,
@@ -19,6 +32,17 @@ function withTransition(BaseClass) {
         group: String
       }
     };
+    /**
+     * States.
+     */
+    static STATES = {
+      ENTERING: "entering",
+      LEAVING: "leaving"
+    };
+    /**
+     * Current state.
+     */
+    state = null;
     /**
      * Get the transition target.
      */
@@ -44,7 +68,11 @@ function withTransition(BaseClass) {
      * Trigger the enter transition.
      */
     async enter(target) {
+      const { STATES, EVENTS } = this.constructor;
       const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
+      this.state = STATES.ENTERING;
+      this.$emit(EVENTS.TRANSITION_ENTER);
+      this.$emit(EVENTS.TRANSITION_ENTER_START);
       removeClass(target ?? this.targets, leaveTo);
       await nextFrame();
       await transition(
@@ -56,12 +84,17 @@ function withTransition(BaseClass) {
         },
         enterKeep ? "keep" : void 0
       );
+      this.$emit(EVENTS.TRANSITION_ENTER_END);
     }
     /**
      * Trigger the leave transition.
      */
     async leave(target) {
+      const { STATES, EVENTS } = this.constructor;
       const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
+      this.state = STATES.LEAVING;
+      this.$emit(EVENTS.TRANSITION_LEAVE);
+      this.$emit(EVENTS.TRANSITION_LEAVE_START);
       removeClass(target ?? this.targets, enterTo);
       await nextFrame();
       await transition(
@@ -73,6 +106,22 @@ function withTransition(BaseClass) {
         },
         leaveKeep ? "keep" : void 0
       );
+      this.$emit(EVENTS.TRANSITION_LEAVE_END);
+    }
+    /**
+     * Toggle the leave or enter transition.
+     * Defaults to the enter transition if no transition has been triggered yet.
+     */
+    async toggle(target) {
+      const { STATES, EVENTS } = this.constructor;
+      this.$emit(EVENTS.TRANSITION_TOGGLE);
+      switch (this.state) {
+        case STATES.ENTERING:
+          return this.leave(target);
+        case STATES.LEAVING:
+        default:
+          return this.enter(target);
+      }
     }
   }
   return Transition;

package/decorators/withTransition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/decorators/withTransition.ts"],
-  "sourcesContent": ["import { getInstances } from '@studiometa/js-toolkit';\nimport { nextFrame, removeClass, transition } from '@studiometa/js-toolkit/utils';\nimport type {\n  Base,\n  BaseDecorator,\n  BaseProps,\n  BaseConfig,\n  BaseInterface,\n} from '@studiometa/js-toolkit';\n\nexport interface TransitionProps extends BaseProps {\n  $options: {\n    enterFrom: string;\n    enterActive: string;\n    enterTo: string;\n    enterKeep: boolean;\n    leaveFrom: string;\n    leaveActive: string;\n    leaveTo: string;\n    leaveKeep: boolean;\n    group: string;\n  };\n}\n\nexport interface TransitionInterface extends BaseInterface {\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLElement | HTMLElement[];\n  /**\n   * Get the group targets.\n   */\n  get targets(): HTMLElement[];\n  /**\n   * Trigger the enter transition.\n   */\n  enter(target?: HTMLElement | HTMLElement[]): Promise<void>;\n  /**\n   * Trigger the leave transition.\n   */\n  leave(target?: HTMLElement | HTMLElement[]): Promise<void>;\n}\n\n/**\n * Extend a class to add transition capabilities.\n */\nexport function withTransition<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<TransitionInterface, S, TransitionProps> {\n  /**\n   * Class.\n   */\n  class Transition<T extends BaseProps = BaseProps> extends BaseClass<T & TransitionProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: 'Transition',\n      options: {\n        enterFrom: String,\n        enterActive: String,\n        enterTo: String,\n        enterKeep: Boolean,\n        leaveFrom: String,\n        leaveActive: String,\n        leaveTo: String,\n        leaveKeep: Boolean,\n        group: String,\n      },\n    };\n\n    /**\n     * Get the transition target.\n     */\n    get target(): HTMLElement | HTMLElement[] {\n      return this.$el;\n    }\n\n    /**\n     * Get the group targets.\n     */\n    get targets(): HTMLElement[] {\n      const { group } = this.$options;\n      const targets = [this.target];\n\n      if (group) {\n        for (const instance of getInstances(this.constructor as typeof Transition)) {\n          if (instance !== this && instance.$options.group === group) {\n            targets.push(instance.target);\n          }\n        }\n      }\n\n      return targets.flat();\n    }\n\n    /**\n     * Trigger the enter transition.\n     */\n    async enter(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n\n      removeClass(target ?? this.targets, leaveTo);\n      await nextFrame();\n      await transition(\n        target ?? this.targets,\n        {\n          from: enterFrom,\n          active: enterActive as string,\n          to: enterTo as string,\n        },\n        enterKeep ? 'keep' : undefined,\n      );\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n\n      removeClass(target ?? this.targets, enterTo);\n      await nextFrame();\n      await transition(\n        target ?? this.targets,\n        {\n          from: leaveFrom,\n          active: leaveActive as string,\n          to: leaveTo as string,\n        },\n        leaveKeep ? 'keep' : undefined,\n      );\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,WAAW,aAAa,kBAAkB;AA6C5C,SAAS,eACd,WACwD;AAAA,EAIxD,MAAM,mBAAoD,UAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,SAAsC;AACxC,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,UAAyB;AAC3B,YAAM,EAAE,MAAM,IAAI,KAAK;AACvB,YAAM,UAAU,CAAC,KAAK,MAAM;AAE5B,UAAI,OAAO;AACT,mBAAW,YAAY,aAAa,KAAK,WAAgC,GAAG;AAC1E,cAAI,aAAa,QAAQ,SAAS,SAAS,UAAU,OAAO;AAC1D,oBAAQ,KAAK,SAAS,MAAM;AAAA,UAC9B;AAAA,QACF;AAAA,MACF;AAEA,aAAO,QAAQ,KAAK;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAqD;AAC/D,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,kBAAY,UAAU,KAAK,SAAS,OAAO;AAC3C,YAAM,UAAU;AAChB,YAAM;AAAA,QACJ,UAAU,KAAK;AAAA,QACf;AAAA,UACE,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,IAAI;AAAA,QACN;AAAA,QACA,YAAY,SAAS;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAqD;AAC/D,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,kBAAY,UAAU,KAAK,SAAS,OAAO;AAC3C,YAAM,UAAU;AAChB,YAAM;AAAA,QACJ,UAAU,KAAK;AAAA,QACf;AAAA,UACE,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,IAAI;AAAA,QACN;AAAA,QACA,YAAY,SAAS;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { getInstances } from '@studiometa/js-toolkit';\nimport { nextFrame, removeClass, transition } from '@studiometa/js-toolkit/utils';\nimport type {\n  Base,\n  BaseDecorator,\n  BaseProps,\n  BaseConfig,\n  BaseInterface,\n} from '@studiometa/js-toolkit';\n\nexport interface TransitionProps extends BaseProps {\n  $options: {\n    enterFrom: string;\n    enterActive: string;\n    enterTo: string;\n    enterKeep: boolean;\n    leaveFrom: string;\n    leaveActive: string;\n    leaveTo: string;\n    leaveKeep: boolean;\n    group: string;\n  };\n}\n\nexport interface TransitionInterface extends BaseInterface {\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLElement | HTMLElement[];\n  /**\n   * Get the group targets.\n   */\n  get targets(): HTMLElement[];\n  /**\n   * Current state.\n   * @internal\n   */\n  state: null | 'entering' | 'leaving';\n  /**\n   * Trigger the enter transition.\n   */\n  enter(target?: HTMLElement | HTMLElement[]): Promise<void>;\n  /**\n   * Trigger the leave transition.\n   */\n  leave(target?: HTMLElement | HTMLElement[]): Promise<void>;\n  /**\n   * Toggle the leave or enter transition.\n   * Defaults to the enter transition if no transition has been triggered yet.\n   */\n  toggle(target?: HTMLElement | HTMLElement[]): Promise<void>;\n}\n\n/**\n * Extend a class to add transition capabilities.\n * @link https://ui.studiometa.dev/components/Transition/\n */\nexport function withTransition<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<TransitionInterface, S, TransitionProps> {\n  type TransitionConstructor<T extends Transition = Transition> = {\n    new (...args: any[]): T;\n    prototype: Transition;\n  } & Pick<typeof Transition, keyof typeof Transition>;\n\n  /**\n   * Class.\n   */\n  class Transition<T extends BaseProps = BaseProps> extends BaseClass<T & TransitionProps> {\n    /**\n     * Declare the `this.constructor` type\n     * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n     */\n    declare ['constructor']: TransitionConstructor;\n\n    /**\n     * Events.\n     */\n    static EVENTS = {\n      TRANSITION_TOGGLE: 'transition-toggle',\n      TRANSITION_ENTER: 'transition-enter',\n      TRANSITION_ENTER_START: 'transition-enter-start',\n      TRANSITION_ENTER_END: 'transition-enter-end',\n      TRANSITION_LEAVE: 'transition-leave',\n      TRANSITION_LEAVE_START: 'transition-leave-start',\n      TRANSITION_LEAVE_END: 'transition-leave-end',\n    } as const;\n\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: 'Transition',\n      emits: Object.values(this.EVENTS),\n      options: {\n        enterFrom: String,\n        enterActive: String,\n        enterTo: String,\n        enterKeep: Boolean,\n        leaveFrom: String,\n        leaveActive: String,\n        leaveTo: String,\n        leaveKeep: Boolean,\n        group: String,\n      },\n    };\n\n    /**\n     * States.\n     */\n    static STATES = {\n      ENTERING: 'entering',\n      LEAVING: 'leaving',\n    } as const;\n\n    /**\n     * Current state.\n     */\n    state: 'entering' | 'leaving' = null;\n\n    /**\n     * Get the transition target.\n     */\n    get target(): HTMLElement | HTMLElement[] {\n      return this.$el;\n    }\n\n    /**\n     * Get the group targets.\n     */\n    get targets(): HTMLElement[] {\n      const { group } = this.$options;\n      const targets = [this.target];\n\n      if (group) {\n        for (const instance of getInstances(this.constructor as typeof Transition)) {\n          if (instance !== this && instance.$options.group === group) {\n            targets.push(instance.target);\n          }\n        }\n      }\n\n      return targets.flat();\n    }\n\n    /**\n     * Trigger the enter transition.\n     */\n    async enter(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { STATES, EVENTS } = this.constructor;\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n      this.state = STATES.ENTERING;\n      this.$emit(EVENTS.TRANSITION_ENTER);\n      this.$emit(EVENTS.TRANSITION_ENTER_START);\n      removeClass(target ?? this.targets, leaveTo);\n      await nextFrame();\n      await transition(\n        target ?? this.targets,\n        {\n          from: enterFrom,\n          active: enterActive as string,\n          to: enterTo as string,\n        },\n        enterKeep ? 'keep' : undefined,\n      );\n      this.$emit(EVENTS.TRANSITION_ENTER_END);\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { STATES, EVENTS } = this.constructor;\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n      this.state = STATES.LEAVING;\n      this.$emit(EVENTS.TRANSITION_LEAVE);\n      this.$emit(EVENTS.TRANSITION_LEAVE_START);\n      removeClass(target ?? this.targets, enterTo);\n      await nextFrame();\n      await transition(\n        target ?? this.targets,\n        {\n          from: leaveFrom,\n          active: leaveActive as string,\n          to: leaveTo as string,\n        },\n        leaveKeep ? 'keep' : undefined,\n      );\n      this.$emit(EVENTS.TRANSITION_LEAVE_END);\n    }\n\n    /**\n     * Toggle the leave or enter transition.\n     * Defaults to the enter transition if no transition has been triggered yet.\n     */\n    async toggle(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { STATES, EVENTS } = this.constructor;\n\n      this.$emit(EVENTS.TRANSITION_TOGGLE);\n\n      switch (this.state) {\n        case STATES.ENTERING:\n          return this.leave(target);\n        case STATES.LEAVING:\n        default:\n          return this.enter(target);\n      }\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

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