@notectl/core 1.7.0 → 1.7.1

package/dist/chunks/{ToolbarPlugin-B6JETWaw.mjs → ToolbarPlugin-B7oJRzpl.mjs}

@@ -1,21 +1,92 @@
 import { S as t, r as e } from "./resolvePluginLocale-B4w1OkPy.mjs";
-import { f as o, n, a as r, b as i, c as s, d as l } from "./ToolbarKeyboardNav-B32OMv8r.mjs";
-const a = { formattingOptionsAria: "Formatting options", moreToolsAria: "More tools" }, c = { en: a, de: { formattingOptionsAria: "Formatierungsoptionen", moreToolsAria: "Weitere Werkzeuge" }, es: { formattingOptionsAria: "Opciones de formato", moreToolsAria: "Más herramientas" }, fr: { formattingOptionsAria: "Options de mise en forme", moreToolsAria: "Plus d'outils" }, zh: { formattingOptionsAria: "格式选项", moreToolsAria: "更多工具" }, ru: { formattingOptionsAria: "Параметры форматирования", moreToolsAria: "Другие инструменты" }, ar: { formattingOptionsAria: "خيارات التنسيق", moreToolsAria: "أدوات إضافية" }, hi: { formattingOptionsAria: "फ़ॉर्मेटिंग विकल्प", moreToolsAria: "और उपकरण" } }, d = { BurgerMenu: "burger-menu", Flow: "flow", None: "none" }, p = "notectl-toolbar-btn--overflow-hidden", h = "notectl-toolbar-separator--overflow-hidden";
-class u {
+import { a as o, p as n } from "./PopupPositioning-Cn6L_mO2.mjs";
+import { f as r, n as i, b as s, a as l, c as a, d as c } from "./ToolbarKeyboardNav-DhpL8zNV.mjs";
+const d = new t("popup");
+class p {
+  stack = [];
+  referenceNode;
+  constructor(t2) {
+    this.referenceNode = t2;
+  }
+  open(t2) {
+    const e2 = document.createElement("div");
+    e2.className = t2.className ? `notectl-popup ${t2.className}` : "notectl-popup", t2.ariaRole && e2.setAttribute("role", t2.ariaRole), t2.ariaLabel && e2.setAttribute("aria-label", t2.ariaLabel);
+    const r2 = { close: () => this.closeEntry(c2), getElement: () => e2 };
+    t2.content(e2, () => this.closeEntry(c2));
+    const i2 = t2.referenceNode ?? this.referenceNode;
+    o(e2, i2);
+    const s2 = t2.anchor instanceof HTMLElement ? t2.anchor.getBoundingClientRect() : t2.anchor;
+    n(e2, s2, { position: t2.position ?? "below-start" });
+    const l2 = t2.parent ? this.findEntryByHandle(t2.parent) : null, a2 = (o2) => {
+      const n2 = o2.composedPath();
+      if (!n2.includes(e2)) {
+        for (const t3 of this.stack) if (n2.includes(t3.element)) return;
+        t2.anchor instanceof HTMLElement && n2.includes(t2.anchor) || this.closeEntry(c2);
+      }
+    }, c2 = { element: e2, config: t2, clickOutsideHandler: a2, parent: l2 };
+    return this.stack.push(c2), setTimeout(() => {
+      document.addEventListener("mousedown", a2);
+    }, 0), this.focusFirstItem(e2), r2;
+  }
+  close() {
+    const t2 = this.stack[this.stack.length - 1];
+    t2 && this.closeEntry(t2);
+  }
+  closeAll() {
+    for (; this.stack.length > 0; ) {
+      const t2 = this.stack[this.stack.length - 1];
+      t2 && this.closeEntry(t2);
+    }
+  }
+  isOpen() {
+    return this.stack.length > 0;
+  }
+  destroy() {
+    this.closeAll();
+  }
+  closeEntry(t2) {
+    const e2 = this.stack.indexOf(t2);
+    if (-1 !== e2) {
+      for (; this.stack.length > e2 + 1; ) {
+        const t3 = this.stack[this.stack.length - 1];
+        t3 && this.removeEntry(t3);
+      }
+      this.removeEntry(t2), t2.config.restoreFocusTo && t2.config.restoreFocusTo.focus(), t2.config.onClose?.();
+    }
+  }
+  removeEntry(t2) {
+    const e2 = this.stack.indexOf(t2);
+    -1 !== e2 && (this.stack.splice(e2, 1), t2.element.remove(), document.removeEventListener("mousedown", t2.clickOutsideHandler));
+  }
+  findEntryByHandle(t2) {
+    const e2 = t2.getElement();
+    return this.stack.find((t3) => t3.element === e2) ?? null;
+  }
+  focusFirstItem(t2) {
+    requestAnimationFrame(() => {
+      const e2 = t2.querySelector('[role="menuitem"]') ?? t2.querySelector('[role="option"]') ?? t2.querySelector('[role="gridcell"]') ?? t2.querySelector("input") ?? t2.querySelector("button");
+      e2?.focus();
+    });
+  }
+}
+const u = { formattingOptionsAria: "Formatting options", moreToolsAria: "More tools" }, h = { en: u, de: { formattingOptionsAria: "Formatierungsoptionen", moreToolsAria: "Weitere Werkzeuge" }, es: { formattingOptionsAria: "Opciones de formato", moreToolsAria: "Más herramientas" }, fr: { formattingOptionsAria: "Options de mise en forme", moreToolsAria: "Plus d'outils" }, zh: { formattingOptionsAria: "格式选项", moreToolsAria: "更多工具" }, ru: { formattingOptionsAria: "Параметры форматирования", moreToolsAria: "Другие инструменты" }, ar: { formattingOptionsAria: "خيارات التنسيق", moreToolsAria: "أدوات إضافية" }, hi: { formattingOptionsAria: "फ़ॉर्मेटिंग विकल्प", moreToolsAria: "और उपकरण" } }, m = { BurgerMenu: "burger-menu", Flow: "flow", None: "none" }, b = "notectl-toolbar-btn--overflow-hidden", f = "notectl-toolbar-separator--overflow-hidden";
+class v {
   toolbar;
   context;
   onOverflowChange;
   onItemActivated;
   getActiveElement;
   ariaLabel;
+  popupManager;
   entries = [];
   overflowButton = null;
   overflowDropdown = null;
+  overflowHandle = null;
   overflowEntries = [];
   resizeObserver = null;
   closeHandler = null;
   constructor(t2) {
-    this.toolbar = t2.toolbar, this.ariaLabel = t2.ariaLabel, this.context = t2.context, this.onOverflowChange = t2.onOverflowChange, this.onItemActivated = t2.onItemActivated, this.getActiveElement = t2.getActiveElement, this.resizeObserver = new ResizeObserver(() => this.recalculate()), this.resizeObserver.observe(this.toolbar);
+    this.toolbar = t2.toolbar, this.ariaLabel = t2.ariaLabel, this.context = t2.context, this.onOverflowChange = t2.onOverflowChange, this.onItemActivated = t2.onItemActivated, this.getActiveElement = t2.getActiveElement, this.popupManager = t2.popupManager ?? null, this.resizeObserver = new ResizeObserver(() => this.recalculate()), this.resizeObserver.observe(this.toolbar);
   }
   update(t2) {
     this.entries = t2.map((t3) => ({ element: t3.element, item: t3.item })), this.recalculate();
@@ -23,30 +94,30 @@ class u {
   recalculate() {
     if (0 === this.entries.length) return;
     this.closeDropdown(), this.resetVisibility(), this.ensureOverflowButton(), this.setOverflowButtonVisible(false);
-    const t2 = this.measureAvailableWidth() - 34 - 2;
-    let e2 = 0, o2 = false;
-    const n2 = [], r2 = Array.from(this.toolbar.children);
-    for (const i2 of r2) {
-      if (i2 === this.overflowButton) continue;
-      if (i2.classList.contains("notectl-toolbar-separator")) {
-        if (o2) {
-          i2.classList.add(h);
+    const t2 = this.measureAvailableWidth(), e2 = Array.from(this.toolbar.children), o2 = this.measureChildWidths(e2), n2 = t2 - 34 - 2;
+    let r2 = 0, i2 = false;
+    const s2 = [];
+    for (const t3 of e2) {
+      if (t3 === this.overflowButton) continue;
+      if (t3.classList.contains("notectl-toolbar-separator")) {
+        if (i2) {
+          t3.classList.add(f);
           continue;
         }
-        const n3 = i2.offsetWidth + 2;
-        e2 + n3 > t2 ? (o2 = true, i2.classList.add(h)) : e2 += n3;
+        const e4 = (o2.get(t3) ?? 0) + 2;
+        r2 + e4 > n2 ? (i2 = true, t3.classList.add(f)) : r2 += e4;
         continue;
       }
-      const r3 = this.entries.find((t3) => t3.element === i2);
-      if (!r3) continue;
-      if (o2) {
-        r3.element.classList.add(p), n2.push(r3);
+      const e3 = this.entries.find((e4) => e4.element === t3);
+      if (!e3) continue;
+      if (i2) {
+        e3.element.classList.add(b), s2.push(e3);
         continue;
       }
-      const s2 = r3.element.offsetWidth + 2;
-      e2 + s2 > t2 ? (o2 = true, r3.element.classList.add(p), n2.push(r3)) : e2 += s2;
+      const l2 = (o2.get(t3) ?? 0) + 2;
+      r2 + l2 > n2 ? (i2 = true, e3.element.classList.add(b), s2.push(e3)) : r2 += l2;
     }
-    this.overflowEntries = n2, this.hideTrailingSeparators(), this.setOverflowButtonVisible(n2.length > 0), this.notifyChange();
+    this.overflowEntries = s2, this.hideTrailingSeparators(), this.setOverflowButtonVisible(s2.length > 0), this.notifyChange();
   }
   updateItemStates(t2) {
     if (!this.overflowDropdown) return;
@@ -55,20 +126,28 @@ class u {
       const e3 = o2.getAttribute("data-toolbar-item"), n2 = this.overflowEntries.find((t3) => t3.item.id === e3);
       if (!n2) continue;
       const r2 = n2.item.isActive?.(t2) ?? false, i2 = n2.item.isEnabled?.(t2) ?? true;
-      o2.classList.toggle("notectl-dropdown__item--active", r2), o2.disabled = !i2;
+      if (o2.classList.toggle("notectl-dropdown__item--active", r2), o2.disabled = !i2, "combobox" === n2.item.popupType) {
+        const e4 = o2.querySelector(".notectl-dropdown__item-label");
+        e4 && (e4.textContent = n2.item.getLabel(t2));
+      }
     }
   }
   destroy() {
     this.resizeObserver?.disconnect(), this.resizeObserver = null, this.closeDropdown(), this.overflowButton?.remove(), this.overflowButton = null, this.entries = [], this.overflowEntries = [];
   }
+  measureChildWidths(t2) {
+    const e2 = /* @__PURE__ */ new Map();
+    for (const o2 of t2) o2 !== this.overflowButton && e2.set(o2, o2.offsetWidth);
+    return e2;
+  }
   measureAvailableWidth() {
     const t2 = getComputedStyle(this.toolbar), e2 = Number.parseFloat(t2.paddingLeft) || 0, o2 = Number.parseFloat(t2.paddingRight) || 0;
     return this.toolbar.clientWidth - e2 - o2;
   }
   resetVisibility() {
-    for (const t3 of this.entries) t3.element.classList.remove(p);
+    for (const t3 of this.entries) t3.element.classList.remove(b);
     const t2 = Array.from(this.toolbar.querySelectorAll(".notectl-toolbar-separator"));
-    for (const e2 of t2) e2.classList.remove(h);
+    for (const e2 of t2) e2.classList.remove(f);
   }
   setOverflowButtonVisible(t2) {
     this.overflowButton && (this.overflowButton.classList.toggle("notectl-toolbar-overflow-btn--hidden", !t2), t2 || this.overflowButton.removeAttribute("tabindex"));
@@ -86,27 +165,31 @@ class u {
   openDropdown() {
     if (!this.overflowButton || 0 === this.overflowEntries.length) return;
     const t2 = document.createElement("div");
-    t2.className = "notectl-toolbar-popup notectl-dropdown", t2.setAttribute("role", "menu"), this.renderDropdownItems(t2), this.positionDropdown(t2), this.appendToRoot(t2), this.overflowDropdown = t2, this.overflowButton.setAttribute("aria-expanded", "true"), requestAnimationFrame(() => {
+    t2.className = "notectl-toolbar-popup notectl-dropdown", t2.setAttribute("role", "menu"), this.renderDropdownItems(t2, this.context.getState()), this.popupManager ? (this.overflowHandle = this.popupManager.open({ anchor: this.overflowButton, className: "notectl-toolbar-popup notectl-dropdown", ariaRole: "menu", position: "below-end", referenceNode: this.overflowButton, restoreFocusTo: this.overflowButton, onClose: () => {
+      this.overflowHandle = null, this.overflowDropdown = null, this.overflowButton && this.overflowButton.setAttribute("aria-expanded", "false");
+    }, content: (t3) => {
+      this.renderDropdownItems(t3, this.context.getState()), this.overflowDropdown = t3, t3.addEventListener("keydown", (t4) => this.handleDropdownKeydown(t4));
+    } }), this.overflowButton.setAttribute("aria-expanded", "true")) : (this.positionDropdown(t2), o(t2, this.overflowButton), this.overflowDropdown = t2, this.overflowButton.setAttribute("aria-expanded", "true"), requestAnimationFrame(() => {
       const e2 = t2.querySelector('[role="menuitem"]');
       e2?.focus();
-    }), t2.addEventListener("keydown", (t3) => this.handleDropdownKeydown(t3)), this.registerCloseHandler();
+    }), t2.addEventListener("keydown", (t3) => this.handleDropdownKeydown(t3)), this.registerCloseHandler());
   }
-  renderDropdownItems(t2) {
-    let e2 = null;
-    for (const o2 of this.overflowEntries) {
-      if (null !== e2 && o2.item.group !== e2) {
+  renderDropdownItems(t2, e2) {
+    let o2 = null;
+    for (const n2 of this.overflowEntries) {
+      if (null !== o2 && n2.item.group !== o2) {
         const e3 = document.createElement("div");
         e3.className = "notectl-dropdown__separator", e3.setAttribute("role", "separator"), t2.appendChild(e3);
       }
-      e2 = o2.item.group;
-      const n2 = document.createElement("button");
-      n2.type = "button", n2.className = "notectl-dropdown__item", n2.setAttribute("role", "menuitem"), n2.setAttribute("tabindex", "-1"), n2.setAttribute("data-toolbar-item", o2.item.id);
-      const r2 = document.createElement("span");
-      r2.className = "notectl-dropdown__item-icon", r2.innerHTML = o2.item.icon, n2.appendChild(r2);
+      o2 = n2.item.group;
+      const r2 = document.createElement("button");
+      r2.type = "button", r2.className = "notectl-dropdown__item", r2.setAttribute("role", "menuitem"), r2.setAttribute("tabindex", "-1"), r2.setAttribute("data-toolbar-item", n2.item.id);
       const i2 = document.createElement("span");
-      i2.className = "notectl-dropdown__item-label", i2.textContent = o2.item.tooltip ?? o2.item.label, n2.appendChild(i2), n2.addEventListener("mousedown", (t3) => {
-        t3.preventDefault(), t3.stopPropagation(), this.activateOverflowItem(o2);
-      }), t2.appendChild(n2);
+      i2.className = "notectl-dropdown__item-icon", "combobox" !== n2.item.popupType && (i2.innerHTML = n2.item.icon), r2.appendChild(i2);
+      const s2 = document.createElement("span");
+      s2.className = "notectl-dropdown__item-label", s2.textContent = "combobox" === n2.item.popupType ? n2.item.getLabel(e2) : n2.item.tooltip ?? n2.item.label, r2.appendChild(s2), r2.addEventListener("mousedown", (t3) => {
+        t3.preventDefault(), t3.stopPropagation(), this.activateOverflowItem(n2);
+      }), t2.appendChild(r2);
     }
   }
   positionDropdown(t2) {
@@ -114,11 +197,6 @@ class u {
     const e2 = this.overflowButton.getBoundingClientRect(), o2 = window.innerWidth - e2.right;
     t2.style.position = "fixed", t2.style.top = `${e2.bottom + 2}px`, t2.style.right = `${o2}px`, t2.style.left = "auto", t2.style.zIndex = "10000";
   }
-  appendToRoot(t2) {
-    if (!this.overflowButton) return;
-    const e2 = this.overflowButton.getRootNode();
-    e2 instanceof ShadowRoot ? e2.appendChild(t2) : document.body.appendChild(t2);
-  }
   registerCloseHandler() {
     this.closeHandler = (t2) => {
       const e2 = t2.composedPath();
@@ -128,6 +206,10 @@ class u {
     }, 0);
   }
   closeDropdown() {
+    if (this.overflowHandle) {
+      const t2 = this.overflowHandle;
+      return this.overflowHandle = null, this.overflowDropdown = null, t2.close(), void (this.overflowButton && this.overflowButton.setAttribute("aria-expanded", "false"));
+    }
     this.overflowDropdown && (this.overflowDropdown.remove(), this.overflowDropdown = null), this.overflowButton && this.overflowButton.setAttribute("aria-expanded", "false"), this.closeHandler && (document.removeEventListener("mousedown", this.closeHandler), this.closeHandler = null);
   }
   activateOverflowItem(t2) {
@@ -136,26 +218,26 @@ class u {
   handleDropdownKeydown(t2) {
     if (!this.overflowDropdown) return;
     if ("Escape" === t2.key || "Tab" === t2.key) return t2.preventDefault(), t2.stopPropagation(), this.closeDropdown(), void this.overflowButton?.focus();
-    const e2 = Array.from(this.overflowDropdown.querySelectorAll('[role="menuitem"]')), n2 = e2.indexOf(this.getActiveElement());
+    const e2 = Array.from(this.overflowDropdown.querySelectorAll('[role="menuitem"]')), o2 = e2.indexOf(this.getActiveElement());
     switch (t2.key) {
       case "ArrowDown": {
         t2.preventDefault();
-        const r2 = o(e2, n2, 1);
-        e2[r2]?.focus();
+        const n2 = r(e2, o2, 1);
+        e2[n2]?.focus();
         break;
       }
       case "ArrowUp": {
         t2.preventDefault();
-        const r2 = o(e2, n2, -1);
-        e2[r2]?.focus();
+        const n2 = r(e2, o2, -1);
+        e2[n2]?.focus();
         break;
       }
       case "Enter":
       case " ": {
         t2.preventDefault();
-        const o2 = e2[n2];
-        if (!o2) break;
-        const r2 = o2.getAttribute("data-toolbar-item"), i2 = this.overflowEntries.find((t3) => t3.item.id === r2);
+        const n2 = e2[o2];
+        if (!n2) break;
+        const r2 = n2.getAttribute("data-toolbar-item"), i2 = this.overflowEntries.find((t3) => t3.item.id === r2);
         i2 && this.activateOverflowItem(i2);
         break;
       }
@@ -166,42 +248,83 @@ class u {
     for (let e2 = t2.length - 1; e2 >= 0; e2--) {
       const o2 = t2[e2];
       if (o2 && o2 !== this.overflowButton) {
-        if (o2.classList.contains("notectl-toolbar-separator")) o2.classList.contains(h) || o2.classList.add(h);
-        else if (!o2.classList.contains(p)) break;
+        if (o2.classList.contains("notectl-toolbar-separator")) o2.classList.contains(f) || o2.classList.add(f);
+        else if (!o2.classList.contains(b)) break;
       }
     }
   }
   notifyChange() {
-    const t2 = this.entries.filter((t3) => !t3.element.classList.contains(p)).map((t3) => t3.element);
+    const t2 = this.entries.filter((t3) => !t3.element.classList.contains(b)).map((t3) => t3.element);
     this.onOverflowChange(t2, this.overflowEntries.length > 0 ? this.overflowButton : null);
   }
 }
-function m(t2, e2, o2) {
+function g(t2, e2, o2) {
   const n2 = t2.querySelectorAll(".notectl-grid-picker__cell");
   for (const t3 of n2) {
     const n3 = Number(t3.getAttribute("data-row")), r2 = Number(t3.getAttribute("data-col"));
     t3.classList.toggle("notectl-grid-picker__cell--highlighted", n3 <= e2 && r2 <= o2);
   }
 }
-function b() {
+function w() {
   const t2 = document.createElement("span");
   return t2.className = "notectl-toolbar-separator", t2.setAttribute("role", "separator"), t2;
 }
-class f {
+class x {
   activePopup = null;
   activePopupButton = null;
-  closePopupHandler = null;
+  activeHandle = null;
   getActiveElement;
+  popupManager = null;
   constructor(t2) {
     this.getActiveElement = t2;
   }
+  setPopupManager(t2) {
+    this.popupManager = t2;
+  }
   isOpen() {
     return null !== this.activePopup;
   }
   toggle(t2, e2, o2) {
-    if (this.activePopup) return void this.close();
+    this.activePopup ? this.close() : this.popupManager ? this.openViaManager(t2, e2, o2) : this.openLegacy(t2, e2, o2);
+  }
+  close() {
+    if (this.activeHandle) {
+      const t2 = this.activeHandle;
+      return this.activeHandle = null, this.clearButtonState(), void t2.close();
+    }
+    this.clearButtonState(), this.activePopup && (this.activePopup.remove(), this.activePopup = null);
+  }
+  closeAndRestoreFocus() {
+    const t2 = this.activePopupButton;
+    this.close(), t2?.focus();
+  }
+  destroy() {
+    this.close();
+  }
+  openViaManager(t2, e2, o2) {
+    this.popupManager && (this.activePopupButton = t2, t2.classList.add("notectl-toolbar-btn--popup-open"), t2.setAttribute("aria-expanded", "true"), this.activeHandle = this.popupManager.open({ anchor: t2, className: "notectl-toolbar-popup", referenceNode: t2, restoreFocusTo: t2, position: "below-start", onClose: () => {
+      this.activeHandle = null, this.clearButtonState(), this.activePopup = null;
+    }, content: (t3, n2) => {
+      this.activePopup = t3, this.renderPopupContent(t3, e2, o2, n2), t3.addEventListener("keydown", (t4) => this.handlePopupKeydown(t4));
+    } }));
+  }
+  openLegacy(t2, e2, o2) {
     const n2 = document.createElement("div");
-    switch (n2.className = "notectl-toolbar-popup", e2.popupType) {
+    n2.className = "notectl-toolbar-popup", this.renderPopupContent(n2, e2, o2, () => this.close()), this.positionAndAppend(n2, t2), this.activePopup = n2, this.activePopupButton = t2, t2.classList.add("notectl-toolbar-btn--popup-open"), t2.setAttribute("aria-expanded", "true"), this.focusFirstItem(n2), n2.addEventListener("keydown", (t3) => this.handlePopupKeydown(t3));
+    const r2 = (e3) => {
+      const o3 = e3.composedPath();
+      o3.includes(n2) || o3.includes(t2) || this.close();
+    };
+    setTimeout(() => {
+      document.addEventListener("mousedown", r2);
+    }, 0), n2.dataset.legacyClose = "true";
+    const i2 = this.close.bind(this);
+    this.close = () => {
+      document.removeEventListener("mousedown", r2), this.close = i2, i2();
+    };
+  }
+  renderPopupContent(t2, e2, o2, n2) {
+    switch (e2.popupType) {
       case "gridPicker":
         !(function(t3, e3, o3) {
           t3.className += " notectl-grid-picker";
@@ -212,7 +335,7 @@ class f {
           for (let t4 = 1; t4 <= e3.maxRows; t4++) for (let i2 = 1; i2 <= e3.maxCols; i2++) {
             const s2 = document.createElement("div");
             s2.className = "notectl-grid-picker__cell", s2.setAttribute("role", "gridcell"), s2.setAttribute("tabindex", "-1"), s2.setAttribute("aria-label", `${t4} x ${i2}`), s2.style.width = "20px", s2.style.height = "20px", s2.style.border = "1px solid #ccc", s2.style.cursor = "pointer", s2.setAttribute("data-row", String(t4)), s2.setAttribute("data-col", String(i2)), s2.addEventListener("mouseenter", () => {
-              m(n3, t4, i2), r2.textContent = `${t4} x ${i2}`;
+              g(n3, t4, i2), r2.textContent = `${t4} x ${i2}`;
             }), s2.addEventListener("mousedown", (n4) => {
               n4.preventDefault(), n4.stopPropagation(), e3.onSelect(t4, i2), o3();
             }), s2.addEventListener("click", () => {
@@ -220,7 +343,7 @@ class f {
             }), n3.appendChild(s2);
           }
           t3.appendChild(n3), t3.appendChild(r2);
-        })(n2, e2.popupConfig, () => this.close());
+        })(t2, e2.popupConfig, n2);
         break;
       case "dropdown":
         !(function(t3, e3, o3, n3) {
@@ -238,27 +361,15 @@ class f {
               o3(r2.command), n3();
             }), t3.appendChild(e4);
           }
-        })(n2, e2.popupConfig, (t3) => o2.executeCommand(t3), () => this.close());
+        })(t2, e2.popupConfig, (t3) => o2.executeCommand(t3), n2);
         break;
       case "custom":
-        e2.renderPopup(n2, o2, () => this.close());
+      case "combobox":
+        e2.renderPopup(t2, o2, n2);
     }
-    this.positionAndAppend(n2, t2), this.activePopup = n2, this.activePopupButton = t2, t2.classList.add("notectl-toolbar-btn--popup-open"), t2.setAttribute("aria-expanded", "true"), this.focusFirstItem(n2), n2.addEventListener("keydown", (t3) => this.handlePopupKeydown(t3)), this.closePopupHandler = (e3) => {
-      const o3 = e3.composedPath();
-      o3.includes(n2) || o3.includes(t2) || this.close();
-    }, setTimeout(() => {
-      this.closePopupHandler && document.addEventListener("mousedown", this.closePopupHandler);
-    }, 0);
-  }
-  close() {
-    this.activePopupButton && (this.activePopupButton.classList.remove("notectl-toolbar-btn--popup-open"), this.activePopupButton.setAttribute("aria-expanded", "false"), this.activePopupButton = null), this.activePopup && (this.activePopup.remove(), this.activePopup = null), this.closePopupHandler && (document.removeEventListener("mousedown", this.closePopupHandler), this.closePopupHandler = null);
   }
-  closeAndRestoreFocus() {
-    const t2 = this.activePopupButton;
-    this.close(), t2?.focus();
-  }
-  destroy() {
-    this.close();
+  clearButtonState() {
+    this.activePopupButton && (this.activePopupButton.classList.remove("notectl-toolbar-btn--popup-open"), this.activePopupButton.setAttribute("aria-expanded", "false"), this.activePopupButton = null);
   }
   positionAndAppend(t2, e2) {
     const o2 = e2.getBoundingClientRect();
@@ -280,37 +391,37 @@ class f {
     e2.length > 0 ? this.handleDropdownKeydown(t2, e2) : null !== this.activePopup.querySelector(".notectl-grid-picker__cell") ? this.handleGridKeydown(t2) : this.handleCustomPopupKeydown(t2);
   }
   handleDropdownKeydown(t2, e2) {
-    const n2 = Array.from(e2), r2 = n2.indexOf(this.getActiveElement());
+    const o2 = Array.from(e2), n2 = o2.indexOf(this.getActiveElement());
     switch (t2.key) {
       case "ArrowDown": {
         t2.preventDefault();
-        const e3 = o(n2, r2, 1);
-        n2[e3]?.focus();
+        const e3 = r(o2, n2, 1);
+        o2[e3]?.focus();
         break;
       }
       case "ArrowUp": {
         t2.preventDefault();
-        const e3 = o(n2, r2, -1);
-        n2[e3]?.focus();
+        const e3 = r(o2, n2, -1);
+        o2[e3]?.focus();
         break;
       }
       case "Enter":
       case " ": {
         t2.preventDefault();
-        const e3 = n2[r2];
+        const e3 = o2[n2];
         e3 && e3.click();
         break;
       }
     }
   }
   handleGridKeydown(t2) {
-    const e2 = this.getActiveElement(), o2 = Number(e2?.getAttribute("data-row") ?? 1), r2 = Number(e2?.getAttribute("data-col") ?? 1), i2 = this.activePopup?.querySelector(".notectl-grid-picker__grid") ?? null;
-    if (!i2) return;
-    const s2 = i2.querySelector(".notectl-grid-picker__cell:last-child"), l2 = Number(s2?.getAttribute("data-col") ?? 1), a2 = Number(s2?.getAttribute("data-row") ?? 1);
+    const e2 = this.getActiveElement(), o2 = Number(e2?.getAttribute("data-row") ?? 1), n2 = Number(e2?.getAttribute("data-col") ?? 1), r2 = this.activePopup?.querySelector(".notectl-grid-picker__grid") ?? null;
+    if (!r2) return;
+    const s2 = r2.querySelector(".notectl-grid-picker__cell:last-child"), l2 = Number(s2?.getAttribute("data-col") ?? 1), a2 = Number(s2?.getAttribute("data-row") ?? 1);
     if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t2.key)) {
       t2.preventDefault();
-      const [e3, s3] = n(o2, r2, a2, l2, t2.key), c2 = i2.querySelector(`.notectl-grid-picker__cell[data-row="${e3}"][data-col="${s3}"]`);
-      c2?.focus(), m(i2, e3, s3);
+      const [e3, s3] = i(o2, n2, a2, l2, t2.key), c2 = r2.querySelector(`.notectl-grid-picker__cell[data-row="${e3}"][data-col="${s3}"]`);
+      c2?.focus(), g(r2, e3, s3);
       const d2 = this.activePopup?.querySelector(".notectl-grid-picker__label") ?? null;
       d2 && (d2.textContent = `${e3} x ${s3}`);
     }
@@ -320,34 +431,34 @@ class f {
     if (!this.activePopup) return;
     const e2 = Array.from(this.activePopup.querySelectorAll("button"));
     if (0 === e2.length) return;
-    const n2 = this.getActiveElement(), r2 = e2.indexOf(n2);
+    const o2 = this.getActiveElement(), n2 = e2.indexOf(o2);
     switch (t2.key) {
       case "ArrowDown": {
         t2.preventDefault();
-        const n3 = o(e2, r2, 1);
-        e2[n3]?.focus();
+        const o3 = r(e2, n2, 1);
+        e2[o3]?.focus();
         break;
       }
       case "ArrowUp": {
         t2.preventDefault();
-        const n3 = o(e2, r2, -1);
-        e2[n3]?.focus();
+        const o3 = r(e2, n2, -1);
+        e2[o3]?.focus();
         break;
       }
       case "Enter":
       case " ":
-        t2.preventDefault(), n2 && n2.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+        t2.preventDefault(), o2 && o2.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
     }
   }
 }
-class v {
+class y {
   element;
   timer = null;
   target = null;
   isPopupActive;
   static TOOLTIP_ID = "notectl-toolbar-tooltip";
   constructor(t2) {
-    this.isPopupActive = t2, this.element = document.createElement("div"), this.element.className = "notectl-toolbar-tooltip", this.element.id = v.TOOLTIP_ID, this.element.setAttribute("role", "tooltip"), this.element.style.display = "none";
+    this.isPopupActive = t2, this.element = document.createElement("div"), this.element.className = "notectl-toolbar-tooltip", this.element.id = y.TOOLTIP_ID, this.element.setAttribute("role", "tooltip"), this.element.style.display = "none";
   }
   show(t2) {
     if (this.hide(), this.isPopupActive() || t2.disabled) return;
@@ -356,7 +467,7 @@ class v {
       if (this.isPopupActive()) return;
       this.element.textContent = e2, this.element.style.display = "";
       const o2 = t2.getRootNode();
-      o2 instanceof ShadowRoot && !this.element.parentNode ? o2.appendChild(this.element) : o2 instanceof ShadowRoot || this.element.parentNode || document.body.appendChild(this.element), t2.setAttribute("aria-describedby", v.TOOLTIP_ID);
+      o2 instanceof ShadowRoot && !this.element.parentNode ? o2.appendChild(this.element) : o2 instanceof ShadowRoot || this.element.parentNode || document.body.appendChild(this.element), t2.setAttribute("aria-describedby", y.TOOLTIP_ID);
       const n2 = t2.getBoundingClientRect();
       this.element.style.position = "fixed", this.element.style.top = `${n2.bottom + 6}px`, this.element.style.left = `${n2.left + n2.width / 2}px`, this.element.style.transform = "translateX(-50%)";
     }, 500));
@@ -368,8 +479,8 @@ class v {
     this.hide(), this.element.remove();
   }
 }
-const w = new t("toolbar");
-class g {
+const A = new t("toolbar");
+class E {
   id = "toolbar";
   name = "Toolbar";
   priority = 10;
@@ -382,14 +493,15 @@ class g {
   focusedIndex = 0;
   tooltip = null;
   popupController = null;
+  popupManager = null;
   overflowController = null;
   visibleElements = [];
   locale;
   constructor(t2) {
-    this.layoutConfig = t2 ?? null, this.overflowBehavior = t2?.overflow ?? d.BurgerMenu;
+    this.layoutConfig = t2 ?? null, this.overflowBehavior = t2?.overflow ?? m.BurgerMenu;
   }
   init(t2) {
-    this.locale = e(c, t2), t2.registerStyleSheet(`
+    this.locale = e(h, t2), t2.registerStyleSheet(`
 /* Toolbar */
 .notectl-plugin-container--top {
 	display: flex;
@@ -642,7 +754,92 @@ class g {
 	background: var(--notectl-border);
 	margin: 4px 0;
 }
-`), this.context = t2, this.popupController = new f(() => this.getActiveElement()), this.tooltip = new v(() => this.popupController?.isOpen() ?? false), t2.registerService(w, { refresh: () => this.updateButtonStates(t2.getState()), closePopup: () => this.popupController?.close() }), this.createToolbarElement();
+
+/* Combobox-style toolbar buttons (shared base for font, fontSize, heading, etc.) */
+.notectl-toolbar-btn[role="combobox"] {
+	width: auto;
+	padding: 0 8px;
+	gap: 4px;
+	border: 1px solid var(--notectl-border);
+	border-radius: 4px;
+	background: var(--notectl-bg);
+}
+
+.notectl-toolbar-btn[role="combobox"]:hover {
+	background: var(--notectl-hover-bg);
+	border-color: var(--notectl-fg-muted);
+}
+
+.notectl-toolbar-btn[role="combobox"].notectl-toolbar-btn--active {
+	background: var(--notectl-bg);
+	border-color: var(--notectl-primary-muted);
+}
+
+.notectl-toolbar-combobox__label {
+	flex: 1;
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--notectl-fg);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: left;
+	line-height: 30px;
+}
+
+.notectl-toolbar-combobox__arrow {
+	flex-shrink: 0;
+	font-size: 11px;
+	color: var(--notectl-fg-muted);
+	line-height: 30px;
+}
+
+/* Link Popup */
+.notectl-link-popup {
+	padding: 8px;
+	min-width: 200px;
+}
+
+.notectl-link-popup__input {
+	width: 100%;
+	padding: 4px;
+	box-sizing: border-box;
+	border: 1px solid var(--notectl-border);
+	border-radius: 4px;
+	font-size: 13px;
+	color: var(--notectl-fg);
+	background: var(--notectl-bg);
+}
+
+.notectl-link-popup__input:focus-visible {
+	outline: 2px solid var(--notectl-focus-ring);
+	outline-offset: -1px;
+}
+
+.notectl-link-popup__button {
+	width: 100%;
+	padding: 6px 12px;
+	cursor: pointer;
+	border: 1px solid var(--notectl-border);
+	border-radius: 4px;
+	background: var(--notectl-bg);
+	color: var(--notectl-fg);
+	font-size: 13px;
+}
+
+.notectl-link-popup__button--apply {
+	margin-top: 4px;
+}
+
+.notectl-link-popup__button:hover {
+	background: var(--notectl-hover-bg);
+}
+
+.notectl-link-popup__button:focus-visible {
+	outline: 2px solid var(--notectl-focus-ring);
+	outline-offset: -1px;
+}
+`), this.context = t2, this.popupManager = new p(t2.getContainer()), t2.registerService(d, this.popupManager), this.popupController = new x(() => this.getActiveElement()), this.popupController.setPopupManager(this.popupManager), this.tooltip = new y(() => this.popupController?.isOpen() ?? false), t2.registerService(A, { refresh: () => this.updateButtonStates(t2.getState()), closePopup: () => this.popupController?.close() }), this.createToolbarElement();
   }
   getOverflowBehavior() {
     return this.overflowBehavior;
@@ -654,7 +851,7 @@ class g {
     this.renderItems();
   }
   destroy() {
-    this.overflowController?.destroy(), this.overflowController = null, this.popupController?.destroy(), this.popupController = null, this.tooltip?.destroy(), this.tooltip = null, this.toolbarElement && (this.toolbarElement.remove(), this.toolbarElement = null), this.buttons = [], this.visibleElements = [], this.context = null;
+    this.overflowController?.destroy(), this.overflowController = null, this.popupController?.destroy(), this.popupController = null, this.popupManager?.destroy(), this.popupManager = null, this.tooltip?.destroy(), this.tooltip = null, this.toolbarElement && (this.toolbarElement.remove(), this.toolbarElement = null), this.buttons = [], this.visibleElements = [], this.context = null;
   }
   onStateChange(t2, e2, o2) {
     this.updateButtonStates(e2);
@@ -673,7 +870,7 @@ class g {
     this.toolbarElement = document.createElement("div"), this.toolbarElement.setAttribute("role", "toolbar"), this.toolbarElement.setAttribute("aria-label", this.locale.formattingOptionsAria), this.toolbarElement.setAttribute("data-notectl-no-print", ""), this.toolbarElement.className = "notectl-toolbar", this.toolbarElement.addEventListener("keydown", (t3) => this.handleToolbarKeydown(t3)), this.applyOverflowBehavior(), t2.appendChild(this.toolbarElement);
   }
   applyOverflowBehavior() {
-    this.toolbarElement && this.context && (this.overflowController?.destroy(), this.overflowController = null, this.toolbarElement.setAttribute("data-overflow", this.overflowBehavior), this.overflowBehavior === d.BurgerMenu ? this.overflowController = new u({ toolbar: this.toolbarElement, ariaLabel: this.locale.moreToolsAria, context: this.context, onOverflowChange: (t2, e2) => {
+    this.toolbarElement && this.context && (this.overflowController?.destroy(), this.overflowController = null, this.toolbarElement.setAttribute("data-overflow", this.overflowBehavior), this.overflowBehavior === m.BurgerMenu ? this.overflowController = new v({ toolbar: this.toolbarElement, ariaLabel: this.locale.moreToolsAria, context: this.context, popupManager: this.popupManager ?? void 0, onOverflowChange: (t2, e2) => {
       this.visibleElements = e2 ? [...t2, e2] : [...t2], this.initRovingTabindex();
     }, onItemActivated: (t2, e2) => {
       this.activateButton(t2, e2);
@@ -691,12 +888,12 @@ class g {
     return this.visibleElements.length > 0 ? this.visibleElements : this.buttons.map((t2) => t2.element);
   }
   initRovingTabindex() {
-    const t2 = this.getTabElements(), e2 = r(t2);
-    this.focusedIndex = e2 >= 0 ? e2 : 0, i(t2, this.focusedIndex);
+    const t2 = this.getTabElements(), e2 = s(t2);
+    this.focusedIndex = e2 >= 0 ? e2 : 0, l(t2, this.focusedIndex);
   }
   setRovingFocus(t2) {
     const e2 = this.getTabElements();
-    t2 < 0 || t2 >= e2.length || (this.focusedIndex = t2, i(e2, t2), e2[t2]?.focus());
+    t2 < 0 || t2 >= e2.length || (this.focusedIndex = t2, l(e2, t2), e2[t2]?.focus());
   }
   getActiveElement() {
     const t2 = this.toolbarElement?.getRootNode();
@@ -711,25 +908,25 @@ class g {
     if (0 !== e2.length) switch (this.syncFocusedIndex(), t2.key) {
       case "ArrowRight": {
         t2.preventDefault();
-        const o2 = l(e2, this.focusedIndex, 1);
+        const o2 = c(e2, this.focusedIndex, 1);
         this.setRovingFocus(o2);
         break;
       }
       case "ArrowLeft": {
         t2.preventDefault();
-        const o2 = l(e2, this.focusedIndex, -1);
+        const o2 = c(e2, this.focusedIndex, -1);
         this.setRovingFocus(o2);
         break;
       }
       case "Home": {
         t2.preventDefault();
-        const o2 = r(e2);
+        const o2 = s(e2);
         o2 >= 0 && this.setRovingFocus(o2);
         break;
       }
       case "End": {
         t2.preventDefault();
-        const o2 = s(e2);
+        const o2 = a(e2);
         o2 >= 0 && this.setRovingFocus(o2);
         break;
       }
@@ -756,7 +953,7 @@ class g {
         o3.sort((t3, e4) => (t3.priority ?? 100) - (e4.priority ?? 100)), n2.push(...o3);
       }
       if (0 !== n2.length) {
-        e2 || this.toolbarElement.appendChild(b()), e2 = false;
+        e2 || this.toolbarElement.appendChild(w()), e2 = false;
         for (const t3 of n2) {
           const e3 = this.createButton(t3);
           this.toolbarElement.appendChild(e3.element), this.buttons.push(e3);
@@ -774,7 +971,7 @@ class g {
       const o2 = e2[t3];
       if (!o2) continue;
       const n2 = this.createButton(o2);
-      this.toolbarElement.appendChild(n2.element), this.buttons.push(n2), o2.separatorAfter && t3 < e2.length - 1 && this.toolbarElement.appendChild(b());
+      this.toolbarElement.appendChild(n2.element), this.buttons.push(n2), o2.separatorAfter && t3 < e2.length - 1 && this.toolbarElement.appendChild(w());
     }
     else {
       const t3 = /* @__PURE__ */ new Map();
@@ -784,7 +981,7 @@ class g {
       }
       let o2 = true;
       for (const [, e3] of t3) {
-        o2 || this.toolbarElement.appendChild(b()), o2 = false;
+        o2 || this.toolbarElement.appendChild(w()), o2 = false;
         for (const t4 of e3) {
           const e4 = this.createButton(t4);
           this.toolbarElement.appendChild(e4.element), this.buttons.push(e4);
@@ -794,25 +991,40 @@ class g {
   }
   createButton(t2) {
     const e2 = document.createElement("button");
-    e2.type = "button", e2.className = `notectl-toolbar-btn notectl-toolbar-btn--${t2.id}`, e2.setAttribute("aria-pressed", "false"), e2.setAttribute("aria-label", t2.label), e2.setAttribute("data-toolbar-item", t2.id), e2.setAttribute("data-tooltip", t2.tooltip ?? t2.label), t2.popupType && (e2.setAttribute("aria-haspopup", "true"), e2.setAttribute("aria-expanded", "false"));
-    const o2 = document.createElement("span");
-    return o2.className = "notectl-toolbar-btn__icon", o2.innerHTML = t2.icon, e2.appendChild(o2), e2.addEventListener("mousedown", (o3) => {
+    e2.type = "button", e2.className = `notectl-toolbar-btn notectl-toolbar-btn--${t2.id}`, e2.setAttribute("aria-pressed", "false"), e2.setAttribute("aria-label", t2.label), e2.setAttribute("data-toolbar-item", t2.id), e2.setAttribute("data-tooltip", t2.tooltip ?? t2.label);
+    let o2 = null;
+    if ("combobox" === t2.popupType) {
+      e2.setAttribute("role", "combobox"), e2.setAttribute("aria-haspopup", "listbox"), e2.setAttribute("aria-expanded", "false");
+      const n2 = document.createElement("span");
+      n2.className = "notectl-toolbar-combobox__label";
+      const r2 = this.context?.getState();
+      r2 && (n2.textContent = t2.getLabel(r2)), e2.appendChild(n2), o2 = n2;
+      const i2 = document.createElement("span");
+      i2.className = "notectl-toolbar-combobox__arrow", i2.setAttribute("aria-hidden", "true"), i2.textContent = "▾", e2.appendChild(i2);
+    } else {
+      t2.popupType && (e2.setAttribute("aria-haspopup", "true"), e2.setAttribute("aria-expanded", "false"));
+      const o3 = document.createElement("span");
+      o3.className = "notectl-toolbar-btn__icon", o3.innerHTML = t2.icon, e2.appendChild(o3);
+    }
+    return e2.addEventListener("mousedown", (o3) => {
       o3.preventDefault(), this.activateButton(e2, t2);
-    }), e2.addEventListener("mouseenter", () => this.tooltip?.show(e2)), e2.addEventListener("mouseleave", () => this.tooltip?.hide()), e2.addEventListener("focus", () => this.tooltip?.show(e2)), e2.addEventListener("blur", () => this.tooltip?.hide()), { element: e2, item: t2 };
+    }), e2.addEventListener("mouseenter", () => this.tooltip?.show(e2)), e2.addEventListener("mouseleave", () => this.tooltip?.hide()), e2.addEventListener("focus", () => this.tooltip?.show(e2)), e2.addEventListener("blur", () => this.tooltip?.hide()), { element: e2, item: t2, comboLabelEl: o2 };
   }
   updateButtonStates(t2) {
     for (const e2 of this.buttons) {
       const o2 = e2.item.isActive?.(t2) ?? false, n2 = e2.item.isEnabled?.(t2) ?? true;
-      e2.element.setAttribute("aria-pressed", String(o2)), e2.element.classList.toggle("notectl-toolbar-btn--active", o2), e2.element.disabled = !n2, n2 ? e2.element.removeAttribute("aria-disabled") : e2.element.setAttribute("aria-disabled", "true");
+      e2.element.setAttribute("aria-pressed", String(o2)), e2.element.classList.toggle("notectl-toolbar-btn--active", o2), e2.element.disabled = !n2, n2 ? e2.element.removeAttribute("aria-disabled") : e2.element.setAttribute("aria-disabled", "true"), e2.comboLabelEl && "combobox" === e2.item.popupType && (e2.comboLabelEl.textContent = e2.item.getLabel(t2));
     }
     this.overflowController?.updateItemStates(t2);
   }
 }
 export {
-  g as T,
-  w as a,
-  c as b,
-  a as c,
-  d
+  p as P,
+  E as T,
+  A as a,
+  d as b,
+  h as c,
+  u as d,
+  m as e
 };
-//# sourceMappingURL=ToolbarPlugin-B6JETWaw.mjs.map
+//# sourceMappingURL=ToolbarPlugin-B7oJRzpl.mjs.map