@studiometa/ui 0.2.0 → 0.2.3

package/molecules/Slider/SliderItem.js

@@ -0,0 +1,105 @@
+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 { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
+import { matrix, damp } from "@studiometa/js-toolkit/utils";
+class SliderItem extends withIntersectionObserver(Base, { threshold: [0, 1] }) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isVisible", false);
+    __publicField(this, "x", 0);
+    __publicField(this, "dampedX", 0);
+  }
+  mounted() {
+    this.updateRectAdjustedWithX();
+  }
+  resized() {
+    this.updateRectAdjustedWithX();
+  }
+  destroyed() {
+    this.moveInstantly(0);
+  }
+  intersected([{ intersectionRatio, isIntersecting }]) {
+    if (intersectionRatio >= 1) {
+      this.$emit("is-fully-visible");
+      this.$el.setAttribute("aria-hidden", "false");
+    } else if (intersectionRatio > 0) {
+      this.$emit("is-partially-visible");
+      this.$el.setAttribute("aria-hidden", "true");
+    } else {
+      this.$emit("is-hidden");
+      this.$el.setAttribute("aria-hidden", "true");
+    }
+    this.isVisible = isIntersecting;
+  }
+  ticked() {
+    this.dampedX = damp(this.x, this.dampedX, 0.2, 1e-5);
+    this.$el.style.transform = `${matrix({
+      translateX: this.dampedX
+    })} translateZ(0px)`;
+    if (this.dampedX === this.x) {
+      this.$services.disable("ticked");
+    }
+  }
+  activate() {
+    this.$el.classList.add("is-active");
+  }
+  disactivate() {
+    this.$el.classList.remove("is-active");
+  }
+  move(targetPosition) {
+    this.x = targetPosition;
+    if (!this.$services.has("ticked")) {
+      this.$services.enable("ticked");
+    }
+  }
+  moveInstantly(targetPosition) {
+    this.x = targetPosition;
+    this.dampedX = targetPosition;
+    this.$el.style.transform = `${matrix({
+      translateX: targetPosition
+    })} translateZ(0px)`;
+  }
+  willBeVisible(targetPosition) {
+    return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
+  }
+  willBeFullyVisible(targetPosition) {
+    return this.rect.x + targetPosition < window.innerWidth && this.rect.x + targetPosition > 0 && this.rect.x + targetPosition + this.rect.width < window.innerWidth && this.rect.x + targetPosition + this.rect.width > 0;
+  }
+  updateRectAdjustedWithX() {
+    const x = this.x * -1;
+    const rect = this.$el.getBoundingClientRect().toJSON();
+    this.rect = __spreadProps(__spreadValues({}, rect), {
+      left: rect.left + x,
+      right: rect.left + x + rect.width,
+      x: rect.left + x
+    });
+  }
+}
+__publicField(SliderItem, "config", {
+  name: "SliderItem",
+  emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
+});
+export {
+  SliderItem as default
+};

package/molecules/Slider/SliderProgress.cjs

@@ -0,0 +1,54 @@
+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/Slider/SliderProgress.js
+var SliderProgress_exports = {};
+__export(SliderProgress_exports, {
+  default: () => SliderProgress
+});
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
+var SliderProgress = class extends import_AbstractSliderChild.default {
+  update(index) {
+    const unit = this.$refs.progress.clientWidth / this.$parent.indexMax;
+    this.$refs.progress.style.transform = (0, import_utils.matrix)({
+      translateX: (0, import_utils.map)(index, 0, this.$parent.indexMax, (this.$refs.progress.clientWidth - unit) * -1, 0)
+    });
+  }
+};
+__publicField(SliderProgress, "config", {
+  name: "SliderProgress",
+  refs: ["progress"]
+});
+module.exports = __toCommonJS(SliderProgress_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/SliderProgress.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @typedef {SliderProgress & {
+ *   $refs: {
+ *     progress: HTMLElement
+ *   },
+ *   $parent: import('./Slider.js').default
+ * }} SliderProgressInterface
+ */
+/**
+ * SliderProgress class.
+ */
+export default class SliderProgress extends AbstractSliderChild {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+    };
+}
+export type SliderProgressInterface = SliderProgress & {
+    $refs: {
+        progress: HTMLElement;
+    };
+    $parent: import('./Slider.js').default;
+};
+import AbstractSliderChild from "./AbstractSliderChild.js";

package/molecules/Slider/SliderProgress.js

@@ -0,0 +1,23 @@
+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 { matrix, map } from "@studiometa/js-toolkit/utils";
+import AbstractSliderChild from "./AbstractSliderChild.js";
+class SliderProgress extends AbstractSliderChild {
+  update(index) {
+    const unit = this.$refs.progress.clientWidth / this.$parent.indexMax;
+    this.$refs.progress.style.transform = matrix({
+      translateX: map(index, 0, this.$parent.indexMax, (this.$refs.progress.clientWidth - unit) * -1, 0)
+    });
+  }
+}
+__publicField(SliderProgress, "config", {
+  name: "SliderProgress",
+  refs: ["progress"]
+});
+export {
+  SliderProgress as default
+};

package/molecules/Slider/index.cjs

@@ -0,0 +1,50 @@
+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/Slider/index.js
+var Slider_exports = {};
+__export(Slider_exports, {
+  AbstractSliderChild: () => import_AbstractSliderChild.default,
+  Slider: () => import_Slider.default,
+  SliderBtn: () => import_SliderBtn.default,
+  SliderCount: () => import_SliderCount.default,
+  SliderDots: () => import_SliderDots.default,
+  SliderDrag: () => import_SliderDrag.default,
+  SliderItem: () => import_SliderItem.default,
+  SliderProgress: () => import_SliderProgress.default
+});
+var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
+var import_Slider = __toESM(require("./Slider.cjs"), 1);
+var import_SliderBtn = __toESM(require("./SliderBtn.cjs"), 1);
+var import_SliderCount = __toESM(require("./SliderCount.cjs"), 1);
+var import_SliderDrag = __toESM(require("./SliderDrag.cjs"), 1);
+var import_SliderItem = __toESM(require("./SliderItem.cjs"), 1);
+var import_SliderProgress = __toESM(require("./SliderProgress.cjs"), 1);
+var import_SliderDots = __toESM(require("./SliderDots.cjs"), 1);
+module.exports = __toCommonJS(Slider_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/index.d.ts

@@ -0,0 +1,8 @@
+export { default as AbstractSliderChild } from "./AbstractSliderChild.js";
+export { default as Slider } from "./Slider.js";
+export { default as SliderBtn } from "./SliderBtn.js";
+export { default as SliderCount } from "./SliderCount.js";
+export { default as SliderDrag } from "./SliderDrag.js";
+export { default as SliderItem } from "./SliderItem.js";
+export { default as SliderProgress } from "./SliderProgress.js";
+export { default as SliderDots } from "./SliderDots.js";

package/molecules/Slider/index.js

@@ -0,0 +1,18 @@
+import { default as default2 } from "./AbstractSliderChild.js";
+import { default as default3 } from "./Slider.js";
+import { default as default4 } from "./SliderBtn.js";
+import { default as default5 } from "./SliderCount.js";
+import { default as default6 } from "./SliderDrag.js";
+import { default as default7 } from "./SliderItem.js";
+import { default as default8 } from "./SliderProgress.js";
+import { default as default9 } from "./SliderDots.js";
+export {
+  default2 as AbstractSliderChild,
+  default3 as Slider,
+  default4 as SliderBtn,
+  default5 as SliderCount,
+  default9 as SliderDots,
+  default6 as SliderDrag,
+  default7 as SliderItem,
+  default8 as SliderProgress
+};

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
+};