@wpmoo/ui 1.1.0-dev.1 → 1.2.0

package/dist/js/chart.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI chart.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI chart.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/chart.min.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI chart.min.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI chart.min.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/combobox.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI combobox.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI combobox.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/context-menu.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI context-menu.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI context-menu.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datatable.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datatable.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI datatable.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datepicker.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datepicker.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI datepicker.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datepicker.min.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datepicker.min.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI datepicker.min.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/moo-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI moo-ui.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI moo-ui.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -3876,7 +3876,7 @@ var MooSlider = class _MooSlider {
   }
 };
 
-// src/js/components/table-of-contents.js
+// src/js/components/toc.js
 var instances6 = /* @__PURE__ */ new WeakMap();
 var ownerSelector = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
 function activationOffset(options, previous = 0) {

package/dist/js/moo-ui.min.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI moo-ui.min.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI moo-ui.min.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/sheet.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sheet.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI sheet.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI sidebar.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI slider.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/state.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI state.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI state.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/table-of-contents.js

@@ -1,195 +1,10 @@
 /*!
- * Moo UI table-of-contents.js v1.1.0-dev.1 (https://wpmoo.org/)
+ * Moo UI table-of-contents.js v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
 
-const instances = /* @__PURE__ */ new WeakMap();
-const ownerSelector = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
-function activationOffset(options, previous = 0) {
-  if (!options || typeof options !== "object" || Array.isArray(options)) {
-    throw new TypeError("TableOfContents options must be an object.");
-  }
-  const value = options.activationOffset === void 0 ? previous : options.activationOffset;
-  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
-    throw new TypeError("TableOfContents activationOffset must be a finite nonnegative number.");
-  }
-  return value;
-}
-function fragmentId(href) {
-  if (!href?.startsWith("#") || href.length === 1) return null;
-  try {
-    return decodeURIComponent(href.slice(1));
-  } catch {
-    return null;
-  }
-}
-class TableOfContents {
-  static getInstance(element) {
-    return element?.nodeType === 1 ? instances.get(element) || null : null;
-  }
-  static getOrCreateInstance(element, options = {}) {
-    return TableOfContents.getInstance(element) || new TableOfContents(element, options);
-  }
-  constructor(element, options = {}) {
-    if (element?.nodeType !== 1 || !element.matches("[data-toc]")) {
-      throw new TypeError("TableOfContents requires a [data-toc] root element.");
-    }
-    const existing = instances.get(element);
-    if (existing) return existing;
-    this._element = element;
-    this._document = element.ownerDocument;
-    this._window = this._document.defaultView;
-    this._offset = activationOffset(options);
-    this._listeners = [];
-    this._originalLinks = /* @__PURE__ */ new Map();
-    this._originalStatus = /* @__PURE__ */ new Map();
-    this._originalMarker = {
-      attribute: element.getAttribute("data-toc-marker"),
-      properties: ["--moo-toc-marker-offset", "--moo-toc-marker-height"].map((name) => ({
-        name,
-        value: element.style.getPropertyValue(name),
-        priority: element.style.getPropertyPriority(name)
-      }))
-    };
-    this._links = [];
-    this._targets = [];
-    this._frame = 0;
-    this._disposed = false;
-    instances.set(element, this);
-    this.refresh();
-  }
-  refresh(options = {}) {
-    if (this._disposed) return this;
-    const offset = activationOffset(options, this._offset);
-    this._clearListeners();
-    this._offset = offset;
-    const owner = this._element.closest(ownerSelector);
-    const contentId = this._element.getAttribute("data-toc-content");
-    const scope = contentId ? this._document.getElementById(contentId) : owner;
-    const rootId = this._element.getAttribute("data-toc-scroll-root");
-    this._scrollElement = rootId ? this._document.getElementById(rootId) : null;
-    this._status = Array.from(this._element.querySelectorAll("[data-toc-current]")).find((node) => node.closest("[data-toc]") === this._element) || null;
-    if (this._status && !this._originalStatus.has(this._status)) {
-      this._originalStatus.set(this._status, this._status.textContent);
-    }
-    this._overview = this._status ? this._originalStatus.get(this._status) : "";
-    this._links = Array.from(this._element.querySelectorAll('a[href^="#"]')).filter((link) => link.closest("[data-toc]") === this._element).map((link) => ({ link, id: fragmentId(link.getAttribute("href")) }));
-    this._links.forEach(({ link }) => {
-      if (!this._originalLinks.has(link)) {
-        this._originalLinks.set(link, {
-          active: link.classList.contains("active"),
-          current: link.getAttribute("aria-current")
-        });
-      }
-    });
-    this._targets = [];
-    this._activate(null);
-    if (!owner || !scope || scope.closest(ownerSelector) !== owner || rootId && (!this._scrollElement || !this._scrollElement.contains(scope))) {
-      return this;
-    }
-    const seen = /* @__PURE__ */ new Set();
-    this._links.forEach(({ id, link }) => {
-      const target = id ? this._document.getElementById(id) : null;
-      if (!target || seen.has(id) || !scope.contains(target) || target.closest(ownerSelector) !== owner) return;
-      seen.add(id);
-      this._targets.push({ id, target, label: link.textContent.trim() });
-    });
-    if (!this._targets.length) return this;
-    const queue = () => this._requestUpdate();
-    this._listen(this._scrollElement || this._window, "scroll", queue, { passive: true });
-    this._listen(this._window, "resize", queue);
-    this._listen(this._window, "hashchange", queue);
-    this._listen(this._element, "click", queue);
-    this._update();
-    return this;
-  }
-  dispose() {
-    if (this._disposed) return;
-    this._disposed = true;
-    this._clearListeners();
-    this._originalLinks.forEach(({ active, current }, link) => {
-      link.classList.toggle("active", active);
-      if (current === null) link.removeAttribute("aria-current");
-      else link.setAttribute("aria-current", current);
-    });
-    this._originalStatus.forEach((text, node) => {
-      node.textContent = text;
-    });
-    const { attribute, properties } = this._originalMarker;
-    if (attribute === null) this._element.removeAttribute("data-toc-marker");
-    else this._element.setAttribute("data-toc-marker", attribute);
-    properties.forEach(({ name, value, priority }) => {
-      if (value) this._element.style.setProperty(name, value, priority);
-      else this._element.style.removeProperty(name);
-    });
-    this._originalLinks.clear();
-    this._originalStatus.clear();
-    this._targets = [];
-    this._links = [];
-    if (instances.get(this._element) === this) instances.delete(this._element);
-  }
-  _listen(target, type, handler, options) {
-    target.addEventListener(type, handler, options);
-    this._listeners.push({ target, type, handler, options });
-  }
-  _clearListeners() {
-    this._listeners.forEach(({ target, type, handler, options }) => target.removeEventListener(type, handler, options));
-    this._listeners = [];
-    if (this._frame) this._window.cancelAnimationFrame(this._frame);
-    this._frame = 0;
-  }
-  _requestUpdate() {
-    if (this._disposed || this._frame) return;
-    this._frame = this._window.requestAnimationFrame(() => {
-      this._frame = 0;
-      this._update();
-    });
-  }
-  _update() {
-    if (this._disposed) return;
-    const targets = this._targets.filter(({ target }) => target.isConnected && target.getClientRects().length > 0);
-    const scroller = this._scrollElement || this._document.scrollingElement;
-    const line = (this._scrollElement ? this._scrollElement.getBoundingClientRect().top + this._scrollElement.clientTop : 0) + this._offset;
-    let active = null;
-    targets.forEach((entry) => {
-      if (entry.target.getBoundingClientRect().top <= line + 1) active = entry;
-    });
-    const canScroll = scroller && scroller.scrollHeight > scroller.clientHeight + 1;
-    if (!canScroll) {
-      const hashId = fragmentId(this._window.location.hash);
-      active = targets.find(({ id }) => id === hashId) || active;
-    }
-    if (targets.length && canScroll && scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 1) {
-      active = targets[targets.length - 1];
-    }
-    this._activate(active);
-  }
-  _activate(active) {
-    let activeLink = null;
-    this._links.forEach(({ link, id }) => {
-      const current = active !== null && id === active.id;
-      link.classList.toggle("active", current);
-      if (current) {
-        link.setAttribute("aria-current", "location");
-        activeLink || (activeLink = link);
-      } else link.removeAttribute("aria-current");
-    });
-    if (this._status) this._status.textContent = active ? active.label : this._overview;
-    this._updateMarker(activeLink);
-  }
-  _updateMarker(link) {
-    const list = this._element.querySelector(":scope > .nav");
-    const text = link?.querySelector("span");
-    if (!list?.contains(link) || !text?.offsetHeight || !this._element.getClientRects().length) {
-      this._element.removeAttribute("data-toc-marker");
-      return;
-    }
-    this._element.style.setProperty("--moo-toc-marker-offset", `${link.offsetTop + text.offsetTop}px`);
-    this._element.style.setProperty("--moo-toc-marker-height", `${text.offsetHeight}px`);
-    this._element.setAttribute("data-toc-marker", "");
-  }
-}
+import { default as default2 } from "./toc.js";
 export {
-  TableOfContents as default
+  default2 as default
 };

package/dist/js/toc.js

@@ -0,0 +1,195 @@
+/*!
+ * Moo UI toc.js v1.2.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+const instances = /* @__PURE__ */ new WeakMap();
+const ownerSelector = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
+function activationOffset(options, previous = 0) {
+  if (!options || typeof options !== "object" || Array.isArray(options)) {
+    throw new TypeError("TableOfContents options must be an object.");
+  }
+  const value = options.activationOffset === void 0 ? previous : options.activationOffset;
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+    throw new TypeError("TableOfContents activationOffset must be a finite nonnegative number.");
+  }
+  return value;
+}
+function fragmentId(href) {
+  if (!href?.startsWith("#") || href.length === 1) return null;
+  try {
+    return decodeURIComponent(href.slice(1));
+  } catch {
+    return null;
+  }
+}
+class TableOfContents {
+  static getInstance(element) {
+    return element?.nodeType === 1 ? instances.get(element) || null : null;
+  }
+  static getOrCreateInstance(element, options = {}) {
+    return TableOfContents.getInstance(element) || new TableOfContents(element, options);
+  }
+  constructor(element, options = {}) {
+    if (element?.nodeType !== 1 || !element.matches("[data-toc]")) {
+      throw new TypeError("TableOfContents requires a [data-toc] root element.");
+    }
+    const existing = instances.get(element);
+    if (existing) return existing;
+    this._element = element;
+    this._document = element.ownerDocument;
+    this._window = this._document.defaultView;
+    this._offset = activationOffset(options);
+    this._listeners = [];
+    this._originalLinks = /* @__PURE__ */ new Map();
+    this._originalStatus = /* @__PURE__ */ new Map();
+    this._originalMarker = {
+      attribute: element.getAttribute("data-toc-marker"),
+      properties: ["--moo-toc-marker-offset", "--moo-toc-marker-height"].map((name) => ({
+        name,
+        value: element.style.getPropertyValue(name),
+        priority: element.style.getPropertyPriority(name)
+      }))
+    };
+    this._links = [];
+    this._targets = [];
+    this._frame = 0;
+    this._disposed = false;
+    instances.set(element, this);
+    this.refresh();
+  }
+  refresh(options = {}) {
+    if (this._disposed) return this;
+    const offset = activationOffset(options, this._offset);
+    this._clearListeners();
+    this._offset = offset;
+    const owner = this._element.closest(ownerSelector);
+    const contentId = this._element.getAttribute("data-toc-content");
+    const scope = contentId ? this._document.getElementById(contentId) : owner;
+    const rootId = this._element.getAttribute("data-toc-scroll-root");
+    this._scrollElement = rootId ? this._document.getElementById(rootId) : null;
+    this._status = Array.from(this._element.querySelectorAll("[data-toc-current]")).find((node) => node.closest("[data-toc]") === this._element) || null;
+    if (this._status && !this._originalStatus.has(this._status)) {
+      this._originalStatus.set(this._status, this._status.textContent);
+    }
+    this._overview = this._status ? this._originalStatus.get(this._status) : "";
+    this._links = Array.from(this._element.querySelectorAll('a[href^="#"]')).filter((link) => link.closest("[data-toc]") === this._element).map((link) => ({ link, id: fragmentId(link.getAttribute("href")) }));
+    this._links.forEach(({ link }) => {
+      if (!this._originalLinks.has(link)) {
+        this._originalLinks.set(link, {
+          active: link.classList.contains("active"),
+          current: link.getAttribute("aria-current")
+        });
+      }
+    });
+    this._targets = [];
+    this._activate(null);
+    if (!owner || !scope || scope.closest(ownerSelector) !== owner || rootId && (!this._scrollElement || !this._scrollElement.contains(scope))) {
+      return this;
+    }
+    const seen = /* @__PURE__ */ new Set();
+    this._links.forEach(({ id, link }) => {
+      const target = id ? this._document.getElementById(id) : null;
+      if (!target || seen.has(id) || !scope.contains(target) || target.closest(ownerSelector) !== owner) return;
+      seen.add(id);
+      this._targets.push({ id, target, label: link.textContent.trim() });
+    });
+    if (!this._targets.length) return this;
+    const queue = () => this._requestUpdate();
+    this._listen(this._scrollElement || this._window, "scroll", queue, { passive: true });
+    this._listen(this._window, "resize", queue);
+    this._listen(this._window, "hashchange", queue);
+    this._listen(this._element, "click", queue);
+    this._update();
+    return this;
+  }
+  dispose() {
+    if (this._disposed) return;
+    this._disposed = true;
+    this._clearListeners();
+    this._originalLinks.forEach(({ active, current }, link) => {
+      link.classList.toggle("active", active);
+      if (current === null) link.removeAttribute("aria-current");
+      else link.setAttribute("aria-current", current);
+    });
+    this._originalStatus.forEach((text, node) => {
+      node.textContent = text;
+    });
+    const { attribute, properties } = this._originalMarker;
+    if (attribute === null) this._element.removeAttribute("data-toc-marker");
+    else this._element.setAttribute("data-toc-marker", attribute);
+    properties.forEach(({ name, value, priority }) => {
+      if (value) this._element.style.setProperty(name, value, priority);
+      else this._element.style.removeProperty(name);
+    });
+    this._originalLinks.clear();
+    this._originalStatus.clear();
+    this._targets = [];
+    this._links = [];
+    if (instances.get(this._element) === this) instances.delete(this._element);
+  }
+  _listen(target, type, handler, options) {
+    target.addEventListener(type, handler, options);
+    this._listeners.push({ target, type, handler, options });
+  }
+  _clearListeners() {
+    this._listeners.forEach(({ target, type, handler, options }) => target.removeEventListener(type, handler, options));
+    this._listeners = [];
+    if (this._frame) this._window.cancelAnimationFrame(this._frame);
+    this._frame = 0;
+  }
+  _requestUpdate() {
+    if (this._disposed || this._frame) return;
+    this._frame = this._window.requestAnimationFrame(() => {
+      this._frame = 0;
+      this._update();
+    });
+  }
+  _update() {
+    if (this._disposed) return;
+    const targets = this._targets.filter(({ target }) => target.isConnected && target.getClientRects().length > 0);
+    const scroller = this._scrollElement || this._document.scrollingElement;
+    const line = (this._scrollElement ? this._scrollElement.getBoundingClientRect().top + this._scrollElement.clientTop : 0) + this._offset;
+    let active = null;
+    targets.forEach((entry) => {
+      if (entry.target.getBoundingClientRect().top <= line + 1) active = entry;
+    });
+    const canScroll = scroller && scroller.scrollHeight > scroller.clientHeight + 1;
+    if (!canScroll) {
+      const hashId = fragmentId(this._window.location.hash);
+      active = targets.find(({ id }) => id === hashId) || active;
+    }
+    if (targets.length && canScroll && scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 1) {
+      active = targets[targets.length - 1];
+    }
+    this._activate(active);
+  }
+  _activate(active) {
+    let activeLink = null;
+    this._links.forEach(({ link, id }) => {
+      const current = active !== null && id === active.id;
+      link.classList.toggle("active", current);
+      if (current) {
+        link.setAttribute("aria-current", "location");
+        activeLink || (activeLink = link);
+      } else link.removeAttribute("aria-current");
+    });
+    if (this._status) this._status.textContent = active ? active.label : this._overview;
+    this._updateMarker(activeLink);
+  }
+  _updateMarker(link) {
+    const list = this._element.querySelector(":scope > .nav");
+    const text = link?.querySelector("span");
+    if (!list?.contains(link) || !text?.offsetHeight || !this._element.getClientRects().length) {
+      this._element.removeAttribute("data-toc-marker");
+      return;
+    }
+    this._element.style.setProperty("--moo-toc-marker-offset", `${link.offsetTop + text.offsetTop}px`);
+    this._element.style.setProperty("--moo-toc-marker-height", `${text.offsetHeight}px`);
+    this._element.setAttribute("data-toc-marker", "");
+  }
+}
+export {
+  TableOfContents as default
+};

package/dist/release-manifest.json

@@ -3,22 +3,22 @@
     {
       "export": "./moo.css",
       "path": "dist/assets/css/moo.css",
-      "sha256": "38bb85c89e2f1f2f043119a9290cb58dd74a1572090b5fc41930c7c57a90c894"
+      "sha256": "087ab8cdeef74e15187f8c884b1d3921d38ef3a11730cc903e560a105af64de8"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "d6947a3a27a4315591cf9f6b92e1fd1d958a5fceb1523b709487d54fcbefc815"
+      "sha256": "eff5375117972db09813817e3302a98c349bdefcef736a27449f597c2446abfd"
     },
     {
       "export": "./state.js",
       "path": "dist/js/state.js",
-      "sha256": "3560c86c8623a3d523ec763456d984e009d8a7fa5834de168b153ba9d242f1c2"
+      "sha256": "b41ee62bf48eb2e141f145dc987d80e1ad40ba0ee364ca47f9aa8427aff4fb42"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "1.1.0-dev.1"
+    "version": "1.2.0"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "1.1.0-dev.1",
+  "version": "1.2.0",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -38,6 +38,7 @@
     "./context-menu.js": "./dist/js/context-menu.js",
     "./datatable.js": "./dist/js/datatable.js",
     "./slider.js": "./dist/js/slider.js",
+    "./toc.js": "./dist/js/toc.js",
     "./table-of-contents.js": "./dist/js/table-of-contents.js",
     "./sheet.js": "./dist/js/sheet.js",
     "./chart.js": "./dist/js/chart.js",
@@ -66,6 +67,7 @@
     "dist/js/context-menu.js",
     "dist/js/datatable.js",
     "dist/js/slider.js",
+    "dist/js/toc.js",
     "dist/js/table-of-contents.js",
     "dist/js/sheet.js",
     "dist/js/chart.js",

package/scss/_components.scss

@@ -37,6 +37,7 @@
 @import "components/button_group";
 @import "components/toggle_group";
 @import "components/card";
+@import "components/empty";
 @import "components/table";
 @import "components/dropdown";
 @import "components/menubar";

package/scss/components/_empty.scss

@@ -0,0 +1,60 @@
+/* Empty */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  gap: $spacer * 1.5;
+  padding: $spacer * 1.5;
+  text-align: center;
+  border-width: var(--bs-border-width);
+  border-style: $moo-empty-border-style;
+  border-color: var(--bs-border-color);
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.empty-state-header {
+  display: flex;
+  flex-direction: column;
+  align-items: inherit;
+  gap: $spacer * 0.5;
+}
+
+.empty-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacer * 0.75;
+  font-size: $h3-font-size;
+  line-height: 1;
+  color: var(--bs-secondary-color);
+  background-color: var(--bs-tertiary-bg);
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.empty-state-icon > [data-icon] {
+  width: $spacer * 1.5;
+  height: $spacer * 1.5;
+}
+
+.empty-state-title {
+  margin: 0;
+  font-size: $h5-font-size;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+}
+
+.empty-state-description {
+  margin: 0;
+  font-size: $font-size-base;
+  color: var(--bs-secondary-color);
+}
+
+.empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: inherit;
+  gap: $spacer * 0.5;
+}

package/scss/components/_tabs.scss

@@ -114,3 +114,11 @@
   pointer-events: auto;
   transition-delay: 0s;
 }
+
+.tabs--content-height > .tab-content {
+  display: block;
+}
+
+.tabs--content-height > .tab-content > .tab-pane:not(.active) {
+  display: none;
+}