@studiometa/ui 0.2.13 → 0.2.15

package/molecules/Slider/SliderProgress.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/SliderProgress.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transform, map, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderProgressProps extends BaseProps {\n  $refs: {\n    progress: HTMLElement;\n  };\n}\n\n/**\n * SliderProgress class.\n */\nexport class SliderProgress<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n  T & SliderProgressProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderProgress',\n    refs: ['progress'],\n  };\n\n  /**\n   * Update the progress indicator.\n   */\n  update(index:number) {\n    domScheduler.read(() => {\n      const { progress } = this.$refs;\n      const x = map(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);\n      domScheduler.write(() => {\n        transform(progress, { x });\n      });\n    });\n  }\n}\n"],
+  "mappings": "AACA,SAAS,WAAW,KAAK,oBAAoB;AAC7C,SAAS,2BAA2B;AAW7B,MAAM,uBAAwD,oBAEnE;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,UAAU;AAAA,EACnB;AAAA,EAKA,OAAO,OAAc;AACnB,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,YAAM,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,UAAU,SAAS,cAAc,IAAI,CAAC;AAC3E,mBAAa,MAAM,MAAM;AACvB,kBAAU,UAAU,EAAE,EAAE,CAAC;AAAA,MAC3B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/molecules/Slider/index.cjs

@@ -1,13 +1,7 @@
-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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,28 +10,19 @@ 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 __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/Slider/index.js
+// packages/ui/molecules/Slider/index.ts
 var Slider_exports = {};
-__export(Slider_exports, {
-  AbstractSliderChild: () => import_AbstractSliderChild.default,
-  Slider: () => import_Slider.default,
-  SliderBtn: () => import_SliderBtn.default,
-  SliderCount: () => import_SliderCount.default,
-  SliderDots: () => import_SliderDots.default,
-  SliderDrag: () => import_SliderDrag.default,
-  SliderItem: () => import_SliderItem.default,
-  SliderProgress: () => import_SliderProgress.default
-});
 module.exports = __toCommonJS(Slider_exports);
-var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
-var import_Slider = __toESM(require("./Slider.cjs"), 1);
-var import_SliderBtn = __toESM(require("./SliderBtn.cjs"), 1);
-var import_SliderCount = __toESM(require("./SliderCount.cjs"), 1);
-var import_SliderDrag = __toESM(require("./SliderDrag.cjs"), 1);
-var import_SliderItem = __toESM(require("./SliderItem.cjs"), 1);
-var import_SliderProgress = __toESM(require("./SliderProgress.cjs"), 1);
-var import_SliderDots = __toESM(require("./SliderDots.cjs"), 1);
+__reExport(Slider_exports, require("./AbstractSliderChild.cjs"), module.exports);
+__reExport(Slider_exports, require("./Slider.cjs"), module.exports);
+__reExport(Slider_exports, require("./SliderBtn.cjs"), module.exports);
+__reExport(Slider_exports, require("./SliderCount.cjs"), module.exports);
+__reExport(Slider_exports, require("./SliderDrag.cjs"), module.exports);
+__reExport(Slider_exports, require("./SliderItem.cjs"), module.exports);
+__reExport(Slider_exports, require("./SliderProgress.cjs"), module.exports);
+__reExport(Slider_exports, require("./SliderDots.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/Slider/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/index.ts"],
+  "sourcesContent": ["export * from './AbstractSliderChild.js';\nexport * from './Slider.js';\nexport * from './SliderBtn.js';\nexport * from './SliderCount.js';\nexport * from './SliderDrag.js';\nexport * from './SliderItem.js';\nexport * from './SliderProgress.js';\nexport * from './SliderDots.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,sCAAd;AACA,2BAAc,yBADd;AAEA,2BAAc,4BAFd;AAGA,2BAAc,8BAHd;AAIA,2BAAc,6BAJd;AAKA,2BAAc,6BALd;AAMA,2BAAc,iCANd;AAOA,2BAAc,6BAPd;",
+  "names": []
+}

package/molecules/Slider/index.d.ts

@@ -1,8 +1,8 @@
-export { default as AbstractSliderChild } from "./AbstractSliderChild.js";
-export { default as Slider } from "./Slider.js";
-export { default as SliderBtn } from "./SliderBtn.js";
-export { default as SliderCount } from "./SliderCount.js";
-export { default as SliderDrag } from "./SliderDrag.js";
-export { default as SliderItem } from "./SliderItem.js";
-export { default as SliderProgress } from "./SliderProgress.js";
-export { default as SliderDots } from "./SliderDots.js";
+export * from './AbstractSliderChild.js';
+export * from './Slider.js';
+export * from './SliderBtn.js';
+export * from './SliderCount.js';
+export * from './SliderDrag.js';
+export * from './SliderItem.js';
+export * from './SliderProgress.js';
+export * from './SliderDots.js';

package/molecules/Slider/index.js

@@ -1 +1,9 @@
-import{default as t}from"./AbstractSliderChild.js";import{default as a}from"./Slider.js";import{default as l}from"./SliderBtn.js";import{default as s}from"./SliderCount.js";import{default as m}from"./SliderDrag.js";import{default as p}from"./SliderItem.js";import{default as S}from"./SliderProgress.js";import{default as n}from"./SliderDots.js";export{t as AbstractSliderChild,a as Slider,l as SliderBtn,s as SliderCount,n as SliderDots,m as SliderDrag,p as SliderItem,S as SliderProgress};
+export * from "./AbstractSliderChild.js";
+export * from "./Slider.js";
+export * from "./SliderBtn.js";
+export * from "./SliderCount.js";
+export * from "./SliderDrag.js";
+export * from "./SliderItem.js";
+export * from "./SliderProgress.js";
+export * from "./SliderDots.js";
+//# sourceMappingURL=index.js.map

package/molecules/Slider/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Slider/index.ts"],
+  "sourcesContent": ["export * from './AbstractSliderChild.js';\nexport * from './Slider.js';\nexport * from './SliderBtn.js';\nexport * from './SliderCount.js';\nexport * from './SliderDrag.js';\nexport * from './SliderItem.js';\nexport * from './SliderProgress.js';\nexport * from './SliderDots.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/molecules/Sticky/Sticky.cjs

@@ -21,10 +21,10 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Sticky/Sticky.js
+// packages/ui/molecules/Sticky/Sticky.ts
 var Sticky_exports = {};
 __export(Sticky_exports, {
-  default: () => Sticky
+  Sticky: () => Sticky
 });
 module.exports = __toCommonJS(Sticky_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
@@ -80,8 +80,10 @@ var _Sticky = class extends import_js_toolkit.Base {
   }
   setSentinelSize() {
     const { instances } = this;
-    const index = instances.findIndex((instance) => instance === this);
-    const height = instances.slice(0, index).filter((instance) => this.closestRelativeElement(instance.$el).contains(this.$el)).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
+    const index = instances.indexOf(this);
+    const height = instances.slice(0, index).filter(
+      (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);
@@ -92,10 +94,11 @@ var _Sticky = class extends import_js_toolkit.Base {
       return;
     }
     const { instances } = this;
-    index = index ?? instances.findIndex((instance) => instance === this);
-    this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce((y, instance) => {
-      return y - instance.$refs.inner.offsetHeight;
-    }, this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1);
+    index = index ?? instances.indexOf(this);
+    this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce(
+      (y, instance) => y - instance.$refs.inner.offsetHeight,
+      this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1
+    );
   }
   closestRelativeElement(element) {
     let parent = element.parentElement;
@@ -123,3 +126,4 @@ __publicField(Sticky, "config", {
 });
 __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

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

package/molecules/Sticky/Sticky.d.ts

@@ -1,3 +1,6 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { Sentinel } from '../../primitives/index.js';
 /**
  * @typedef {Object} StickyRefs
  * @property {HTMLElement} inner
@@ -9,80 +12,64 @@
  * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options
  * @property {{ Sentinel: Sentinel[] }} $children
  */
-/**
- * @typedef {Sticky & StickyPrivateInterface} StickyInterface
- */
+export interface StickyProps extends BaseProps {
+    $refs: {
+        inner: HTMLElement;
+        sentinelRef: HTMLElement;
+    };
+    $options: {
+        zIndex: number;
+        hideWhenUp: boolean;
+        hideWhenDown: boolean;
+    };
+    $children: {
+        Sentinel: Sentinel[];
+    };
+}
 /**
  * Sticky class.
  */
-export default class Sticky extends Base {
+export declare class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        components: {
-            Sentinel: typeof Sentinel;
-        };
-        options: {
-            zIndex: {
-                type: NumberConstructor;
-                default: number;
-            };
-            hideWhenUp: BooleanConstructor;
-            hideWhenDown: BooleanConstructor;
-        };
-    };
+    static config: BaseConfig;
     /**
      * Holder for all instances.
-     * @type {Set<StickyInterface>}
      */
-    static instances: Set<StickyInterface>;
+    static instances: Set<Sticky>;
     /**
      * Is the component sticky?
-     * @type {boolean}
      */
     isSticky: boolean;
     /**
      * Is the component visible?
-     * @type {Boolean}
      */
     isVisible: boolean;
     /**
      * Set the Y value.
-     *
-     * @this    {StickyInterface}
-     * @param   {number} value
-     * @returns {void}
      */
-    set y(arg: number);
+    set y(value: number);
     /**
      * Get instances as array.
-     * @return {Array<StickyInterface>}
      */
-    get instances(): StickyInterface[];
+    get instances(): Sticky[];
     /**
      * Mounted hook.
-     * @this {StickyInterface}
      */
-    mounted(this: StickyInterface): void;
+    mounted(): void;
     /**
      * Resized hook.
-     * @this {StickyInterface}
-     * @returns {void}
      */
-    resized(this: StickyInterface): void;
+    resized(): void;
     /**
      * Destroyed hook.
-     * @this {StickyInterface}
      */
-    destroyed(this: StickyInterface): void;
+    destroyed(): void;
     /**
      * Scrolled hook.
-     * @this {StickyInterface}
      */
-    scrolled(this: StickyInterface, props: any): void;
+    scrolled(props: any): void;
     /**
      * Listen to the sentinel's `intersected` event to set the `isSticky` value.
      *
@@ -92,50 +79,25 @@ export default class Sticky extends Base {
     onSentinelIntersected([entry]: IntersectionObserverEntry[]): void;
     /**
      * Hide the sticky component when another one is sticky.
-     * @this {StickyInterface}
      */
-    hide(this: StickyInterface): void;
+    hide(): void;
     /**
      * Show the sticky component when the other one is not sticky anymore.
-     * @this {StickyInterface}
      */
-    show(this: StickyInterface): void;
+    show(): void;
     /**
      * Set the sentinel height based on the previous instances.
-     * @this {StickyInterface}
      */
-    setSentinelSize(this: StickyInterface): void;
+    setSentinelSize(): void;
     /**
      * Set the component's position.
      *
-     * @this    {StickyInterface}
      * @param   {number} [index] The instance index in all the pages' instances.
      * @returns {void}
      */
-    setPosition(this: StickyInterface, index?: number): void;
+    setPosition(index?: number): void;
     /**
      * Find the first parent which has a relative position.
-     *
-     * @param   {HTMLElement} element
-     * @returns {HTMLElement}
      */
     closestRelativeElement(element: HTMLElement): HTMLElement;
 }
-export type StickyRefs = {
-    inner: HTMLElement;
-    sentinelRef: HTMLElement;
-};
-export type StickyPrivateInterface = {
-    $refs: StickyRefs;
-    $options: {
-        zIndex: number;
-        hideWhenUp: boolean;
-        hideWhenDown: boolean;
-    };
-    $children: {
-        Sentinel: Sentinel[];
-    };
-};
-export type StickyInterface = Sticky & StickyPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";
-import { Sentinel } from "../../primitives/index.js";

package/molecules/Sticky/Sticky.js

@@ -1 +1,101 @@
-import{Base as o}from"@studiometa/js-toolkit";import{Sentinel as h}from"../../primitives/index.js";class n extends o{static config={name:"Sticky",refs:["inner","sentinelRef"],components:{Sentinel:h},options:{zIndex:{type:Number,default:100},hideWhenUp:Boolean,hideWhenDown:Boolean}};static instances=new Set;isSticky=!1;isVisible=!0;set y(e){this.$refs.inner.style.transform=`translateY(${e}px) translateZ(0px)`}get instances(){return Array.from(n.instances)}mounted(){n.instances.add(this),this.setSentinelSize()}resized(){this.setSentinelSize()}destroyed(){n.instances.delete(this)}scrolled(e){!this.isSticky||e.y===e.last.y||(e.direction.y==="DOWN"&&this.$options.hideWhenDown||e.direction.y==="UP"&&this.$options.hideWhenUp?this.hide():this.show())}onSentinelIntersected([e]){this.isSticky=e.isIntersecting&&e.boundingClientRect.y<0,this.setPosition()}hide(){!this.isVisible||(this.isVisible=!1,this.$el.classList.add("pointer-events-none"),this.instances.forEach((e,t)=>e.setPosition(t)))}show(){this.isVisible||(this.isVisible=!0,this.$el.classList.remove("pointer-events-none"),this.instances.forEach((e,t)=>e.setPosition(t)))}setSentinelSize(){const{instances:e}=this,t=e.findIndex(s=>s===this),i=e.slice(0,t).filter(s=>this.closestRelativeElement(s.$el).contains(this.$el)).reduce((s,l)=>s+l.$el.offsetHeight,0);this.$refs.sentinelRef.style.height=`${i+1}px`,this.$el.style.top=`${i}px`,this.$el.style.zIndex=String(this.$options.zIndex-t)}setPosition(e){if(!this.isSticky){this.y=0;return}const{instances:t}=this;e=e??t.findIndex(i=>i===this),this.y=t.slice(0,e).filter(i=>i.isSticky&&!i.isVisible).reduce((i,s)=>i-s.$refs.inner.offsetHeight,this.isVisible?0:this.$refs.inner.offsetHeight*-1)}closestRelativeElement(e){let t=e.parentElement;for(;getComputedStyle(t).position!=="relative"&&t.parentElement;)t=t.parentElement;return t}}export{n as default};
+import { Base } from "@studiometa/js-toolkit";
+import { Sentinel } from "../../primitives/index.js";
+class Sticky extends Base {
+  static config = {
+    name: "Sticky",
+    refs: ["inner", "sentinelRef"],
+    components: {
+      Sentinel
+    },
+    options: {
+      zIndex: {
+        type: Number,
+        default: 100
+      },
+      hideWhenUp: Boolean,
+      hideWhenDown: Boolean
+    }
+  };
+  static instances = /* @__PURE__ */ new Set();
+  isSticky = false;
+  isVisible = true;
+  set y(value) {
+    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
+  }
+  get instances() {
+    return Array.from(Sticky.instances);
+  }
+  mounted() {
+    Sticky.instances.add(this);
+    this.setSentinelSize();
+  }
+  resized() {
+    this.setSentinelSize();
+  }
+  destroyed() {
+    Sticky.instances.delete(this);
+  }
+  scrolled(props) {
+    if (!this.isSticky || props.y === props.last.y) {
+      return;
+    }
+    if (props.direction.y === "DOWN" && this.$options.hideWhenDown || props.direction.y === "UP" && this.$options.hideWhenUp) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  onSentinelIntersected([entry]) {
+    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
+    this.setPosition();
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.isVisible = false;
+    this.$el.classList.add("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  show() {
+    if (this.isVisible) {
+      return;
+    }
+    this.isVisible = true;
+    this.$el.classList.remove("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  setSentinelSize() {
+    const { instances } = this;
+    const index = instances.indexOf(this);
+    const height = instances.slice(0, index).filter(
+      (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);
+  }
+  setPosition(index) {
+    if (!this.isSticky) {
+      this.y = 0;
+      return;
+    }
+    const { instances } = this;
+    index = index ?? instances.indexOf(this);
+    this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce(
+      (y, instance) => y - instance.$refs.inner.offsetHeight,
+      this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1
+    );
+  }
+  closestRelativeElement(element) {
+    let parent = element.parentElement;
+    while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+}
+export {
+  Sticky
+};
+//# sourceMappingURL=Sticky.js.map

package/molecules/Sticky/Sticky.js.map

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

package/molecules/Sticky/index.cjs

@@ -0,0 +1,21 @@
+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/Sticky/index.ts
+var Sticky_exports = {};
+module.exports = __toCommonJS(Sticky_exports);
+__reExport(Sticky_exports, require("./Sticky.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/molecules/Sticky/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Sticky/index.ts"],
+  "sourcesContent": ["export * from './Sticky.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,yBAAd;",
+  "names": []
+}

package/molecules/Sticky/index.d.ts

@@ -0,0 +1 @@
+export * from './Sticky.js';

package/molecules/Sticky/index.js

@@ -0,0 +1,2 @@
+export * from "./Sticky.js";
+//# sourceMappingURL=index.js.map

package/molecules/Sticky/index.js.map

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

package/molecules/TableOfContent/TableOfContent.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,21 +15,20 @@ 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/TableOfContent/TableOfContent.js
+// packages/ui/molecules/TableOfContent/TableOfContent.ts
 var TableOfContent_exports = {};
 __export(TableOfContent_exports, {
-  default: () => TableOfContent
+  TableOfContent: () => TableOfContent
 });
 module.exports = __toCommonJS(TableOfContent_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
-var import_TableOfContentAnchor = __toESM(require("./TableOfContentAnchor.cjs"), 1);
+var import_TableOfContentAnchor = require("./TableOfContentAnchor.cjs");
 var TableOfContent = class extends import_js_toolkit.Base {
   mounted() {
     if (this.$options.withTemplate) {
@@ -48,7 +45,7 @@ var TableOfContent = class extends import_js_toolkit.Base {
       anchor.href = `#${section.id}`;
       anchor.innerHTML = section.textContent;
       anchor.dataset.component = "TableOfContentAnchor";
-      this.$refs.list.appendChild(li);
+      this.$refs.list.append(li);
     });
   }
 };
@@ -56,7 +53,7 @@ __publicField(TableOfContent, "config", {
   name: "TableOfContent",
   refs: ["itemTemplate", "list"],
   components: {
-    TableOfContentAnchor: import_TableOfContentAnchor.default
+    TableOfContentAnchor: import_TableOfContentAnchor.TableOfContentAnchor
   },
   options: {
     contentSelector: String,
@@ -64,3 +61,4 @@ __publicField(TableOfContent, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=TableOfContent.cjs.map

package/molecules/TableOfContent/TableOfContent.cjs.map

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