@studiometa/ui 0.1.1 → 0.2.2

package/atoms/Prefetch/index.cjs

@@ -0,0 +1,40 @@
+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/atoms/Prefetch/index.js
+var Prefetch_exports = {};
+__export(Prefetch_exports, {
+  AbstractPrefetch: () => import_AbstractPrefetch.default,
+  PrefetchWhenOver: () => import_PrefetchWhenOver.default,
+  PrefetchWhenVisible: () => import_PrefetchWhenVisible.default
+});
+var import_AbstractPrefetch = __toESM(require("./AbstractPrefetch.cjs"), 1);
+var import_PrefetchWhenOver = __toESM(require("./PrefetchWhenOver.cjs"), 1);
+var import_PrefetchWhenVisible = __toESM(require("./PrefetchWhenVisible.cjs"), 1);
+module.exports = __toCommonJS(Prefetch_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Prefetch/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AbstractPrefetch } from "./AbstractPrefetch.js";
+export { default as PrefetchWhenOver } from "./PrefetchWhenOver.js";
+export { default as PrefetchWhenVisible } from "./PrefetchWhenVisible.js";

package/atoms/Prefetch/index.js

@@ -0,0 +1,8 @@
+import { default as default2 } from "./AbstractPrefetch.js";
+import { default as default3 } from "./PrefetchWhenOver.js";
+import { default as default4 } from "./PrefetchWhenVisible.js";
+export {
+  default2 as AbstractPrefetch,
+  default3 as PrefetchWhenOver,
+  default4 as PrefetchWhenVisible
+};

package/atoms/index.cjs

@@ -0,0 +1,45 @@
+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/atoms/index.js
+var atoms_exports = {};
+__export(atoms_exports, {
+  AnchorScrollTo: () => import_AnchorScrollTo.default,
+  Cursor: () => import_Cursor.default,
+  Figure: () => import_Figure.default,
+  LargeText: () => import_LargeText.default,
+  LazyInclude: () => import_LazyInclude.default
+});
+__reExport(atoms_exports, require("./Prefetch/index.cjs"));
+var import_AnchorScrollTo = __toESM(require("./AnchorScrollTo/AnchorScrollTo.cjs"), 1);
+var import_Cursor = __toESM(require("./Cursor/Cursor.cjs"), 1);
+var import_Figure = __toESM(require("./Figure/Figure.cjs"), 1);
+var import_LargeText = __toESM(require("./LargeText/LargeText.cjs"), 1);
+var import_LazyInclude = __toESM(require("./LazyInclude/LazyInclude.cjs"), 1);
+module.exports = __toCommonJS(atoms_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./Prefetch/index.js";
+export { default as AnchorScrollTo } from "./AnchorScrollTo/AnchorScrollTo.js";
+export { default as Cursor } from "./Cursor/Cursor.js";
+export { default as Figure } from "./Figure/Figure.js";
+export { default as LargeText } from "./LargeText/LargeText.js";
+export { default as LazyInclude } from "./LazyInclude/LazyInclude.js";

package/atoms/index.js

@@ -0,0 +1,13 @@
+export * from "./Prefetch/index.js";
+import { default as default2 } from "./AnchorScrollTo/AnchorScrollTo.js";
+import { default as default3 } from "./Cursor/Cursor.js";
+import { default as default4 } from "./Figure/Figure.js";
+import { default as default5 } from "./LargeText/LargeText.js";
+import { default as default6 } from "./LazyInclude/LazyInclude.js";
+export {
+  default2 as AnchorScrollTo,
+  default3 as Cursor,
+  default4 as Figure,
+  default5 as LargeText,
+  default6 as LazyInclude
+};

package/index.cjs

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: 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);
+
+// packages/ui/index.js
+var ui_exports = {};
+__reExport(ui_exports, require("./primitives/index.cjs"));
+__reExport(ui_exports, require("./atoms/index.cjs"));
+__reExport(ui_exports, require("./molecules/index.cjs"));
+module.exports = __toCommonJS(ui_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/index.d.ts

@@ -1,6 +1,3 @@
-import Accordion from "./Accordion/index.js";
-import Cursor from "./Cursor.js";
-import Draggable from "./Draggable.js";
-import Modal from "./Modal.js";
-import Tabs from "./Tabs.js";
-export { Accordion, Cursor, Draggable, Modal, Tabs };
+export * from "./primitives/index.js";
+export * from "./atoms/index.js";
+export * from "./molecules/index.js";

package/index.js

@@ -1,6 +1,3 @@
-import Accordion from './Accordion/index.js';
-import Cursor from './Cursor.js';
-import Draggable from './Draggable.js';
-import Modal from './Modal.js';
-import Tabs from './Tabs.js';
-export { Accordion, Cursor, Draggable, Modal, Tabs };
+export * from "./primitives/index.js";
+export * from "./atoms/index.js";
+export * from "./molecules/index.js";

package/molecules/Accordion/Accordion.cjs

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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/Accordion/Accordion.js
+var Accordion_exports = {};
+__export(Accordion_exports, {
+  default: () => Accordion
+});
+var import_AccordionCore = __toESM(require("./AccordionCore.cjs"), 1);
+var import_AccordionItem = __toESM(require("./AccordionItem.cjs"), 1);
+var Accordion = class extends import_AccordionCore.default {
+};
+__publicField(Accordion, "config", __spreadProps(__spreadValues({}, import_AccordionCore.default.config), {
+  components: {
+    AccordionItem: import_AccordionItem.default
+  }
+}));
+module.exports = __toCommonJS(Accordion_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/{Accordion/index.d.ts → molecules/Accordion/Accordion.d.ts}

@@ -1,14 +1,11 @@
-export default Accordion;
-export type AccordionInterface = import('./Accordion.js').AccordionInterface;
-export type AccordionItemInterface = import('./AccordionItem.js').AccordionItemInterface;
 /**
- * @typedef {import('./Accordion.js').AccordionInterface} AccordionInterface
+ * @typedef {import('./AccordionCore.js').AccordionInterface} AccordionInterface
  * @typedef {import('./AccordionItem.js').AccordionItemInterface} AccordionItemInterface
  */
 /**
  * Accordion class.
  */
-declare class Accordion extends AccordionCore {
+export default class Accordion extends AccordionCore {
     static config: {
         components: {
             AccordionItem: typeof AccordionItem;
@@ -24,5 +21,7 @@ declare class Accordion extends AccordionCore {
         };
     };
 }
-import AccordionCore from "./Accordion.js";
+export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;
+export type AccordionItemInterface = import('./AccordionItem.js').AccordionItemInterface;
+import AccordionCore from "./AccordionCore.js";
 import AccordionItem from "./AccordionItem.js";

package/molecules/Accordion/Accordion.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import AccordionCore from "./AccordionCore.js";
+import AccordionItem from "./AccordionItem.js";
+class Accordion extends AccordionCore {
+}
+__publicField(Accordion, "config", __spreadProps(__spreadValues({}, AccordionCore.config), {
+  components: {
+    AccordionItem
+  }
+}));
+export {
+  Accordion as default
+};

package/molecules/Accordion/AccordionCore.cjs

@@ -0,0 +1,60 @@
+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/Accordion/AccordionCore.js
+var AccordionCore_exports = {};
+__export(AccordionCore_exports, {
+  default: () => Accordion
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var Accordion = class extends import_js_toolkit.Base {
+  onAccordionItemOpen(index) {
+    const accordionItem = this.$children.AccordionItem[index];
+    this.$emit("open", accordionItem, index);
+    if (this.$options.autoclose) {
+      this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());
+    }
+  }
+  onAccordionItemClose(index) {
+    const accordionItem = this.$children.AccordionItem[index];
+    this.$emit("close", accordionItem, index);
+  }
+};
+__publicField(Accordion, "config", {
+  name: "Accordion",
+  emits: ["open", "close"],
+  options: {
+    autoclose: Boolean,
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+});
+module.exports = __toCommonJS(AccordionCore_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Accordion/AccordionCore.js

@@ -0,0 +1,34 @@
+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";
+class Accordion extends Base {
+  onAccordionItemOpen(index) {
+    const accordionItem = this.$children.AccordionItem[index];
+    this.$emit("open", accordionItem, index);
+    if (this.$options.autoclose) {
+      this.$children.AccordionItem.filter((el, i) => index !== i).forEach((item) => item.close());
+    }
+  }
+  onAccordionItemClose(index) {
+    const accordionItem = this.$children.AccordionItem[index];
+    this.$emit("close", accordionItem, index);
+  }
+}
+__publicField(Accordion, "config", {
+  name: "Accordion",
+  emits: ["open", "close"],
+  options: {
+    autoclose: Boolean,
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+});
+export {
+  Accordion as default
+};

package/molecules/Accordion/AccordionItem.cjs

@@ -0,0 +1,208 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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;
+};
+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/Accordion/AccordionItem.js
+var AccordionItem_exports = {};
+__export(AccordionItem_exports, {
+  default: () => AccordionItem
+});
+var import_deepmerge = __toESM(require("deepmerge"), 1);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_AccordionCore = __toESM(require("./AccordionCore.cjs"), 1);
+var _AccordionItem = class extends import_js_toolkit.Base {
+  mounted() {
+    if (this.$parent && this.$parent instanceof import_AccordionCore.default && this.$parent.$options.item) {
+      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
+        if (key in this.$options) {
+          const type = _AccordionItem.config.options[key].type || _AccordionItem.config.options[key];
+          if (type === Array || type === Object) {
+            this.$options[key] = (0, import_deepmerge.default)(this.$options[key], value);
+          } else {
+            this.$options[key] = value;
+          }
+        }
+      });
+    }
+    this.$refs.btn.setAttribute("id", this.$id);
+    this.$refs.btn.setAttribute("aria-controls", this.contentId);
+    this.$refs.content.setAttribute("aria-labelledby", this.$id);
+    this.$refs.content.setAttribute("id", this.contentId);
+    const { isOpen } = this.$options;
+    this.updateAttributes(isOpen);
+    const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+    const refs = this.$refs;
+    Object.entries(otherStyles).filter(([refName]) => refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
+      (0, import_utils.transition)(refs[refName], { to: isOpen ? open : closed }, "keep");
+    });
+  }
+  destroyed() {
+    this.$refs.container.style.visibility = "";
+    this.$refs.container.style.height = "";
+  }
+  onBtnClick() {
+    if (this.$options.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  get contentId() {
+    return `content-${this.$id}`;
+  }
+  updateAttributes(isOpen) {
+    this.$refs.container.style.visibility = isOpen ? "" : "invisible";
+    this.$refs.container.style.height = isOpen ? "" : "0";
+    this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
+    this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  }
+  open() {
+    return __async(this, null, function* () {
+      if (this.$options.isOpen) {
+        return;
+      }
+      this.$log("open");
+      this.$emit("open");
+      this.$options.isOpen = true;
+      this.updateAttributes(this.$options.isOpen);
+      this.$refs.container.style.visibility = "";
+      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+      const refs = this.$refs;
+      yield Promise.all([
+        (0, import_utils.transition)(refs.container, {
+          from: { height: "0" },
+          active: container.active,
+          to: { height: `${refs.content.offsetHeight}px` }
+        }).then(() => {
+          if (this.$options.isOpen) {
+            refs.content.style.position = "";
+          }
+          return Promise.resolve();
+        }),
+        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+          from: closed,
+          active,
+          to: open
+        }, "keep"))
+      ]);
+    });
+  }
+  close() {
+    return __async(this, null, function* () {
+      if (!this.$options.isOpen) {
+        return;
+      }
+      this.$log("close");
+      this.$emit("close");
+      this.$options.isOpen = false;
+      const height = this.$refs.container.offsetHeight;
+      this.$refs.content.style.position = "absolute";
+      const _a = this.$options.styles, { container } = _a, otherStyles = __objRest(_a, ["container"]);
+      const refs = this.$refs;
+      yield Promise.all([
+        (0, import_utils.transition)(refs.container, {
+          from: { height: `${height}px` },
+          active: container.active,
+          to: { height: "0" }
+        }).then(() => {
+          if (!this.$options.isOpen) {
+            refs.container.style.height = "0";
+            refs.container.style.visibility = "invisible";
+            this.updateAttributes(this.$options.isOpen);
+          }
+          return Promise.resolve();
+        }),
+        ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
+          from: open,
+          active,
+          to: closed
+        }, "keep"))
+      ]);
+    });
+  }
+};
+var AccordionItem = _AccordionItem;
+__publicField(AccordionItem, "config", {
+  name: "AccordionItem",
+  refs: ["btn", "content", "container"],
+  emits: ["open", "close"],
+  options: {
+    isOpen: Boolean,
+    styles: {
+      type: Object,
+      default: () => ({
+        container: {
+          open: "",
+          active: "",
+          closed: ""
+        }
+      })
+    }
+  }
+});
+module.exports = __toCommonJS(AccordionItem_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/{Accordion → molecules/Accordion}/AccordionItem.d.ts

@@ -1,6 +1,6 @@
 /**
  * @typedef {import('@studiometa/js-toolkit/Base').BaseOptions} BaseOptions
- * @typedef {import('./Accordion.js').AccordionInterface} AccordionInterface
+ * @typedef {import('./AccordionCore.js').AccordionInterface} AccordionInterface
  */
 /**
  * @typedef {Object} AccordionItemRefs
@@ -10,13 +10,12 @@
  */
 /**
  * @typedef {Object} StylesOption
- * @property {String|CssStyleObject} open
- * @property {String|CssStyleObject} active
- * @property {String|CssStyleObject} closed
+ * @property {String|Partial<CSSStyleDeclaration>} open
+ * @property {String|Partial<CSSStyleDeclaration>} active
+ * @property {String|Partial<CSSStyleDeclaration>} closed
  */
 /**
- * @typedef {import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} AccordionItemStates
+ * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} AccordionItemStates
  * @typedef {Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>} AccordionItemStylesOption
  */
 /**
@@ -95,19 +94,18 @@ export default class AccordionItem extends Base {
     close(): Promise<void>;
 }
 export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
-export type AccordionInterface = import('./Accordion.js').AccordionInterface;
+export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;
 export type AccordionItemRefs = {
     btn: HTMLElement;
     content: HTMLElement;
     container: HTMLElement;
 };
 export type StylesOption = {
-    open: string | CssStyleObject;
-    active: string | CssStyleObject;
-    closed: string | CssStyleObject;
+    open: string | Partial<CSSStyleDeclaration>;
+    active: string | Partial<CSSStyleDeclaration>;
+    closed: string | Partial<CSSStyleDeclaration>;
 };
-export type CssStyleObject = import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject;
-export type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
+export type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
 export type AccordionItemStylesOption = Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>;
 export type AccordionItemOptions = {
     isOpen: boolean;
@@ -120,4 +118,4 @@ export type AccordionItemPrivateInterface = {
 };
 export type AccordionItemInterface = AccordionItem & AccordionItemPrivateInterface;
 import { Base } from "@studiometa/js-toolkit";
-import Accordion from "./Accordion.js";
+import Accordion from "./AccordionCore.js";