@studiometa/ui 1.0.0-beta.1 → 1.0.0-rc.1

package/Slider/SliderDots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderDots.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   * @returns {HTMLButtonElement[]}\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = 0;\n\n  /**\n   * Update dots classes according to the new index.\n   * @param   {number} index\n   * @returns {void}\n   */\n  update(index: number) {\n    this.leave(this.$refs.dots[this.currentIndex]);\n    this.enter(this.$refs.dots[index]);\n    this.currentIndex = index;\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick({ index }: { index: number }) {\n    this.$parent.goTo(index);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,MAAM,GAAsB;AACxC,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n  $refs: {\n    dots: HTMLButtonElement[];\n  };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n  T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDots',\n    refs: ['dots[]'],\n  };\n\n  /**\n   * Get target.\n   */\n  get target() {\n    return this.$refs.dots;\n  }\n\n  /**\n   * The current active index.\n   */\n  currentIndex = -1;\n\n  /**\n   * Update dots classes according to the new index.\n   */\n  update(index: number) {\n    if (index !== this.currentIndex) {\n      this.leave(this.$refs.dots[this.currentIndex]);\n      this.enter(this.$refs.dots[index]);\n      this.currentIndex = index;\n    }\n  }\n\n  /**\n   * Go to the given index on dot click.\n   */\n  onDotsClick({ index }: { index: number }) {\n    this.$parent.goTo(index);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA,EAKf,OAAO,OAAe;AACpB,QAAI,UAAU,KAAK,cAAc;AAC/B,WAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,WAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,MAAM,GAAsB;AACxC,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
   "names": []
 }

package/Slider/SliderDrag.d.ts

@@ -21,8 +21,6 @@ export declare class SliderDrag<T extends BaseProps = BaseProps> extends SliderD
     get shouldPreventScroll(): boolean;
     /**
      * Touchmove handler.
-     * @param   {TouchEvent} event
-     * @returns {void}
      */
     onTouchmove({ event }: {
         event: TouchEvent;

package/Slider/SliderDrag.js

@@ -23,8 +23,6 @@ class SliderDrag extends withDrag(Base) {
   }
   /**
    * Touchmove handler.
-   * @param   {TouchEvent} event
-   * @returns {void}
    */
   onTouchmove({ event }) {
     if (this.shouldPreventScroll) {

package/Slider/SliderDrag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderDrag.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   * @param   {TouchEvent} event\n   * @returns {void}\n   */\n  onTouchmove({ event }: { event: TouchEvent }) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
-  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,EAAE,MAAM,GAA0B;AAC5C,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n  $options: {\n    scrollLockThreshold: number;\n  };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n  T & SliderDragProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderDrag',\n    emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n    options: {\n      scrollLockThreshold: {\n        type: Number,\n        default: 10,\n      },\n    },\n  };\n\n  /**\n   * Test if the scroll should be blocked. Used with the touchmove event to prevent\n   * scrolling vertically when trying to drag the slider.\n   */\n  get shouldPreventScroll() {\n    const { distance } = this.$services.get('dragged') as DragServiceProps;\n    return (\n      Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n      Math.abs(distance.x) > Math.abs(distance.y)\n    );\n  }\n\n  /**\n   * Touchmove handler.\n   */\n  onTouchmove({ event }: { event: TouchEvent }) {\n    if (this.shouldPreventScroll) {\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Emit drag events.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(props.mode, props);\n  }\n}\n"],
+  "mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,MAAM,GAA0B;AAC5C,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
   "names": []
 }

package/Slider/SliderItem.d.ts

@@ -1,27 +1,21 @@
 import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
-declare const SliderItem_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithIntersectionObserverInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithIntersectionObserverProps>;
+export interface SliderItemProps extends BaseProps {
+}
 /**
- * Manage a slider item and its state transition.
+ * SliderItem class.
  */
-export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderItem_base<T> {
+export declare class SliderItem<T extends BaseProps = BaseProps> extends Base<T & SliderItemProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
-    /**
-     * Wether the SliderItem is visible or not.
-     * @type {boolean}
-     */
-    isVisible: boolean;
     /**
      * The SliderItem `x` position.
-     * @type {number}
      */
     x: number;
     /**
      * The smoothed `x` position.
-     * @type {number}
      */
     dampedX: number;
     /**
@@ -37,7 +31,13 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
         width: number;
         height: number;
     };
+    /**
+     * Wether the slider item size should be evaluated or not.
+     */
     shouldEvaluateRect: boolean;
+    /**
+     * Size of the slider item.
+     */
     get rect(): {
         x: number;
         y: number;
@@ -60,16 +60,11 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
      * Reset position to `0` on destroy.
      */
     destroyed(): void;
-    /**
-     * Intersected hook.
-     */
-    intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]): void;
     /**
      * Ticked hook.
      * @todo create AbstractSliderItem with `render` method
      * @todo add state to SliderItem
      * @todo add origin to SliderItem
-     * @returns {void}
      */
     ticked(): void;
     /**
@@ -96,15 +91,4 @@ export declare class SliderItem<T extends BaseProps = BaseProps> extends SliderI
      * Render the component.
      */
     render(): void;
-    /**
-     * Check if SliderItem is partially visible for the given target position.
-     */
-    willBeVisible(targetPosition: number): boolean;
-    /**
-     * Check if SliderItem is fully visible for the given target position.
-     * @param   {number} targetPosition
-     * @returns {boolean}
-     */
-    willBeFullyVisible(targetPosition: any): boolean;
 }
-export {};

package/Slider/SliderItem.js

@@ -1,35 +1,31 @@
-import { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
+import { Base } from "@studiometa/js-toolkit";
 import { damp, domScheduler, transform } from "@studiometa/js-toolkit/utils";
-class SliderItem extends withIntersectionObserver(Base, {
-  threshold: [0, 1]
-}) {
+class SliderItem extends Base {
   /**
    * Config.
    */
   static config = {
-    name: "SliderItem",
-    emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
+    name: "SliderItem"
   };
-  /**
-   * Wether the SliderItem is visible or not.
-   * @type {boolean}
-   */
-  isVisible = false;
   /**
    * The SliderItem `x` position.
-   * @type {number}
    */
   x = 0;
   /**
    * The smoothed `x` position.
-   * @type {number}
    */
   dampedX = 0;
   /**
    * Item original position.
    */
   __rect;
+  /**
+   * Wether the slider item size should be evaluated or not.
+   */
   shouldEvaluateRect = false;
+  /**
+   * Size of the slider item.
+   */
   get rect() {
     if (!this.__rect || this.shouldEvaluateRect) {
       this.shouldEvaluateRect = false;
@@ -62,25 +58,11 @@ class SliderItem extends withIntersectionObserver(Base, {
   destroyed() {
     this.moveInstantly(0);
   }
-  /**
-   * Intersected hook.
-   */
-  intersected([{ intersectionRatio, isIntersecting }]) {
-    if (intersectionRatio >= 1) {
-      this.$emit("is-fully-visible");
-    } else if (intersectionRatio > 0) {
-      this.$emit("is-partially-visible");
-    } else {
-      this.$emit("is-hidden");
-    }
-    this.isVisible = isIntersecting;
-  }
   /**
    * Ticked hook.
    * @todo create AbstractSliderItem with `render` method
    * @todo add state to SliderItem
    * @todo add origin to SliderItem
-   * @returns {void}
    */
   ticked() {
     this.dampedX = damp(this.x, this.dampedX, 0.1, 1e-5);
@@ -134,20 +116,6 @@ class SliderItem extends withIntersectionObserver(Base, {
       transform(this.$el, { x: this.dampedX });
     });
   }
-  /**
-   * Check if SliderItem is partially visible for the given target position.
-   */
-  willBeVisible(targetPosition) {
-    return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
-  }
-  /**
-   * Check if SliderItem is fully visible for the given target position.
-   * @param   {number} targetPosition
-   * @returns {boolean}
-   */
-  willBeFullyVisible(targetPosition) {
-    return this.rect.x + targetPosition < window.innerWidth && this.rect.x + targetPosition > 0 && this.rect.x + targetPosition + this.rect.width < window.innerWidth && this.rect.x + targetPosition + this.rect.width > 0;
-  }
 }
 export {
   SliderItem

package/Slider/SliderItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderItem.ts"],
-  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n  threshold: [0, 1],\n})<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n    emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n  };\n\n  /**\n   * Wether the SliderItem is visible or not.\n   * @type {boolean}\n   */\n  isVisible = false;\n\n  /**\n   * The SliderItem `x` position.\n   * @type {number}\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   * @type {number}\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  __rect: {\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  shouldEvaluateRect = false;\n\n  get rect() {\n    if (!this.__rect || this.shouldEvaluateRect) {\n      this.shouldEvaluateRect = false;\n      const x = this.x * -1;\n      const rect = this.$el.getBoundingClientRect().toJSON();\n      this.__rect = {\n        ...rect,\n        left: rect.left + x,\n        right: rect.left + x + rect.width,\n        x: rect.left + x,\n      };\n    }\n\n    return this.__rect;\n  }\n\n  /**\n   * Mounted hook\n   */\n  mounted() {\n    this.setAccessibilityAttributes();\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.shouldEvaluateRect = true;\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Intersected hook.\n   */\n  intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]) {\n    if (intersectionRatio >= 1) {\n      this.$emit('is-fully-visible');\n    } else if (intersectionRatio > 0) {\n      this.$emit('is-partially-visible');\n    } else {\n      this.$emit('is-hidden');\n    }\n\n    this.isVisible = isIntersecting;\n  }\n\n  /**\n   * Ticked hook.\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   * @returns {void}\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'slide');\n    this.$el.setAttribute('aria-label', this.$id);\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition: number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition: number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n\n  /**\n   * Check if SliderItem is partially visible for the given target position.\n   */\n  willBeVisible(targetPosition: number) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n      this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n    );\n  }\n\n  /**\n   * Check if SliderItem is fully visible for the given target position.\n   * @param   {number} targetPosition\n   * @returns {boolean}\n   */\n  willBeFullyVisible(targetPosition) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth &&\n      this.rect.x + targetPosition > 0 &&\n      this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n      this.rect.x + targetPosition + this.rect.width > 0\n    );\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface SliderItemProps extends BaseProps {}\n\n/**\n * SliderItem class.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends Base<T & SliderItemProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n  };\n\n  /**\n   * The SliderItem `x` position.\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  __rect: {\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  /**\n   * Wether the slider item size should be evaluated or not.\n   */\n  shouldEvaluateRect = false;\n\n  /**\n   * Size of the slider item.\n   */\n  get rect() {\n    if (!this.__rect || this.shouldEvaluateRect) {\n      this.shouldEvaluateRect = false;\n      const x = this.x * -1;\n      const rect = this.$el.getBoundingClientRect().toJSON();\n      this.__rect = {\n        ...rect,\n        left: rect.left + x,\n        right: rect.left + x + rect.width,\n        x: rect.left + x,\n      };\n    }\n\n    return this.__rect;\n  }\n\n  /**\n   * Mounted hook\n   */\n  mounted() {\n    this.setAccessibilityAttributes();\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.shouldEvaluateRect = true;\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Ticked hook.\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'slide');\n    this.$el.setAttribute('aria-label', this.$id);\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition: number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition: number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,MAAM,cAAc,iBAAiB;AAOvC,MAAM,mBAAoD,KAA0B;AAAA;AAAA;AAAA;AAAA,EAIzF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV;AAAA;AAAA;AAAA;AAAA,EAcA,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAKrB,IAAI,OAAO;AACT,QAAI,CAAC,KAAK,UAAU,KAAK,oBAAoB;AAC3C,WAAK,qBAAqB;AAC1B,YAAM,IAAI,KAAK,IAAI;AACnB,YAAM,OAAO,KAAK,IAAI,sBAAsB,EAAE,OAAO;AACrD,WAAK,SAAS;AAAA,QACZ,GAAG;AAAA,QACH,MAAM,KAAK,OAAO;AAAA,QAClB,OAAO,KAAK,OAAO,IAAI,KAAK;AAAA,QAC5B,GAAG,KAAK,OAAO;AAAA,MACjB;AAAA,IACF;AAEA,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,2BAA2B;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,qBAAqB;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,cAAc,CAAC;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS;AACP,SAAK,UAAU,KAAK,KAAK,GAAG,KAAK,SAAS,KAAK,IAAO;AACtD,SAAK,OAAO;AAEZ,QAAI,KAAK,YAAY,KAAK,GAAG;AAC3B,WAAK,UAAU,QAAQ,QAAQ;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,6BAA6B;AAC3B,SAAK,IAAI,aAAa,QAAQ,OAAO;AACrC,SAAK,IAAI,aAAa,wBAAwB,OAAO;AACrD,SAAK,IAAI,aAAa,cAAc,KAAK,GAAG;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,SAAK,IAAI,UAAU,IAAI,WAAW;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,SAAK,IAAI,UAAU,OAAO,WAAW;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,KAAK,gBAAwB;AAC3B,SAAK,IAAI;AAET,QAAI,CAAC,KAAK,UAAU,IAAI,QAAQ,GAAG;AACjC,WAAK,UAAU,OAAO,QAAQ;AAAA,IAChC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc,gBAAwB;AACpC,SAAK,IAAI;AACT,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,iBAAa,MAAM,MAAM;AACvB,gBAAU,KAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,CAAC;AAAA,IACzC,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/Tabs/Tabs.twig

@@ -1,7 +1,68 @@
-<div data-component="Tabs" data-option-styles='{ "btn": { "open": { "borderBottomColor": "#fff" } } }'>
+{#
+/**
+ * @file
+ * Tabs component.
+ *
+ * @param array $items
+ * @param array $attr
+ *   Custom attributes for the root element.
+ *
+ * @block $title_wrapper
+ * @block $title
+ * @block $content_wrapper
+ * @block $content
+ */
+#}
+
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      data_component: 'Tabs',
+      data_option_styles: {
+        btn: {
+          open: {
+            borderBottomColor: '#fff'
+          }
+        }
+      }
+    },
+    {}
+  )
+%}
+
+{% set btn_attributes =
+  merge_html_attributes(
+    btn_attr ?? null,
+    {
+      type: 'button',
+      data_ref: 'btn[]',
+      style: {
+        borderBottom: '1px solid transparent'
+      }
+    },
+    {}
+  )
+%}
+
+{% set content_attributes =
+  merge_html_attributes(
+    content_attr ?? null,
+    {
+      data_ref: 'content[]',
+      aria_hidden: 'false'
+    },
+    {}
+  )
+%}
+
+<div {{ html_attributes(attributes) }}>
   {% block title_wrapper %}
     {% for item in items %}
-      <button data-ref="btn[]" style="border-bottom: 1px solid transparent;">
+      {% set current_btn_attributes =
+        merge_html_attributes(item.btn_attr ?? null, btn_attributes)
+      %}
+      <button {{ html_attributes(current_btn_attributes) }}>
         {% block title %}
           {{ item.title }}
         {% endblock %}
@@ -9,12 +70,15 @@
     {% endfor %}
   {% endblock %}
   {% block content_wrapper %}
-      {% for item in items %}
-        <div data-ref="content[]" aria-hidden="false">
-          {% block content %}
-            {{ item.content }}
-          {% endblock %}
-        </div>
-      {% endfor %}
+    {% for item in items %}
+      {% set current_content_attributes =
+        merge_html_attributes(item.content_attr ?? null, content_attributes)
+      %}
+      <div {{ html_attributes(current_content_attributes) }}>
+        {% block content %}
+          {{ item.content }}
+        {% endblock %}
+      </div>
+    {% endfor %}
   {% endblock %}
 </div>

package/decorators/withTransition.d.ts

@@ -17,6 +17,10 @@ export interface TransitionInterface extends BaseInterface {
      * Get the transition target.
      */
     get target(): HTMLElement | HTMLElement[];
+    /**
+     * Get the group targets.
+     */
+    get targets(): HTMLElement[];
     /**
      * Trigger the enter transition.
      */

package/decorators/withTransition.js

@@ -1,5 +1,5 @@
 import { getInstances } from "@studiometa/js-toolkit";
-import { transition } from "@studiometa/js-toolkit/utils";
+import { nextFrame, removeClass, transition } from "@studiometa/js-toolkit/utils";
 function withTransition(BaseClass) {
   class Transition extends BaseClass {
     /**
@@ -25,59 +25,54 @@ function withTransition(BaseClass) {
     get target() {
       return this.$el;
     }
+    /**
+     * Get the group targets.
+     */
+    get targets() {
+      const { group } = this.$options;
+      const targets = [this.target];
+      if (group) {
+        for (const instance of getInstances(this.constructor)) {
+          if (instance !== this && instance.$options.group === group) {
+            targets.push(instance.target);
+          }
+        }
+      }
+      return targets.flat();
+    }
     /**
      * Trigger the enter transition.
      */
-    async enter(target, { dispatch = true } = {}) {
+    async enter(target) {
       const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
-      await Promise.all([
-        transition(
-          target ?? this.target,
-          {
-            // eslint-disable-next-line prefer-template
-            from: (leaveTo + " " + enterFrom).trim(),
-            active: enterActive,
-            to: enterTo
-          },
-          enterKeep ? "keep" : void 0
-        ),
-        dispatch && this.dispatch("enter")
-      ]);
+      removeClass(target ?? this.targets, leaveTo);
+      await nextFrame();
+      await transition(
+        target ?? this.targets,
+        {
+          from: enterFrom,
+          active: enterActive,
+          to: enterTo
+        },
+        enterKeep ? "keep" : void 0
+      );
     }
     /**
      * Trigger the leave transition.
      */
-    async leave(target, { dispatch = true } = {}) {
+    async leave(target) {
       const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
-      await Promise.all([
-        transition(
-          target ?? this.target,
-          {
-            // eslint-disable-next-line prefer-template
-            from: (enterTo + " " + leaveFrom).trim(),
-            active: leaveActive,
-            to: leaveTo
-          },
-          leaveKeep ? "keep" : void 0
-        ),
-        dispatch && this.dispatch("leave")
-      ]);
-    }
-    /**
-     * Dispatch the callback to related instances.
-     */
-    async dispatch(method) {
-      const { group } = this.$options;
-      if (!group) {
-        return;
-      }
-      const promises = [];
-      for (const instance of getInstances(Transition)) {
-        if (instance !== this && instance.$options.group === group) {
-          promises.push(instance[method](void 0, { dispatch: false }));
-        }
-      }
-      await Promise.all(promises);
+      removeClass(target ?? this.targets, enterTo);
+      await nextFrame();
+      await transition(
+        target ?? this.targets,
+        {
+          from: leaveFrom,
+          active: leaveActive,
+          to: leaveTo
+        },
+        leaveKeep ? "keep" : void 0
+      );
     }
   }
   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 { 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   * 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     * Trigger the enter transition.\n     */\n    async enter(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n\n      await Promise.all([\n        transition(\n          target ?? this.target,\n          {\n            // eslint-disable-next-line prefer-template\n            from: (leaveTo + ' ' + enterFrom).trim(),\n            active: enterActive as string,\n            to: enterTo as string,\n          },\n          enterKeep ? 'keep' : undefined,\n        ),\n        dispatch && this.dispatch('enter'),\n      ]);\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n\n      await Promise.all([\n        transition(\n          target ?? this.target,\n          {\n            // eslint-disable-next-line prefer-template\n            from: (enterTo + ' ' + leaveFrom).trim(),\n            active: leaveActive as string,\n            to: leaveTo as string,\n          },\n          leaveKeep ? 'keep' : undefined,\n        ),\n        dispatch && this.dispatch('leave'),\n      ]);\n    }\n\n    /**\n     * Dispatch the callback to related instances.\n     */\n    async dispatch(method: 'enter' | 'leave') {\n      const { group } = this.$options;\n\n      if (!group) {\n        return;\n      }\n\n      const promises = [];\n\n      for (const instance of getInstances(Transition)) {\n        if (instance !== this && instance.$options.group === group) {\n          promises.push(instance[method](undefined, { dispatch: false }));\n        }\n      }\n\n      await Promise.all(promises);\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAyCpB,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,MAAM,MAAM,QAAsC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAkB;AACzF,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM,QAAQ,IAAI;AAAA,QAChB;AAAA,UACE,UAAU,KAAK;AAAA,UACf;AAAA;AAAA,YAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,YACvC,QAAQ;AAAA,YACR,IAAI;AAAA,UACN;AAAA,UACA,YAAY,SAAS;AAAA,QACvB;AAAA,QACA,YAAY,KAAK,SAAS,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAsC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAkB;AACzF,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM,QAAQ,IAAI;AAAA,QAChB;AAAA,UACE,UAAU,KAAK;AAAA,UACf;AAAA;AAAA,YAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,YACvC,QAAQ;AAAA,YACR,IAAI;AAAA,UACN;AAAA,UACA,YAAY,SAAS;AAAA,QACvB;AAAA,QACA,YAAY,KAAK,SAAS,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS,QAA2B;AACxC,YAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AAEA,YAAM,WAAW,CAAC;AAElB,iBAAW,YAAY,aAAa,UAAU,GAAG;AAC/C,YAAI,aAAa,QAAQ,SAAS,SAAS,UAAU,OAAO;AAC1D,mBAAS,KAAK,SAAS,MAAM,EAAE,QAAW,EAAE,UAAU,MAAM,CAAC,CAAC;AAAA,QAChE;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,QAAQ;AAAA,IAC5B;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   * 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;",
   "names": []
 }

package/index.d.ts

@@ -21,6 +21,5 @@ export * from './ScrollReveal/index.js';
 export * from './Sentinel/index.js';
 export * from './Slider/index.js';
 export * from './Sticky/index.js';
-export * from './TableOfContent/index.js';
 export * from './Tabs/index.js';
 export * from './Transition/index.js';

package/index.js

@@ -21,7 +21,6 @@ export * from "./ScrollReveal/index.js";
 export * from "./Sentinel/index.js";
 export * from "./Slider/index.js";
 export * from "./Sticky/index.js";
-export * from "./TableOfContent/index.js";
 export * from "./Tabs/index.js";
 export * from "./Transition/index.js";
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../packages/ui/index.ts"],
-  "sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './TableOfContent/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-rc.1",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,10 +29,11 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "deepmerge": "^4.3.1"
+    "deepmerge": "^4.3.1",
+    "morphdom": "^2.7.5"
   },
   "devDependencies": {
-    "@studiometa/js-toolkit": "^3.0.0"
+    "@studiometa/js-toolkit": "3.0.2"
   },
   "peerDependencies": {
     "@studiometa/js-toolkit": "^3.0.0"

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Studio Meta
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/TableOfContent/TableOfContent.d.ts

@@ -1,39 +0,0 @@
-import { Base } from '@studiometa/js-toolkit';
-import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
-import { TableOfContentAnchor } from './TableOfContentAnchor.js';
-export interface TableOfContentProps extends BaseProps {
-    $refs: {
-        itemTemplate: HTMLTemplateElement;
-        list: HTMLUListElement;
-    };
-    $options: {
-        contentSelector: string;
-        withTemplate: boolean;
-    };
-    $children: {
-        TableOfContentAnchor: TableOfContentAnchor[];
-    };
-}
-declare const TableOfContent_base: import("@studiometa/js-toolkit").BaseDecorator<import("../decorators/withDeprecation.js").DeprecationInterface, Base<BaseProps>, import("../decorators/withDeprecation.js").DeprecationProps>;
-/**
- * TableOfContent class.
- * @deprecated
- */
-export declare class TableOfContent<T extends BaseProps = BaseProps> extends TableOfContent_base<T & TableOfContentProps> {
-    /**
-     * Config.
-     */
-    static config: BaseConfig;
-    /**
-     * Generate anchors on mount and update the component to instantiate the
-     * `TableOfContentAnchor` components.
-     */
-    mounted(): void;
-    /**
-     * Generate all anchors.
-     * @todo Read anchor template from a ref?
-     * @todo Better API to easily override the template function, maybe a `render` function?
-     */
-    generateAnchors(): void;
-}
-export {};