@studiometa/ui 0.2.23 → 0.2.25

package/molecules/Sticky/Sticky.cjs

@@ -30,24 +30,48 @@ module.exports = __toCommonJS(Sticky_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_primitives = require("../../primitives/index.cjs");
 var _Sticky = class extends import_js_toolkit.Base {
+  /**
+   * Is the component sticky?
+   */
   isSticky = false;
+  /**
+   * Is the component visible?
+   */
   isVisible = true;
+  /**
+   * Set the Y value.
+   */
   set y(value) {
     this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
   }
+  /**
+   * Get instances as array.
+   */
   get instances() {
     return Array.from(_Sticky.instances);
   }
+  /**
+   * Mounted hook.
+   */
   mounted() {
     _Sticky.instances.add(this);
     this.setSentinelSize();
   }
+  /**
+   * Resized hook.
+   */
   resized() {
     this.setSentinelSize();
   }
+  /**
+   * Destroyed hook.
+   */
   destroyed() {
     _Sticky.instances.delete(this);
   }
+  /**
+   * Scrolled hook.
+   */
   scrolled(props) {
     if (!this.isSticky || props.y === props.last.y) {
       return;
@@ -58,10 +82,19 @@ var _Sticky = class extends import_js_toolkit.Base {
       this.show();
     }
   }
+  /**
+   * Listen to the sentinel's `intersected` event to set the `isSticky` value.
+   *
+   * @param   {IntersectionObserverEntry[]} entries
+   * @returns {void}
+   */
   onSentinelIntersected([entry]) {
     this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
     this.setPosition();
   }
+  /**
+   * Hide the sticky component when another one is sticky.
+   */
   hide() {
     if (!this.isVisible) {
       return;
@@ -70,6 +103,9 @@ var _Sticky = class extends import_js_toolkit.Base {
     this.$el.classList.add("pointer-events-none");
     this.instances.forEach((instance, index) => instance.setPosition(index));
   }
+  /**
+   * Show the sticky component when the other one is not sticky anymore.
+   */
   show() {
     if (this.isVisible) {
       return;
@@ -78,16 +114,26 @@ var _Sticky = class extends import_js_toolkit.Base {
     this.$el.classList.remove("pointer-events-none");
     this.instances.forEach((instance, index) => instance.setPosition(index));
   }
+  /**
+   * Set the sentinel height based on the previous instances.
+   */
   setSentinelSize() {
     const { instances } = this;
     const index = instances.indexOf(this);
     const height = instances.slice(0, index).filter(
+      // Test each instance sticky context against the current element
       (instance) => this.closestRelativeElement(instance.$el).contains(this.$el)
     ).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
     this.$refs.sentinelRef.style.height = `${height + 1}px`;
     this.$el.style.top = `${height}px`;
     this.$el.style.zIndex = String(this.$options.zIndex - index);
   }
+  /**
+   * Set the component's position.
+   *
+   * @param   {number} [index] The instance index in all the pages' instances.
+   * @returns {void}
+   */
   setPosition(index) {
     if (!this.isSticky) {
       this.y = 0;
@@ -100,6 +146,9 @@ var _Sticky = class extends import_js_toolkit.Base {
       this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1
     );
   }
+  /**
+   * Find the first parent which has a relative position.
+   */
   closestRelativeElement(element) {
     let parent = element.parentElement;
     while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
@@ -109,6 +158,9 @@ var _Sticky = class extends import_js_toolkit.Base {
   }
 };
 var Sticky = _Sticky;
+/**
+ * Config.
+ */
 __publicField(Sticky, "config", {
   name: "Sticky",
   refs: ["inner", "sentinelRef"],
@@ -124,6 +176,10 @@ __publicField(Sticky, "config", {
     hideWhenDown: Boolean
   }
 });
+/**
+ * Holder for all instances.
+ */
+// eslint-disable-next-line no-use-before-define
 __publicField(Sticky, "instances", /* @__PURE__ */ new Set());
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=Sticky.cjs.map

package/molecules/Sticky/Sticky.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Sticky/Sticky.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {Object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {Object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n    sentinelRef: 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 */\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', 'sentinelRef'],\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   * 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   *\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected([entry]: 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.$refs.sentinelRef.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   *\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": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {Object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {Object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n    sentinelRef: 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 */\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', 'sentinelRef'],\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   * 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   *\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected([entry]: 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.$refs.sentinelRef.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   *\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": "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",
   "names": []
 }

package/molecules/Sticky/Sticky.js

@@ -1,6 +1,9 @@
 import { Base } from "@studiometa/js-toolkit";
 import { Sentinel } from "../../primitives/index.js";
 class Sticky extends Base {
+  /**
+   * Config.
+   */
   static config = {
     name: "Sticky",
     refs: ["inner", "sentinelRef"],
@@ -16,25 +19,53 @@ class Sticky extends Base {
       hideWhenDown: Boolean
     }
   };
+  /**
+   * Holder for all instances.
+   */
+  // eslint-disable-next-line no-use-before-define
   static instances = /* @__PURE__ */ new Set();
+  /**
+   * Is the component sticky?
+   */
   isSticky = false;
+  /**
+   * Is the component visible?
+   */
   isVisible = true;
+  /**
+   * Set the Y value.
+   */
   set y(value) {
     this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
   }
+  /**
+   * Get instances as array.
+   */
   get instances() {
     return Array.from(Sticky.instances);
   }
+  /**
+   * Mounted hook.
+   */
   mounted() {
     Sticky.instances.add(this);
     this.setSentinelSize();
   }
+  /**
+   * Resized hook.
+   */
   resized() {
     this.setSentinelSize();
   }
+  /**
+   * Destroyed hook.
+   */
   destroyed() {
     Sticky.instances.delete(this);
   }
+  /**
+   * Scrolled hook.
+   */
   scrolled(props) {
     if (!this.isSticky || props.y === props.last.y) {
       return;
@@ -45,10 +76,19 @@ class Sticky extends Base {
       this.show();
     }
   }
+  /**
+   * Listen to the sentinel's `intersected` event to set the `isSticky` value.
+   *
+   * @param   {IntersectionObserverEntry[]} entries
+   * @returns {void}
+   */
   onSentinelIntersected([entry]) {
     this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
     this.setPosition();
   }
+  /**
+   * Hide the sticky component when another one is sticky.
+   */
   hide() {
     if (!this.isVisible) {
       return;
@@ -57,6 +97,9 @@ class Sticky extends Base {
     this.$el.classList.add("pointer-events-none");
     this.instances.forEach((instance, index) => instance.setPosition(index));
   }
+  /**
+   * Show the sticky component when the other one is not sticky anymore.
+   */
   show() {
     if (this.isVisible) {
       return;
@@ -65,16 +108,26 @@ class Sticky extends Base {
     this.$el.classList.remove("pointer-events-none");
     this.instances.forEach((instance, index) => instance.setPosition(index));
   }
+  /**
+   * Set the sentinel height based on the previous instances.
+   */
   setSentinelSize() {
     const { instances } = this;
     const index = instances.indexOf(this);
     const height = instances.slice(0, index).filter(
+      // Test each instance sticky context against the current element
       (instance) => this.closestRelativeElement(instance.$el).contains(this.$el)
     ).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
     this.$refs.sentinelRef.style.height = `${height + 1}px`;
     this.$el.style.top = `${height}px`;
     this.$el.style.zIndex = String(this.$options.zIndex - index);
   }
+  /**
+   * Set the component's position.
+   *
+   * @param   {number} [index] The instance index in all the pages' instances.
+   * @returns {void}
+   */
   setPosition(index) {
     if (!this.isSticky) {
       this.y = 0;
@@ -87,6 +140,9 @@ class Sticky extends Base {
       this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1
     );
   }
+  /**
+   * Find the first parent which has a relative position.
+   */
   closestRelativeElement(element) {
     let parent = element.parentElement;
     while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {

package/molecules/Sticky/Sticky.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/Sticky/Sticky.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {Object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {Object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n    sentinelRef: 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 */\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', 'sentinelRef'],\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   * 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   *\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected([entry]: 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.$refs.sentinelRef.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   *\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": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {Object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {Object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n    sentinelRef: 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 */\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', 'sentinelRef'],\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   * 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   *\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected([entry]: 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.$refs.sentinelRef.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   *\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": "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",
   "names": []
 }

package/molecules/TableOfContent/TableOfContent.cjs

@@ -30,12 +30,22 @@ module.exports = __toCommonJS(TableOfContent_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_TableOfContentAnchor = require("./TableOfContentAnchor.cjs");
 var TableOfContent = class extends import_js_toolkit.Base {
+  /**
+   * Generate anchors on mount and update the component to instantiate the
+   * `TableOfContentAnchor` components.
+   */
   mounted() {
     if (this.$options.withTemplate) {
       this.generateAnchors();
       this.$update();
     }
   }
+  /**
+   * Generate all anchors.
+   *
+   * @todo Read anchor template from a ref?
+   * @todo Better API to easily override the template function, maybe a `render` function?
+   */
   generateAnchors() {
     document.querySelectorAll(this.$options.contentSelector).forEach((section) => {
       const tpl = document.createElement("div");
@@ -49,6 +59,9 @@ var TableOfContent = class extends import_js_toolkit.Base {
     });
   }
 };
+/**
+ * Config.
+ */
 __publicField(TableOfContent, "config", {
   name: "TableOfContent",
   refs: ["itemTemplate", "list"],

package/molecules/TableOfContent/TableOfContent.cjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContent.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { TableOfContentAnchor } from './TableOfContentAnchor.js';\n\nexport interface TableOfContentProps extends BaseProps {\n  $refs: {\n    itemTemplate: HTMLTemplateElement;\n    list: HTMLUListElement;\n  };\n  $options: {\n    contentSelector: string;\n    withTemplate: boolean;\n  };\n  $children: {\n    TableOfContentAnchor: TableOfContentAnchor[];\n  };\n}\n\n/**\n * TableOfContent class.\n */\nexport class TableOfContent<T extends BaseProps = BaseProps> extends Base<T & TableOfContentProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContent',\n    refs: ['itemTemplate', 'list'],\n    components: {\n      TableOfContentAnchor,\n    },\n    options: {\n      contentSelector: String,\n      withTemplate: Boolean,\n    },\n  };\n\n  /**\n   * Generate anchors on mount and update the component to instantiate the\n   * `TableOfContentAnchor` components.\n   */\n  mounted() {\n    if (this.$options.withTemplate) {\n      this.generateAnchors();\n      this.$update();\n    }\n  }\n\n  /**\n   * Generate all anchors.\n   *\n   * @todo Read anchor template from a ref?\n   * @todo Better API to easily override the template function, maybe a `render` function?\n   */\n  generateAnchors() {\n    document.querySelectorAll(this.$options.contentSelector).forEach((section) => {\n      const tpl = document.createElement('div');\n      tpl.innerHTML = this.$refs.itemTemplate.innerHTML;\n      const li = tpl.querySelector('li');\n      const anchor = li.querySelector('a');\n      anchor.href = `#${section.id}`;\n      anchor.innerHTML = section.textContent;\n      anchor.dataset.component = 'TableOfContentAnchor';\n      this.$refs.list.append(li);\n    });\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,kCAAqC;AAmB9B,IAAM,iBAAN,cAA8D,uBAA8B;AAAA,EAoBjG,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAQA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ;AAC1B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;AAzCE,cAJW,gBAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,EAC7B,YAAY;AAAA,IACV;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,cAAc;AAAA,EAChB;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,kCAAqC;AAmB9B,IAAM,iBAAN,cAA8D,uBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBjG,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ;AAC1B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;AAAA;AAAA;AAAA;AAzCE,cAJW,gBAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,EAC7B,YAAY;AAAA,IACV;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,cAAc;AAAA,EAChB;AACF;",
   "names": []
 }

package/molecules/TableOfContent/TableOfContent.js

@@ -1,6 +1,9 @@
 import { Base } from "@studiometa/js-toolkit";
 import { TableOfContentAnchor } from "./TableOfContentAnchor.js";
 class TableOfContent extends Base {
+  /**
+   * Config.
+   */
   static config = {
     name: "TableOfContent",
     refs: ["itemTemplate", "list"],
@@ -12,12 +15,22 @@ class TableOfContent extends Base {
       withTemplate: Boolean
     }
   };
+  /**
+   * Generate anchors on mount and update the component to instantiate the
+   * `TableOfContentAnchor` components.
+   */
   mounted() {
     if (this.$options.withTemplate) {
       this.generateAnchors();
       this.$update();
     }
   }
+  /**
+   * Generate all anchors.
+   *
+   * @todo Read anchor template from a ref?
+   * @todo Better API to easily override the template function, maybe a `render` function?
+   */
   generateAnchors() {
     document.querySelectorAll(this.$options.contentSelector).forEach((section) => {
       const tpl = document.createElement("div");

package/molecules/TableOfContent/TableOfContent.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContent.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { TableOfContentAnchor } from './TableOfContentAnchor.js';\n\nexport interface TableOfContentProps extends BaseProps {\n  $refs: {\n    itemTemplate: HTMLTemplateElement;\n    list: HTMLUListElement;\n  };\n  $options: {\n    contentSelector: string;\n    withTemplate: boolean;\n  };\n  $children: {\n    TableOfContentAnchor: TableOfContentAnchor[];\n  };\n}\n\n/**\n * TableOfContent class.\n */\nexport class TableOfContent<T extends BaseProps = BaseProps> extends Base<T & TableOfContentProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContent',\n    refs: ['itemTemplate', 'list'],\n    components: {\n      TableOfContentAnchor,\n    },\n    options: {\n      contentSelector: String,\n      withTemplate: Boolean,\n    },\n  };\n\n  /**\n   * Generate anchors on mount and update the component to instantiate the\n   * `TableOfContentAnchor` components.\n   */\n  mounted() {\n    if (this.$options.withTemplate) {\n      this.generateAnchors();\n      this.$update();\n    }\n  }\n\n  /**\n   * Generate all anchors.\n   *\n   * @todo Read anchor template from a ref?\n   * @todo Better API to easily override the template function, maybe a `render` function?\n   */\n  generateAnchors() {\n    document.querySelectorAll(this.$options.contentSelector).forEach((section) => {\n      const tpl = document.createElement('div');\n      tpl.innerHTML = this.$refs.itemTemplate.innerHTML;\n      const li = tpl.querySelector('li');\n      const anchor = li.querySelector('a');\n      anchor.href = `#${section.id}`;\n      anchor.innerHTML = section.textContent;\n      anchor.dataset.component = 'TableOfContentAnchor';\n      this.$refs.list.append(li);\n    });\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,4BAA4B;AAmB9B,MAAM,uBAAwD,KAA8B;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAMA,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAQA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ;AAC1B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;",
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,4BAA4B;AAmB9B,MAAM,uBAAwD,KAA8B;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ;AAC1B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/molecules/TableOfContent/TableOfContentAnchor.cjs

@@ -29,10 +29,20 @@ __export(TableOfContentAnchor_exports, {
 module.exports = __toCommonJS(TableOfContentAnchor_exports);
 var import_atoms = require("../../atoms/index.cjs");
 var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
+  /**
+   * Observer.
+   * @private
+   */
   __observer;
+  /**
+   * Get the sentinel.
+   */
   get sentinel() {
     return document.querySelector(this.targetSelector);
   }
+  /**
+   * Init observer on mount.
+   */
   mounted() {
     if (!this.sentinel) {
       return;
@@ -44,10 +54,16 @@ var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
     });
     this.__observer.observe(this.sentinel);
   }
+  /**
+   * Destroy observer on destroy.
+   */
   destroyed() {
     this.__observer.disconnect();
   }
 };
+/**
+ * Config.
+ */
 __publicField(TableOfContentAnchor, "config", {
   name: "TableOfContentAnchor",
   emits: ["should-activate"],

package/molecules/TableOfContent/TableOfContentAnchor.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../../atoms/index.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n  $options: {\n    activeClass: string;\n  };\n}\n\n/**\n * TableOfContentAnchor class.\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<\n  T & TableOfContentAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContentAnchor',\n    emits: ['should-activate'],\n    options: {\n      activeClass: {\n        type: String,\n        default: 'is-active',\n      },\n    },\n  };\n\n  /**\n   * Observer.\n   * @private\n   */\n  __observer: IntersectionObserver;\n\n  /**\n   * Get the sentinel.\n   */\n  get sentinel():HTMLElement {\n    return document.querySelector(this.targetSelector) as HTMLElement;\n  }\n\n  /**\n   * Init observer on mount.\n   */\n  mounted() {\n    if (!this.sentinel) {\n      return;\n    }\n\n    this.__observer = new IntersectionObserver(([entry]) => {\n      const shouldActivate =\n        entry.isIntersecting &&\n        entry.boundingClientRect.y < 100 &&\n        entry.boundingClientRect.y > 100;\n      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n      this.$emit('should-activate', shouldActivate);\n    });\n\n    this.__observer.observe(this.sentinel);\n  }\n\n  /**\n   * Destroy observer on destroy.\n   */\n  destroyed() {\n    this.__observer.disconnect();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAWxB,IAAM,uBAAN,cAAoE,4BAEzE;AAAA,EAmBA;AAAA,EAKA,IAAI,WAAuB;AACzB,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;AAlDE,cANW,sBAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO,CAAC,iBAAiB;AAAA,EACzB,SAAS;AAAA,IACP,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../../atoms/index.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n  $options: {\n    activeClass: string;\n  };\n}\n\n/**\n * TableOfContentAnchor class.\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<\n  T & TableOfContentAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContentAnchor',\n    emits: ['should-activate'],\n    options: {\n      activeClass: {\n        type: String,\n        default: 'is-active',\n      },\n    },\n  };\n\n  /**\n   * Observer.\n   * @private\n   */\n  __observer: IntersectionObserver;\n\n  /**\n   * Get the sentinel.\n   */\n  get sentinel(): HTMLElement {\n    return document.querySelector(this.targetSelector) as HTMLElement;\n  }\n\n  /**\n   * Init observer on mount.\n   */\n  mounted() {\n    if (!this.sentinel) {\n      return;\n    }\n\n    this.__observer = new IntersectionObserver(([entry]) => {\n      const shouldActivate =\n        entry.isIntersecting &&\n        entry.boundingClientRect.y < 100 &&\n        entry.boundingClientRect.y > 100;\n      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n      this.$emit('should-activate', shouldActivate);\n    });\n\n    this.__observer.observe(this.sentinel);\n  }\n\n  /**\n   * Destroy observer on destroy.\n   */\n  destroyed() {\n    this.__observer.disconnect();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAWxB,IAAM,uBAAN,cAAoE,4BAEzE;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBA;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAwB;AAC1B,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;AAAA;AAAA;AAAA;AAlDE,cANW,sBAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO,CAAC,iBAAiB;AAAA,EACzB,SAAS;AAAA,IACP,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
   "names": []
 }

package/molecules/TableOfContent/TableOfContentAnchor.js

@@ -1,5 +1,8 @@
 import { AnchorScrollTo } from "../../atoms/index.js";
 class TableOfContentAnchor extends AnchorScrollTo {
+  /**
+   * Config.
+   */
   static config = {
     name: "TableOfContentAnchor",
     emits: ["should-activate"],
@@ -10,10 +13,20 @@ class TableOfContentAnchor extends AnchorScrollTo {
       }
     }
   };
+  /**
+   * Observer.
+   * @private
+   */
   __observer;
+  /**
+   * Get the sentinel.
+   */
   get sentinel() {
     return document.querySelector(this.targetSelector);
   }
+  /**
+   * Init observer on mount.
+   */
   mounted() {
     if (!this.sentinel) {
       return;
@@ -25,6 +38,9 @@ class TableOfContentAnchor extends AnchorScrollTo {
     });
     this.__observer.observe(this.sentinel);
   }
+  /**
+   * Destroy observer on destroy.
+   */
   destroyed() {
     this.__observer.disconnect();
   }

package/molecules/TableOfContent/TableOfContentAnchor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../../atoms/index.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n  $options: {\n    activeClass: string;\n  };\n}\n\n/**\n * TableOfContentAnchor class.\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<\n  T & TableOfContentAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContentAnchor',\n    emits: ['should-activate'],\n    options: {\n      activeClass: {\n        type: String,\n        default: 'is-active',\n      },\n    },\n  };\n\n  /**\n   * Observer.\n   * @private\n   */\n  __observer: IntersectionObserver;\n\n  /**\n   * Get the sentinel.\n   */\n  get sentinel():HTMLElement {\n    return document.querySelector(this.targetSelector) as HTMLElement;\n  }\n\n  /**\n   * Init observer on mount.\n   */\n  mounted() {\n    if (!this.sentinel) {\n      return;\n    }\n\n    this.__observer = new IntersectionObserver(([entry]) => {\n      const shouldActivate =\n        entry.isIntersecting &&\n        entry.boundingClientRect.y < 100 &&\n        entry.boundingClientRect.y > 100;\n      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n      this.$emit('should-activate', shouldActivate);\n    });\n\n    this.__observer.observe(this.sentinel);\n  }\n\n  /**\n   * Destroy observer on destroy.\n   */\n  destroyed() {\n    this.__observer.disconnect();\n  }\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAWxB,MAAM,6BAA8D,eAEzE;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAMA;AAAA,EAKA,IAAI,WAAuB;AACzB,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../../atoms/index.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n  $options: {\n    activeClass: string;\n  };\n}\n\n/**\n * TableOfContentAnchor class.\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<\n  T & TableOfContentAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'TableOfContentAnchor',\n    emits: ['should-activate'],\n    options: {\n      activeClass: {\n        type: String,\n        default: 'is-active',\n      },\n    },\n  };\n\n  /**\n   * Observer.\n   * @private\n   */\n  __observer: IntersectionObserver;\n\n  /**\n   * Get the sentinel.\n   */\n  get sentinel(): HTMLElement {\n    return document.querySelector(this.targetSelector) as HTMLElement;\n  }\n\n  /**\n   * Init observer on mount.\n   */\n  mounted() {\n    if (!this.sentinel) {\n      return;\n    }\n\n    this.__observer = new IntersectionObserver(([entry]) => {\n      const shouldActivate =\n        entry.isIntersecting &&\n        entry.boundingClientRect.y < 100 &&\n        entry.boundingClientRect.y > 100;\n      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n      this.$emit('should-activate', shouldActivate);\n    });\n\n    this.__observer.observe(this.sentinel);\n  }\n\n  /**\n   * Destroy observer on destroy.\n   */\n  destroyed() {\n    this.__observer.disconnect();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAWxB,MAAM,6BAA8D,eAEzE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAwB;AAC1B,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;",
   "names": []
 }

package/molecules/Tabs/Tabs.cjs

@@ -31,6 +31,10 @@ var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Tabs = class extends import_js_toolkit.Base {
   items;
+  /**
+   * Initialize the component's behaviours.
+   * @returns {void}
+   */
   mounted() {
     this.items = this.$refs.btn.map((btn, index) => {
       const id = `${this.$id}-${index}`;
@@ -46,6 +50,9 @@ var Tabs = class extends import_js_toolkit.Base {
       return item;
     });
   }
+  /**
+   * Switch tab on button click.
+   */
   onBtnClick(event, index) {
     this.items.forEach((item, i) => {
       if (i !== index) {
@@ -54,6 +61,9 @@ var Tabs = class extends import_js_toolkit.Base {
     });
     this.enableItem(this.items[index]);
   }
+  /**
+   * Enable the given tab and its associated content.
+   */
   async enableItem(item) {
     if (!item || item.isEnabled) {
       return Promise.resolve(this);
@@ -85,6 +95,9 @@ var Tabs = class extends import_js_toolkit.Base {
       )
     ]).then(() => Promise.resolve(this));
   }
+  /**
+   * Disable the given tab and its associated content.
+   */
   async disableItem(item) {
     if (!item || !item.isEnabled) {
       return Promise.resolve(this);
@@ -117,6 +130,9 @@ var Tabs = class extends import_js_toolkit.Base {
     ]).then(() => Promise.resolve(this));
   }
 };
+/**
+ * Config.
+ */
 __publicField(Tabs, "config", {
   name: "Tabs",
   refs: ["btn[]", "content[]"],