wj-elements 0.5.1 → 0.6.0

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-dialog/dialog.element.d.ts

@@ -33,6 +33,7 @@ export default class Dialog extends WJElement {
      */
     static get observedAttributes(): any[];
     _instanceId: number;
+    _opening: boolean;
     /**
      * Sets the value of the 'headline' attribute.
      * @param {string} value The new value for the 'headline' attribute.

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

@@ -4,7 +4,9 @@ import { default as WJElement } from '../wje-element/element.js';
  * @documentation https://elements.webjet.sk/components/Orgchart
  * @status stable
  * @augments WJElement
+ * @attribute {boolean} flat - Removes the incoming connector spacing for nested charts that should visually continue on the same level.
  * @csspart - Styles the element.
+ * @csspart native - Styles the native element.
  * @tag wje-orgchart
  * @example
  */
@@ -15,6 +17,16 @@ export default class Orgchart extends WJElement {
      * @returns {CSSStyleSheet}
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Sets whether the chart should omit its incoming connector spacing.
+     * @param {boolean} value True when the chart should render without top connector spacing.
+     */
+    set flat(value: boolean);
+    /**
+     * Gets whether the chart omits its incoming connector spacing.
+     * @returns {boolean} True when the chart has the flat attribute.
+     */
+    get flat(): boolean;
     /**
      * Draws the component for the org chart.
      * @returns {DocumentFragment}

package/dist/packages/wje-orgchart-item/orgchart-item.element.d.ts

@@ -5,6 +5,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments WJElement
  * @attribute {boolean} boss - The boss of the orgchart item (default: false).
+ * @attribute {boolean} virtual - Renders the item as a structural connector without its own card or expander.
  * @slot - The default slot for the orgchart item.
  * @slot child - The child slot for the orgchart item.
  * @csspart - Styles the element.
@@ -19,6 +20,11 @@ export default class OrgchartItem extends WJElement {
      * @returns {CSSStyleSheet}
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns attributes that trigger a redraw when they change.
+     * @returns {Array<string>} Attribute names that require a new template render.
+     */
+    static get observedAttributes(): Array<string>;
     /**
      * Sets the boss of the orgchart item.
      * @param value
@@ -29,6 +35,16 @@ export default class OrgchartItem extends WJElement {
      * @returns {boolean}
      */
     get boss(): boolean;
+    /**
+     * Sets whether the item should render only as a structural connector.
+     * @param {boolean} value True when the item should not render its own card.
+     */
+    set virtual(value: boolean);
+    /**
+     * Gets whether the item renders only as a structural connector.
+     * @returns {boolean} True when the item has the virtual attribute.
+     */
+    get virtual(): boolean;
     beforeDraw(): void;
     /**
      * Draws the component for the org chart item.

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}