wj-elements 0.6.0 → 0.7.0

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

@@ -7,7 +7,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @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.
+ * @property {Array<{id: string|number, label: string, href?: string, icon?: string, title?: 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.

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

@@ -7,10 +7,24 @@ import { default as Popup } from '../wje-popup/popup.element.js';
  * @status stable
  * @augments {WJElement}
  * @csspart native - The native part of the dropdown.
+ * @csspart popup-native - The exported native popup panel part.
+ * @csspart backdrop - The exported mobile bottom sheet backdrop part.
  * @slot trigger - The slot for the trigger of the dropdown.
  * @slot - The default slot for the dropdown.
+ * @property {string} mobilePresentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @property {string} mobileBreakPoint - Viewport width where the mobile presentation becomes active. Defaults to "768".
+ * @attribute {string} mobile-presentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @attribute {string} mobile-break-point - Viewport width where the mobile presentation becomes active. Defaults to "768".
  * // @fires wje-dropdown:open - Event fired when the dropdown is opened.
  * // @fires wje-dropdown:close - Event fired when the dropdown is closed.
+ * @cssproperty [--wje-popup-backdrop-background=var(--wje-backdrop)] - Backdrop background used by mobile bottom sheet dropdowns.
+ * @cssproperty [--wje-popup-backdrop-opacity=1] - Backdrop opacity used by mobile bottom sheet dropdowns.
+ * @cssproperty [--wje-popup-mobile-background=var(--wje-select-options-background-color)] - Background of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-border-radius=var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0] - Border radius of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-box-shadow=0 -8px 32px rgba(0, 0, 0, 0.16)] - Shadow of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-max-height=90vh] - Maximum height of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-transition-duration=250ms] - Transition duration for the mobile bottom sheet and backdrop.
+ * @cssproperty [--wje-popup-mobile-transition-easing=ease] - Transition easing for the mobile bottom sheet and backdrop.
  * @tag wje-dropdown
  */
 export default class Dropdown extends WJElement {
@@ -56,6 +70,10 @@ export default class Dropdown extends WJElement {
      * @returns {string|string}
      */
     get trigger(): string | string;
+    set mobilePresentation(value: string);
+    get mobilePresentation(): string;
+    set mobileBreakPoint(value: string);
+    get mobileBreakPoint(): string;
     /**
      * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
      * @param {Event} e The event object.

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

@@ -17,6 +17,11 @@ export default class Orgchart 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 whether the chart should omit its incoming connector spacing.
      * @param {boolean} value True when the chart should render without top connector spacing.
@@ -33,6 +38,16 @@ export default class Orgchart extends WJElement {
      */
     draw(): DocumentFragment;
     native: HTMLDivElement;
+    defaultSlot: HTMLSlotElement;
+    /**
+     * Syncs flat chart state to direct slotted children.
+     */
+    afterDraw(): void;
+    /**
+     * Marks direct children that are rendered inside a flat chart.
+     */
+    syncFlatChildren: () => void;
+    flatChildren: Set<Element>;
     /**
      * Sync ARIA attributes on host.
      */

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

@@ -11,6 +11,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @csspart - Styles the element.
  * @csspart native - Styles the native element.
  * @csspart expander - Styles the expander element.
+ * // @fires wje-orgchart-item:click - Emitted when the item card is clicked.
  * @tag wje-orgchart-item
  */
 export default class OrgchartItem extends WJElement {
@@ -52,14 +53,15 @@ export default class OrgchartItem extends WJElement {
      */
     draw(): DocumentFragment;
     expander: HTMLDivElement;
+    card: HTMLElement;
     /**
      * After Draws the component for the org chart item.
      */
     afterDraw(): void;
+    handleItemClick: (e: any) => void;
     /**
      * Toggles the children of the orgchart item.
      * @param e The event object.
      */
     toggleChildren: (e: any) => void;
-    dispatchEvent(e: any): boolean;
 }

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

@@ -6,12 +6,27 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments {WJElement}
  * @csspart native - The native part of the popup.
+ * @csspart backdrop - The backdrop used by mobile bottom sheet presentation.
  * @slot anchor - The slot for the anchor of the popup.
  * @slot arrow - The slot for the arrow of the popup.
  * @slot - The default slot for the popup.
+ * @property {boolean} contentAwareSize - Allows a size popup to grow to its content instead of locking to the anchor width.
+ * @property {string} mobilePresentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @property {string} mobileBreakPoint - Viewport width where the mobile presentation becomes active. Defaults to "768".
+ * @attribute {string} mobile-presentation - Enables a responsive presentation, currently "bottom-sheet".
+ * @attribute {string} mobile-break-point - Viewport width where the mobile presentation becomes active. Defaults to "768".
  * // @fires wje-popup:reposition - Event fired when the popup is repositioned.
  * // @fires wje-popup:show - Event fired when the popup is shown.
  * // @fires wje-popup:hide - Event fired when the popup is hidden.
+ * @cssproperty [--wje-popup-backdrop-background=var(--wje-backdrop)] - Backdrop background used by mobile bottom sheet popups.
+ * @cssproperty [--wje-popup-backdrop-opacity=1] - Backdrop opacity used by mobile bottom sheet popups.
+ * @cssproperty [--wje-popup-mobile-background=var(--wje-select-options-background-color)] - Background of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-border-radius=var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0] - Border radius of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-box-shadow=0 -8px 32px rgba(0, 0, 0, 0.16)] - Shadow of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-max-height=90vh] - Maximum height of the mobile bottom sheet panel.
+ * @cssproperty [--wje-popup-mobile-transition-duration=250ms] - Transition duration for the mobile bottom sheet and backdrop.
+ * @cssproperty [--wje-popup-mobile-transition-easing=ease] - Transition easing for the mobile bottom sheet and backdrop.
+ * @cssproperty [--wje-popup-loader-inset=0] - Inset used by the popup loader overlay.
  * @tag wje-popup
  */
 export default class Popup extends WJElement {
@@ -28,8 +43,13 @@ export default class Popup extends WJElement {
      */
     static get observedAttributes(): Array<string>;
     _manual: boolean;
+    _contentAwareSize: boolean;
+    _contentReadyHandler: () => void;
+    _bottomSheetRestoreTimeout: any;
     set loader(value: boolean);
     get loader(): boolean;
+    set contentAwareSize(value: boolean);
+    get contentAwareSize(): boolean;
     /**
      * Sets the manual property of the popup.
      * @param {boolean} value The value to set.
@@ -52,7 +72,20 @@ export default class Popup extends WJElement {
      * @returns {boolean} True if the 'portal' attribute exists, otherwise false.
      */
     get portal(): boolean;
+    set mobilePresentation(value: string);
+    get mobilePresentation(): string;
+    set mobileBreakPoint(value: string);
+    get mobileBreakPoint(): string;
     get floatingEl(): HTMLDivElement;
+    get backdropEl(): HTMLDivElement;
+    _hideFloatingLightDomContentBeforeRender(): void;
+    _hiddenFloatingLightDomContent: {
+        el: Element;
+        display: any;
+        priority: any;
+    }[];
+    _restoreFloatingLightDomContentAfterRender(): void;
+    _contentReadyListenerAttached: boolean;
     beforeDraw(context: any, store: any, params: any): void;
     /**
      * Draws the component for the popup.
@@ -61,6 +94,8 @@ export default class Popup extends WJElement {
     draw(): DocumentFragment;
     slotAnchor: HTMLSlotElement;
     slotArrow: HTMLSlotElement;
+    defaultSlot: HTMLSlotElement;
+    backdrop: HTMLDivElement;
     native: HTMLDivElement;
     loaderEl: HTMLDivElement;
     /**
@@ -75,6 +110,16 @@ export default class Popup extends WJElement {
     anchorEl: any;
     manualCallback: (e: any) => void;
     clickHandler: (e: any) => void;
+    handleBackdropClick: (e: any) => void;
+    clearBottomSheetRestoreTimeout(): void;
+    handleViewportResize: () => void;
+    isBottomSheetActive(): boolean;
+    setBottomSheetState(isActive: any): void;
+    clearBottomSheetState(): void;
+    rebindPortaledRouter(): void;
+    syncResponsivePresentation(): void;
+    cleanup: any;
+    getBottomSheetTransitionDurationMs(): number;
     /**
      * Toggles the active attribute of the popup.
      */
@@ -94,6 +139,7 @@ export default class Popup extends WJElement {
      * @returns {void} Does not return a value.
      */
     _mountContentToPortal(): void;
+    _portalBackdrop: HTMLDivElement;
     _portalNative: HTMLDivElement;
     _portalSlot: HTMLSlotElement;
     _portalArrowSlot: HTMLSlotElement;
@@ -130,7 +176,6 @@ export default class Popup extends WJElement {
      * @returns {void} Does not return any value.
      */
     show(dispatchEvent?: boolean): void;
-    cleanup: any;
     /**
      * Hides the popup.
      * Removes the popup-active class from the floating element.
@@ -141,5 +186,7 @@ export default class Popup extends WJElement {
      * Removes the active attribute when the popup is hidden.
      */
     handleHide: () => void;
+    _showLoader(): void;
+    _hideLoader(): void;
     markContentReady(): void;
 }

package/dist/packages/wje-sliding-container/sliding-container.element.d.ts

@@ -4,7 +4,11 @@ import { default as WJElement } from '../wje-element/element.js';
  * @documentation https://elements.webjet.sk/components/SlidingContainer
  * @status stable
  * @augments WJElement
- * @csspart - Styles the element.
+ * @csspart backdrop - Styles the mobile bottom sheet backdrop.
+ * @csspart sliding-container - Styles the native sliding panel.
+ * @csspart close-button - Styles the generated close button.
+ * @csspart sheet-handle-area - Styles the draggable resize handle hit area.
+ * @csspart sheet-handle - Styles the visible draggable resize handle.
  * @slot - The default slot for the SlidingContainer.
  * @property {string} maxWidth - The maximum width of the SlidingContainer.
  * @property {string} maxHeight - The maximum height of the SlidingContainer.
@@ -16,6 +20,34 @@ import { default as WJElement } from '../wje-element/element.js';
  * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.
  * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').
  * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.
+ * @property {string} mobilePresentation - Enables mobile presentation, for example 'bottom-sheet'.
+ * @property {string} mobileBreakPoint - The viewport width where mobile presentation becomes active.
+ * @property {boolean} backdropDismiss - Closes the mobile bottom sheet when the backdrop is clicked.
+ * @property {boolean} sheetResizable - Enables mobile bottom sheet resizing.
+ * @property {string} sheetScope - Defines whether the mobile bottom sheet is scoped to the container or viewport.
+ * @property {string} sheetBoundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet.
+ * @property {string} sheetHeight - The mobile bottom sheet height after opening.
+ * @property {string} sheetMinHeight - The minimum mobile bottom sheet height while resizing.
+ * @property {string} sheetMaxHeight - The maximum mobile bottom sheet height while resizing.
+ * @attribute {string} mobile-presentation - Enables responsive mobile presentation. Use "bottom-sheet".
+ * @attribute {string} mobile-break-point - Viewport width where mobile presentation becomes active. Defaults to "768".
+ * @attribute {boolean} backdrop-dismiss - Closes the mobile bottom sheet when the backdrop is clicked.
+ * @attribute {boolean} sheet-resizable - Enables resizing the mobile bottom sheet with a handle.
+ * @attribute {string} sheet-scope - Defines whether the sheet is scoped to "viewport", "parent", or a bounded container.
+ * @attribute {string} sheet-boundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet.
+ * @attribute {string} sheet-height - The mobile bottom sheet height after opening.
+ * @attribute {string} sheet-min-height - The minimum mobile bottom sheet height while resizing.
+ * @attribute {string} sheet-max-height - The maximum mobile bottom sheet height while resizing.
+ * @cssproperty [--wje-sliding-container-background=var(--wje-background)] - Background of the sliding panel.
+ * @cssproperty [--wje-sliding-container-backdrop-background=var(--wje-backdrop)] - Background of the mobile bottom sheet backdrop.
+ * @cssproperty [--wje-sliding-container-backdrop-opacity=1] - Backdrop opacity while the mobile bottom sheet is open.
+ * @cssproperty [--wje-sliding-container-box-shadow=var(--wje-sliding-container-shadow)] - Shadow of the mobile bottom sheet panel.
+ * @cssproperty [--wje-sliding-container-sheet-border-radius=var(--wje-sliding-container-border-radius) var(--wje-sliding-container-border-radius) 0 0] - Border radius of the mobile bottom sheet panel.
+ * @cssproperty [--wje-sliding-container-sheet-handle-area-height=24px] - Height of the resize handle hit area.
+ * @cssproperty [--wje-sliding-container-sheet-handle-width=36px] - Width of the visible resize handle.
+ * @cssproperty [--wje-sliding-container-sheet-handle-height=2px] - Height of the visible resize handle.
+ * @cssproperty [--wje-sliding-container-sheet-handle-background=var(--wje-border-color)] - Background of the visible resize handle.
+ * @cssproperty [--wje-sliding-container-sheet-handle-radius=999px] - Border radius of the visible resize handle.
  * @tag wje-sliding-container
  * @example
  * <wje-sliding-container trigger="test-resize-container-event-right" id="left-in-place" direction="left" max-width="100px" max-height="100%">
@@ -44,6 +76,31 @@ export default class SlidingContainer extends WJElement {
     static get cssStyleSheet(): CSSStyleSheet;
     _isOpen: boolean;
     _lastCaller: EventTarget;
+    _sheetDrag: {
+        pointerId: string | number;
+        startY: number;
+        startHeight: number;
+        minHeight: number;
+        maxHeight: number;
+        hasMoved: boolean;
+    };
+    _sheetIgnoreDismissUntil: number;
+    _sheetBackdropGesture: {
+        pointerId: number;
+        startX: number;
+        startY: number;
+        hasMoved: boolean;
+    };
+    _sheetBackdropHandledUntil: number;
+    _hasLockedDocumentScroll: boolean;
+    _bottomSheetScopeFrame: {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
     _resizeObserver: ResizeObserver;
     /**
      * Sets the 'variant' attribute to the specified value.
@@ -122,6 +179,26 @@ export default class SlidingContainer extends WJElement {
      * @returns {string} The value of the 'screen-break-point' attribute.
      */
     get screenBreakPoint(): string;
+    /**
+     * Sets mobile presentation mode.
+     * @param {string} value The mobile presentation mode.
+     */
+    set mobilePresentation(value: string);
+    /**
+     * Gets mobile presentation mode.
+     * @returns {string|null} The mobile presentation mode.
+     */
+    get mobilePresentation(): string | null;
+    /**
+     * Sets the breakpoint for mobile presentation.
+     * @param {string} value The mobile breakpoint.
+     */
+    set mobileBreakPoint(value: string);
+    /**
+     * Gets the breakpoint for mobile presentation.
+     * @returns {string} The mobile breakpoint.
+     */
+    get mobileBreakPoint(): string;
     /**
      * Sets the duration of the animation by updating the `animation-duration` attribute.
      * @param {string} value The duration value for the animation, specified in a format
@@ -149,6 +226,71 @@ export default class SlidingContainer extends WJElement {
      * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.
      */
     get hasOpacity(): boolean;
+    /**
+     * Determines if the bottom sheet should close when the backdrop is clicked.
+     * @returns {boolean} True if backdrop dismiss is enabled.
+     */
+    get backdropDismiss(): boolean;
+    /**
+     * Sets resizing for the mobile bottom sheet.
+     * @param {boolean|string} value The value to set.
+     */
+    set sheetResizable(value: boolean | string);
+    /**
+     * Enables resizing for the mobile bottom sheet.
+     * @returns {boolean} True if the sheet can be resized.
+     */
+    get sheetResizable(): boolean;
+    /**
+     * Sets the mobile bottom sheet scope.
+     * @param {string} value The new boundary mode for the mobile sheet.
+     */
+    set sheetScope(value: string);
+    /**
+     * Gets the mobile bottom sheet scope.
+     * @returns {string} Either 'viewport', 'container', or 'parent'.
+     */
+    get sheetScope(): string;
+    /**
+     * Sets the selector used for container-scoped mobile bottom sheets.
+     * @param {string} value Selector for the boundary element.
+     */
+    set sheetBoundary(value: string);
+    /**
+     * Gets the selector used for container-scoped mobile bottom sheets.
+     * @returns {string|null} A CSS selector used to find the composed boundary ancestor.
+     */
+    get sheetBoundary(): string | null;
+    /**
+     * Sets the mobile bottom sheet opening height.
+     * @param {string} value The opening height.
+     */
+    set sheetHeight(value: string);
+    /**
+     * Gets the mobile bottom sheet opening height.
+     * @returns {string|null} The opening height.
+     */
+    get sheetHeight(): string | null;
+    /**
+     * Sets the minimum mobile bottom sheet height while resizing.
+     * @param {string} value The minimum height.
+     */
+    set sheetMinHeight(value: string);
+    /**
+     * Gets the minimum mobile bottom sheet height while resizing.
+     * @returns {string|null} The minimum height.
+     */
+    get sheetMinHeight(): string | null;
+    /**
+     * Sets the maximum mobile bottom sheet height while resizing.
+     * @param {string} value The maximum height.
+     */
+    set sheetMaxHeight(value: string);
+    /**
+     * Gets the maximum mobile bottom sheet height while resizing.
+     * @returns {string|null} The maximum height.
+     */
+    get sheetMaxHeight(): string | null;
     /**
      * Sets the value of the 'add-to-height' attribute.
      * This attribute is used to modify or adjust the height dynamically.
@@ -178,9 +320,12 @@ export default class SlidingContainer extends WJElement {
      * @returns {DocumentFragment}
      */
     draw(context: object, store: object, params: object): DocumentFragment;
+    sheetHandleArea: HTMLDivElement;
+    backdropElement: HTMLDivElement;
     transparentDiv: HTMLDivElement;
     wrapperDiv: HTMLDivElement;
     nativeElement: HTMLDivElement;
+    nativeInner: HTMLDivElement;
     /**
      * Performs actions after the element is drawn on the screen.
      * Attaches an event listener to the document based on the specified trigger.
@@ -188,6 +333,11 @@ export default class SlidingContainer extends WJElement {
      * Calls the checkForVariant method with the current variant.
      */
     afterDraw(): void;
+    /**
+     * Returns whether the mobile bottom sheet presentation is active.
+     * @returns {boolean}
+     */
+    isBottomSheet(): boolean;
     /**
      * Sync ARIA attributes on host.
      */
@@ -198,12 +348,63 @@ export default class SlidingContainer extends WJElement {
      * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.
      */
     htmlCloseButton(): HTMLElement;
+    /**
+     * Creates the mobile bottom sheet resize handle.
+     * @returns {HTMLElement} The resize handle element.
+     */
+    htmlSheetHandle(): HTMLElement;
     /**
      * Retrieves the parent element of the current element.
      * If the parent element is not found, it attempts to find the root host element.
      * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.
      */
     getParentElement(): Element | null;
+    /**
+     * Finds the closest element across shadow DOM boundaries.
+     * @param {string} selector The selector to match.
+     * @returns {Element|null} The matched composed ancestor.
+     */
+    getClosestComposedElement(selector: string): Element | null;
+    /**
+     * Returns the viewport frame.
+     * @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
+     */
+    getViewportFrame(): {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Returns the element that bounds the mobile bottom sheet.
+     * @returns {Element|null} The scope element, or null for viewport scope.
+     */
+    getBottomSheetScopeElement(): Element | null;
+    /**
+     * Returns the frame used by the mobile bottom sheet.
+     * @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
+     */
+    getBottomSheetScopeFrame(): {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Applies a fixed frame to a bottom sheet layer.
+     * @param {HTMLElement|SlidingContainer} element The element to update.
+     * @param {object} frame The frame to apply.
+     */
+    setBottomSheetLayerFrame(element: HTMLElement | SlidingContainer, frame: object): void;
+    /**
+     * Removes fixed frame styles from a bottom sheet layer.
+     * @param {HTMLElement|SlidingContainer} element The element to reset.
+     */
+    resetBottomSheetLayerFrame(element: HTMLElement | SlidingContainer): void;
     /**
      * Adjusts the position and dimensions of the current element based on the specified variant.
      *
@@ -213,6 +414,154 @@ export default class SlidingContainer extends WJElement {
      * @returns {void} No value is returned, the method modifies the element's style properties directly.
      */
     checkForVariant(variant: string): void;
+    /**
+     * Applies the mobile bottom sheet layout.
+     */
+    setBottomSheetVariant(): void;
+    /**
+     * Removes layout styles managed by the mobile bottom sheet mode.
+     */
+    resetBottomSheetVariant(): void;
+    /**
+     * Applies the current visual open or closed state to the mobile bottom sheet.
+     * @param {boolean} isOpen True when the sheet should be visible.
+     */
+    setBottomSheetVisualState(isOpen: boolean): void;
+    /**
+     * Gets the CSS height limit used for the mobile bottom sheet.
+     * @returns {string} The CSS max height.
+     */
+    getSheetMaxHeight(): string;
+    /**
+     * Applies the configured bottom sheet opening height.
+     */
+    setSheetHeight(): void;
+    /**
+     * Resolves the sheet minimum height in pixels.
+     * @returns {number} The minimum height.
+     */
+    getSheetMinHeightInPixels(): number;
+    /**
+     * Resolves the sheet maximum height in pixels.
+     * @returns {number} The maximum height.
+     */
+    getSheetMaxHeightInPixels(): number;
+    /**
+     * Returns available height for the bottom sheet scope.
+     * @returns {number} Pixel height that can be used inside the current sheet frame.
+     */
+    getBottomSheetAvailableHeight(): number;
+    /**
+     * Resolves a CSS height value against the viewport.
+     * @param {string} value The configured sheet height.
+     * @param {number} fallback The fallback height in pixels.
+     * @returns {number} The resolved height.
+     */
+    resolveCssHeight(value: string, fallback: number): number;
+    /**
+     * Clamps a number between min and max.
+     * @param {number} value The measured height.
+     * @param {number} min The minimum.
+     * @param {number} max The maximum.
+     * @returns {number} The clamped value.
+     */
+    clamp(value: number, min: number, max: number): number;
+    /**
+     * Stops a handle interaction from dismissing the bottom sheet.
+     * @param {Event} e The interaction emitted by the resize handle.
+     */
+    stopSheetHandleEvent: (e: Event) => void;
+    /**
+     * Checks whether an event came from the resize handle.
+     * @param {Event} e The event to check.
+     * @returns {boolean} True when the event belongs to the resize handle.
+     */
+    isSheetHandleEvent(e: Event): boolean;
+    /**
+     * Checks whether an event happened inside the visible bottom sheet.
+     * @param {Event} e The event to check.
+     * @returns {boolean} True when the event coordinates are inside the sheet.
+     */
+    isEventInsideSheet(e: Event): boolean;
+    /**
+     * Prevents scroll events from reaching the page behind the bottom sheet.
+     * @param {Event} e The scroll event.
+     */
+    preventBottomSheetScroll: (e: Event) => void;
+    /**
+     * Prevents the page behind the mobile bottom sheet from scrolling.
+     */
+    lockDocumentScroll(): void;
+    /**
+     * Restores page scrolling after the mobile bottom sheet is closed.
+     */
+    unlockDocumentScroll(): void;
+    /**
+     * Stores the initial drag state for the mobile bottom sheet.
+     * @param {number|string} pointerId The pointer identifier.
+     * @param {number} startY The starting Y coordinate.
+     */
+    startSheetDrag(pointerId: number | string, startY: number): void;
+    animation: any;
+    nativeAnimation: any;
+    /**
+     * Applies a new height while the bottom sheet is being dragged.
+     * @param {number} clientY The current Y coordinate.
+     */
+    updateSheetDrag(clientY: number): void;
+    /**
+     * Starts mobile bottom sheet resizing.
+     * @param {PointerEvent} e The pointer event.
+     */
+    handleSheetDragStart: (e: PointerEvent) => void;
+    /**
+     * Starts mobile bottom sheet resizing from a touch event.
+     * @param {TouchEvent} e The touch event.
+     */
+    handleSheetTouchStart: (e: TouchEvent) => void;
+    /**
+     * Starts tracking a possible backdrop dismiss tap.
+     * @param {PointerEvent} e The pointer event.
+     */
+    handleBackdropPointerStart: (e: PointerEvent) => void;
+    /**
+     * Tracks movement during a possible backdrop dismiss tap.
+     * @param {PointerEvent} e The pointer event.
+     */
+    handleBackdropPointerMove: (e: PointerEvent) => void;
+    /**
+     * Finishes a possible backdrop dismiss tap.
+     * @param {PointerEvent} e The pointer event.
+     */
+    handleBackdropPointerEnd: (e: PointerEvent) => void;
+    /**
+     * Cancels a possible backdrop dismiss tap.
+     */
+    handleBackdropPointerCancel: () => void;
+    /**
+     * Resizes the mobile bottom sheet during dragging.
+     * @param {PointerEvent} e The pointer event.
+     */
+    handleSheetDragMove: (e: PointerEvent) => void;
+    /**
+     * Resizes the mobile bottom sheet during touch dragging.
+     * @param {TouchEvent} e The touch event.
+     */
+    handleSheetTouchMove: (e: TouchEvent) => void;
+    /**
+     * Ends mobile bottom sheet resizing.
+     * @param {PointerEvent} e The pointer event.
+     */
+    handleSheetDragEnd: (e: PointerEvent) => void;
+    /**
+     * Ends mobile bottom sheet resizing from a touch event.
+     * @param {TouchEvent} e The touch event.
+     */
+    handleSheetTouchEnd: (e: TouchEvent) => void;
+    /**
+     * Cleans up mobile bottom sheet resizing listeners.
+     */
+    endSheetDrag(): void;
     /**
      * Triggers the event based on the target element.
      * If the target element is different from the last caller, it refreshes the children by calling the `open` method.
@@ -246,8 +595,12 @@ export default class SlidingContainer extends WJElement {
      * @returns {Promise<void>} A promise that resolves when the transition animation is completed.
      */
     doAnimateTransition(): Promise<void>;
-    animation: any;
-    nativeAnimation: any;
+    /**
+     * Animates the mobile bottom sheet and its backdrop.
+     * @param {object} options Web Animation options.
+     * @returns {Promise<void>}
+     */
+    doAnimateBottomSheetTransition(options: object): Promise<void>;
     /**
      * Opens the sliding container by performing necessary preparatory and transitional operations.
      * @param {Event} e The event that triggered the open operation.
@@ -260,6 +613,10 @@ export default class SlidingContainer extends WJElement {
      * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.
      */
     close(e: Event): Promise<void>;
+    /**
+     * Forces the closed visual state for the mobile bottom sheet.
+     */
+    setBottomSheetClosedState(): void;
     /**
      * Toggles the state between open and closed.
      * @param {Event} e The event object triggering the toggle.

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

@@ -161,6 +161,17 @@ export default class ToolbarAction extends WJElement {
      * @returns {HTMLElement}
      */
     createMenuItem(action: HTMLElement): HTMLElement;
+    /**
+     * Clones action content for menu usage and normalizes button icon slots.
+     * @param {Node} node The source action child node.
+     * @returns {Node}
+     */
+    cloneActionMenuNode(node: Node): Node;
+    /**
+     * Moves button-only icon slots to the menu item start slot.
+     * @param {Element} element The cloned action content node.
+     */
+    normalizeActionMenuIconSlot(element: Element): void;
     /**
      * Resolves readable text for a toolbar action copied into an overflow menu.
      * @param {HTMLElement} action The original action element.