@wpmoo/ui 1.0.0-rc.5 → 1.0.0-rc.7

package/dist/js/moo-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI moo-ui.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
+ * Moo UI moo-ui.js v1.0.0-rc.7 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -14562,12 +14562,57 @@ function readThemeColors(themeElement, window2) {
   return colors2;
 }
 function resolveThemeElement(element) {
-  return element?.closest?.("[data-bs-theme]") || element?.ownerDocument?.documentElement || null;
+  const scoped = element?.closest?.("[data-bs-theme]");
+  if (scoped) return scoped;
+  const documentBody = element?.ownerDocument?.body;
+  if (documentBody?.hasAttribute?.("data-bs-theme")) {
+    return documentBody;
+  }
+  return element?.ownerDocument?.documentElement || null;
 }
 function themeElementIsDark(element) {
   const theme = element?.getAttribute?.("data-bs-theme") || element?.dataset?.bsTheme;
   return theme === "dark";
 }
+function clampColorChannel(value) {
+  return Math.min(255, Math.max(0, Math.round(value)));
+}
+function normalizeColorComponent(value) {
+  const component = String(value).trim();
+  if (component.endsWith("%")) {
+    const percentage = Number.parseFloat(component.slice(0, -1));
+    return Number.isFinite(percentage) ? clampColorChannel(percentage / 100 * 255) : null;
+  }
+  const normalized = Number.parseFloat(component);
+  return Number.isFinite(normalized) ? clampColorChannel(normalized * 255) : null;
+}
+function normalizeColorAlpha(value) {
+  if (value === void 0) return 1;
+  const alpha2 = String(value).trim();
+  if (alpha2.endsWith("%")) {
+    const percentage = Number.parseFloat(alpha2.slice(0, -1));
+    return Number.isFinite(percentage) ? Math.min(1, Math.max(0, percentage / 100)) : null;
+  }
+  const numeric = Number.parseFloat(alpha2);
+  return Number.isFinite(numeric) ? Math.min(1, Math.max(0, numeric)) : null;
+}
+function normalizeCanvasColor(value) {
+  if (typeof value !== "string") return null;
+  const color2 = value.trim();
+  const match = color2.match(
+    /^color\(\s*srgb\s+([^\s/]+)\s+([^\s/]+)\s+([^\s/]+)(?:\s*\/\s*([^\s)]+))?\s*\)$/i
+  );
+  if (!match) return color2 || null;
+  const channels = match.slice(1, 4).map(normalizeColorComponent);
+  const alpha2 = normalizeColorAlpha(match[4]);
+  if (channels.some((channel) => channel === null) || alpha2 === null) {
+    return null;
+  }
+  if (alpha2 >= 1) {
+    return `rgb(${channels.join(", ")})`;
+  }
+  return `rgba(${channels.join(", ")}, ${Number(alpha2.toFixed(3))})`;
+}
 function resolveCanvasColor(document2, window2, value, fallback, themeElement) {
   const createElement = document2?.createElement;
   const getComputedStyle3 = window2?.getComputedStyle;
@@ -14581,7 +14626,7 @@ function resolveCanvasColor(document2, window2, value, fallback, themeElement) {
   parent.appendChild(probe);
   try {
     const resolved = getComputedStyle3.call(window2, probe).color;
-    return resolved || fallback;
+    return normalizeCanvasColor(resolved) || fallback;
   } finally {
     probe.remove();
   }
@@ -14853,7 +14898,7 @@ function applyThemeToChart(chart, theme, metadata, explicitColorFields = []) {
     chart.options.plugins.tooltip.bodyColor = theme.secondaryText;
     chart.options.plugins.tooltip.borderColor = theme.borderColor;
   }
-  chart.update("none");
+  chart.update();
 }
 function themedGrid(theme) {
   return {
@@ -15174,9 +15219,16 @@ var MooChart = class _MooChart {
           }
         });
       });
-      this._observer.observe(this._themeElement, {
+      const observerOptions = {
         attributes: true,
         attributeFilter: ["data-bs-theme", "style"]
+      };
+      const observerTargets = [
+        this._themeElement,
+        this._document?.documentElement
+      ].filter((target, index2, targets) => target && targets.indexOf(target) === index2);
+      observerTargets.forEach((target) => {
+        this._observer.observe(target, observerOptions);
       });
     }
     instances2.set(element, this);
@@ -15947,6 +15999,37 @@ var ContextMenu = class _ContextMenu {
   }
 };
 
+// src/js/theme-owner.js
+var OWNER_SELECTOR = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
+var PORTAL_SELECTOR = "[data-moo-overlay-portal-host]";
+function documentFor(node) {
+  if (node?.nodeType === 9) return node;
+  if (node?.ownerDocument) return node.ownerDocument;
+  return typeof document === "undefined" ? null : document;
+}
+function isResolvedOwner(node) {
+  return Boolean(node?.matches?.(OWNER_SELECTOR));
+}
+function ownerRootFor(node) {
+  const ownerDocument = documentFor(node);
+  if (node?.nodeType === 9 || node === ownerDocument?.body) {
+    return ownerDocument?.body?.firstElementChild || null;
+  }
+  return node;
+}
+function findThemeOwner(node = typeof document === "undefined" ? null : document) {
+  const start = ownerRootFor(node);
+  if (!start) return null;
+  if (isResolvedOwner(start)) return start;
+  return start.closest?.(OWNER_SELECTOR) || null;
+}
+function ownerPortalRoot(owner) {
+  if (!owner) return null;
+  return Array.from(owner.children || []).find(
+    (child) => child.matches?.(PORTAL_SELECTOR)
+  ) || owner;
+}
+
 // src/js/components/datatable.js
 var instances5 = /* @__PURE__ */ new WeakMap();
 function normalize2(value) {
@@ -16036,7 +16119,8 @@ var DataTable = class _DataTable {
     this._listeners.push({ target, type, handler, options });
   }
   // Row menus are authored next to their trigger so the public HTML stays
-  // inspectable, but when opened they are temporarily moved under body.
+  // inspectable, but when opened they are temporarily moved to their nearest
+  // Moo owner portal.
   // That keeps the menu out of the scroll wrapper's layout math, so Safari
   // cannot clip it at the rounded frame edge or shift the visible table
   // slice while Popper positions it against the viewport.
@@ -16156,10 +16240,11 @@ var DataTable = class _DataTable {
     this._reparentedRowMenus.set(menu, {
       parent: menu.parentNode,
       nextSibling: menu.nextSibling,
-      trigger
+      trigger,
+      owner: findThemeOwner(trigger)
     });
     this._reparentedRowMenuByTrigger.set(trigger, menu);
-    this._document.body.appendChild(menu);
+    this._portalRoot(trigger).appendChild(menu);
   }
   _restoreRowActionMenuForTrigger(trigger) {
     const menu = this._reparentedRowMenuByTrigger.get(trigger) || this._rowActionMenuForTrigger(trigger);
@@ -16172,8 +16257,10 @@ var DataTable = class _DataTable {
     if (!original) {
       return;
     }
-    const { parent, nextSibling, trigger } = original;
-    if (parent?.isConnected) {
+    const { parent, nextSibling, trigger, owner } = original;
+    if (owner?.isConnected === false) {
+      menu.remove();
+    } else if (parent?.isConnected) {
       if (nextSibling?.parentNode === parent) {
         parent.insertBefore(menu, nextSibling);
       } else {
@@ -16211,10 +16298,11 @@ var DataTable = class _DataTable {
       parent: menu.parentNode,
       nextSibling: menu.nextSibling,
       trigger,
-      owner: trigger.closest(".datatable-sort")
+      owner: trigger.closest(".datatable-sort"),
+      themeOwner: findThemeOwner(trigger)
     });
     this._reparentedSortMenuByTrigger.set(trigger, menu);
-    this._document.body.appendChild(menu);
+    this._portalRoot(trigger).appendChild(menu);
   }
   _restoreSortMenuForTrigger(trigger) {
     const menu = this._reparentedSortMenuByTrigger.get(trigger) || this._sortMenuForTrigger(trigger);
@@ -16227,8 +16315,10 @@ var DataTable = class _DataTable {
     if (!original) {
       return;
     }
-    const { parent, nextSibling, trigger } = original;
-    if (parent?.isConnected) {
+    const { parent, nextSibling, trigger, themeOwner } = original;
+    if (themeOwner?.isConnected === false) {
+      menu.remove();
+    } else if (parent?.isConnected) {
       if (nextSibling?.parentNode === parent) {
         parent.insertBefore(menu, nextSibling);
       } else {
@@ -16250,6 +16340,9 @@ var DataTable = class _DataTable {
   _bootstrap(name) {
     return this._window.bootstrap?.[name] || null;
   }
+  _portalRoot(trigger = this._element) {
+    return ownerPortalRoot(findThemeOwner(trigger)) || this._document.body || this._document.documentElement;
+  }
   // The bulk-actions bar's icon-only buttons carry data-bs-title instead of
   // a bare title attribute so Bootstrap's own Tooltip owns the hover/focus
   // affordance (matching the rest of Moo's icon-button contracts) rather
@@ -16267,7 +16360,10 @@ var DataTable = class _DataTable {
       return;
     }
     this._element.querySelectorAll('[data-datatable-bulk-actions] [data-bs-title]:not([data-bs-toggle="dropdown"])').forEach((trigger) => {
-      this._tooltips.push(Tooltip2.getOrCreateInstance(trigger, { animation: false }));
+      this._tooltips.push(Tooltip2.getOrCreateInstance(trigger, {
+        animation: false,
+        container: this._portalRoot(trigger)
+      }));
     });
   }
   _hideBulkTooltips({ blur = false } = {}) {
@@ -17358,42 +17454,54 @@ function datepickerContains(instance, target) {
   );
 }
 function syncPortaledPopoverContext(instance) {
-  const theme = instance._element.closest("[data-bs-theme]")?.getAttribute("data-bs-theme") || instance._document.documentElement.getAttribute("data-bs-theme");
-  const direction = getComputedStyle(instance._trigger).direction;
+  const owner = findThemeOwner(instance._trigger);
+  const theme = owner?.getAttribute("data-bs-theme") || null;
+  const direction = instance._document.defaultView?.getComputedStyle(
+    instance._trigger
+  ).direction;
   if (theme) {
     instance._popover.setAttribute("data-bs-theme", theme);
+  } else {
+    instance._popover.removeAttribute("data-bs-theme");
   }
-  if (direction === "rtl") {
-    instance._popover.setAttribute("dir", "rtl");
+  if (direction === "ltr" || direction === "rtl") {
+    instance._popover.setAttribute("dir", direction);
+  } else {
+    instance._popover.removeAttribute("dir");
   }
 }
 function portalDatepickerPopover(instance) {
   const popover = instance._popover;
-  if (instance._popoverPortal?.host?.parentElement === instance._document.body) {
+  const owner = findThemeOwner(instance._trigger);
+  const portalRoot = ownerPortalRoot(owner) || instance._document.body || instance._document.documentElement;
+  if (!portalRoot) {
+    return;
+  }
+  if (instance._popoverPortal?.portal === portalRoot && popover.parentElement === portalRoot) {
     syncPortaledPopoverContext(instance);
     return;
   }
-  const host = instance._document.createElement("div");
-  host.className = "moo-ui";
-  host.dataset.datepickerPortalHost = "";
+  restoreDatepickerPopover(instance);
   instance._popoverPortal = {
     parent: popover.parentNode,
     nextSibling: popover.nextSibling,
-    host,
+    owner,
+    portal: portalRoot,
     hadTheme: popover.hasAttribute("data-bs-theme"),
     theme: popover.getAttribute("data-bs-theme"),
     hadDirection: popover.hasAttribute("dir"),
     direction: popover.getAttribute("dir")
   };
-  host.appendChild(popover);
-  instance._document.body.appendChild(host);
+  portalRoot.appendChild(popover);
   syncPortaledPopoverContext(instance);
 }
 function restoreDatepickerPopover(instance) {
   const portal = instance._popoverPortal;
   if (!portal) return;
   const popover = instance._popover;
-  if (portal.parent?.isConnected) {
+  if (portal.owner?.isConnected === false) {
+    popover.remove();
+  } else if (portal.parent?.isConnected) {
     if (portal.nextSibling?.parentNode === portal.parent) {
       portal.parent.insertBefore(popover, portal.nextSibling);
     } else {
@@ -17402,7 +17510,6 @@ function restoreDatepickerPopover(instance) {
   } else {
     popover.remove();
   }
-  portal.host?.remove();
   if (portal.hadTheme) {
     popover.setAttribute("data-bs-theme", portal.theme);
   } else {
@@ -18315,7 +18422,8 @@ var Sidebar = class _Sidebar {
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
-    this._root = this._document.documentElement;
+    this._documentElement = this._document.documentElement;
+    this._root = findThemeOwner(element) || this._document.body || this._documentElement;
     this._sidebar = element.querySelector('[data-slot="sidebar"]');
     this._config = {
       breakpoint: "(min-width: 992px)",
@@ -18360,6 +18468,9 @@ var Sidebar = class _Sidebar {
   _bootstrap(name) {
     return this._window.bootstrap?.[name] || null;
   }
+  _portalRoot(trigger = this._element) {
+    return ownerPortalRoot(findThemeOwner(trigger)) || this._document.body || this._documentElement;
+  }
   _isDesktop() {
     return this._window.matchMedia(this._config.breakpoint).matches;
   }
@@ -18384,7 +18495,7 @@ var Sidebar = class _Sidebar {
       this._closeFlyouts();
       this._syncTooltips();
     });
-    this._directionObserver.observe(this._root, {
+    this._directionObserver.observe(this._documentElement, {
       attributes: true,
       attributeFilter: ["dir"]
     });
@@ -18476,7 +18587,9 @@ var Sidebar = class _Sidebar {
     }
     delete item.dataset.sidebarDropdownPositioned;
     item.style.removeProperty("--moo-sidebar-dropdown-block-start");
-    item.style.removeProperty("--moo-sidebar-dropdown-inline-start");
+    item.style.removeProperty("--moo-sidebar-dropdown-block-end");
+    item.style.removeProperty("--moo-sidebar-dropdown-left");
+    item.style.removeProperty("--moo-sidebar-dropdown-right");
   }
   _closeDropdowns(exceptControl = null) {
     const Dropdown = this._bootstrap("Dropdown");
@@ -18496,22 +18609,44 @@ var Sidebar = class _Sidebar {
   _positionDropdown(control) {
     const item = control?.closest?.(".sidebar-menu-item");
     const isHeaderWorkspace = control?.classList.contains("sidebar-menu-button--workspace") && control.closest('[data-slot="sidebar-header"]');
-    if (!control || !item || !isHeaderWorkspace || !this._isDesktop()) {
+    const isFooterAccount = control?.classList.contains("sidebar-menu-button--account") && control.closest('[data-slot="sidebar-footer"]');
+    if (!control || !item || !(isHeaderWorkspace || isFooterAccount) || !this._isDesktop()) {
       this._clearDropdownPosition(control);
       return;
     }
     this._closeFlyouts();
     const rect = control.getBoundingClientRect();
     const gap = 4;
-    const inlineStart = this._root.dir === "rtl" ? this._window.innerWidth - rect.left + gap : rect.right + gap;
-    item.style.setProperty(
-      "--moo-sidebar-dropdown-block-start",
-      `${Math.round(rect.bottom + gap)}px`
-    );
-    item.style.setProperty(
-      "--moo-sidebar-dropdown-inline-start",
-      `${Math.round(inlineStart)}px`
-    );
+    const sidebar = control.closest('[data-slot="sidebar"]');
+    const side = sidebar?.dataset.side || "left";
+    if (side === "right") {
+      const right = this._window.innerWidth - rect.left + gap;
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-right",
+        `${Math.round(right)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-left");
+    } else {
+      const left = rect.right + gap;
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-left",
+        `${Math.round(left)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-right");
+    }
+    if (isHeaderWorkspace) {
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-block-start",
+        `${Math.round(rect.bottom + gap)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-block-end");
+    } else {
+      item.style.setProperty(
+        "--moo-sidebar-dropdown-block-end",
+        `${Math.round(this._window.innerHeight - rect.top + gap)}px`
+      );
+      item.style.removeProperty("--moo-sidebar-dropdown-block-start");
+    }
     item.dataset.sidebarDropdownPositioned = "";
   }
   _removeFlyoutPortal() {
@@ -18527,7 +18662,7 @@ var Sidebar = class _Sidebar {
     this._element.querySelectorAll(".sidebar-menu-item--flyout-open").forEach((item) => {
       item.classList.remove("sidebar-menu-item--flyout-open");
       item.style.removeProperty("--moo-sidebar-flyout-block-start");
-      item.style.removeProperty("--moo-sidebar-flyout-inline-start");
+      item.style.removeProperty("--moo-sidebar-flyout-left");
       this._resetFlyoutTrigger(item, false);
     });
   }
@@ -18543,8 +18678,9 @@ var Sidebar = class _Sidebar {
     this._closeDropdowns();
     this._closeFlyouts();
     const rect = item.getBoundingClientRect();
+    const sidebar = this._sidebar;
+    const sidebarRect = sidebar?.getBoundingClientRect() || rect;
     const gap = 4;
-    const inlineStart = this._root.dir === "rtl" ? this._window.innerWidth - rect.left + gap : rect.right + gap;
     const flyout = submenu.cloneNode(true);
     flyout.removeAttribute("id");
     flyout.classList.remove("collapse", "show", "collapsing");
@@ -18552,12 +18688,12 @@ var Sidebar = class _Sidebar {
     flyout.dataset.sidebarFlyout = "";
     flyout.removeAttribute("style");
     flyout.style.setProperty("--moo-sidebar-flyout-block-start", `${Math.round(rect.top)}px`);
-    flyout.style.setProperty(
-      "--moo-sidebar-flyout-inline-start",
-      `${Math.round(inlineStart)}px`
-    );
-    const root = this._element.closest(".moo-ui") || this._document.body;
-    root.appendChild(flyout);
+    const side = sidebar?.dataset.side || "left";
+    this._portalRoot(item).appendChild(flyout);
+    const flyoutWidth = flyout.getBoundingClientRect().width;
+    const left = side === "right" ? sidebarRect.left - flyoutWidth - gap : sidebarRect.right + gap;
+    const boundedLeft = Math.max(0, Math.min(this._window.innerWidth - flyoutWidth, left));
+    flyout.style.setProperty("--moo-sidebar-flyout-left", `${Math.round(boundedLeft)}px`);
     this._flyout = flyout;
     this._flyoutOwner = item;
     item.classList.add("sidebar-menu-item--flyout-open");
@@ -18588,7 +18724,8 @@ var Sidebar = class _Sidebar {
       return;
     }
     const collapsed = this._isCollapsed();
-    const placement = this._root.dir === "rtl" ? "left" : "right";
+    const side = this._sidebar?.dataset.side || "left";
+    const placement = side === "right" ? "left" : "right";
     this._element.querySelectorAll("[data-sidebar-tooltip]").forEach((control) => {
       this._disposeTooltip(control);
       if (!collapsed || this._isIdentityTrigger(control) || control.closest(".sidebar-menu-item")?.querySelector(":scope > .sidebar-menu-sub")) {
@@ -18598,7 +18735,12 @@ var Sidebar = class _Sidebar {
       new Tooltip2(anchor, {
         title: control.getAttribute("data-sidebar-tooltip"),
         placement,
-        container: "body",
+        // Bootstrap's default tooltip offset is 6px. The icon rail's
+        // boundary calculation still lets the tooltip box overlap the
+        // physical Sidebar edge at that distance, so keep an explicit 8px
+        // separation for both physical placements.
+        offset: [0, 8],
+        container: this._portalRoot(control),
         trigger: "hover focus"
       });
       this._tooltipAnchors.add(anchor);