wj-elements 0.5.0 → 0.5.2

package/dist/light.css

@@ -270,6 +270,12 @@
     --wje-breadcrumb-font-size: var(--wje-font-size);
     --wje-breadcrumb-active-font-weight: var(--wje-font-weight-bold);
     --wje-breadcrumb-active-font-size: var(--wje-font-size);
+    --wje-breadcrumb-line-height: var(--wje-line-height-normal);
+    --wje-breadcrumb-native-line-height: var(--wje-breadcrumb-line-height);
+    --wje-breadcrumb-native-margin: 0;
+    --wje-breadcrumb-native-padding: var(--wje-spacing-3x-small) var(--wje-spacing-small);
+    --wje-breadcrumb-margin: var(--wje-breadcrumb-native-margin);
+    --wje-breadcrumb-padding: var(--wje-breadcrumb-native-padding);
     --wje-breadcrumb-a: var(--wje-color-contrast-8);
     --wje-breadcrumb-a-hover: var(--wje-color-contrast-6);
 

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

@@ -12,6 +12,12 @@ import { default as WJElement } from '../wje-element/element.js';
  * @csspart separator - The separator between breadcrumb items.
  * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.
  * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.
+ * @cssproperty [--wje-breadcrumb-line-height=1.5] - Controls the vertical rhythm of breadcrumb text.
+ * @cssproperty [--wje-breadcrumb-native-line-height=var(--wje-breadcrumb-line-height)] - Controls the line height of the native breadcrumb wrapper.
+ * @cssproperty [--wje-breadcrumb-native-margin=0] - Sets outer spacing around the native breadcrumb wrapper.
+ * @cssproperty [--wje-breadcrumb-native-padding=0.25rem 0.75rem] - Sets inner spacing inside the native breadcrumb wrapper.
+ * @cssproperty [--wje-breadcrumb-margin=var(--wje-breadcrumb-native-margin)] - Backwards-compatible alias for native breadcrumb margin.
+ * @cssproperty [--wje-breadcrumb-padding=var(--wje-breadcrumb-native-padding)] - Backwards-compatible alias for native breadcrumb padding.
  * @tag wje-breadcrumb
  */
 export default class Breadcrumb extends WJElement {
@@ -71,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.
@@ -86,6 +97,22 @@ export default class Breadcrumb extends WJElement {
      */
     draw(): object;
     native: HTMLAnchorElement;
+    /**
+     * Returns whether the separator should be visible after this breadcrumb.
+     * @returns {boolean}
+     */
+    shouldRenderSeparator(): boolean;
+    /**
+     * Returns whether any later breadcrumb is still visible in the rendered trail.
+     * @returns {boolean}
+     */
+    hasVisibleBreadcrumbAfter(): boolean;
+    /**
+     * Returns whether a breadcrumb is visible in the rendered trail.
+     * @param {Element} breadcrumb Breadcrumb element to inspect.
+     * @returns {boolean}
+     */
+    isBreadcrumbVisibleInTrail(breadcrumb: Element): boolean;
     /**
      * Synchronizes host attributes to the internal anchor.
      */
@@ -102,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
@@ -115,6 +147,175 @@ 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.
+     * @returns {HTMLElement}
+     */
+    createCollapsedDropdownTrigger(isBreakpointMenuIndicator: boolean): HTMLElement;
+    /**
+     * Resolves the icon used by the default dropdown trigger.
+     * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
+     * @returns {string}
+     */
+    getCollapsedDropdownIcon(isBreakpointMenuIndicator: boolean): string;
+    /**
+     * Copies breadcrumb content into a collapsed menu item.
+     * @param {HTMLElement} menuItem Menu item receiving the content.
+     * @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.
+     * @returns {string}
+     */
+    getCollapsedMenuItemLabel(breadcrumb: HTMLElement): string;
+    /**
+     * Turns a URL segment into a readable menu label.
+     * @param {string} value URL segment.
+     * @returns {string}
+     */
+    humanizeCollapsedMenuItemLabel(value: string): string;
+    /**
+     * Returns whether this collapsed indicator represents the full breakpoint menu.
+     * @returns {boolean}
+     */
+    isBreakpointMenuIndicator(): boolean;
     /**
      * Creates a button element that expands hidden breadcrumbs when clicked.
      * The button is set with appropriate attributes and event listeners to handle

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

@@ -5,11 +5,16 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments WJElement
  * @slot - The container for breadcrumb elements.
+ * @slot breakpoint-collapse-trigger - Custom trigger used when breakpoint-collapse="menu" moves the full trail into a dropdown.
  * @csspart container - The component's container wrapper.
  * @property {Array<{id: string|number, label: string, href?: string, icon?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.
  * @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, 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.
  * // @fires wje-breadcrumbs:item-click - Dispatched when a data-driven breadcrumb item is clicked.
  * @tag wje-breadcrumbs
  * @example
@@ -75,11 +80,21 @@ export default class Breadcrumbs extends WJElement {
      * @returns {string}
      */
     get variant(): string;
+    /**
+     * Get the collapsed indicator variant.
+     * @param {string} value Collapsed indicator variant.
+     */
+    set collapsedVariant(value: string);
     /**
      * Get the collapsed indicator variant.
      * @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.
@@ -90,6 +105,26 @@ export default class Breadcrumbs extends WJElement {
      * @returns {string}
      */
     get breakpoint(): string;
+    /**
+     * Sets the collapse behavior used below the configured breakpoint.
+     * @param {string} value Collapse behavior.
+     */
+    set breakpointCollapse(value: string);
+    /**
+     * Gets the collapse behavior used below the configured breakpoint.
+     * @returns {string}
+     */
+    get breakpointCollapse(): string;
+    /**
+     * Sets the icon used by the default breakpoint menu trigger.
+     * @param {string} value Icon name.
+     */
+    set breakpointCollapseIcon(value: string);
+    /**
+     * Gets the icon used by the default breakpoint menu trigger.
+     * @returns {string}
+     */
+    get breakpointCollapseIcon(): string;
     /**
      * Get items before collapse attribute.
      * @param {string} value
@@ -120,6 +155,17 @@ export default class Breadcrumbs extends WJElement {
      * @returns {number}
      */
     get itemsAfterCollapse(): number;
+    /**
+     * Handles attribute changes that affect light-DOM breadcrumb indicators.
+     * @param {string} name Updated attribute.
+     * @param {string|null} oldValue Previous value.
+     * @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
@@ -228,6 +274,21 @@ export default class Breadcrumbs extends WJElement {
      * @returns {void}
      */
     updateCollapse(): void;
+    /**
+     * Collapses the whole breadcrumb trail into a single menu indicator.
+     * @param {Array<Element>} breadcrumbs Breadcrumb items.
+     */
+    applyMenuCollapse(breadcrumbs: Array<Element>): void;
+    /**
+     * Returns whether the active breakpoint mode should move the full trail into one menu.
+     * @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.
@@ -240,6 +301,10 @@ export default class Breadcrumbs extends WJElement {
      * @param {boolean} isEnabled Whether the attribute should be present.
      */
     syncManagedAttribute(element: Element, name: string, isEnabled: boolean): void;
+    /**
+     * Redraws active collapsed indicators when parent-only rendering inputs change.
+     */
+    refreshCollapsedIndicators(): void;
     /**
      * Returns whether collapse rules should currently be applied.
      * @returns {boolean}
@@ -250,6 +315,11 @@ export default class Breadcrumbs extends WJElement {
      * @returns {number|null}
      */
     getBreakpointWidth(): number | null;
+    /**
+     * Returns the custom trigger element configured for breakpoint menu collapse.
+     * @returns {Element|null}
+     */
+    getBreakpointCollapseTrigger(): Element | null;
     /**
      * Retrieves all breadcrumb elements within the current instance.
      * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.

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}