wj-elements 0.7.6 → 0.8.0

package/dist/wje-breadcrumb.js

@@ -1,770 +1,307 @@
 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";
-import { WjElementUtils } from "./element-utils.js";
-import { event } from "./event.js";
+import e from "./wje-element.js";
+import { WjElementUtils as t } from "./element-utils.js";
+import { event as r } from "./event.js";
 import "./wje-button.js";
 import "./wje-dropdown.js";
-import "./icon-CReYMzAK.js";
+import "./icon-DmsqtDpL.js";
 import "./wje-menu.js";
 import "./wje-menu-item.js";
 import "./wje-popup.js";
 import "./wje-tooltip.js";
-const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: var(--wje-breadcrumb-line-height, 1.5);\n\n    .native-breadcrumb {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        background: inherit;\n        margin: var(--wje-breadcrumb-margin, var(--wje-breadcrumb-native-margin, 0));\n        padding: var(--wje-breadcrumb-padding, var(--wje-breadcrumb-native-padding, 0.25rem 0.75rem));\n        color: var(--wje-breadcrumb-a);\n        text-decoration: none;\n        font-size: var(--wje-breadcrumb-font-size);\n        line-height: var(--wje-breadcrumb-native-line-height, var(--wje-breadcrumb-line-height, 1.5));\n        &.hidden {\n            display: none;\n        }\n        &.active {\n            font-weight: var(--wje-breadcrumb-active-font-weight);\n            font-size: var(--wje-breadcrumb-active-font-size);\n        }\n        &.disabled {\n            cursor: default;\n            opacity: 0.6;\n        }\n        &:hover {\n            color: var(--wje-breadcrumb-a-hover);\n        }\n    }\n\n    button {\n        margin-inline: 0.75rem;\n        border: 0 solid transparent;\n        border-radius: 3px;\n        background-color: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n    }\n\n    .separator {\n        display: inline-flex;\n        align-items: center;\n    }\n}\n\n:host(.collapsed) {\n    display: none;\n}\n\n:host([mobile-collapsed-indicator]) {\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n}\n\n.breadcrumb-mobile {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    color: var(--wje-breadcrumb-a);\n    font-size: var(--wje-breadcrumb-font-size);\n    line-height: var(--wje-breadcrumb-line-height, 1.5);\n}\n\n.breadcrumb-mobile--text,\n.breadcrumb-mobile--back,\n.breadcrumb-mobile--parent-title {\n    width: 100%;\n}\n\n.breadcrumb-mobile--back,\n.breadcrumb-mobile--parent-title {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.125rem;\n}\n\n.breadcrumb-mobile-dropdown,\n.breadcrumb-mobile__menu {\n    min-width: 0;\n    max-width: 100%;\n}\n\n.breadcrumb-mobile__menu {\n    --wje-button-margin-inline: 0;\n    --wje-padding-top: 0;\n    --wje-padding-bottom: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    gap: 0.35rem;\n    color: var(--wje-breadcrumb-a);\n}\n\n.breadcrumb-mobile__back,\n.breadcrumb-mobile__parent,\n.breadcrumb-mobile__title {\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    color: inherit;\n    font: inherit;\n    line-height: inherit;\n    text-align: start;\n    text-decoration: none;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.breadcrumb-mobile__back,\n.breadcrumb-mobile__parent {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--wje-breadcrumb-a);\n    cursor: default;\n    font-size: var(--wje-breadcrumb-mobile-parent-font-size, 0.8125rem);\n    opacity: 0.72;\n}\n\nbutton.breadcrumb-mobile__back,\nbutton.breadcrumb-mobile__parent,\nbutton.breadcrumb-mobile__title {\n    margin-inline: 0;\n    cursor: pointer;\n}\n\nbutton.breadcrumb-mobile__back:hover,\nbutton.breadcrumb-mobile__parent:hover,\nbutton.breadcrumb-mobile__title:hover,\n.breadcrumb-mobile__menu:hover {\n    color: var(--wje-breadcrumb-a-hover);\n}\n\n.breadcrumb-mobile__title {\n    display: block;\n    font-weight: var(--wje-breadcrumb-active-font-weight, 600);\n    font-size: var(--wje-breadcrumb-active-font-size, inherit);\n}\n\n.breadcrumb-mobile__label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.breadcrumb-mobile__icon {\n    flex: 0 0 auto;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
-const MOBILE_COLLAPSED_VARIANTS = /* @__PURE__ */ new Set(["TEXT", "BACK", "PARENT-TITLE", "MENU-TITLE", "SHEET"]);
-class Breadcrumb extends WJElement {
-  /**
-   * Breadcrumb constructor method.
-   */
+const a = /* @__PURE__ */ new Set(["TEXT", "BACK", "PARENT-TITLE", "MENU-TITLE", "SHEET"]);
+class i extends e {
   constructor() {
     super();
-    /**
-     * Class name for the Breadcrumb element.
-     * @type {string}
-     */
     __publicField(this, "className", "Breadcrumb");
-    this._showSeparator = true;
-    this._showCollapsedIndicator = false;
-    this.handleNativeClick = (e) => this.handleDisabledNativeClick(e);
-  }
-  /**
-   * Sets the breadcrumb link URL.
-   * @param {string|null} value Link URL.
-   */
-  set href(value) {
-    if (value === null || value === void 0) this.removeAttribute("href");
-    else this.setAttribute("href", value);
-  }
-  /**
-   * Gets the breadcrumb link URL.
-   * @returns {string|null}
-   */
+    this._showSeparator = true, this._showCollapsedIndicator = false, this.handleNativeClick = (e2) => this.handleDisabledNativeClick(e2);
+  }
+  set href(e2) {
+    null == e2 ? this.removeAttribute("href") : this.setAttribute("href", e2);
+  }
   get href() {
     return this.getAttribute("href");
   }
-  /**
-   * Sets the disabled state.
-   * @param {boolean} value Disabled state.
-   */
-  set disabled(value) {
-    if (value === true || value === "" || value === "true" || value === 1 || value === "1") {
-      this.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
-    }
+  set disabled(e2) {
+    true === e2 || "" === e2 || "true" === e2 || 1 === e2 || "1" === e2 ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
-  /**
-   * Gets the disabled state.
-   * @returns {boolean}
-   */
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  /**
-   * Get show separator flag.
-   * @returns {boolean} showSeparator - The show separator flag
-   */
   get showSeparator() {
     return this._showSeparator;
   }
-  /**
-   * Set show separator flag.
-   * @param {boolean} value The value to set
-   */
-  set showSeparator(value) {
-    this._showSeparator = value;
-  }
-  /**
-   * Set collapsed variant.
-   * @param {string} value The value to set
-   */
-  set collapsedVariant(value) {
-    this._collapsedVariant = value;
-  }
-  /**
-   * Get collapsed variant.
-   * @returns {string} The collapsed variant value in uppercase.
-   */
+  set showSeparator(e2) {
+    this._showSeparator = e2;
+  }
+  set collapsedVariant(e2) {
+    this._collapsedVariant = e2;
+  }
   get collapsedVariant() {
     return this.collapsedVariantName.toUpperCase();
   }
-  /**
-   * Get collapsed variant token.
-   * @returns {string}
-   */
   get collapsedVariantName() {
     var _a, _b;
     return String(((_a = this.parentElement) == null ? void 0 : _a.collapsedVariant) || ((_b = this.parentElement) == null ? void 0 : _b.variant) || this._collapsedVariant || "button").trim();
   }
-  /**
-   * Get CSS stylesheet for the Breadcrumb element.
-   * @static
-   * @returns {object} styles - The CSS styles
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{display:flex;flex:0 0 auto;align-items:center;line-height:var(--wje-breadcrumb-line-height, 1.5)}:host .native-breadcrumb{display:flex;align-items:center;width:100%;outline:none;background:inherit;margin:var(--wje-breadcrumb-margin, var(--wje-breadcrumb-native-margin, 0));padding:var(--wje-breadcrumb-padding, var(--wje-breadcrumb-native-padding, .25rem .75rem));color:var(--wje-breadcrumb-a);text-decoration:none;font-size:var(--wje-breadcrumb-font-size);line-height:var(--wje-breadcrumb-native-line-height, var(--wje-breadcrumb-line-height, 1.5))}:host .native-breadcrumb.hidden{display:none}:host .native-breadcrumb.active{font-weight:var(--wje-breadcrumb-active-font-weight);font-size:var(--wje-breadcrumb-active-font-size)}:host .native-breadcrumb.disabled{cursor:default;opacity:.6}:host .native-breadcrumb:hover{color:var(--wje-breadcrumb-a-hover)}:host button{margin-inline:.75rem;border:0 solid transparent;border-radius:3px;background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}:host .separator{display:inline-flex;align-items:center}:host(.collapsed){display:none}:host([mobile-collapsed-indicator]){flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden}.breadcrumb-mobile{display:flex;align-items:center;min-width:0;max-width:100%;color:var(--wje-breadcrumb-a);font-size:var(--wje-breadcrumb-font-size);line-height:var(--wje-breadcrumb-line-height, 1.5)}.breadcrumb-mobile--text,.breadcrumb-mobile--back,.breadcrumb-mobile--parent-title{width:100%}.breadcrumb-mobile--back,.breadcrumb-mobile--parent-title{flex-direction:column;align-items:flex-start;gap:.125rem}.breadcrumb-mobile-dropdown,.breadcrumb-mobile__menu{min-width:0;max-width:100%}.breadcrumb-mobile__menu{--wje-button-margin-inline: 0;--wje-padding-top: 0;--wje-padding-bottom: 0;--wje-padding-start: 0;--wje-padding-end: 0;gap:.35rem;color:var(--wje-breadcrumb-a)}.breadcrumb-mobile__back,.breadcrumb-mobile__parent,.breadcrumb-mobile__title{min-width:0;max-width:100%;overflow:hidden;color:inherit;font:inherit;line-height:inherit;text-align:start;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-mobile__back,.breadcrumb-mobile__parent{display:inline-flex;align-items:center;gap:.25rem;padding:0;border:0;background:transparent;color:var(--wje-breadcrumb-a);cursor:default;font-size:var(--wje-breadcrumb-mobile-parent-font-size, .8125rem);opacity:.72}button.breadcrumb-mobile__back,button.breadcrumb-mobile__parent,button.breadcrumb-mobile__title{margin-inline:0;cursor:pointer}button.breadcrumb-mobile__back:hover,button.breadcrumb-mobile__parent:hover,button.breadcrumb-mobile__title:hover,.breadcrumb-mobile__menu:hover{color:var(--wje-breadcrumb-a-hover)}.breadcrumb-mobile__title{display:block;font-weight:var(--wje-breadcrumb-active-font-weight, 600);font-size:var(--wje-breadcrumb-active-font-size, inherit)}.breadcrumb-mobile__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-mobile__icon{flex:0 0 auto}::slotted([slot="start"]){margin-inline:0 .5rem}::slotted([slot="end"]){margin-inline:.5rem 0}';
   }
-  /**
-   * Get observed attributes for the Breadcrumb element.
-   * @static
-   * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
-   */
   static get observedAttributes() {
     return ["show-collapsed-indicator", "collapsed", "last", "href", "target", "rel", "download", "disabled", "title", "aria-label"];
   }
-  /**
-   * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.
-   * @param {string} name The name of the attribute that was changed.
-   * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.
-   * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(e2, r2, a2) {
     var _a, _b;
-    if (oldValue === newValue) return;
-    if (name === "collapsed") {
-      const isCollapsed = newValue !== null && WjElementUtils.stringToBoolean(newValue);
-      this.classList.toggle("collapsed", isCollapsed && !this.hasAttribute("show-collapsed-indicator"));
-    } else if (name === "show-collapsed-indicator") {
-      (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
-      const isOn = newValue !== null && WjElementUtils.stringToBoolean(newValue);
-      this._showCollapsedIndicator = isOn;
-      this.classList.toggle("collapsed", this.hasAttribute("collapsed") && !isOn);
-      this.refresh();
-    } else if (name === "last") {
-      (_b = super.attributeChangedCallback) == null ? void 0 : _b.call(this, name, oldValue, newValue);
-      const isLast = newValue !== null && WjElementUtils.stringToBoolean(newValue);
-      this.active = isLast;
-      this.showSeparator = !isLast;
-      this.syncAria();
-      this.syncNativeAttributes();
-      this.refresh();
-    } else {
-      this.syncAria();
-      this.syncNativeAttributes();
-    }
+    if (r2 !== a2) if ("collapsed" === e2) {
+      const e3 = null !== a2 && t.stringToBoolean(a2);
+      this.classList.toggle("collapsed", e3 && !this.hasAttribute("show-collapsed-indicator"));
+    } else if ("show-collapsed-indicator" === e2) {
+      (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, e2, r2, a2);
+      const i2 = null !== a2 && t.stringToBoolean(a2);
+      this._showCollapsedIndicator = i2, this.classList.toggle("collapsed", this.hasAttribute("collapsed") && !i2), this.refresh();
+    } else if ("last" === e2) {
+      (_b = super.attributeChangedCallback) == null ? void 0 : _b.call(this, e2, r2, a2);
+      const i2 = null !== a2 && t.stringToBoolean(a2);
+      this.active = i2, this.showSeparator = !i2, this.syncAria(), this.syncNativeAttributes(), this.refresh();
+    } else this.syncAria(), this.syncNativeAttributes();
   }
-  /**
-   * Setup attributes for the Breadcrumb element.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
   syncAria() {
-    this.setAriaState({ role: "link" });
-    if (this.active) this.setAriaState({ current: "page" });
-    else this.removeAttribute("aria-current");
-    if (this.disabled) this.setAriaState({ disabled: true });
-    else this.removeAttribute("aria-disabled");
-  }
-  /**
-   * Draw method for the Breadcrumb element.
-   * @returns {object} fragment - The document fragment
-   */
+    this.setAriaState({ role: "link" }), this.active ? this.setAriaState({ current: "page" }) : this.removeAttribute("aria-current"), this.disabled ? this.setAriaState({ disabled: true }) : this.removeAttribute("aria-disabled");
+  }
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("a");
-    native.classList.add("native-breadcrumb");
-    native.setAttribute("part", "native");
-    this.native = native;
-    this.syncNativeAttributes();
-    let slot = document.createElement("slot");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    native.append(start, slot, end);
-    fragment.append(native);
-    if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {
-      fragment.append(this.drawCollapsedIndicator());
-      native.classList.add("hidden");
+    let e2 = document.createDocumentFragment(), r2 = document.createElement("a");
+    r2.classList.add("native-breadcrumb"), r2.setAttribute("part", "native"), this.native = r2, this.syncNativeAttributes();
+    let a2 = document.createElement("slot"), i2 = document.createElement("slot");
+    i2.setAttribute("name", "start");
+    let o = document.createElement("slot");
+    if (o.setAttribute("name", "end"), r2.append(i2, a2, o), e2.append(r2), t.stringToBoolean(this._showCollapsedIndicator) && (e2.append(this.drawCollapsedIndicator()), r2.classList.add("hidden")), this.shouldRenderSeparator()) {
+      let r3 = document.createElement("span");
+      if (r3.classList.add("separator"), r3.setAttribute("part", "separator"), t.hasSlot(this, "separator")) {
+        let e3 = document.createElement("slot");
+        e3.setAttribute("name", "separator"), r3.append(e3);
+      } else r3.innerHTML = `<wje-icon name=${this.separator || "chevron-right"}></wje-icon>`;
+      e2.append(r3);
     }
-    if (this.shouldRenderSeparator()) {
-      let separator = document.createElement("span");
-      separator.classList.add("separator");
-      separator.setAttribute("part", "separator");
-      if (WjElementUtils.hasSlot(this, "separator")) {
-        let slotSeparator = document.createElement("slot");
-        slotSeparator.setAttribute("name", "separator");
-        separator.append(slotSeparator);
-      } else {
-        separator.innerHTML = `<wje-icon name=${this.separator || "chevron-right"}></wje-icon>`;
-      }
-      fragment.append(separator);
-    }
-    return fragment;
+    return e2;
   }
-  /**
-   * Returns whether the separator should be visible after this breadcrumb.
-   * @returns {boolean}
-   */
   shouldRenderSeparator() {
     return this.showSeparator && this.hasVisibleBreadcrumbAfter();
   }
-  /**
-   * Returns whether any later breadcrumb is still visible in the rendered trail.
-   * @returns {boolean}
-   */
   hasVisibleBreadcrumbAfter() {
     var _a, _b;
-    const breadcrumbs = (_b = (_a = this.parentElement) == null ? void 0 : _a.getBreadcrumbs) == null ? void 0 : _b.call(_a);
-    if (!Array.isArray(breadcrumbs)) return true;
-    const index = breadcrumbs.indexOf(this);
-    if (index === -1) return true;
-    return breadcrumbs.slice(index + 1).some((breadcrumb) => this.isBreadcrumbVisibleInTrail(breadcrumb));
-  }
-  /**
-   * Returns whether a breadcrumb is visible in the rendered trail.
-   * @param {Element} breadcrumb Breadcrumb element to inspect.
-   * @returns {boolean}
-   */
-  isBreadcrumbVisibleInTrail(breadcrumb) {
+    const e2 = (_b = (_a = this.parentElement) == null ? void 0 : _a.getBreadcrumbs) == null ? void 0 : _b.call(_a);
+    if (!Array.isArray(e2)) return true;
+    const t2 = e2.indexOf(this);
+    return -1 === t2 || e2.slice(t2 + 1).some((e3) => this.isBreadcrumbVisibleInTrail(e3));
+  }
+  isBreadcrumbVisibleInTrail(e2) {
     var _a, _b;
-    return !(((_a = breadcrumb == null ? void 0 : breadcrumb.hasAttribute) == null ? void 0 : _a.call(breadcrumb, "collapsed")) && !((_b = breadcrumb == null ? void 0 : breadcrumb.hasAttribute) == null ? void 0 : _b.call(breadcrumb, "show-collapsed-indicator")));
+    return !(((_a = e2 == null ? void 0 : e2.hasAttribute) == null ? void 0 : _a.call(e2, "collapsed")) && !((_b = e2 == null ? void 0 : e2.hasAttribute) == null ? void 0 : _b.call(e2, "show-collapsed-indicator")));
   }
-  /**
-   * Synchronizes host attributes to the internal anchor.
-   */
   syncNativeAttributes() {
     var _a;
-    const native = this.native || ((_a = this.context) == null ? void 0 : _a.querySelector("a.native-breadcrumb"));
-    if (!native) return;
-    const isDisabled = this.disabled;
-    const href = this.href;
-    if (href !== null && href !== void 0 && !isDisabled) {
-      native.setAttribute("href", href);
-    } else {
-      native.removeAttribute("href");
-    }
-    ["target", "rel", "download"].forEach((attr) => {
-      if (this.hasAttribute(attr) && !isDisabled) {
-        native.setAttribute(attr, this.getAttribute(attr));
-      } else {
-        native.removeAttribute(attr);
-      }
-    });
-    ["title", "aria-label"].forEach((attr) => {
-      if (this.hasAttribute(attr)) {
-        native.setAttribute(attr, this.getAttribute(attr));
-      } else {
-        native.removeAttribute(attr);
-      }
-    });
-    native.classList.toggle("active", Boolean(this.active));
-    native.classList.toggle("disabled", isDisabled);
-    if (this.active) native.setAttribute("aria-current", "page");
-    else native.removeAttribute("aria-current");
-    if (isDisabled) {
-      native.setAttribute("aria-disabled", "true");
-      native.setAttribute("tabindex", "-1");
-    } else {
-      native.removeAttribute("aria-disabled");
-      native.removeAttribute("tabindex");
-    }
+    const e2 = this.native || ((_a = this.context) == null ? void 0 : _a.querySelector("a.native-breadcrumb"));
+    if (!e2) return;
+    const t2 = this.disabled, r2 = this.href;
+    null == r2 || t2 ? e2.removeAttribute("href") : e2.setAttribute("href", r2), ["target", "rel", "download"].forEach((r3) => {
+      this.hasAttribute(r3) && !t2 ? e2.setAttribute(r3, this.getAttribute(r3)) : e2.removeAttribute(r3);
+    }), ["title", "aria-label"].forEach((t3) => {
+      this.hasAttribute(t3) ? e2.setAttribute(t3, this.getAttribute(t3)) : e2.removeAttribute(t3);
+    }), e2.classList.toggle("active", Boolean(this.active)), e2.classList.toggle("disabled", t2), this.active ? e2.setAttribute("aria-current", "page") : e2.removeAttribute("aria-current"), t2 ? (e2.setAttribute("aria-disabled", "true"), e2.setAttribute("tabindex", "-1")) : (e2.removeAttribute("aria-disabled"), e2.removeAttribute("tabindex"));
   }
-  /**
-   * Sets up native anchor listeners after render.
-   */
   afterDraw() {
     var _a;
     (_a = this.native) == null ? void 0 : _a.addEventListener("click", this.handleNativeClick);
   }
-  /**
-   * Removes native anchor listeners before redraw/disconnect.
-   */
   beforeDisconnect() {
     var _a;
     (_a = this.native) == null ? void 0 : _a.removeEventListener("click", this.handleNativeClick);
   }
-  /**
-   * Prevents disabled breadcrumbs from navigating or bubbling click handlers.
-   * @param {MouseEvent} e Click event.
-   */
-  handleDisabledNativeClick(e) {
+  handleDisabledNativeClick(e2) {
     var _a;
-    if (!this.disabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
-  }
-  /**
-   * Renders the collapsed indicator based on the current collapsed variant.
-   * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
-   * Mobile breakpoint variants render compact breadcrumb summaries, otherwise the default button is used.
-   * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.
-   */
+    this.disabled && (e2.preventDefault(), e2.stopPropagation(), (_a = e2.stopImmediatePropagation) == null ? void 0 : _a.call(e2));
+  }
   drawCollapsedIndicator() {
-    const variant = this.collapsedVariant;
-    if (variant === "DROPDOWN") {
-      return this.collapseDropdown();
-    }
-    if (this.isMobileCollapsedVariant() && this.isBreakpointMenuIndicator()) {
-      return this.collapseMobileVariant(variant);
-    }
-    return this.collapseButton();
+    const e2 = this.collapsedVariant;
+    return "DROPDOWN" === e2 ? this.collapseDropdown() : this.isMobileCollapsedVariant() && this.isBreakpointMenuIndicator() ? this.collapseMobileVariant(e2) : this.collapseButton();
   }
-  /**
-   * Returns whether the current collapsed variant is a compact mobile layout.
-   * @returns {boolean}
-   */
   isMobileCollapsedVariant() {
-    return MOBILE_COLLAPSED_VARIANTS.has(this.collapsedVariant);
-  }
-  /**
-   * Creates and returns a dropdown UI component for collapsed breadcrumbs.
-   * This method generates a dropdown element with a button trigger and a menu populated with items corresponding
-   * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that
-   * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding
-   * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.
-   * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.
-   */
+    return a.has(this.collapsedVariant);
+  }
   collapseDropdown() {
-    const isBreakpointMenuIndicator = this.isBreakpointMenuIndicator();
-    const breadcrumbs = this.getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator);
-    const trigger = this.createCollapsedDropdownTrigger(isBreakpointMenuIndicator);
-    return this.createBreadcrumbDropdown({
-      breadcrumbs,
-      trigger,
-      placement: isBreakpointMenuIndicator ? "bottom-start" : "bottom"
-    });
-  }
-  /**
-   * Creates a dropdown containing breadcrumb menu items.
-   * @param {object} options Configuration for the dropdown shell.
-   * @param {Array<HTMLElement>} options.breadcrumbs Breadcrumb elements to mirror in the menu.
-   * @param {HTMLElement} options.trigger Element assigned to the dropdown trigger slot.
-   * @param {string} options.placement Floating UI placement token for the popup.
-   * @returns {HTMLElement}
-   */
-  createBreadcrumbDropdown({ breadcrumbs, trigger, placement = "bottom" }) {
-    const dropdown = document.createElement("wje-dropdown");
-    dropdown.setAttribute("placement", placement);
-    dropdown.setAttribute("offset", "10");
-    const menu = this.createCollapsedBreadcrumbMenu(breadcrumbs);
-    dropdown.append(trigger, menu);
-    return dropdown;
-  }
-  /**
-   * Creates the menu used by collapsed dropdown variants.
-   * @param {Array<HTMLElement>} breadcrumbs Breadcrumb items represented by menu items.
-   * @returns {HTMLElement}
-   */
-  createCollapsedBreadcrumbMenu(breadcrumbs) {
-    const menu = document.createElement("wje-menu");
-    menu.setAttribute("variant", "context");
-    menu.style.setProperty("--wje-menu-item-justify-content", "flex-start");
-    menu.addEventListener("click", (e) => {
+    const e2 = this.isBreakpointMenuIndicator(), t2 = this.getCollapsedMenuBreadcrumbs(e2), r2 = this.createCollapsedDropdownTrigger(e2);
+    return this.createBreadcrumbDropdown({ breadcrumbs: t2, trigger: r2, placement: e2 ? "bottom-start" : "bottom" });
+  }
+  createBreadcrumbDropdown({ breadcrumbs: e2, trigger: t2, placement: r2 = "bottom" }) {
+    const a2 = document.createElement("wje-dropdown");
+    a2.setAttribute("placement", r2), a2.setAttribute("offset", "10");
+    const i2 = this.createCollapsedBreadcrumbMenu(e2);
+    return a2.append(t2, i2), a2;
+  }
+  createCollapsedBreadcrumbMenu(e2) {
+    const t2 = document.createElement("wje-menu");
+    return t2.setAttribute("variant", "context"), t2.style.setProperty("--wje-menu-item-justify-content", "flex-start"), t2.addEventListener("click", (e3) => {
       var _a;
-      e.stopPropagation();
-      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
-    });
-    breadcrumbs.forEach((breadcrumb) => {
-      const menuItem = document.createElement("wje-menu-item");
-      this.populateCollapsedMenuItem(menuItem, breadcrumb);
-      menuItem.__breadcrumb = breadcrumb;
-      menuItem.addEventListener("wje-menu-item:click", (e) => {
+      e3.stopPropagation(), (_a = e3.stopImmediatePropagation) == null ? void 0 : _a.call(e3);
+    }), e2.forEach((e3) => {
+      const r2 = document.createElement("wje-menu-item");
+      this.populateCollapsedMenuItem(r2, e3), r2.__breadcrumb = e3, r2.addEventListener("wje-menu-item:click", (e4) => {
         var _a, _b;
-        (_a = e.preventDefault) == null ? void 0 : _a.call(e);
-        e.stopPropagation();
-        (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
-        this.forwardBreadcrumbClick(e.currentTarget.__breadcrumb);
-      });
-      menu.append(menuItem);
-    });
-    return menu;
-  }
-  /**
-   * Returns breadcrumbs that should be exposed in a collapsed menu.
-   * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
-   * @returns {Array<HTMLElement>}
-   */
-  getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator) {
+        (_a = e4.preventDefault) == null ? void 0 : _a.call(e4), e4.stopPropagation(), (_b = e4.stopImmediatePropagation) == null ? void 0 : _b.call(e4), this.forwardBreadcrumbClick(e4.currentTarget.__breadcrumb);
+      }), t2.append(r2);
+    }), t2;
+  }
+  getCollapsedMenuBreadcrumbs(e2) {
     var _a, _b;
-    const breadcrumbs = this.getBreadcrumbs();
-    if (isBreakpointMenuIndicator) {
-      return ((_a = breadcrumbs == null ? void 0 : breadcrumbs.getBreadcrumbs) == null ? void 0 : _a.call(breadcrumbs)) || [];
-    }
-    return ((_b = breadcrumbs == null ? void 0 : breadcrumbs.getBreadcrumbsCollapsed) == null ? void 0 : _b.call(breadcrumbs)) || [];
-  }
-  /**
-   * Renders one of the compact mobile breakpoint variants.
-   * @param {string} variant Normalized uppercase variant token.
-   * @returns {HTMLElement}
-   */
-  collapseMobileVariant(variant) {
-    if (variant === "TEXT") return this.collapseMobileText();
-    if (variant === "BACK") return this.collapseMobileBack();
-    if (variant === "PARENT-TITLE") return this.collapseMobileParentTitle();
-    if (variant === "MENU-TITLE") return this.collapseMobileMenuTitle();
-    if (variant === "SHEET") return this.collapseMobileSheet();
-    return this.collapseButton();
-  }
-  /**
-   * Renders only the current breadcrumb title.
-   * @returns {HTMLElement}
-   */
+    const t2 = this.getBreadcrumbs();
+    return e2 ? ((_a = t2 == null ? void 0 : t2.getBreadcrumbs) == null ? void 0 : _a.call(t2)) || [] : ((_b = t2 == null ? void 0 : t2.getBreadcrumbsCollapsed) == null ? void 0 : _b.call(t2)) || [];
+  }
+  collapseMobileVariant(e2) {
+    return "TEXT" === e2 ? this.collapseMobileText() : "BACK" === e2 ? this.collapseMobileBack() : "PARENT-TITLE" === e2 ? this.collapseMobileParentTitle() : "MENU-TITLE" === e2 ? this.collapseMobileMenuTitle() : "SHEET" === e2 ? this.collapseMobileSheet() : this.collapseButton();
+  }
   collapseMobileText() {
-    const current = this.getCurrentBreadcrumb();
-    const container = this.createMobileContainer("breadcrumb-mobile--text");
-    const title = this.createMobileBreadcrumbControl(current, "breadcrumb-mobile__title", {
-      ariaCurrent: true,
-      actionable: this.isBreadcrumbActionable(current)
-    });
-    container.append(title);
-    return container;
-  }
-  /**
-   * Renders a parent back action above the current title.
-   * @returns {HTMLElement}
-   */
+    const e2 = this.getCurrentBreadcrumb(), t2 = this.createMobileContainer("breadcrumb-mobile--text"), r2 = this.createMobileBreadcrumbControl(e2, "breadcrumb-mobile__title", { ariaCurrent: true, actionable: this.isBreadcrumbActionable(e2) });
+    return t2.append(r2), t2;
+  }
   collapseMobileBack() {
-    const current = this.getCurrentBreadcrumb();
-    const parent = this.getParentBreadcrumb();
-    const container = this.createMobileContainer("breadcrumb-mobile--back");
-    if (parent) {
-      const back = this.createMobileBreadcrumbControl(parent, "breadcrumb-mobile__back", {
-        ariaLabel: "Go to parent",
-        icon: "arrow-left",
-        actionable: this.isBreadcrumbActionable(parent)
-      });
-      container.append(back);
+    const e2 = this.getCurrentBreadcrumb(), t2 = this.getParentBreadcrumb(), r2 = this.createMobileContainer("breadcrumb-mobile--back");
+    if (t2) {
+      const e3 = this.createMobileBreadcrumbControl(t2, "breadcrumb-mobile__back", { ariaLabel: "Go to parent", icon: "arrow-left", actionable: this.isBreadcrumbActionable(t2) });
+      r2.append(e3);
     }
-    const title = this.createMobileBreadcrumbControl(current, "breadcrumb-mobile__title", {
-      ariaCurrent: true,
-      actionable: false
-    });
-    container.append(title);
-    return container;
-  }
-  /**
-   * Renders parent context above the current title.
-   * @returns {HTMLElement}
-   */
+    const a2 = this.createMobileBreadcrumbControl(e2, "breadcrumb-mobile__title", { ariaCurrent: true, actionable: false });
+    return r2.append(a2), r2;
+  }
   collapseMobileParentTitle() {
-    const current = this.getCurrentBreadcrumb();
-    const parent = this.getParentBreadcrumb();
-    const container = this.createMobileContainer("breadcrumb-mobile--parent-title");
-    if (parent) {
-      const parentControl = this.createMobileBreadcrumbControl(parent, "breadcrumb-mobile__parent", {
-        actionable: this.isBreadcrumbActionable(parent)
-      });
-      container.append(parentControl);
+    const e2 = this.getCurrentBreadcrumb(), t2 = this.getParentBreadcrumb(), r2 = this.createMobileContainer("breadcrumb-mobile--parent-title");
+    if (t2) {
+      const e3 = this.createMobileBreadcrumbControl(t2, "breadcrumb-mobile__parent", { actionable: this.isBreadcrumbActionable(t2) });
+      r2.append(e3);
     }
-    const title = this.createMobileBreadcrumbControl(current, "breadcrumb-mobile__title", {
-      ariaCurrent: true,
-      actionable: false
-    });
-    container.append(title);
-    return container;
-  }
-  /**
-   * Renders a menu trigger with the current title.
-   * @returns {HTMLElement}
-   */
+    const a2 = this.createMobileBreadcrumbControl(e2, "breadcrumb-mobile__title", { ariaCurrent: true, actionable: false });
+    return r2.append(a2), r2;
+  }
   collapseMobileMenuTitle() {
-    const trigger = this.createMobileDropdownTrigger({
-      icon: "dots",
-      label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()),
-      ariaLabel: "Show breadcrumb menu",
-      className: "breadcrumb-mobile--menu-title"
-    });
-    return this.createMobileDropdown(trigger);
-  }
-  /**
-   * Renders the future sheet variant using the dropdown fallback for now.
-   * @returns {HTMLElement}
-   */
+    const e2 = this.createMobileDropdownTrigger({ icon: "dots", label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()), ariaLabel: "Show breadcrumb menu", className: "breadcrumb-mobile--menu-title" });
+    return this.createMobileDropdown(e2);
+  }
   collapseMobileSheet() {
-    const trigger = this.createMobileDropdownTrigger({
-      icon: "chevron-down",
-      iconPosition: "end",
-      label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()),
-      ariaLabel: "Show breadcrumb path",
-      className: "breadcrumb-mobile--sheet"
-    });
-    return this.createMobileDropdown(trigger);
-  }
-  /**
-   * Creates a dropdown fallback for mobile menu-like variants.
-   * @param {HTMLElement} trigger Element that opens the fallback dropdown.
-   * @returns {HTMLElement}
-   */
-  createMobileDropdown(trigger) {
-    const dropdown = this.createBreadcrumbDropdown({
-      breadcrumbs: this.getTrailBreadcrumbs(),
-      trigger,
-      placement: "bottom-start"
-    });
-    dropdown.classList.add("breadcrumb-mobile-dropdown");
-    return dropdown;
-  }
-  /**
-   * Creates a compact mobile dropdown trigger.
-   * @param {object} options Visual settings for the compact trigger.
-   * @param {string} options.icon Icon shown next to the title.
-   * @param {string} options.iconPosition Whether the icon renders at the start or end.
-   * @param {string} options.label Current breadcrumb label shown beside the icon.
-   * @param {string} options.ariaLabel Accessible name for the dropdown trigger.
-   * @param {string} options.className Variant-specific class applied to the trigger.
-   * @returns {HTMLElement}
-   */
-  createMobileDropdownTrigger({ icon, iconPosition = "start", label, ariaLabel, className }) {
-    const trigger = document.createElement("wje-button");
-    trigger.setAttribute("slot", "trigger");
-    trigger.setAttribute("fill", "link");
-    trigger.setAttribute("aria-label", ariaLabel);
-    trigger.classList.add("breadcrumb-mobile", "breadcrumb-mobile__menu", className);
-    const iconElement = document.createElement("wje-icon");
-    iconElement.setAttribute("name", icon);
-    iconElement.setAttribute("slot", iconPosition === "end" ? "end" : "start");
-    iconElement.classList.add("breadcrumb-mobile__icon");
-    const title = document.createElement("span");
-    title.classList.add("breadcrumb-mobile__title");
-    title.setAttribute("aria-current", "page");
-    title.textContent = label;
-    if (label) title.setAttribute("title", label);
-    if (iconPosition === "end") {
-      trigger.append(title, iconElement);
-    } else {
-      trigger.append(iconElement, title);
-    }
-    return trigger;
-  }
-  /**
-   * Creates a wrapper for compact mobile breadcrumb variants.
-   * @param {string} className Variant class.
-   * @returns {HTMLElement}
-   */
-  createMobileContainer(className) {
-    const container = document.createElement("div");
-    container.classList.add("breadcrumb-mobile", className);
-    return container;
-  }
-  /**
-   * Creates a text or button control for a breadcrumb.
-   * @param {HTMLElement|null} breadcrumb Source breadcrumb.
-   * @param {string} className Class applied to the created control.
-   * @param {object} options Behavior and accessibility settings for the control.
-   * @param {boolean} options.actionable Whether clicks should forward to the source breadcrumb.
-   * @param {boolean} options.ariaCurrent Whether the control marks the current page.
-   * @param {string} options.ariaLabel Accessible name for action controls.
-   * @param {string} options.icon Optional icon shown before the label.
-   * @returns {HTMLElement}
-   */
-  createMobileBreadcrumbControl(breadcrumb, className, { actionable = false, ariaCurrent = false, ariaLabel, icon } = {}) {
-    const label = this.getBreadcrumbLabel(breadcrumb);
-    const control = document.createElement(actionable ? "button" : "span");
-    control.classList.add(className);
-    if (actionable) {
-      control.setAttribute("type", "button");
-      control.addEventListener("click", (e) => {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
-        this.forwardBreadcrumbClick(breadcrumb);
-      });
-    }
-    if (ariaCurrent) control.setAttribute("aria-current", "page");
-    if (ariaLabel && actionable) control.setAttribute("aria-label", ariaLabel);
-    if (label) control.setAttribute("title", label);
-    if (icon) {
-      const iconElement = document.createElement("wje-icon");
-      iconElement.setAttribute("name", icon);
-      iconElement.classList.add("breadcrumb-mobile__icon");
-      control.append(iconElement);
+    const e2 = this.createMobileDropdownTrigger({ icon: "chevron-down", iconPosition: "end", label: this.getBreadcrumbLabel(this.getCurrentBreadcrumb()), ariaLabel: "Show breadcrumb path", className: "breadcrumb-mobile--sheet" });
+    return this.createMobileDropdown(e2);
+  }
+  createMobileDropdown(e2) {
+    const t2 = this.createBreadcrumbDropdown({ breadcrumbs: this.getTrailBreadcrumbs(), trigger: e2, placement: "bottom-start" });
+    return t2.classList.add("breadcrumb-mobile-dropdown"), t2;
+  }
+  createMobileDropdownTrigger({ icon: e2, iconPosition: t2 = "start", label: r2, ariaLabel: a2, className: i2 }) {
+    const o = document.createElement("wje-button");
+    o.setAttribute("slot", "trigger"), o.setAttribute("fill", "link"), o.setAttribute("label", a2), o.classList.add("breadcrumb-mobile", "breadcrumb-mobile__menu", i2);
+    const n = document.createElement("wje-icon");
+    n.setAttribute("name", e2), n.setAttribute("slot", "end" === t2 ? "end" : "start"), n.classList.add("breadcrumb-mobile__icon");
+    const s = document.createElement("span");
+    return s.classList.add("breadcrumb-mobile__title"), s.setAttribute("aria-current", "page"), s.textContent = r2, r2 && s.setAttribute("title", r2), "end" === t2 ? o.append(s, n) : o.append(n, s), o;
+  }
+  createMobileContainer(e2) {
+    const t2 = document.createElement("div");
+    return t2.classList.add("breadcrumb-mobile", e2), t2;
+  }
+  createMobileBreadcrumbControl(e2, t2, { actionable: r2 = false, ariaCurrent: a2 = false, ariaLabel: i2, icon: o } = {}) {
+    const n = this.getBreadcrumbLabel(e2), s = document.createElement(r2 ? "button" : "span");
+    if (s.classList.add(t2), r2 && (s.setAttribute("type", "button"), s.addEventListener("click", (t3) => {
+      var _a;
+      t3.preventDefault(), t3.stopPropagation(), (_a = t3.stopImmediatePropagation) == null ? void 0 : _a.call(t3), this.forwardBreadcrumbClick(e2);
+    })), a2 && s.setAttribute("aria-current", "page"), i2 && r2 && s.setAttribute("aria-label", i2), n && s.setAttribute("title", n), o) {
+      const e3 = document.createElement("wje-icon");
+      e3.setAttribute("name", o), e3.classList.add("breadcrumb-mobile__icon"), s.append(e3);
     }
-    const text = document.createElement("span");
-    text.classList.add("breadcrumb-mobile__label");
-    text.textContent = label;
-    control.append(text);
-    return control;
-  }
-  /**
-   * Returns the full trail of sibling breadcrumbs.
-   * @returns {Array<HTMLElement>}
-   */
+    const l = document.createElement("span");
+    return l.classList.add("breadcrumb-mobile__label"), l.textContent = n, s.append(l), s;
+  }
   getTrailBreadcrumbs() {
     var _a, _b;
     return ((_b = (_a = this.getBreadcrumbs()) == null ? void 0 : _a.getBreadcrumbs) == null ? void 0 : _b.call(_a)) || [];
   }
-  /**
-   * Returns the current breadcrumb item.
-   * @returns {HTMLElement|null}
-   */
   getCurrentBreadcrumb() {
-    const breadcrumbs = this.getTrailBreadcrumbs();
-    return breadcrumbs[breadcrumbs.length - 1] || null;
+    const e2 = this.getTrailBreadcrumbs();
+    return e2[e2.length - 1] || null;
   }
-  /**
-   * Returns the parent breadcrumb item.
-   * @returns {HTMLElement|null}
-   */
   getParentBreadcrumb() {
-    const breadcrumbs = this.getTrailBreadcrumbs();
-    return breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null;
-  }
-  /**
-   * Returns whether a breadcrumb has a known action to forward.
-   * @param {HTMLElement|null} breadcrumb Breadcrumb to inspect.
-   * @returns {boolean}
-   */
-  isBreadcrumbActionable(breadcrumb) {
+    const e2 = this.getTrailBreadcrumbs();
+    return e2.length > 1 ? e2[e2.length - 2] : null;
+  }
+  isBreadcrumbActionable(e2) {
     var _a, _b, _c, _d;
-    if (!breadcrumb || breadcrumb.disabled || ((_a = breadcrumb.hasAttribute) == null ? void 0 : _a.call(breadcrumb, "disabled"))) return false;
-    return Boolean(
-      ((_b = breadcrumb.hasAttribute) == null ? void 0 : _b.call(breadcrumb, "href")) || ((_c = breadcrumb.hasAttribute) == null ? void 0 : _c.call(breadcrumb, "onclick")) || breadcrumb.__wjeBreadcrumbManaged || ((_d = breadcrumb.hasAttribute) == null ? void 0 : _d.call(breadcrumb, "data-wje-breadcrumbs-item"))
-    );
-  }
-  /**
-   * Forwards a compact control or menu item click to the original breadcrumb.
-   * @param {HTMLElement|null} breadcrumb Source breadcrumb.
-   */
-  forwardBreadcrumbClick(breadcrumb) {
+    return !(!e2 || e2.disabled || ((_a = e2.hasAttribute) == null ? void 0 : _a.call(e2, "disabled"))) && Boolean(((_b = e2.hasAttribute) == null ? void 0 : _b.call(e2, "href")) || ((_c = e2.hasAttribute) == null ? void 0 : _c.call(e2, "onclick")) || e2.__wjeBreadcrumbManaged || ((_d = e2.hasAttribute) == null ? void 0 : _d.call(e2, "data-wje-breadcrumbs-item")));
+  }
+  forwardBreadcrumbClick(e2) {
     var _a;
-    if (!breadcrumb) return;
-    const native = breadcrumb.native || ((_a = breadcrumb.context) == null ? void 0 : _a.querySelector("a.native-breadcrumb"));
-    if (native && typeof native.click === "function") {
-      native.click();
-    } else if (typeof breadcrumb.click === "function") {
-      breadcrumb.click();
-    } else {
-      breadcrumb.dispatchEvent(
-        new MouseEvent("click", {
-          bubbles: true,
-          composed: true,
-          cancelable: true
-        })
-      );
-    }
+    if (!e2) return;
+    const t2 = e2.native || ((_a = e2.context) == null ? void 0 : _a.querySelector("a.native-breadcrumb"));
+    t2 && "function" == typeof t2.click ? t2.click() : "function" == typeof e2.click ? e2.click() : e2.dispatchEvent(new MouseEvent("click", { bubbles: true, composed: true, cancelable: true }));
   }
-  /**
-   * Creates the dropdown trigger for collapsed breadcrumbs.
-   * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
-   * @returns {HTMLElement}
-   */
-  createCollapsedDropdownTrigger(isBreakpointMenuIndicator) {
+  createCollapsedDropdownTrigger(e2) {
     var _a, _b;
-    if (isBreakpointMenuIndicator) {
-      const customTrigger = (_b = (_a = this.getBreadcrumbs()) == null ? void 0 : _a.getBreakpointCollapseTrigger) == null ? void 0 : _b.call(_a);
-      if (customTrigger) {
-        const trigger = customTrigger.cloneNode(true);
-        trigger.setAttribute("slot", "trigger");
-        if (!trigger.hasAttribute("aria-label")) {
-          trigger.setAttribute("aria-label", "Show breadcrumb menu");
-        }
-        return trigger;
+    if (e2) {
+      const e3 = (_b = (_a = this.getBreadcrumbs()) == null ? void 0 : _a.getBreakpointCollapseTrigger) == null ? void 0 : _b.call(_a);
+      if (e3) {
+        const t3 = e3.cloneNode(true);
+        return t3.setAttribute("slot", "trigger"), "wje-button" === t3.localName ? t3.hasAttribute("label") || t3.hasAttribute("aria-label") || t3.setAttribute("label", "Show breadcrumb menu") : t3.hasAttribute("aria-label") || t3.setAttribute("aria-label", "Show breadcrumb menu"), t3;
       }
     }
-    let button = document.createElement("wje-button");
-    button.setAttribute("slot", "trigger");
-    button.setAttribute("fill", "link");
-    button.setAttribute("aria-label", "Show more breadcrumbs");
-    button.innerHTML = `<wje-icon name="${this.getCollapsedDropdownIcon(isBreakpointMenuIndicator)}"></wje-icon>`;
-    return button;
-  }
-  /**
-   * Resolves the icon used by the default dropdown trigger.
-   * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
-   * @returns {string}
-   */
-  getCollapsedDropdownIcon(isBreakpointMenuIndicator) {
+    let t2 = document.createElement("wje-button");
+    return t2.setAttribute("slot", "trigger"), t2.setAttribute("fill", "link"), t2.setAttribute("label", "Show more breadcrumbs"), t2.innerHTML = `<wje-icon name="${this.getCollapsedDropdownIcon(e2)}"></wje-icon>`, t2;
+  }
+  getCollapsedDropdownIcon(e2) {
     var _a;
-    if (!isBreakpointMenuIndicator) return "dots";
-    return ((_a = this.getBreadcrumbs()) == null ? void 0 : _a.breakpointCollapseIcon) || "menu";
-  }
-  /**
-   * Copies breadcrumb content into a collapsed menu item.
-   * @param {HTMLElement} menuItem Menu item receiving the content.
-   * @param {HTMLElement} breadcrumb Source breadcrumb.
-   */
-  populateCollapsedMenuItem(menuItem, breadcrumb) {
-    const nodes = Array.from(breadcrumb.childNodes).map((node) => node.cloneNode(true));
-    menuItem.replaceChildren(...nodes);
-    if (menuItem.textContent.trim()) return;
-    const label = this.getBreadcrumbLabel(breadcrumb);
-    if (label) {
-      menuItem.append(document.createTextNode(label));
-    }
+    return e2 ? ((_a = this.getBreadcrumbs()) == null ? void 0 : _a.breakpointCollapseIcon) || "menu" : "dots";
   }
-  /**
-   * Resolves a readable label for a breadcrumb item.
-   * @param {HTMLElement|null} breadcrumb Source breadcrumb.
-   * @returns {string}
-   */
-  getBreadcrumbLabel(breadcrumb) {
-    if (!breadcrumb) return "";
-    return this.getCollapsedMenuItemLabel(breadcrumb);
-  }
-  /**
-   * Resolves a readable label for icon-only collapsed menu items.
-   * @param {HTMLElement} breadcrumb Source breadcrumb.
-   * @returns {string}
-   */
-  getCollapsedMenuItemLabel(breadcrumb) {
+  populateCollapsedMenuItem(e2, t2) {
+    const r2 = Array.from(t2.childNodes).map((e3) => e3.cloneNode(true));
+    if (e2.replaceChildren(...r2), e2.textContent.trim()) return;
+    const a2 = this.getBreadcrumbLabel(t2);
+    a2 && e2.append(document.createTextNode(a2));
+  }
+  getBreadcrumbLabel(e2) {
+    return e2 ? this.getCollapsedMenuItemLabel(e2) : "";
+  }
+  getCollapsedMenuItemLabel(e2) {
     var _a;
-    const explicitLabel = breadcrumb.getAttribute("aria-label") || breadcrumb.getAttribute("title");
-    if (explicitLabel == null ? void 0 : explicitLabel.trim()) return explicitLabel.trim();
-    const text = breadcrumb.textContent.trim();
-    if (text) return text;
-    const iconName = (_a = breadcrumb.querySelector('wje-icon[slot="start"]')) == null ? void 0 : _a.getAttribute("name");
-    if (iconName === "home") return "Home";
-    const href = breadcrumb.getAttribute("href");
-    const path = (href == null ? void 0 : href.split(/[?#]/)[0]) || "";
-    const segment = path.split("/").filter(Boolean).pop();
-    return segment ? this.humanizeCollapsedMenuItemLabel(segment) : "";
-  }
-  /**
-   * Turns a URL segment into a readable menu label.
-   * @param {string} value URL segment.
-   * @returns {string}
-   */
-  humanizeCollapsedMenuItemLabel(value) {
-    return decodeURIComponent(value).replace(/[-_]+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
-  }
-  /**
-   * Returns whether this collapsed indicator represents the full breakpoint menu.
-   * @returns {boolean}
-   */
+    const t2 = e2.getAttribute("aria-label") || e2.getAttribute("title");
+    if (t2 == null ? void 0 : t2.trim()) return t2.trim();
+    const r2 = e2.textContent.trim();
+    if (r2) return r2;
+    const a2 = (_a = e2.querySelector('wje-icon[slot="start"]')) == null ? void 0 : _a.getAttribute("name");
+    if ("home" === a2) return "Home";
+    const i2 = e2.getAttribute("href"), o = ((i2 == null ? void 0 : i2.split(/[?#]/)[0]) || "").split("/").filter(Boolean).pop();
+    return o ? this.humanizeCollapsedMenuItemLabel(o) : "";
+  }
+  humanizeCollapsedMenuItemLabel(e2) {
+    return decodeURIComponent(e2).replace(/[-_]+/g, " ").replace(/\b\w/g, (e3) => e3.toUpperCase());
+  }
   isBreakpointMenuIndicator() {
     var _a;
-    const breadcrumbs = this.parentElement;
-    return this.hasAttribute("show-collapsed-indicator") && this.hasAttribute("collapsed") && ((_a = breadcrumbs == null ? void 0 : breadcrumbs.isBreakpointMenuCollapseActive) == null ? void 0 : _a.call(breadcrumbs));
-  }
-  /**
-   * Creates a button element that expands hidden breadcrumbs when clicked.
-   * The button is set with appropriate attributes and event listeners to handle
-   * the expanding of hidden breadcrumb elements. Clicking the button will remove
-   * the button itself, reveal hidden breadcrumbs, and stop the current event
-   * propagation.
-   * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.
-   */
+    const e2 = this.parentElement;
+    return this.hasAttribute("show-collapsed-indicator") && this.hasAttribute("collapsed") && ((_a = e2 == null ? void 0 : e2.isBreakpointMenuCollapseActive) == null ? void 0 : _a.call(e2));
+  }
   collapseButton() {
-    let button = document.createElement("button");
-    button.setAttribute("aria-label", "Show more breadcrumbs");
-    button.setAttribute("part", "collapsed-indicator");
-    button.innerHTML = `<wje-icon name="dots"></wje-icon>`;
-    event.addListener(button, "click", null, (e) => {
-      this.native.classList.remove("hidden");
-      button.remove();
-      this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {
-        el.classList.remove("collapsed");
-      });
-      e.stopPropagation();
-    });
-    return button;
-  }
-  /**
-   * Retrieves the breadcrumb trail for the current element by returning its parent element.
-   * @returns {Element} The parent element representing the breadcrumb trail.
-   */
+    let e2 = document.createElement("button");
+    return e2.setAttribute("aria-label", "Show more breadcrumbs"), e2.setAttribute("part", "collapsed-indicator"), e2.innerHTML = '<wje-icon name="dots"></wje-icon>', r.addListener(e2, "click", null, (t2) => {
+      this.native.classList.remove("hidden"), e2.remove(), this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((e3) => {
+        e3.classList.remove("collapsed");
+      }), t2.stopPropagation();
+    }), e2;
+  }
   getBreadcrumbs() {
     return this.parentElement;
   }
 }
-Breadcrumb.define("wje-breadcrumb", Breadcrumb);
+i.define("wje-breadcrumb", i);
 export {
-  Breadcrumb as default
+  i as default
 };
 //# sourceMappingURL=wje-breadcrumb.js.map