@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/dist/js/sidebar.js

@@ -1,14 +1,57 @@
-const instances = new WeakMap();
+/*!
+ * Moo UI sidebar.js v1.0.0-rc.10 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// 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-host]";
+function documentFor(node) {
+  if (node?.nodeType === 9) return node;
+  if (node?.ownerDocument) return node.ownerDocument;
+  return typeof document === "undefined" ? null : document;
+}
+__name(documentFor, "documentFor");
+function isResolvedOwner(node) {
+  return Boolean(node?.matches?.(OWNER_SELECTOR));
+}
+__name(isResolvedOwner, "isResolvedOwner");
+function ownerRootFor(node) {
+  const ownerDocument = documentFor(node);
+  if (node?.nodeType === 9 || node === ownerDocument?.body) {
+    return ownerDocument?.body?.firstElementChild || null;
+  }
+  return node;
+}
+__name(ownerRootFor, "ownerRootFor");
+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;
+}
+__name(findThemeOwner, "findThemeOwner");
+function ownerPortalRoot(owner) {
+  if (!owner) return null;
+  return Array.from(owner.children || []).find(
+    (child) => child.matches?.(PORTAL_SELECTOR)
+  ) || owner;
+}
+__name(ownerPortalRoot, "ownerPortalRoot");
 
-export default class Sidebar {
+// src/js/components/sidebar.js
+var instances = /* @__PURE__ */ new WeakMap();
+var _Sidebar = class _Sidebar {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
   }
-
   static getOrCreateInstance(element, config = {}) {
-    return Sidebar.getInstance(element) || new Sidebar(element, config);
+    return _Sidebar.getInstance(element) || new _Sidebar(element, config);
   }
-
   constructor(element, config = {}) {
     if (element?.nodeType !== 1 || !element.matches('[data-slot="sidebar-wrapper"]')) {
       throw new TypeError("Sidebar requires a [data-slot=sidebar-wrapper] root.");
@@ -17,32 +60,31 @@ export default class Sidebar {
     if (existing) {
       return existing;
     }
-
     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)",
       storagePrefix: "moo-sidebar:",
       keyboard: true,
-      ...config,
+      ...config
     };
     this._listeners = [];
-    this._tooltipAnchors = new Set();
+    this._tooltipAnchors = /* @__PURE__ */ new Set();
     this._flyout = null;
     this._flyoutOwner = null;
     this._offcanvas = null;
     this._offcanvasTrigger = null;
-
     instances.set(element, this);
     this._bindEvents();
     this._restoreState();
-    this._element.setAttribute("data-moo-sidebar-ready", "");
+    this._scrollActiveItemIntoView();
+    this._element.setAttribute("data-sidebar-ready", "");
     this._observeDirection();
   }
-
   dispose() {
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
@@ -50,48 +92,41 @@ export default class Sidebar {
     this._listeners = [];
     this._directionObserver?.disconnect();
     this._closeFlyouts();
-    this._element
-      .querySelectorAll("[data-moo-sidebar-dropdown-positioned]")
-      .forEach((item) => this._clearDropdownPosition(item));
-    this._element
-      .querySelectorAll("[data-moo-sidebar-tooltip]")
-      .forEach((control) => this._disposeTooltip(control));
+    this._element.querySelectorAll("[data-sidebar-dropdown-positioned]").forEach((item) => this._clearDropdownPosition(item));
+    this._element.querySelectorAll("[data-sidebar-tooltip]").forEach((control) => this._disposeTooltip(control));
     this._offcanvas?.dispose();
     this._offcanvas = null;
     this._offcanvasTrigger = null;
-    this._element.removeAttribute("data-moo-sidebar-ready");
+    this._element.removeAttribute("data-sidebar-ready");
     instances.delete(this._element);
   }
-
   _listen(target, type, handler, options) {
     target?.addEventListener(type, handler, options);
     if (target) {
       this._listeners.push({ target, type, handler, options });
     }
   }
-
   _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;
   }
-
   _isCollapsed() {
-    return this._isDesktop() && this._element.dataset.mooSidebarState === "collapsed";
+    return this._isDesktop() && this._sidebar?.dataset?.collapsible === "icon" && this._element.dataset.sidebarState === "collapsed";
   }
-
   _trigger(name, detail = {}) {
     return this._element.dispatchEvent(
       new this._window.CustomEvent(`${name}.moo.sidebar`, {
         bubbles: true,
         cancelable: name === "show" || name === "hide",
-        detail,
+        detail
       })
     );
   }
-
   _observeDirection() {
     const Observer = this._window.MutationObserver;
     if (!Observer) {
@@ -101,14 +136,13 @@ export default class Sidebar {
       this._closeFlyouts();
       this._syncTooltips();
     });
-    this._directionObserver.observe(this._root, {
+    this._directionObserver.observe(this._documentElement, {
       attributes: true,
-      attributeFilter: ["dir"],
+      attributeFilter: ["dir"]
     });
   }
-
   _restoreState() {
-    const key = this._element.dataset.mooSidebarKey;
+    const key = this._element.dataset.sidebarKey;
     let stored = null;
     if (key) {
       try {
@@ -117,57 +151,66 @@ export default class Sidebar {
         stored = null;
       }
     }
-    const initial =
-      stored === "collapsed" || stored === "expanded"
-        ? stored
-        : this._element.dataset.mooSidebarState === "collapsed"
-          ? "collapsed"
-          : "expanded";
+    const initial = stored === "collapsed" || stored === "expanded" ? stored : this._element.dataset.sidebarState === "collapsed" ? "collapsed" : "expanded";
     this._setState(initial, false, false);
   }
-
+  _scrollActiveItemIntoView() {
+    const activeRoute = this._element.querySelector(
+      '[data-slot="sidebar-content"] a[data-slot="sidebar-menu-button"][aria-current="page"], [data-slot="sidebar-content"] a.sidebar-menu-button[aria-current="page"], [data-slot="sidebar-content"] a.sidebar-menu-button.active'
+    );
+    const active = activeRoute || this._element.querySelector(
+      '[data-slot="sidebar-content"] [data-slot="sidebar-menu-button"][aria-current="page"], [data-slot="sidebar-content"] .sidebar-menu-button[aria-current="page"], [data-slot="sidebar-content"] .sidebar-menu-button.active'
+    );
+    const content = active?.closest?.('[data-slot="sidebar-content"]');
+    if (!active || !content || content.clientHeight <= 0) {
+      return;
+    }
+    const maxScrollTop = content.scrollHeight - content.clientHeight;
+    if (maxScrollTop <= 0) {
+      return;
+    }
+    const contentRect = content.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+    if (contentRect.height <= 0 || activeRect.height <= 0) {
+      return;
+    }
+    const targetScrollTop = content.scrollTop + activeRect.top - contentRect.top - (content.clientHeight - activeRect.height) / 2;
+    content.scrollTop = Math.round(
+      Math.min(Math.max(targetScrollTop, 0), maxScrollTop)
+    );
+  }
   _setState(state, persist = true, emit = true) {
     const next = state === "collapsed" ? "collapsed" : "expanded";
-    const previous = this._element.dataset.mooSidebarState;
-    this._element.dataset.mooSidebarState = next;
-    const key = this._element.dataset.mooSidebarKey;
+    const previous = this._element.dataset.sidebarState;
+    this._element.dataset.sidebarState = next;
+    const key = this._element.dataset.sidebarKey;
     if (key === "catalog-shell") {
-      this._root.dataset.mooSidebarCatalogState = next;
+      this._root.dataset.sidebarCatalogState = next;
     }
     if (persist && key) {
       try {
         this._window.localStorage.setItem(this._config.storagePrefix + key, next);
       } catch (_) {
-        /* Storage is best-effort in restricted browsing contexts. */
       }
     }
     this._syncControls();
     if (next === "expanded") {
-      this._element
-        .querySelectorAll(".sidebar-menu-item")
-        .forEach((item) => this._resetFlyoutTrigger(item));
+      this._element.querySelectorAll(".sidebar-menu-item").forEach((item) => this._resetFlyoutTrigger(item));
     }
     this._syncTooltips();
     if (emit && previous !== next) {
       this._trigger("change", { state: next, previousState: previous || null });
     }
   }
-
   _toggle() {
     this._setState(
-      this._element.dataset.mooSidebarState === "collapsed" ? "expanded" : "collapsed"
+      this._element.dataset.sidebarState === "collapsed" ? "expanded" : "collapsed"
     );
   }
-
   _syncControls() {
-    const expanded = this._isDesktop()
-      ? this._element.dataset.mooSidebarState === "expanded"
-      : this._sidebar?.classList.contains("show") || false;
-    this._element
-      .querySelectorAll("[data-moo-sidebar-trigger], [data-moo-sidebar-rail]")
-      .forEach((control) => control.setAttribute("aria-expanded", String(expanded)));
+    const expanded = this._isDesktop() ? this._element.dataset.sidebarState === "expanded" : this._sidebar?.classList.contains("show") || false;
+    this._element.querySelectorAll("[data-sidebar-trigger], [data-sidebar-rail]").forEach((control) => control.setAttribute("aria-expanded", String(expanded)));
   }
-
   _resetFlyoutTrigger(item, expanded = null) {
     const trigger = item?.querySelector(":scope > .sidebar-menu-sub-trigger");
     const submenu = item?.querySelector(":scope > .sidebar-menu-sub");
@@ -178,68 +221,75 @@ export default class Sidebar {
       );
     }
   }
-
   _clearDropdownPosition(control) {
-    const item = control?.matches?.(".sidebar-menu-item")
-      ? control
-      : control?.closest?.(".sidebar-menu-item");
+    const item = control?.matches?.(".sidebar-menu-item") ? control : control?.closest?.(".sidebar-menu-item");
     if (!item) {
       return;
     }
-    delete item.dataset.mooSidebarDropdownPositioned;
+    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");
-    this._element
-      .querySelectorAll('[data-bs-toggle="dropdown"][aria-expanded="true"]')
-      .forEach((control) => {
-        if (control === exceptControl) {
-          return;
-        }
-        if (Dropdown) {
-          Dropdown.getOrCreateInstance(control).hide();
-        } else {
-          control.setAttribute("aria-expanded", "false");
-          control
-            .closest(".dropdown")
-            ?.querySelector(".dropdown-menu.show")
-            ?.classList.remove("show");
-          this._clearDropdownPosition(control);
-        }
-      });
+    this._element.querySelectorAll('[data-bs-toggle="dropdown"][aria-expanded="true"]').forEach((control) => {
+      if (control === exceptControl) {
+        return;
+      }
+      if (Dropdown) {
+        Dropdown.getOrCreateInstance(control).hide();
+      } else {
+        control.setAttribute("aria-expanded", "false");
+        control.closest(".dropdown")?.querySelector(".dropdown-menu.show")?.classList.remove("show");
+        this._clearDropdownPosition(control);
+      }
+    });
   }
-
   _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 isHeaderWorkspace = control?.classList.contains("sidebar-menu-button--workspace") && control.closest('[data-slot="sidebar-header"]');
+    const isFooterAccount = control?.closest(".sidebar-menu-item--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`
-    );
-    item.dataset.mooSidebarDropdownPositioned = "";
+    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() {
     this._flyout?.remove();
     if (this._flyoutOwner) {
@@ -248,17 +298,15 @@ export default class Sidebar {
     this._flyout = null;
     this._flyoutOwner = null;
   }
-
   _closeFlyouts() {
     this._removeFlyoutPortal();
     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);
     });
   }
-
   _openFlyout(item) {
     const submenu = item?.querySelector(":scope > .sidebar-menu-sub");
     const trigger = item?.querySelector(":scope > .sidebar-menu-sub-trigger");
@@ -268,45 +316,36 @@ export default class Sidebar {
     if (this._flyoutOwner === item && this._flyout) {
       return;
     }
-
     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");
     flyout.classList.add("sidebar-menu-flyout");
-    flyout.dataset.mooSidebarFlyout = "";
+    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");
     trigger?.setAttribute("aria-expanded", "true");
   }
-
   _tooltipAnchor(control) {
     return control.closest("li") || control;
   }
-
   _isIdentityTrigger(control) {
-    return (
-      control.closest(".sidebar-menu-item--account") ||
-      control.classList.contains("sidebar-menu-button--workspace")
-    );
+    return control.closest(".sidebar-menu-item--account") || control.classList.contains("sidebar-menu-button--workspace");
   }
-
   _disposeTooltip(control) {
     const Tooltip = this._bootstrap("Tooltip");
     if (!Tooltip || !control) {
@@ -320,38 +359,34 @@ export default class Sidebar {
     anchor.removeAttribute("data-bs-original-title");
     anchor.removeAttribute("aria-describedby");
   }
-
   _syncTooltips() {
     const Tooltip = this._bootstrap("Tooltip");
     if (!Tooltip) {
       return;
     }
     const collapsed = this._isCollapsed();
-    const placement = this._root.dir === "rtl" ? "left" : "right";
-    this._element.querySelectorAll("[data-moo-sidebar-tooltip]").forEach((control) => {
+    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")
-      ) {
+      if (!collapsed || this._isIdentityTrigger(control) || control.closest(".sidebar-menu-item")?.querySelector(":scope > .sidebar-menu-sub")) {
         return;
       }
-
-      // Bootstrap permits one plugin instance per element. A dropdown or
-      // collapse trigger keeps that instance slot; its neutral <li> owns the
-      // state-driven Sidebar tooltip instead.
       const anchor = this._tooltipAnchor(control);
       new Tooltip(anchor, {
-        title: control.getAttribute("data-moo-sidebar-tooltip"),
+        title: control.getAttribute("data-sidebar-tooltip"),
         placement,
-        container: "body",
-        trigger: "hover focus",
+        // 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);
     });
   }
-
   _bindEvents() {
     this._listen(this._sidebar, "shown.bs.offcanvas", () => this._syncControls());
     this._listen(this._sidebar, "hidden.bs.offcanvas", () => {
@@ -385,31 +420,25 @@ export default class Sidebar {
     this._listen(this._document, "keydown", (event) => this._handleShortcut(event));
     this._listen(this._window, "resize", () => {
       this._closeFlyouts();
-      this._element
-        .querySelectorAll("[data-moo-sidebar-dropdown-positioned]")
-        .forEach((item) => this._clearDropdownPosition(item));
+      this._element.querySelectorAll("[data-sidebar-dropdown-positioned]").forEach((item) => this._clearDropdownPosition(item));
       this._syncControls();
       this._syncTooltips();
     });
   }
-
   _dropdownControl(target) {
     if (!(target instanceof this._window.Element) || !this._element.contains(target)) {
       return null;
     }
-    if (target.matches('[data-bs-toggle="dropdown"][data-moo-sidebar-tooltip]')) {
+    if (target.matches('[data-bs-toggle="dropdown"][data-sidebar-tooltip]')) {
       return target;
     }
     return target.querySelector?.(
-      '[data-bs-toggle="dropdown"][data-moo-sidebar-tooltip]'
+      '[data-bs-toggle="dropdown"][data-sidebar-tooltip]'
     ) || null;
   }
-
   _handleControlClick(event) {
     const target = event.target;
-    const control = target instanceof this._window.Element
-      ? target.closest("[data-moo-sidebar-trigger], [data-moo-sidebar-rail]")
-      : null;
+    const control = target instanceof this._window.Element ? target.closest("[data-sidebar-trigger], [data-sidebar-rail]") : null;
     if (!control || !this._element.contains(control)) {
       return;
     }
@@ -419,7 +448,7 @@ export default class Sidebar {
       this._toggle();
       return;
     }
-    if (!control.matches("[data-moo-sidebar-trigger]")) {
+    if (!control.matches("[data-sidebar-trigger]")) {
       return;
     }
     const sidebar = this._document.getElementById(control.getAttribute("aria-controls"));
@@ -430,12 +459,9 @@ export default class Sidebar {
       this._offcanvas.toggle();
     }
   }
-
   _handleSubmenuClick(event) {
     const target = event.target;
-    const trigger = target instanceof this._window.Element
-      ? target.closest(".sidebar-menu-sub-trigger")
-      : null;
+    const trigger = target instanceof this._window.Element ? target.closest(".sidebar-menu-sub-trigger") : null;
     const item = trigger?.closest(".sidebar-menu-item");
     if (!trigger || !item || !this._element.contains(item) || !this._isCollapsed()) {
       return;
@@ -448,7 +474,6 @@ export default class Sidebar {
       this._openFlyout(item);
     }
   }
-
   _handleOutsideFlyoutClick(event) {
     if (!this._flyout) {
       return;
@@ -459,27 +484,15 @@ export default class Sidebar {
       this._closeFlyouts();
     }
   }
-
   _handleShortcut(event) {
     const target = event.target;
-    const isEditable =
-      target instanceof this._window.Element &&
-      (target.matches("input, textarea, select") || target.isContentEditable);
-    if (
-      event.defaultPrevented ||
-      event.isComposing ||
-      isEditable ||
-      !this._config.keyboard ||
-      !(event.metaKey || event.ctrlKey) ||
-      event.key.toLowerCase() !== "b" ||
-      !this._isDesktop()
-    ) {
+    const isEditable = target instanceof this._window.Element && (target.matches("input, textarea, select") || target.isContentEditable);
+    if (event.defaultPrevented || event.isComposing || isEditable || !this._config.keyboard || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "b" || !this._isDesktop()) {
       return;
     }
-    const preferred =
-      this._document.querySelector(
-        '[data-slot="sidebar-wrapper"][data-moo-sidebar-key]'
-      ) || this._document.querySelector('[data-slot="sidebar-wrapper"]');
+    const preferred = this._document.querySelector(
+      '[data-slot="sidebar-wrapper"][data-sidebar-key]'
+    ) || this._document.querySelector('[data-slot="sidebar-wrapper"]');
     if (preferred !== this._element) {
       return;
     }
@@ -487,4 +500,9 @@ export default class Sidebar {
     this._closeFlyouts();
     this._toggle();
   }
-}
+};
+__name(_Sidebar, "Sidebar");
+var Sidebar = _Sidebar;
+export {
+  Sidebar as default
+};