@studiometa/ui 0.1.1 → 0.2.2

package/molecules/TableOfContent/TableOfContent.cjs

@@ -0,0 +1,73 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __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 });
+  }
+  return target;
+};
+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 __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/TableOfContent/TableOfContent.js
+var TableOfContent_exports = {};
+__export(TableOfContent_exports, {
+  default: () => TableOfContent
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_TableOfContentAnchor = __toESM(require("./TableOfContentAnchor.cjs"), 1);
+var TableOfContent = class extends import_js_toolkit.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: import_TableOfContentAnchor.default
+  },
+  options: {
+    contentSelector: String,
+    withTemplate: Boolean
+  }
+});
+module.exports = __toCommonJS(TableOfContent_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/TableOfContent.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @typedef {TableOfContent & {
+ *   $refs: {
+ *     itemTemplate: HTMLTemplateElement,
+ *     list: HTMLUListElement
+ *   },
+ *   $options: {
+ *     contentSelector: string,
+ *     withTemplate: boolean,
+ *   }
+ * }} TableOfContentInterface
+ */
+/**
+ * TableOfContent class.
+ */
+export default class TableOfContent extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        components: {
+            TableOfContentAnchor: typeof TableOfContentAnchor;
+        };
+        options: {
+            contentSelector: StringConstructor;
+            withTemplate: BooleanConstructor;
+        };
+    };
+    /**
+     * Generate anchors on mount and update the component to instantiate the
+     * `TableOfContentAnchor` components.
+     * @returns {void}
+     */
+    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?
+     *
+     * @this    {TableOfContentInterface}
+     * @returns {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

@@ -0,0 +1,42 @@
+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
+};

package/molecules/TableOfContent/TableOfContentAnchor.cjs

@@ -0,0 +1,65 @@
+var __defProp = Object.defineProperty;
+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 });
+  }
+  return target;
+};
+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 __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/TableOfContent/TableOfContentAnchor.js
+var TableOfContentAnchor_exports = {};
+__export(TableOfContentAnchor_exports, {
+  default: () => TableOfContentAnchor
+});
+var import_atoms = require("../../atoms/index.cjs");
+var TableOfContentAnchor = class extends import_atoms.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"
+    }
+  }
+});
+module.exports = __toCommonJS(TableOfContentAnchor_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/TableOfContent/TableOfContentAnchor.d.ts

@@ -0,0 +1,36 @@
+/**
+ * TableOfContentAnchor class.
+ */
+export default class TableOfContentAnchor extends AnchorScrollTo {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        emits: string[];
+        options: {
+            activeClass: {
+                type: StringConstructor;
+                default: string;
+            };
+        };
+    };
+    /**
+     * 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

@@ -0,0 +1,39 @@
+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
+};

package/molecules/TableOfContent/index.cjs

@@ -0,0 +1,38 @@
+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 __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 });
+  }
+  return target;
+};
+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);
+
+// packages/ui/molecules/TableOfContent/index.js
+var TableOfContent_exports = {};
+__export(TableOfContent_exports, {
+  TableOfContent: () => import_TableOfContent.default,
+  TableOfContentAnchor: () => import_TableOfContentAnchor.default
+});
+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.d.ts

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

package/molecules/TableOfContent/index.js

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

package/molecules/Tabs/Tabs.cjs

@@ -0,0 +1,152 @@
+var __defProp = Object.defineProperty;
+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 });
+  }
+  return target;
+};
+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 __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
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var Tabs = class extends import_js_toolkit.Base {
+  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]);
+  }
+  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));
+    });
+  }
+  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));
+    });
+  }
+};
+__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"
+          }
+        }
+      })
+    }
+  }
+});
+module.exports = __toCommonJS(Tabs_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/{Tabs.d.ts → molecules/Tabs/Tabs.d.ts}

@@ -13,8 +13,7 @@
  * @property {HTMLElement[]} content
  */
 /**
- * @typedef {import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} TabsStates
+ * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} TabsStates
  * @typedef {Partial<Record<keyof TabsRefs, TabsStates>>} TabsStylesOption
  */
 /**
@@ -94,8 +93,7 @@ export type TabsRefs = {
     btn: HTMLElement[];
     content: HTMLElement[];
 };
-export type CssStyleObject = import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject;
-export type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
+export type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
 export type TabsStylesOption = Partial<Record<keyof TabsRefs, TabsStates>>;
 export type TabsOptions = {
     styles: TabsStylesOption;

package/molecules/Tabs/Tabs.js

@@ -0,0 +1,126 @@
+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;
+};
+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());
+  });
+};
+import { Base } from "@studiometa/js-toolkit";
+import { transition } from "@studiometa/js-toolkit/utils";
+class Tabs extends Base {
+  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]);
+  }
+  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([
+        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));
+    });
+  }
+  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([
+        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"
+          }
+        }
+      })
+    }
+  }
+});
+export {
+  Tabs as default
+};