wj-elements 0.5.1 → 0.5.2

package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts

@@ -77,6 +77,11 @@ export default class Breadcrumb extends WJElement {
      */
     get collapsedVariant(): string;
     _collapsedVariant: string;
+    /**
+     * Get collapsed variant token.
+     * @returns {string}
+     */
+    get collapsedVariantName(): string;
     /**
      * 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.
@@ -124,10 +129,15 @@ export default class Breadcrumb extends WJElement {
     /**
      * Renders the collapsed indicator based on the current collapsed variant.
      * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
-     * Otherwise, it invokes the collapseButton 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.
      */
     drawCollapsedIndicator(): any;
+    /**
+     * Returns whether the current collapsed variant is a compact mobile layout.
+     * @returns {boolean}
+     */
+    isMobileCollapsedVariant(): boolean;
     /**
      * 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
@@ -137,6 +147,134 @@ export default class Breadcrumb extends WJElement {
      * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.
      */
     collapseDropdown(): HTMLElement;
+    /**
+     * 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 }: {
+        breadcrumbs: Array<HTMLElement>;
+        trigger: HTMLElement;
+        placement: string;
+    }): HTMLElement;
+    /**
+     * Creates the menu used by collapsed dropdown variants.
+     * @param {Array<HTMLElement>} breadcrumbs Breadcrumb items represented by menu items.
+     * @returns {HTMLElement}
+     */
+    createCollapsedBreadcrumbMenu(breadcrumbs: Array<HTMLElement>): HTMLElement;
+    /**
+     * 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: boolean): Array<HTMLElement>;
+    /**
+     * Renders one of the compact mobile breakpoint variants.
+     * @param {string} variant Normalized uppercase variant token.
+     * @returns {HTMLElement}
+     */
+    collapseMobileVariant(variant: string): HTMLElement;
+    /**
+     * Renders only the current breadcrumb title.
+     * @returns {HTMLElement}
+     */
+    collapseMobileText(): HTMLElement;
+    /**
+     * Renders a parent back action above the current title.
+     * @returns {HTMLElement}
+     */
+    collapseMobileBack(): HTMLElement;
+    /**
+     * Renders parent context above the current title.
+     * @returns {HTMLElement}
+     */
+    collapseMobileParentTitle(): HTMLElement;
+    /**
+     * Renders a menu trigger with the current title.
+     * @returns {HTMLElement}
+     */
+    collapseMobileMenuTitle(): HTMLElement;
+    /**
+     * Renders the future sheet variant using the dropdown fallback for now.
+     * @returns {HTMLElement}
+     */
+    collapseMobileSheet(): HTMLElement;
+    /**
+     * Creates a dropdown fallback for mobile menu-like variants.
+     * @param {HTMLElement} trigger Element that opens the fallback dropdown.
+     * @returns {HTMLElement}
+     */
+    createMobileDropdown(trigger: HTMLElement): HTMLElement;
+    /**
+     * 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, label, ariaLabel, className }: {
+        icon: string;
+        iconPosition: string;
+        label: string;
+        ariaLabel: string;
+        className: string;
+    }): HTMLElement;
+    /**
+     * Creates a wrapper for compact mobile breadcrumb variants.
+     * @param {string} className Variant class.
+     * @returns {HTMLElement}
+     */
+    createMobileContainer(className: string): HTMLElement;
+    /**
+     * 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: HTMLElement | null, className: string, { actionable, ariaCurrent, ariaLabel, icon }?: {
+        actionable: boolean;
+        ariaCurrent: boolean;
+        ariaLabel: string;
+        icon: string;
+    }): HTMLElement;
+    /**
+     * Returns the full trail of sibling breadcrumbs.
+     * @returns {Array<HTMLElement>}
+     */
+    getTrailBreadcrumbs(): Array<HTMLElement>;
+    /**
+     * Returns the current breadcrumb item.
+     * @returns {HTMLElement|null}
+     */
+    getCurrentBreadcrumb(): HTMLElement | null;
+    /**
+     * Returns the parent breadcrumb item.
+     * @returns {HTMLElement|null}
+     */
+    getParentBreadcrumb(): HTMLElement | null;
+    /**
+     * Returns whether a breadcrumb has a known action to forward.
+     * @param {HTMLElement|null} breadcrumb Breadcrumb to inspect.
+     * @returns {boolean}
+     */
+    isBreadcrumbActionable(breadcrumb: HTMLElement | null): boolean;
+    /**
+     * Forwards a compact control or menu item click to the original breadcrumb.
+     * @param {HTMLElement|null} breadcrumb Source breadcrumb.
+     */
+    forwardBreadcrumbClick(breadcrumb: HTMLElement | null): void;
     /**
      * Creates the dropdown trigger for collapsed breadcrumbs.
      * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
@@ -155,6 +293,12 @@ export default class Breadcrumb extends WJElement {
      * @param {HTMLElement} breadcrumb Source breadcrumb.
      */
     populateCollapsedMenuItem(menuItem: HTMLElement, breadcrumb: HTMLElement): void;
+    /**
+     * Resolves a readable label for a breadcrumb item.
+     * @param {HTMLElement|null} breadcrumb Source breadcrumb.
+     * @returns {string}
+     */
+    getBreadcrumbLabel(breadcrumb: HTMLElement | null): string;
     /**
      * Resolves a readable label for icon-only collapsed menu items.
      * @param {HTMLElement} breadcrumb Source breadcrumb.

package/dist/packages/wje-breadcrumbs/breadcrumbs.element.d.ts

@@ -11,7 +11,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.
  * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.
  * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.
- * @attribute {string} collapsed-variant - The UI used for collapsed breadcrumbs. Use "dropdown" to render a menu.
+ * @attribute {string} collapsed-variant - The UI used for collapsed breadcrumbs. Use "dropdown" to render a menu, or "text", "back", "parent-title", "menu-title", and "sheet" for compact breakpoint menu layouts.
  * @attribute {string} breakpoint - The viewport breakpoint where collapsing starts.
  * @attribute {string} breakpoint-collapse - The collapse behavior used below the breakpoint. Use "menu" to put the whole trail into one menu.
  * @attribute {string} breakpoint-collapse-icon - Icon used by the default breakpoint menu trigger.
@@ -90,6 +90,11 @@ export default class Breadcrumbs extends WJElement {
      * @returns {string}
      */
     get collapsedVariant(): string;
+    /**
+     * Gets the collapsed indicator variant as a normalized token.
+     * @returns {string}
+     */
+    get normalizedCollapsedVariant(): string;
     /**
      * Sets the collapse breakpoint token or value.
      * @param {string} value Breakpoint token or CSS size.
@@ -157,6 +162,10 @@ export default class Breadcrumbs extends WJElement {
      * @param {string|null} newValue Next value.
      */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Syncs host navigation semantics while preserving user-provided names.
+     */
+    syncAria(): void;
     /**
      * Draw method for the Breadcrumbs element.
      * @returns {object} fragment - The document fragment
@@ -275,6 +284,11 @@ export default class Breadcrumbs extends WJElement {
      * @returns {boolean}
      */
     isBreakpointMenuCollapseActive(): boolean;
+    /**
+     * Returns whether the active collapsed variant is one of the mobile compact layouts.
+     * @returns {boolean}
+     */
+    usesMobileCollapsedVariant(): boolean;
     /**
      * Clears attributes/classes managed by the collapse algorithm.
      * @param {Array<Element>} breadcrumbs Breadcrumb items.

package/dist/packages/wje-toolbar-action/toolbar-action.element.d.ts

@@ -161,6 +161,12 @@ export default class ToolbarAction extends WJElement {
      * @returns {HTMLElement}
      */
     createMenuItem(action: HTMLElement): HTMLElement;
+    /**
+     * Resolves readable text for a toolbar action copied into an overflow menu.
+     * @param {HTMLElement} action The original action element.
+     * @returns {string}
+     */
+    getActionLabel(action: HTMLElement): string;
     /**
      * Creates a divider separating existing dropdown actions from responsive overflow actions.
      * @returns {HTMLElement}

package/dist/wje-breadcrumb.js

@@ -11,7 +11,8 @@ 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::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
+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.
@@ -86,9 +87,15 @@ class Breadcrumb extends WJElement {
    * @returns {string} The collapsed variant value in uppercase.
    */
   get collapsedVariant() {
+    return this.collapsedVariantName.toUpperCase();
+  }
+  /**
+   * Get collapsed variant token.
+   * @returns {string}
+   */
+  get collapsedVariantName() {
     var _a, _b;
-    let variant = ((_a = this.parentElement) == null ? void 0 : _a.collapsedVariant) || ((_b = this.parentElement) == null ? void 0 : _b.variant) || this._collapsedVariant || "button";
-    return variant.toUpperCase();
+    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.
@@ -284,17 +291,25 @@ class Breadcrumb extends WJElement {
   /**
    * Renders the collapsed indicator based on the current collapsed variant.
    * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
-   * Otherwise, it invokes the collapseButton 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.
    */
   drawCollapsedIndicator() {
-    let collapsedIndicator = null;
-    if (this.collapsedVariant === "DROPDOWN") {
-      collapsedIndicator = this.collapseDropdown();
-    } else {
-      collapsedIndicator = this.collapseButton();
+    const variant = this.collapsedVariant;
+    if (variant === "DROPDOWN") {
+      return this.collapseDropdown();
+    }
+    if (this.isMobileCollapsedVariant() && this.isBreakpointMenuIndicator()) {
+      return this.collapseMobileVariant(variant);
     }
-    return collapsedIndicator;
+    return 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.
@@ -306,11 +321,37 @@ class Breadcrumb extends WJElement {
    */
   collapseDropdown() {
     const isBreakpointMenuIndicator = this.isBreakpointMenuIndicator();
-    let dropdown = document.createElement("wje-dropdown");
-    dropdown.setAttribute("placement", isBreakpointMenuIndicator ? "bottom-start" : "bottom");
-    dropdown.setAttribute("offset", "10");
+    const breadcrumbs = this.getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator);
     const trigger = this.createCollapsedDropdownTrigger(isBreakpointMenuIndicator);
-    let menu = document.createElement("wje-menu");
+    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) => {
@@ -318,37 +359,286 @@ class Breadcrumb extends WJElement {
       e.stopPropagation();
       (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
     });
-    this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {
-      let menuItem = document.createElement("wje-menu-item");
-      this.populateCollapsedMenuItem(menuItem, b);
-      menuItem.__breadcrumb = b;
+    breadcrumbs.forEach((breadcrumb) => {
+      const menuItem = document.createElement("wje-menu-item");
+      this.populateCollapsedMenuItem(menuItem, breadcrumb);
+      menuItem.__breadcrumb = breadcrumb;
       menuItem.addEventListener("wje-menu-item:click", (e) => {
-        var _a, _b, _c;
+        var _a, _b;
         (_a = e.preventDefault) == null ? void 0 : _a.call(e);
         e.stopPropagation();
         (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
-        const breadcrumb = e.currentTarget.__breadcrumb;
-        if (!breadcrumb) return;
-        const native = breadcrumb.native || ((_c = breadcrumb.context) == null ? void 0 : _c.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
-            })
-          );
-        }
+        this.forwardBreadcrumbClick(e.currentTarget.__breadcrumb);
       });
       menu.append(menuItem);
     });
-    dropdown.append(trigger, menu);
+    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) {
+    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}
+   */
+  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}
+   */
+  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 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}
+   */
+  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 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}
+   */
+  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}
+   */
+  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 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>}
+   */
+  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;
+  }
+  /**
+   * 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) {
+    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) {
+    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
+        })
+      );
+    }
+  }
   /**
    * Creates the dropdown trigger for collapsed breadcrumbs.
    * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
@@ -393,11 +683,20 @@ class Breadcrumb extends WJElement {
     const nodes = Array.from(breadcrumb.childNodes).map((node) => node.cloneNode(true));
     menuItem.replaceChildren(...nodes);
     if (menuItem.textContent.trim()) return;
-    const label = this.getCollapsedMenuItemLabel(breadcrumb);
+    const label = this.getBreadcrumbLabel(breadcrumb);
     if (label) {
       menuItem.append(document.createTextNode(label));
     }
   }
+  /**
+   * 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.