wj-elements 0.7.7 → 0.8.0

package/dist/wje-toolbar-action.js

@@ -1,534 +1,206 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Toolbar Action ]\n*/\n\n:host {\n    --wje-toolbar-action-breakpoint-sm: 576px;\n    --wje-toolbar-action-breakpoint-md: 768px;\n    --wje-toolbar-action-breakpoint-lg: 992px;\n    --wje-toolbar-action-breakpoint-xl: 1200px;\n    --wje-toolbar-action-breakpoint-2xl: 1450px;\n    --wje-toolbar-action-breakpoint-xxl: 1450px;\n\n    .native-toolbar-action {\n        display: flex;\n        align-items: center;\n        gap: var(--wje-toolbar-action-gap);\n    }\n\n    .toolbar-action-more {\n        flex: 0 0 auto;\n    }\n}\n";
-const _ToolbarAction = class _ToolbarAction extends WJElement {
-  /**
-   * Creates an instance of ToolbarAction.
-   */
+import e from "./wje-element.js";
+const _t = class _t extends e {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "ToolbarAction");
-    this._managedHiddenActions = /* @__PURE__ */ new WeakSet();
-    this._isCollapsedByBreakpoint = null;
-    this._managedOverflowNodes = /* @__PURE__ */ new WeakSet();
-    this._overflowRetryFrame = null;
-    this._applyOverflowFrame = null;
-    this._observedDropdown = null;
-  }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @static
-   * @returns {CSSStyleSheet} The CSS stylesheet
-   */
+    this._managedHiddenActions = /* @__PURE__ */ new WeakSet(), this._isCollapsedByBreakpoint = null, this._managedOverflowNodes = /* @__PURE__ */ new WeakSet(), this._overflowRetryFrame = null, this._applyOverflowFrame = null, this._observedDropdown = null;
+  }
   static get cssStyleSheet() {
-    return styles;
+    return ":host{--wje-toolbar-action-breakpoint-sm: 576px;--wje-toolbar-action-breakpoint-md: 768px;--wje-toolbar-action-breakpoint-lg: 992px;--wje-toolbar-action-breakpoint-xl: 1200px;--wje-toolbar-action-breakpoint-2xl: 1450px;--wje-toolbar-action-breakpoint-xxl: 1450px}:host .native-toolbar-action{display:flex;align-items:center;gap:var(--wje-toolbar-action-gap)}:host .toolbar-action-more{flex:0 0 auto}";
   }
-  /**
-   * Returns the list of observed attributes.
-   * @static
-   * @returns {Array} An empty array
-   */
   static get observedAttributes() {
     return ["breakpoint", "max-items", "visible-items"];
   }
-  /**
-   * Sets the collapse breakpoint token or value.
-   * @param {string} value Breakpoint token or CSS size.
-   */
-  set breakpoint(value) {
-    if (value) this.setAttribute("breakpoint", value);
-    else this.removeAttribute("breakpoint");
-  }
-  /**
-   * Gets the collapse breakpoint token or value.
-   * @returns {string}
-   */
+  set breakpoint(e2) {
+    e2 ? this.setAttribute("breakpoint", e2) : this.removeAttribute("breakpoint");
+  }
   get breakpoint() {
     return this.getAttribute("breakpoint") || "";
   }
-  /**
-   * Sets the maximum number of visible actions.
-   * @param {number|string} value The maximum number of visible actions.
-   */
-  set maxItems(value) {
-    this.setAttribute("max-items", value || 0);
-  }
-  /**
-   * Gets the maximum number of visible actions.
-   * @returns {number}
-   */
+  set maxItems(e2) {
+    this.setAttribute("max-items", e2 || 0);
+  }
   get maxItems() {
     return +this.getAttribute("max-items") || 0;
   }
-  /**
-   * Sets the responsive visible action count.
-   * @param {number|string} value The visible action count.
-   */
-  set visibleItems(value) {
-    if (value === null || value === void 0 || value === "") {
-      this.removeAttribute("visible-items");
-      return;
-    }
-    this.setAttribute("visible-items", value);
+  set visibleItems(e2) {
+    null != e2 && "" !== e2 ? this.setAttribute("visible-items", e2) : this.removeAttribute("visible-items");
   }
-  /**
-   * Gets the responsive visible action count.
-   * @returns {number|null}
-   */
   get visibleItems() {
     if (!this.hasAttribute("visible-items")) return null;
-    const value = +this.getAttribute("visible-items");
-    return Number.isFinite(value) ? value : null;
+    const e2 = +this.getAttribute("visible-items");
+    return Number.isFinite(e2) ? e2 : null;
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the component for the toolbar action.
-   * @returns {object} Document fragment
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    let element = document.createElement("div");
-    element.setAttribute("part", "native");
-    element.classList.add("native-toolbar-action");
-    let dropdown = document.createElement("wje-dropdown");
-    dropdown.setAttribute("placement", "bottom-end");
-    dropdown.setAttribute("collapsible", "");
-    dropdown.classList.add("toolbar-action-more");
-    dropdown.hidden = true;
-    let trigger = document.createElement("wje-button");
-    trigger.setAttribute("slot", "trigger");
-    trigger.setAttribute("fill", "link");
-    trigger.setAttribute("label", "Show more actions");
-    trigger.innerHTML = '<wje-icon name="dots"></wje-icon>';
-    let menu = document.createElement("wje-menu");
-    menu.setAttribute("variant", "context");
-    dropdown.append(trigger, menu);
-    element.appendChild(slot);
-    element.appendChild(dropdown);
-    fragment.appendChild(element);
-    this.defaultSlot = slot;
-    this.native = element;
-    this.moreDropdown = dropdown;
-    this.moreMenu = menu;
-    return fragment;
-  }
-  /**
-   * Applies the current visible action limit after the component is drawn.
-   */
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("slot"), i = document.createElement("div");
+    i.setAttribute("part", "native"), i.classList.add("native-toolbar-action");
+    let o = document.createElement("wje-dropdown");
+    o.setAttribute("placement", "bottom-end"), o.setAttribute("collapsible", ""), o.classList.add("toolbar-action-more"), o.hidden = true;
+    let r = document.createElement("wje-button");
+    r.setAttribute("slot", "trigger"), r.setAttribute("fill", "link"), r.setAttribute("label", "Show more actions"), r.innerHTML = '<wje-icon name="dots"></wje-icon>';
+    let n = document.createElement("wje-menu");
+    return n.setAttribute("variant", "context"), o.append(r, n), i.appendChild(t2), i.appendChild(o), e2.appendChild(i), this.defaultSlot = t2, this.native = i, this.moreDropdown = o, this.moreMenu = n, e2;
+  }
   afterDraw() {
     var _a;
     this.onSlotChange = () => {
-      this.observeExistingDropdown();
-      this.scheduleOverflow();
-    };
-    (_a = this.defaultSlot) == null ? void 0 : _a.addEventListener("slotchange", this.onSlotChange);
-    this.handleResize = () => this.handleBreakpointResize();
-    if (this.getBreakpointWidth()) {
-      window.addEventListener("resize", this.handleResize);
-    }
-    this.observeExistingDropdown();
-    this.scheduleOverflow(true);
+      this.observeExistingDropdown(), this.scheduleOverflow();
+    }, (_a = this.defaultSlot) == null ? void 0 : _a.addEventListener("slotchange", this.onSlotChange), this.handleResize = () => this.handleBreakpointResize(), this.getBreakpointWidth() && window.addEventListener("resize", this.handleResize), this.observeExistingDropdown(), this.scheduleOverflow(true);
   }
-  /**
-   * Removes listeners after disconnect.
-   */
   afterDisconnect() {
     var _a, _b;
-    (_a = this.defaultSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
-    window.removeEventListener("resize", this.handleResize);
-    this._isCollapsedByBreakpoint = null;
-    if (this._overflowRetryFrame) {
-      cancelAnimationFrame(this._overflowRetryFrame);
-      this._overflowRetryFrame = null;
-    }
-    if (this._applyOverflowFrame) {
-      cancelAnimationFrame(this._applyOverflowFrame);
-      this._applyOverflowFrame = null;
-    }
-    (_b = this._dropdownObserver) == null ? void 0 : _b.disconnect();
-    this._dropdownObserver = null;
-    this._observedDropdown = null;
-  }
-  /**
-   * Schedules overflow application after layout settles.
-   * @param {boolean} [doubleFrame] Wait an extra frame for initial render/hydration.
-   */
-  scheduleOverflow(doubleFrame = false) {
-    if (this._applyOverflowFrame) return;
-    this._applyOverflowFrame = requestAnimationFrame(() => {
-      this._applyOverflowFrame = null;
-      if (doubleFrame) {
-        this.scheduleOverflow(false);
-        return;
-      }
-      this.applyOverflow();
-    });
+    (_a = this.defaultSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange), window.removeEventListener("resize", this.handleResize), this._isCollapsedByBreakpoint = null, this._overflowRetryFrame && (cancelAnimationFrame(this._overflowRetryFrame), this._overflowRetryFrame = null), this._applyOverflowFrame && (cancelAnimationFrame(this._applyOverflowFrame), this._applyOverflowFrame = null), (_b = this._dropdownObserver) == null ? void 0 : _b.disconnect(), this._dropdownObserver = null, this._observedDropdown = null;
+  }
+  scheduleOverflow(e2 = false) {
+    this._applyOverflowFrame || (this._applyOverflowFrame = requestAnimationFrame(() => {
+      this._applyOverflowFrame = null, e2 ? this.scheduleOverflow(false) : this.applyOverflow();
+    }));
   }
-  /**
-   * Returns the actions for the toolbar action.
-   * @returns {Array<HTMLElement>} Managed toolbar actions.
-   */
   getActions() {
-    return this.getAssignedElements().filter(
-      (element) => {
-        var _a;
-        return element.getAttribute("slot") !== "trigger" && (((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-button" || element.hasAttribute("data-toolbar-action"));
-      }
-    );
-  }
-  /**
-   * Returns direct children assigned to the default slot.
-   * @returns {Array<HTMLElement>}
-   */
+    return this.getAssignedElements().filter((e2) => {
+      var _a;
+      return "trigger" !== e2.getAttribute("slot") && ("wje-button" === ((_a = e2.tagName) == null ? void 0 : _a.toLowerCase()) || e2.hasAttribute("data-toolbar-action"));
+    });
+  }
   getAssignedElements() {
     var _a, _b;
     return ((_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements) == null ? void 0 : _b.call(_a)) || Array.from(this.children);
   }
-  /**
-   * Returns an existing top-level dropdown if present.
-   * @returns {HTMLElement|null}
-   */
   getExistingDropdown() {
-    return this.getAssignedElements().find((element) => {
+    return this.getAssignedElements().find((e2) => {
       var _a;
-      return ((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-dropdown";
+      return "wje-dropdown" === ((_a = e2.tagName) == null ? void 0 : _a.toLowerCase());
     }) || null;
   }
-  /**
-   * Observes the external dropdown for late menu/content changes.
-   */
   observeExistingDropdown() {
     var _a;
-    const dropdown = this.getExistingDropdown();
-    if (dropdown === this._observedDropdown) return;
-    (_a = this._dropdownObserver) == null ? void 0 : _a.disconnect();
-    this._dropdownObserver = null;
-    this._observedDropdown = dropdown;
-    if (!dropdown || typeof MutationObserver !== "function") return;
-    this._dropdownObserver = new MutationObserver(() => this.scheduleOverflow());
-    this._dropdownObserver.observe(dropdown, {
-      childList: true,
-      subtree: false
-    });
+    const e2 = this.getExistingDropdown();
+    e2 !== this._observedDropdown && ((_a = this._dropdownObserver) == null ? void 0 : _a.disconnect(), this._dropdownObserver = null, this._observedDropdown = e2, e2 && "function" == typeof MutationObserver && (this._dropdownObserver = new MutationObserver(() => this.scheduleOverflow()), this._dropdownObserver.observe(e2, { childList: true, subtree: false })));
   }
-  /**
-   * Returns the dropdown that should receive overflow items.
-   * @returns {HTMLElement}
-   */
   getOverflowDropdown() {
     return this.getExistingDropdown() || this.moreDropdown;
   }
-  /**
-   * Returns the menu used for overflow items.
-   * @returns {HTMLElement|null}
-   */
   getOverflowMenu() {
-    const existingDropdown = this.getExistingDropdown();
-    if (existingDropdown) {
-      return Array.from(existingDropdown.children).find((element) => {
-        var _a;
-        return ((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-menu";
-      }) || null;
-    }
-    return this.moreMenu;
+    const e2 = this.getExistingDropdown();
+    return e2 ? Array.from(e2.children).find((e3) => {
+      var _a;
+      return "wje-menu" === ((_a = e3.tagName) == null ? void 0 : _a.toLowerCase());
+    }) || null : this.moreMenu;
   }
-  /**
-   * Gets the number of actions that should stay visible.
-   * @returns {number}
-   */
   getVisibleLimit() {
-    const actions = this.getActions();
-    if (this.isCollapsedByBreakpoint()) {
-      return 0;
-    }
-    const maxItems = this.maxItems > 0 ? this.maxItems : actions.length;
-    const visibleItems = this.visibleItems;
-    const limit = visibleItems === null ? maxItems : Math.min(visibleItems, maxItems);
-    return Math.max(0, Math.min(limit, actions.length));
-  }
-  /**
-   * Returns whether the toolbar action should collapse based on the configured breakpoint.
-   * @returns {boolean}
-   */
+    const e2 = this.getActions();
+    if (this.isCollapsedByBreakpoint()) return 0;
+    const t2 = this.maxItems > 0 ? this.maxItems : e2.length, i = this.visibleItems, o = null === i ? t2 : Math.min(i, t2);
+    return Math.max(0, Math.min(o, e2.length));
+  }
   shouldCollapseByBreakpoint() {
-    const breakpointWidth = this.getBreakpointWidth();
-    if (!breakpointWidth) return false;
-    return window.innerWidth < breakpointWidth;
-  }
-  /**
-   * Returns the cached breakpoint collapse state.
-   * @returns {boolean}
-   */
+    const e2 = this.getBreakpointWidth();
+    return !!e2 && window.innerWidth < e2;
+  }
   isCollapsedByBreakpoint() {
-    if (!this.getBreakpointWidth()) {
-      this._isCollapsedByBreakpoint = false;
-      return false;
-    }
-    const nextState = this.shouldCollapseByBreakpoint();
-    this._isCollapsedByBreakpoint = nextState;
-    return nextState;
-  }
-  /**
-   * Reacts to viewport resize only when the breakpoint mode actually changes.
-   * @returns {void}
-   */
+    if (!this.getBreakpointWidth()) return this._isCollapsedByBreakpoint = false, false;
+    const e2 = this.shouldCollapseByBreakpoint();
+    return this._isCollapsedByBreakpoint = e2, e2;
+  }
   handleBreakpointResize() {
     if (!this.getBreakpointWidth()) return;
-    const nextState = this.shouldCollapseByBreakpoint();
-    if (this._isCollapsedByBreakpoint === nextState) return;
-    this._isCollapsedByBreakpoint = nextState;
-    this.scheduleOverflow();
-  }
-  /**
-   * Resolves the configured breakpoint to a pixel width.
-   * @returns {number|null}
-   */
+    const e2 = this.shouldCollapseByBreakpoint();
+    this._isCollapsedByBreakpoint !== e2 && (this._isCollapsedByBreakpoint = e2, this.scheduleOverflow());
+  }
   getBreakpointWidth() {
     if (!this.breakpoint) return null;
-    const token = this.breakpoint.trim().toLowerCase();
-    const cssValue = getComputedStyle(this).getPropertyValue(`--wje-toolbar-action-breakpoint-${token}`).trim();
-    const namedBreakpoint = _ToolbarAction.BREAKPOINTS[token];
-    if (cssValue) {
-      const cssNumber = parseFloat(cssValue);
-      if (Number.isFinite(cssNumber)) return cssNumber;
+    const e2 = this.breakpoint.trim().toLowerCase(), i = getComputedStyle(this).getPropertyValue(`--wje-toolbar-action-breakpoint-${e2}`).trim(), o = _t.BREAKPOINTS[e2];
+    if (i) {
+      const e3 = parseFloat(i);
+      if (Number.isFinite(e3)) return e3;
     }
-    if (Number.isFinite(namedBreakpoint)) {
-      return namedBreakpoint;
-    }
-    const directNumber = parseFloat(token);
-    return Number.isFinite(directNumber) ? directNumber : null;
+    if (Number.isFinite(o)) return o;
+    const r = parseFloat(e2);
+    return Number.isFinite(r) ? r : null;
   }
-  /**
-   * Updates visible actions and the overflow dropdown.
-   * @returns {void}
-   */
   applyOverflow() {
     var _a;
-    const actions = this.getActions();
-    const visibleLimit = this.getVisibleLimit();
-    const overflowActions = actions.slice(visibleLimit);
-    const existingDropdown = this.getExistingDropdown();
-    const overflowMenu = this.getOverflowMenu();
-    if (this._overflowRetryFrame) {
-      cancelAnimationFrame(this._overflowRetryFrame);
-      this._overflowRetryFrame = null;
-    }
-    this.restoreManagedActions(actions);
-    this.restoreManagedOverflowContent();
-    if (existingDropdown && overflowActions.length > 0 && !overflowMenu) {
-      this._overflowRetryFrame = requestAnimationFrame(() => {
-        this._overflowRetryFrame = null;
-        this.scheduleOverflow();
-      });
-      return;
-    }
-    if (!existingDropdown) {
-      (_a = this.moreMenu) == null ? void 0 : _a.replaceChildren();
-    }
-    overflowActions.forEach((action) => {
-      action.hidden = true;
-      action.style.display = "none";
-      this._managedHiddenActions.add(action);
-    });
-    if (overflowMenu && existingDropdown && overflowActions.length > 0 && overflowMenu.children.length > 0) {
-      overflowMenu.append(this.createOverflowDivider());
-    }
-    overflowActions.forEach((action) => {
-      overflowMenu == null ? void 0 : overflowMenu.append(this.createMenuItem(action));
-    });
-    if (!existingDropdown && this.moreDropdown) {
-      this.moreDropdown.hidden = overflowActions.length === 0;
-    } else if (existingDropdown && this.moreDropdown) {
-      this.moreDropdown.hidden = true;
-    }
-  }
-  /**
-   * Restores buttons hidden by this component.
-   * @param {Array<HTMLElement>} actions Toolbar buttons.
-   */
-  restoreManagedActions(actions = this.getActions()) {
-    actions.forEach((action) => {
-      if (this._managedHiddenActions.has(action)) {
-        action.hidden = false;
-        action.style.removeProperty("display");
-        this._managedHiddenActions.delete(action);
-      }
+    const e2 = this.getActions(), t2 = this.getVisibleLimit(), i = e2.slice(t2), o = this.getExistingDropdown(), r = this.getOverflowMenu();
+    this._overflowRetryFrame && (cancelAnimationFrame(this._overflowRetryFrame), this._overflowRetryFrame = null), this.restoreManagedActions(e2), this.restoreManagedOverflowContent(), o && i.length > 0 && !r ? this._overflowRetryFrame = requestAnimationFrame(() => {
+      this._overflowRetryFrame = null, this.scheduleOverflow();
+    }) : (o || ((_a = this.moreMenu) == null ? void 0 : _a.replaceChildren()), i.forEach((e3) => {
+      e3.hidden = true, e3.style.display = "none", this._managedHiddenActions.add(e3);
+    }), r && o && i.length > 0 && r.children.length > 0 && r.append(this.createOverflowDivider()), i.forEach((e3) => {
+      r == null ? void 0 : r.append(this.createMenuItem(e3));
+    }), !o && this.moreDropdown ? this.moreDropdown.hidden = 0 === i.length : o && this.moreDropdown && (this.moreDropdown.hidden = true));
+  }
+  restoreManagedActions(e2 = this.getActions()) {
+    e2.forEach((e3) => {
+      this._managedHiddenActions.has(e3) && (e3.hidden = false, e3.style.removeProperty("display"), this._managedHiddenActions.delete(e3));
     });
   }
-  /**
-   * Removes overflow menu nodes that were previously injected by this component.
-   */
   restoreManagedOverflowContent() {
-    const dropdown = this.getExistingDropdown();
-    if (!dropdown) return;
-    const menu = this.getOverflowMenu();
-    if (!menu) return;
-    Array.from(menu.children).forEach((child) => {
-      if (this._managedOverflowNodes.has(child)) {
-        child.remove();
-        this._managedOverflowNodes.delete(child);
-      }
+    if (!this.getExistingDropdown()) return;
+    const e2 = this.getOverflowMenu();
+    e2 && Array.from(e2.children).forEach((e3) => {
+      this._managedOverflowNodes.has(e3) && (e3.remove(), this._managedOverflowNodes.delete(e3));
     });
   }
-  /**
-   * Creates a dropdown menu proxy for an overflowed button.
-   * @param {HTMLElement} action The original action button.
-   * @returns {HTMLElement}
-   */
-  createMenuItem(action) {
-    let menuItem = document.createElement("wje-menu-item");
-    menuItem.replaceChildren(...Array.from(action.childNodes).map((node) => this.cloneActionMenuNode(node)));
-    const label = this.getActionLabel(action);
-    if (!menuItem.textContent.trim() && label) {
-      menuItem.append(document.createTextNode(label));
-    }
-    if (label) {
-      menuItem.setAttribute("aria-label", label);
-    }
-    if (action.hasAttribute("disabled") || action.getAttribute("aria-disabled") === "true") {
-      menuItem.setAttribute("disabled", "");
-    }
-    menuItem.addEventListener("wje-menu-item:click", (e) => this.handleMenuItemClick(e, action));
-    menuItem.addEventListener("click", (e) => this.handleMenuItemClick(e, action));
-    this._managedOverflowNodes.add(menuItem);
-    return menuItem;
-  }
-  /**
-   * Clones action content for menu usage and normalizes button icon slots.
-   * @param {Node} node The source action child node.
-   * @returns {Node}
-   */
-  cloneActionMenuNode(node) {
-    const clone = node.cloneNode(true);
-    if (clone.nodeType === Node.ELEMENT_NODE) {
-      this.normalizeActionMenuIconSlot(clone);
-    }
-    return clone;
+  createMenuItem(e2) {
+    let t2 = document.createElement("wje-menu-item");
+    t2.replaceChildren(...Array.from(e2.childNodes).map((e3) => this.cloneActionMenuNode(e3)));
+    const i = this.getActionLabel(e2);
+    return !t2.textContent.trim() && i && t2.append(document.createTextNode(i)), i && t2.setAttribute("aria-label", i), (e2.hasAttribute("disabled") || "true" === e2.getAttribute("aria-disabled")) && t2.setAttribute("disabled", ""), t2.addEventListener("wje-menu-item:click", (t3) => this.handleMenuItemClick(t3, e2)), t2.addEventListener("click", (t3) => this.handleMenuItemClick(t3, e2)), this._managedOverflowNodes.add(t2), t2;
+  }
+  cloneActionMenuNode(e2) {
+    const t2 = e2.cloneNode(true);
+    return t2.nodeType === Node.ELEMENT_NODE && this.normalizeActionMenuIconSlot(t2), t2;
   }
-  /**
-   * Moves button-only icon slots to the menu item start slot.
-   * @param {Element} element The cloned action content node.
-   */
-  normalizeActionMenuIconSlot(element) {
+  normalizeActionMenuIconSlot(e2) {
     var _a;
-    if (((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) !== "wje-icon") return;
-    const slot = element.getAttribute("slot");
-    if (!slot || slot === "icon-only") {
-      element.setAttribute("slot", "start");
-    }
+    if ("wje-icon" !== ((_a = e2.tagName) == null ? void 0 : _a.toLowerCase())) return;
+    const t2 = e2.getAttribute("slot");
+    t2 && "icon-only" !== t2 || e2.setAttribute("slot", "start");
   }
-  /**
-   * Resolves readable text for a toolbar action copied into an overflow menu.
-   * @param {HTMLElement} action The original action element.
-   * @returns {string}
-   */
-  getActionLabel(action) {
-    if (!action) return "";
-    const explicitLabel = ["aria-label", "title", "label", "data-label", "tooltip"].map((attr) => {
+  getActionLabel(e2) {
+    if (!e2) return "";
+    const t2 = ["aria-label", "title", "label", "data-label", "tooltip"].map((t3) => {
       var _a;
-      return (_a = action.getAttribute(attr)) == null ? void 0 : _a.trim();
-    }).find((value) => value && value !== "true");
-    if (explicitLabel) return explicitLabel;
-    return action.textContent.trim();
-  }
-  /**
-   * Creates a divider separating existing dropdown actions from responsive overflow actions.
-   * @returns {HTMLElement}
-   */
+      return (_a = e2.getAttribute(t3)) == null ? void 0 : _a.trim();
+    }).find((e3) => e3 && "true" !== e3);
+    return t2 || e2.textContent.trim();
+  }
   createOverflowDivider() {
-    const divider = document.createElement("wje-divider");
-    this._managedOverflowNodes.add(divider);
-    return divider;
-  }
-  /**
-   * Forwards menu item activation to the original button.
-   * @param {Event} e The menu event.
-   * @param {HTMLElement} action The original action button.
-   */
-  handleMenuItemClick(e, action) {
+    const e2 = document.createElement("wje-divider");
+    return this._managedOverflowNodes.add(e2), e2;
+  }
+  handleMenuItemClick(e2, t2) {
     var _a;
-    (_a = e.preventDefault) == null ? void 0 : _a.call(e);
-    e.stopPropagation();
-    if (!action || action.hasAttribute("disabled") || action.getAttribute("aria-disabled") === "true") return;
-    action.click();
-  }
-  /**
-   * Measures action widths while preserving current overflow state.
-   * @returns {{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}}
-   */
+    (_a = e2.preventDefault) == null ? void 0 : _a.call(e2), e2.stopPropagation(), t2 && !t2.hasAttribute("disabled") && "true" !== t2.getAttribute("aria-disabled") && t2.click();
+  }
   measureActionMetrics() {
-    const actions = this.getActions();
-    const hasExistingDropdown = !!this.getExistingDropdown();
-    this.restoreManagedActions(actions);
-    const widths = actions.map((action) => action.getBoundingClientRect().width);
-    const style = this.native ? getComputedStyle(this.native) : null;
-    const gap = style ? parseFloat(style.columnGap || style.gap || "0") || 0 : 0;
-    const moreWidth = this.measureMoreWidth();
-    this.applyOverflow();
-    return {
-      count: actions.length,
-      widths,
-      gap,
-      moreWidth,
-      getWidthForCount: (visibleCount) => {
-        const count = Math.max(0, Math.min(visibleCount, actions.length));
-        const overflowCount = actions.length - count;
-        const visibleWidth = widths.slice(0, count).reduce((sum, width) => sum + width, 0);
-        const visibleGaps = Math.max(count - 1, 0) * gap;
-        const usesDropdown = hasExistingDropdown || overflowCount > 0;
-        const moreGap = count > 0 && usesDropdown ? gap : 0;
-        return visibleWidth + visibleGaps + (usesDropdown ? moreWidth + moreGap : 0);
-      }
-    };
-  }
-  /**
-   * Measures the overflow dropdown trigger.
-   * @returns {number}
-   */
+    const e2 = this.getActions(), t2 = !!this.getExistingDropdown();
+    this.restoreManagedActions(e2);
+    const i = e2.map((e3) => e3.getBoundingClientRect().width), o = this.native ? getComputedStyle(this.native) : null, r = o && parseFloat(o.columnGap || o.gap || "0") || 0, n = this.measureMoreWidth();
+    return this.applyOverflow(), { count: e2.length, widths: i, gap: r, moreWidth: n, getWidthForCount: (o2) => {
+      const s = Math.max(0, Math.min(o2, e2.length)), a = e2.length - s, l = i.slice(0, s).reduce((e3, t3) => e3 + t3, 0), d = Math.max(s - 1, 0) * r, h = t2 || a > 0;
+      return l + d + (h ? n + (s > 0 && h ? r : 0) : 0);
+    } };
+  }
   measureMoreWidth() {
-    const dropdown = this.getOverflowDropdown();
-    if (!dropdown) return 48;
-    const isInternalDropdown = dropdown === this.moreDropdown;
-    const wasHidden = dropdown.hidden;
-    const previousVisibility = dropdown.style.visibility;
-    if (isInternalDropdown && wasHidden) {
-      dropdown.hidden = false;
-      dropdown.style.visibility = "hidden";
-    }
-    const width = dropdown.getBoundingClientRect().width || 48;
-    if (isInternalDropdown && wasHidden) {
-      dropdown.hidden = true;
-      dropdown.style.visibility = previousVisibility;
-    }
-    if (dropdown === this.moreDropdown && this.getExistingDropdown()) {
-      this.moreDropdown.hidden = true;
-    }
-    return width;
+    const e2 = this.getOverflowDropdown();
+    if (!e2) return 48;
+    const t2 = e2 === this.moreDropdown, i = e2.hidden, o = e2.style.visibility;
+    t2 && i && (e2.hidden = false, e2.style.visibility = "hidden");
+    const r = e2.getBoundingClientRect().width || 48;
+    return t2 && i && (e2.hidden = true, e2.style.visibility = o), e2 === this.moreDropdown && this.getExistingDropdown() && (this.moreDropdown.hidden = true), r;
   }
 };
-__publicField(_ToolbarAction, "BREAKPOINTS", {
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  "2xl": 1450,
-  xxl: 1450
-});
-let ToolbarAction = _ToolbarAction;
-ToolbarAction.define("wje-toolbar-action", ToolbarAction);
+__publicField(_t, "BREAKPOINTS", { sm: 576, md: 768, lg: 992, xl: 1200, "2xl": 1450, xxl: 1450 });
+let t = _t;
+t.define("wje-toolbar-action", t);
 export {
-  ToolbarAction as default
+  t as default
 };
 //# sourceMappingURL=wje-toolbar-action.js.map