@studiometa/ui 0.2.3 → 0.2.6

package/molecules/Sticky/Sticky.js

@@ -1,107 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base } from "@studiometa/js-toolkit";
-import { Sentinel } from "../../primitives/index.js";
-const _Sticky = class extends Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "isSticky", false);
-    __publicField(this, "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.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);
-    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 != null ? 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);
-  }
-  closestRelativeElement(element) {
-    let parent = element.parentElement;
-    while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-};
-let Sticky = _Sticky;
-__publicField(Sticky, "config", {
-  name: "Sticky",
-  refs: ["inner", "sentinelRef"],
-  components: {
-    Sentinel
-  },
-  options: {
-    zIndex: {
-      type: Number,
-      default: 100
-    },
-    hideWhenUp: Boolean,
-    hideWhenDown: Boolean
-  }
-});
-__publicField(Sticky, "instances", /* @__PURE__ */ new Set());
-export {
-  Sticky as default
-};
+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};

package/molecules/Sticky/Sticky.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ *   Sticky component.
+ *
+ * @param array $attr
+ *   Custom attributes for the root element.
+ * @param array $innner_attr
+ *   Custom attributes for the inner element.
+ *
+ * @block $content
+ *   Use this block to set the content of the sticky element.
+ */
+#}
+
+{% set default_attributes = { data_component: 'Sticky', class: 'z-10 sticky top-0 w-full' } %}
+{% set attributes = attr|default({})|merge_html_attributes(default_attributes) %}
+
+{% set default_inner_attributes = { data_ref: 'inner', class:'transition duration-500 ease-out-expo' } %}
+{% set inner_attributes = inner_attr|default({})|merge_html_attributes(default_inner_attributes) %}
+
+<div {{ html_attributes(attributes) }}>
+  <div data-ref="sentinelRef"
+    data-component="Sentinel"
+    class="absolute bottom-full w-full h-px pointer-events-none"></div>
+  <div {{ html_attributes(inner_attributes) }}>
+    {% block content %}
+      {{ content ?? '' }}
+    {% endblock %}
+  </div>
+</div>

package/molecules/TableOfContent/TableOfContent.cjs

@@ -5,27 +5,20 @@ 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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;
@@ -36,6 +29,7 @@ var TableOfContent_exports = {};
 __export(TableOfContent_exports, {
   default: () => TableOfContent
 });
+module.exports = __toCommonJS(TableOfContent_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_TableOfContentAnchor = __toESM(require("./TableOfContentAnchor.cjs"), 1);
 var TableOfContent = class extends import_js_toolkit.Base {
@@ -69,5 +63,4 @@ __publicField(TableOfContent, "config", {
     withTemplate: Boolean
   }
 });
-module.exports = __toCommonJS(TableOfContent_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/TableOfContent.d.ts

@@ -43,7 +43,7 @@ export default class TableOfContent extends Base {
      * @this    {TableOfContentInterface}
      * @returns {void}
      */
-    generateAnchors(): void;
+    generateAnchors(this: TableOfContentInterface): void;
 }
 export type TableOfContentInterface = TableOfContent & {
     $refs: {

package/molecules/TableOfContent/TableOfContent.js

@@ -1,42 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base } from "@studiometa/js-toolkit";
-import TableOfContentAnchor from "./TableOfContentAnchor.js";
-class TableOfContent extends Base {
-  mounted() {
-    if (this.$options.withTemplate) {
-      this.generateAnchors();
-      this.$update();
-    }
-  }
-  generateAnchors() {
-    document.querySelectorAll(this.$options.contentSelector).forEach((section) => {
-      const tpl = document.createElement("div");
-      tpl.innerHTML = this.$refs.itemTemplate.innerHTML;
-      const li = tpl.querySelector("li");
-      const anchor = li.querySelector("a");
-      anchor.href = `#${section.id}`;
-      anchor.innerHTML = section.textContent;
-      anchor.dataset.component = "TableOfContentAnchor";
-      this.$refs.list.appendChild(li);
-    });
-  }
-}
-__publicField(TableOfContent, "config", {
-  name: "TableOfContent",
-  refs: ["itemTemplate", "list"],
-  components: {
-    TableOfContentAnchor
-  },
-  options: {
-    contentSelector: String,
-    withTemplate: Boolean
-  }
-});
-export {
-  TableOfContent as default
-};
+import{Base as r}from"@studiometa/js-toolkit";import i from"./TableOfContentAnchor.js";class l extends r{static config={name:"TableOfContent",refs:["itemTemplate","list"],components:{TableOfContentAnchor:i},options:{contentSelector:String,withTemplate:Boolean}};mounted(){this.$options.withTemplate&&(this.generateAnchors(),this.$update())}generateAnchors(){document.querySelectorAll(this.$options.contentSelector).forEach(t=>{const n=document.createElement("div");n.innerHTML=this.$refs.itemTemplate.innerHTML;const o=n.querySelector("li"),e=o.querySelector("a");e.href=`#${t.id}`,e.innerHTML=t.textContent,e.dataset.component="TableOfContentAnchor",this.$refs.list.appendChild(o)})}}export{l as default};

package/molecules/TableOfContent/TableOfContentAnchor.cjs

@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,6 +26,7 @@ var TableOfContentAnchor_exports = {};
 __export(TableOfContentAnchor_exports, {
   default: () => TableOfContentAnchor
 });
+module.exports = __toCommonJS(TableOfContentAnchor_exports);
 var import_atoms = require("../../atoms/index.cjs");
 var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
   get sentinel() {
@@ -61,5 +57,4 @@ __publicField(TableOfContentAnchor, "config", {
     }
   }
 });
-module.exports = __toCommonJS(TableOfContentAnchor_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/TableOfContentAnchor.js

@@ -1,39 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { AnchorScrollTo } from "../../atoms/index.js";
-class TableOfContentAnchor extends AnchorScrollTo {
-  get sentinel() {
-    return document.querySelector(this.targetSelector);
-  }
-  mounted() {
-    if (!this.sentinel) {
-      return;
-    }
-    this.observer = new IntersectionObserver(([entry]) => {
-      const shouldActivate = entry.isIntersecting && entry.boundingClientRect.y < 100 && entry.boundingClientRect.y > 100;
-      this.$el.classList.toggle(this.$options.activeClass, shouldActivate);
-      this.$emit("should-activate", shouldActivate);
-    });
-    this.observer.observe(this.sentinel);
-  }
-  destroyed() {
-    this.observer.disconnect();
-  }
-}
-__publicField(TableOfContentAnchor, "config", {
-  name: "TableOfContentAnchor",
-  emits: ["should-activate"],
-  options: {
-    activeClass: {
-      type: String,
-      default: "is-active"
-    }
-  }
-});
-export {
-  TableOfContentAnchor as default
-};
+import{AnchorScrollTo as s}from"../../atoms/index.js";class i extends s{static config={name:"TableOfContentAnchor",emits:["should-activate"],options:{activeClass:{type:String,default:"is-active"}}};get sentinel(){return document.querySelector(this.targetSelector)}mounted(){!this.sentinel||(this.observer=new IntersectionObserver(([e])=>{const t=e.isIntersecting&&e.boundingClientRect.y<100&&e.boundingClientRect.y>100;this.$el.classList.toggle(this.$options.activeClass,t),this.$emit("should-activate",t)}),this.observer.observe(this.sentinel))}destroyed(){this.observer.disconnect()}}export{i as default};

package/molecules/TableOfContent/index.cjs

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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);
 
 // packages/ui/molecules/TableOfContent/index.js
 var TableOfContent_exports = {};
@@ -32,7 +25,7 @@ __export(TableOfContent_exports, {
   TableOfContent: () => import_TableOfContent.default,
   TableOfContentAnchor: () => import_TableOfContentAnchor.default
 });
+module.exports = __toCommonJS(TableOfContent_exports);
 var import_TableOfContent = __toESM(require("./TableOfContent.cjs"), 1);
 var import_TableOfContentAnchor = __toESM(require("./TableOfContentAnchor.cjs"), 1);
-module.exports = __toCommonJS(TableOfContent_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/index.js

@@ -1,6 +1 @@
-import { default as default2 } from "./TableOfContent.js";
-import { default as default3 } from "./TableOfContentAnchor.js";
-export {
-  default2 as TableOfContent,
-  default3 as TableOfContentAnchor
-};
+import{default as o}from"./TableOfContent.js";import{default as f}from"./TableOfContentAnchor.js";export{o as TableOfContent,f as TableOfContentAnchor};

package/molecules/Tabs/Tabs.cjs

@@ -3,54 +3,30 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // packages/ui/molecules/Tabs/Tabs.js
 var Tabs_exports = {};
 __export(Tabs_exports, {
   default: () => Tabs
 });
+module.exports = __toCommonJS(Tabs_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Tabs = class extends import_js_toolkit.Base {
@@ -77,55 +53,51 @@ var Tabs = class extends import_js_toolkit.Base {
     });
     this.enableItem(this.items[index]);
   }
-  enableItem(item) {
-    return __async(this, null, function* () {
-      if (!item || item.isEnabled) {
-        return Promise.resolve(this);
-      }
-      item.isEnabled = true;
-      const { btn, content } = item;
-      const btnStyles = this.$options.styles.btn || {};
-      const contentStyles = this.$options.styles.content || {};
-      content.setAttribute("aria-hidden", "false");
-      this.$emit("enable", item);
-      return Promise.all([
-        (0, import_utils.transition)(btn, {
-          from: btnStyles.closed,
-          active: btnStyles.active,
-          to: btnStyles.open
-        }, "keep"),
-        (0, import_utils.transition)(content, {
-          from: contentStyles.closed,
-          active: contentStyles.active,
-          to: contentStyles.open
-        }, "keep")
-      ]).then(() => Promise.resolve(this));
-    });
+  async enableItem(item) {
+    if (!item || item.isEnabled) {
+      return Promise.resolve(this);
+    }
+    item.isEnabled = true;
+    const { btn, content } = item;
+    const btnStyles = this.$options.styles.btn || {};
+    const contentStyles = this.$options.styles.content || {};
+    content.setAttribute("aria-hidden", "false");
+    this.$emit("enable", item);
+    return Promise.all([
+      (0, import_utils.transition)(btn, {
+        from: btnStyles.closed,
+        active: btnStyles.active,
+        to: btnStyles.open
+      }, "keep"),
+      (0, import_utils.transition)(content, {
+        from: contentStyles.closed,
+        active: contentStyles.active,
+        to: contentStyles.open
+      }, "keep")
+    ]).then(() => Promise.resolve(this));
   }
-  disableItem(item) {
-    return __async(this, null, function* () {
-      if (!item || !item.isEnabled) {
-        return Promise.resolve(this);
-      }
-      item.isEnabled = false;
-      const { btn, content } = item;
-      const btnStyles = this.$options.styles.btn || {};
-      const contentStyles = this.$options.styles.content || {};
-      content.setAttribute("aria-hidden", "true");
-      this.$emit("disable", item);
-      return Promise.all([
-        (0, import_utils.transition)(btn, {
-          from: btnStyles.open,
-          active: btnStyles.active,
-          to: btnStyles.closed
-        }, "keep"),
-        (0, import_utils.transition)(content, {
-          from: contentStyles.open,
-          active: contentStyles.active,
-          to: contentStyles.closed
-        }, "keep")
-      ]).then(() => Promise.resolve(this));
-    });
+  async disableItem(item) {
+    if (!item || !item.isEnabled) {
+      return Promise.resolve(this);
+    }
+    item.isEnabled = false;
+    const { btn, content } = item;
+    const btnStyles = this.$options.styles.btn || {};
+    const contentStyles = this.$options.styles.content || {};
+    content.setAttribute("aria-hidden", "true");
+    this.$emit("disable", item);
+    return Promise.all([
+      (0, import_utils.transition)(btn, {
+        from: btnStyles.open,
+        active: btnStyles.active,
+        to: btnStyles.closed
+      }, "keep"),
+      (0, import_utils.transition)(content, {
+        from: contentStyles.open,
+        active: contentStyles.active,
+        to: contentStyles.closed
+      }, "keep")
+    ]).then(() => Promise.resolve(this));
   }
 };
 __publicField(Tabs, "config", {
@@ -144,9 +116,9 @@ __publicField(Tabs, "config", {
             visibility: "hidden"
           }
         }
-      })
+      }),
+      merge: true
     }
   }
 });
-module.exports = __toCommonJS(Tabs_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Tabs/Tabs.d.ts

@@ -47,6 +47,7 @@ export default class Tabs extends Base {
                  * @return {TabsStylesOption}
                  */
                 default: () => TabsStylesOption;
+                merge: boolean;
             };
         };
     };
@@ -55,7 +56,7 @@ export default class Tabs extends Base {
      * @this {TabsInterface}
      * @return {void}
      */
-    mounted(): void;
+    mounted(this: TabsInterface): void;
     items: any;
     /**
      * Switch tab on button click.
@@ -65,7 +66,7 @@ export default class Tabs extends Base {
      * @param  {number} index The index of the clicked button.
      * @return {void}
      */
-    onBtnClick(event: Event, index: number): void;
+    onBtnClick(this: TabsInterface, event: Event, index: number): void;
     /**
      * Enable the given tab and its associated content.
      *
@@ -73,7 +74,7 @@ export default class Tabs extends Base {
      * @param  {TabItem}                item The item to enable.
      * @return {Promise<TabsInterface>}      Tabs instance.
      */
-    enableItem(item: TabItem): Promise<TabsInterface>;
+    enableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
     /**
      * Disable the given tab and its associated content.
      *
@@ -81,7 +82,7 @@ export default class Tabs extends Base {
      * @param  {TabItem}                item The item to disable.
      * @return {Promise<TabsInterface>}      The Tabs instance.
      */
-    disableItem(item: TabItem): Promise<TabsInterface>;
+    disableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
 }
 export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
 export type TabItem = {