@studiometa/ui 0.2.12 → 0.2.14

package/molecules/TableOfContent/TableOfContent.d.ts

@@ -1,37 +1,30 @@
-/**
- * @typedef {TableOfContent & {
- *   $refs: {
- *     itemTemplate: HTMLTemplateElement,
- *     list: HTMLUListElement
- *   },
- *   $options: {
- *     contentSelector: string,
- *     withTemplate: boolean,
- *   }
- * }} TableOfContentInterface
- */
+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[];
+    };
+}
 /**
  * TableOfContent class.
  */
-export default class TableOfContent extends Base {
+export declare class TableOfContent<T extends BaseProps = BaseProps> extends Base<T & TableOfContentProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        components: {
-            TableOfContentAnchor: typeof TableOfContentAnchor;
-        };
-        options: {
-            contentSelector: StringConstructor;
-            withTemplate: BooleanConstructor;
-        };
-    };
+    static config: BaseConfig;
     /**
      * Generate anchors on mount and update the component to instantiate the
      * `TableOfContentAnchor` components.
-     * @returns {void}
      */
     mounted(): void;
     /**
@@ -39,21 +32,6 @@ export default class TableOfContent extends Base {
      *
      * @todo Read anchor template from a ref?
      * @todo Better API to easily override the template function, maybe a `render` function?
-     *
-     * @this    {TableOfContentInterface}
-     * @returns {void}
      */
-    generateAnchors(this: TableOfContentInterface): void;
+    generateAnchors(): void;
 }
-export type TableOfContentInterface = TableOfContent & {
-    $refs: {
-        itemTemplate: HTMLTemplateElement;
-        list: HTMLUListElement;
-    };
-    $options: {
-        contentSelector: string;
-        withTemplate: boolean;
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
-import TableOfContentAnchor from "./TableOfContentAnchor.js";

package/molecules/TableOfContent/TableOfContent.js

@@ -1 +1,42 @@
-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};
+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.append(li);
+    });
+  }
+}
+__publicField(TableOfContent, "config", {
+  name: "TableOfContent",
+  refs: ["itemTemplate", "list"],
+  components: {
+    TableOfContentAnchor
+  },
+  options: {
+    contentSelector: String,
+    withTemplate: Boolean
+  }
+});
+export {
+  TableOfContent
+};

package/molecules/TableOfContent/TableOfContentAnchor.cjs

@@ -21,14 +21,18 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/TableOfContent/TableOfContentAnchor.js
+// packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts
 var TableOfContentAnchor_exports = {};
 __export(TableOfContentAnchor_exports, {
-  default: () => TableOfContentAnchor
+  TableOfContentAnchor: () => TableOfContentAnchor
 });
 module.exports = __toCommonJS(TableOfContentAnchor_exports);
 var import_atoms = require("../../atoms/index.cjs");
 var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "__observer");
+  }
   get sentinel() {
     return document.querySelector(this.targetSelector);
   }
@@ -36,15 +40,15 @@ var TableOfContentAnchor = class extends import_atoms.AnchorScrollTo {
     if (!this.sentinel) {
       return;
     }
-    this.observer = new IntersectionObserver(([entry]) => {
+    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);
+    this.__observer.observe(this.sentinel);
   }
   destroyed() {
-    this.observer.disconnect();
+    this.__observer.disconnect();
   }
 };
 __publicField(TableOfContentAnchor, "config", {

package/molecules/TableOfContent/TableOfContentAnchor.d.ts

@@ -1,36 +1,33 @@
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AnchorScrollTo } from '../../atoms/index.js';
+export interface TableOfContentAnchorProps extends BaseProps {
+    $options: {
+        activeClass: string;
+    };
+}
 /**
  * TableOfContentAnchor class.
  */
-export default class TableOfContentAnchor extends AnchorScrollTo {
+export declare class TableOfContentAnchor<T extends BaseProps = BaseProps> extends AnchorScrollTo<T & TableOfContentAnchorProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        emits: string[];
-        options: {
-            activeClass: {
-                type: StringConstructor;
-                default: string;
-            };
-        };
-    };
+    static config: BaseConfig;
+    /**
+     * Observer.
+     * @private
+     */
+    __observer: IntersectionObserver;
     /**
      * Get the sentinel.
-     * @returns {HTMLElement}
      */
     get sentinel(): HTMLElement;
     /**
      * Init observer on mount.
-     * @returns {void}
      */
     mounted(): void;
-    observer: IntersectionObserver;
     /**
      * Destroy observer on destroy.
-     *
-     * @returns {void}
      */
     destroyed(): void;
 }
-import { AnchorScrollTo } from "../../atoms/index.js";

package/molecules/TableOfContent/TableOfContentAnchor.js

@@ -1 +1,43 @@
-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};
+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 {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "__observer");
+  }
+  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
+};

package/molecules/TableOfContent/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,16 +10,12 @@ 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/TableOfContent/index.js
+// packages/ui/molecules/TableOfContent/index.ts
 var TableOfContent_exports = {};
-__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);
+__reExport(TableOfContent_exports, require("./TableOfContent.cjs"), module.exports);
+__reExport(TableOfContent_exports, require("./TableOfContentAnchor.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/index.d.ts

@@ -1,2 +1,2 @@
-export { default as TableOfContent } from "./TableOfContent.js";
-export { default as TableOfContentAnchor } from "./TableOfContentAnchor.js";
+export * from './TableOfContent.js';
+export * from './TableOfContentAnchor.js';

package/molecules/TableOfContent/index.js

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

package/molecules/Tabs/Tabs.cjs

@@ -21,15 +21,19 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Tabs/Tabs.js
+// packages/ui/molecules/Tabs/Tabs.ts
 var Tabs_exports = {};
 __export(Tabs_exports, {
-  default: () => Tabs
+  Tabs: () => 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 {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "items");
+  }
   mounted() {
     this.items = this.$refs.btn.map((btn, index) => {
       const id = `${this.$id}-${index}`;
@@ -64,16 +68,24 @@ var Tabs = class extends import_js_toolkit.Base {
     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")
+      (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 disableItem(item) {
@@ -87,16 +99,24 @@ var Tabs = class extends import_js_toolkit.Base {
     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")
+      (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));
   }
 };

package/molecules/Tabs/Tabs.d.ts

@@ -1,108 +1,46 @@
-/**
- * @typedef {import('@studiometa/js-toolkit/Base').BaseOptions} BaseOptions
- */
-/**
- * @typedef {Object} TabItem
- * @property {HTMLElement} btn
- * @property {HTMLElement} content
- * @property {Boolean} isEnabled
- */
-/**
- * @typedef {Object} TabsRefs
- * @property {HTMLElement[]} btn
- * @property {HTMLElement[]} content
- */
-/**
- * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} TabsStates
- * @typedef {Partial<Record<keyof TabsRefs, TabsStates>>} TabsStylesOption
- */
-/**
- * @typedef {Object} TabsOptions
- * @property {TabsStylesOption} styles
- */
-/**
- * @typedef {Object} TabsPrivateInterface
- * @property {TabsOptions} $options
- * @property {TabsRefs} $refs
- * @property {Array<TabItem>} items
- */
-/**
- * @typedef {Tabs & TabsPrivateInterface} TabsInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+declare type TabItem = {
+    btn: HTMLElement;
+    content: HTMLElement;
+    isEnabled: boolean;
+};
+declare type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
+declare type TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;
+export interface TabsProps extends BaseProps {
+    $options: {
+        styles: TabsStylesOption;
+    };
+    $refs: {
+        btn: HTMLElement[];
+        content: HTMLElement[];
+    };
+}
 /**
  * Tabs class.
  */
-export default class Tabs extends Base {
+export declare class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {
     /**
-     * Tabs config.
+     * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        emits: string[];
-        options: {
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {TabsStylesOption}
-                 */
-                default: () => TabsStylesOption;
-                merge: boolean;
-            };
-        };
-    };
+    static config: BaseConfig;
+    items: TabItem[];
     /**
      * Initialize the component's behaviours.
-     * @this {TabsInterface}
-     * @return {void}
+     * @returns {void}
      */
-    mounted(this: TabsInterface): void;
-    items: any;
+    mounted(): void;
     /**
      * Switch tab on button click.
-     *
-     * @this {TabsInterface}
-     * @param  {Event}  event The click event object.
-     * @param  {number} index The index of the clicked button.
-     * @return {void}
      */
-    onBtnClick(this: TabsInterface, event: Event, index: number): void;
+    onBtnClick(event: MouseEvent, index: number): void;
     /**
      * Enable the given tab and its associated content.
-     *
-     * @this {TabsInterface}
-     * @param  {TabItem}                item The item to enable.
-     * @return {Promise<TabsInterface>}      Tabs instance.
      */
-    enableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
+    enableItem(item: TabItem): Promise<this>;
     /**
      * Disable the given tab and its associated content.
-     *
-     * @this {TabsInterface}
-     * @param  {TabItem}                item The item to disable.
-     * @return {Promise<TabsInterface>}      The Tabs instance.
      */
-    disableItem(this: TabsInterface, item: TabItem): Promise<TabsInterface>;
+    disableItem(item: TabItem): Promise<this>;
 }
-export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
-export type TabItem = {
-    btn: HTMLElement;
-    content: HTMLElement;
-    isEnabled: boolean;
-};
-export type TabsRefs = {
-    btn: HTMLElement[];
-    content: HTMLElement[];
-};
-export type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
-export type TabsStylesOption = Partial<Record<keyof TabsRefs, TabsStates>>;
-export type TabsOptions = {
-    styles: TabsStylesOption;
-};
-export type TabsPrivateInterface = {
-    $options: TabsOptions;
-    $refs: TabsRefs;
-    items: Array<TabItem>;
-};
-export type TabsInterface = Tabs & TabsPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";
+export {};

package/molecules/Tabs/Tabs.js

@@ -1 +1,123 @@
-import{Base as a}from"@studiometa/js-toolkit";import{transition as o}from"@studiometa/js-toolkit/utils";class l extends a{static config={name:"Tabs",refs:["btn[]","content[]"],emits:["enable","disable"],options:{styles:{type:Object,default:()=>({content:{closed:{position:"absolute",opacity:"0",pointerEvents:"none",visibility:"hidden"}}}),merge:!0}}};mounted(){this.items=this.$refs.btn.map((t,s)=>{const i=`${this.$id}-${s}`,e=this.$refs.content[s];t.setAttribute("id",i),e.setAttribute("aria-labelledby",i);const n={btn:t,content:e,isEnabled:s>0};return s>0?this.disableItem(n):this.enableItem(n),n})}onBtnClick(t,s){this.items.forEach((i,e)=>{e!==s&&this.disableItem(i)}),this.enableItem(this.items[s])}async enableItem(t){if(!t||t.isEnabled)return Promise.resolve(this);t.isEnabled=!0;const{btn:s,content:i}=t,e=this.$options.styles.btn||{},n=this.$options.styles.content||{};return i.setAttribute("aria-hidden","false"),this.$emit("enable",t),Promise.all([o(s,{from:e.closed,active:e.active,to:e.open},"keep"),o(i,{from:n.closed,active:n.active,to:n.open},"keep")]).then(()=>Promise.resolve(this))}async disableItem(t){if(!t||!t.isEnabled)return Promise.resolve(this);t.isEnabled=!1;const{btn:s,content:i}=t,e=this.$options.styles.btn||{},n=this.$options.styles.content||{};return i.setAttribute("aria-hidden","true"),this.$emit("disable",t),Promise.all([o(s,{from:e.open,active:e.active,to:e.closed},"keep"),o(i,{from:n.open,active:n.active,to:n.closed},"keep")]).then(()=>Promise.resolve(this))}}export{l as default};
+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 { transition } from "@studiometa/js-toolkit/utils";
+class Tabs extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "items");
+  }
+  mounted() {
+    this.items = this.$refs.btn.map((btn, index) => {
+      const id = `${this.$id}-${index}`;
+      const content = this.$refs.content[index];
+      btn.setAttribute("id", id);
+      content.setAttribute("aria-labelledby", id);
+      const item = { btn, content, isEnabled: index > 0 };
+      if (index > 0) {
+        this.disableItem(item);
+      } else {
+        this.enableItem(item);
+      }
+      return item;
+    });
+  }
+  onBtnClick(event, index) {
+    this.items.forEach((item, i) => {
+      if (i !== index) {
+        this.disableItem(item);
+      }
+    });
+    this.enableItem(this.items[index]);
+  }
+  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([
+      transition(
+        btn,
+        {
+          from: btnStyles.closed,
+          active: btnStyles.active,
+          to: btnStyles.open
+        },
+        "keep"
+      ),
+      transition(
+        content,
+        {
+          from: contentStyles.closed,
+          active: contentStyles.active,
+          to: contentStyles.open
+        },
+        "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([
+      transition(
+        btn,
+        {
+          from: btnStyles.open,
+          active: btnStyles.active,
+          to: btnStyles.closed
+        },
+        "keep"
+      ),
+      transition(
+        content,
+        {
+          from: contentStyles.open,
+          active: contentStyles.active,
+          to: contentStyles.closed
+        },
+        "keep"
+      )
+    ]).then(() => Promise.resolve(this));
+  }
+}
+__publicField(Tabs, "config", {
+  name: "Tabs",
+  refs: ["btn[]", "content[]"],
+  emits: ["enable", "disable"],
+  options: {
+    styles: {
+      type: Object,
+      default: () => ({
+        content: {
+          closed: {
+            position: "absolute",
+            opacity: "0",
+            pointerEvents: "none",
+            visibility: "hidden"
+          }
+        }
+      }),
+      merge: true
+    }
+  }
+});
+export {
+  Tabs
+};