wj-elements 0.4.8 → 0.5.1

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);
 
@@ -671,6 +677,8 @@
     --wje-toolbar-min-height: 70px;
     --wje-toolbar-padding-inline: 1.5rem;
     --wje-toolbar-padding-block: 1rem;
+    --wje-toolbar-margin-inline: 0;
+    --wje-toolbar-margin-block: 0;
     --wje-toolbar-border-color: var(--wje-border-color);
     --wje-toolbar-top: 0;
     --wje-toolbar-shadow: var(--wje-shadow-medium);

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 {
@@ -29,6 +35,27 @@ export default class Breadcrumb extends WJElement {
     static get observedAttributes(): Array<string>;
     _showSeparator: boolean;
     _showCollapsedIndicator: boolean;
+    handleNativeClick: (e: any) => void;
+    /**
+     * Sets the breadcrumb link URL.
+     * @param {string|null} value Link URL.
+     */
+    set href(value: string | null);
+    /**
+     * Gets the breadcrumb link URL.
+     * @returns {string|null}
+     */
+    get href(): string | null;
+    /**
+     * Sets the disabled state.
+     * @param {boolean} value Disabled state.
+     */
+    set disabled(value: boolean);
+    /**
+     * Gets the disabled state.
+     * @returns {boolean}
+     */
+    get disabled(): boolean;
     /**
      * Set show separator flag.
      * @param {boolean} value The value to set
@@ -65,6 +92,35 @@ 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.
+     */
+    syncNativeAttributes(): void;
+    /**
+     * Sets up native anchor listeners after render.
+     */
+    afterDraw(): void;
+    /**
+     * Prevents disabled breadcrumbs from navigating or bubbling click handlers.
+     * @param {MouseEvent} e Click event.
+     */
+    handleDisabledNativeClick(e: MouseEvent): void;
     /**
      * Renders the collapsed indicator based on the current collapsed variant.
      * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
@@ -81,6 +137,41 @@ 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 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 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,10 +5,17 @@ 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.
+ * @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
  * <!-- Example usage -->
@@ -49,6 +56,20 @@ export default class Breadcrumbs extends WJElement {
      */
     last: boolean;
     _isCollapsedByBreakpoint: boolean;
+    _items: any[];
+    _itemRecords: any[];
+    _hasItemsValue: boolean;
+    handleManagedItemClick: (e: any) => void;
+    /**
+     * Sets data-driven breadcrumb items.
+     * @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.
+     */
+    set items(value: any[] | string | null | undefined);
+    /**
+     * Gets data-driven breadcrumb items.
+     * @returns {Array}
+     */
+    get items(): any[];
     /**
      * Set variant attribute for the Breadcrumbs element.
      * @param value
@@ -59,6 +80,11 @@ 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}
@@ -74,6 +100,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
@@ -104,6 +150,13 @@ 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;
     /**
      * Draw method for the Breadcrumbs element.
      * @returns {object} fragment - The document fragment
@@ -119,6 +172,89 @@ export default class Breadcrumbs extends WJElement {
     afterDraw(): void;
     onSlotChange: () => void;
     handleResize: () => void;
+    /**
+     * Upgrades properties set before the custom element definition was loaded.
+     * @param {string} property Property name.
+     */
+    upgradeProperty(property: string): void;
+    /**
+     * Normalizes incoming item data for keyed DOM diffing.
+     * @param {Array|string|null|undefined} value Breadcrumb item data.
+     * @returns {Array<object>}
+     */
+    normalizeItems(value: any[] | string | null | undefined): Array<object>;
+    /**
+     * Normalizes a single item while preserving the original object for events.
+     * @param {object|string|number} item Source value for a breadcrumb entry.
+     * @param {number} index Position of the value in the current items array.
+     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.
+     * @returns {object}
+     */
+    normalizeItem(item: object | string | number, index: number, usedKeys: Set<string>): object;
+    /**
+     * Resolves a stable key for an item.
+     * @param {object} item Normalized source object used to resolve the key.
+     * @param {number} index Fallback position used when the item has no id.
+     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.
+     * @returns {string}
+     */
+    getItemKey(item: object, index: number, usedKeys: Set<string>): string;
+    /**
+     * Incrementally synchronizes data-driven items into light DOM breadcrumbs.
+     * @param {Array<object>} records Normalized records for the next breadcrumb trail.
+     */
+    syncItems(records: Array<object>): void;
+    /**
+     * Creates a managed breadcrumb element.
+     * @param {object} record Normalized data used to create the breadcrumb.
+     * @param {number} index Position assigned to the created breadcrumb.
+     * @returns {HTMLElement}
+     */
+    createItemElement(record: object, index: number): HTMLElement;
+    /**
+     * Updates a managed breadcrumb element only where values changed.
+     * @param {HTMLElement} breadcrumb Existing managed element to update.
+     * @param {object} record Normalized data used for the next rendered state.
+     * @param {number} index Position assigned to the managed breadcrumb.
+     */
+    updateItemElement(breadcrumb: HTMLElement, record: object, index: number): void;
+    /**
+     * Synchronizes an attribute when its value changed.
+     * @param {HTMLElement} element Element receiving the synchronized attribute.
+     * @param {string} name Attribute to add, update, or remove.
+     * @param {string|null|undefined} value Next serialized value for the attribute.
+     */
+    syncItemAttribute(element: HTMLElement, name: string, value: string | null | undefined): void;
+    /**
+     * Synchronizes a boolean attribute.
+     * @param {HTMLElement} element Element receiving the boolean attribute.
+     * @param {string} name Boolean attribute to toggle.
+     * @param {boolean} isEnabled Whether the attribute should be present.
+     */
+    syncBooleanItemAttribute(element: HTMLElement, name: string, isEnabled: boolean): void;
+    /**
+     * Synchronizes slotted icon and text nodes for a managed breadcrumb.
+     * @param {HTMLElement} breadcrumb Breadcrumb element.
+     * @param {object} record Normalized item record.
+     */
+    syncItemContent(breadcrumb: HTMLElement, record: object): void;
+    /**
+     * Returns a small signature for structural changes that need item replacement.
+     * @param {object} record Normalized item record.
+     * @returns {string}
+     */
+    getItemStructureSignature(record: object): string;
+    /**
+     * Dispatches the data-driven item click event.
+     * @param {MouseEvent} e Original click event.
+     */
+    dispatchManagedItemClick(e: MouseEvent): void;
+    /**
+     * Finds the managed breadcrumb that originated an event.
+     * @param {Event} e Event whose composed path should be inspected.
+     * @returns {HTMLElement|null}
+     */
+    getManagedBreadcrumbFromEvent(e: Event): HTMLElement | null;
     /**
      * Reacts to viewport resize only when the breakpoint mode actually changes.
      * @returns {void}
@@ -129,6 +265,16 @@ 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;
     /**
      * Clears attributes/classes managed by the collapse algorithm.
      * @param {Array<Element>} breadcrumbs Breadcrumb items.
@@ -141,6 +287,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}
@@ -151,11 +301,21 @@ 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.
      */
     getBreadcrumbs(): Array<Element>;
+    /**
+     * Retrieves breadcrumbs managed by the items property.
+     * @returns {Array<Element>}
+     */
+    getManagedBreadcrumbs(): Array<Element>;
     /**
      * Retrieves all breadcrumb elements that have the 'collapsed' attribute.
      * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.

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

@@ -10,6 +10,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @property {string} alt - The alternative text for the image.
  * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.
  * @property {string} loader - The URL of the image loader to display while the image is loading.
+ * @property {boolean} noLazy - Disables lazy loading and renders the image source immediately.
  * @tag wje-img
  */
 export default class Img extends WJElement {
@@ -71,6 +72,16 @@ export default class Img extends WJElement {
      * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.
      */
     get loader(): string | null;
+    /**
+     * Enables or disables lazy loading for the image.
+     * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.
+     */
+    set noLazy(value: boolean);
+    /**
+     * Checks whether lazy loading is disabled.
+     * @returns {boolean} True when the `no-lazy` attribute is present.
+     */
+    get noLazy(): boolean;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Creates and assembles a lazy-loaded image element within a document fragment.

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

@@ -68,6 +68,11 @@ export class Select extends FormAssociatedElement {
      * @description A reference to the input element, initially null.
      */
     input: HTMLElement | null;
+    /**
+     * @type {HTMLElement|null}
+     * @description A reference to the visible selected text element, initially null.
+     */
+    displayText: HTMLElement | null;
     /**
      * @type {HTMLElement|null}
      * @description A reference to the chips element, initially null.

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

@@ -14,6 +14,8 @@ import { default as WJElement } from '../wje-element/element.js';
  * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.
  * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.
  * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.
+ * @cssproperty [--wje-toolbar-margin-block=0] - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value.
+ * @cssproperty [--wje-toolbar-margin-inline=0] - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value.
  * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.
  * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.
  * @tag wje-toolbar