@siemens/ix 4.4.0 → 5.0.0

package/dist/types/components/utils/dependency-function.d.ts

@@ -0,0 +1,16 @@
+export type CustomElementDependency<Tag extends string = string> = {
+    tag: Tag;
+    define: () => Promise<void> | void;
+};
+type CustomElementDependencies = readonly CustomElementDependency[];
+type DependencyDefinitions<TDependencies extends CustomElementDependencies> = {
+    readonly [Index in keyof TDependencies]: TDependencies[Index] extends CustomElementDependency<infer Tag> ? CustomElementDependency<Tag> : never;
+};
+type DependencyFunctionCallback = (...args: never[]) => Promise<unknown>;
+export type DependencyFunction<TCallback extends DependencyFunctionCallback, TDependencies extends CustomElementDependencies> = TCallback & {
+    readonly dependencies: DependencyDefinitions<TDependencies>;
+    ensureDependencies: () => Promise<void>;
+    withDependencies: (dependencies: DependencyDefinitions<TDependencies>) => DependencyFunction<TCallback, TDependencies>;
+};
+export declare function createDependencyFunction<TCallback extends DependencyFunctionCallback, const TDependencies extends CustomElementDependencies>(callback: TCallback, dependencies: TDependencies): DependencyFunction<TCallback, TDependencies>;
+export {};

package/dist/types/components/utils/event.d.ts

@@ -0,0 +1,8 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare function emitEvent<T>(action: () => {
+    new: T;
+    old: T;
+}, emitter: EventEmitter<T>, rollback: (oldValue: T) => void): {
+    new: T;
+    old: T;
+};

package/dist/types/components/utils/focus/detect-keyboard-mode.d.ts

@@ -0,0 +1,5 @@
+export type KeyboardModeDetector = {
+    destroy: () => void;
+    hasKeyboardMode: () => boolean;
+};
+export declare function detectKeyboardMode(element?: HTMLElement): KeyboardModeDetector;

package/dist/types/components/utils/focus/focus-proxy.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Add a focus proxy element to the DOM to allow for better keyboard navigation and accessibility.
+ *
+ * Important: Also import the focus proxy mixin in the host component's scss file to ensure the proxy is visually hidden but still accessible to screen readers and keyboard navigation.
+ */
+export declare const FocusProxy: (props: {
+    hostId: string;
+    otherProps: any;
+}) => any;
+export declare const PROXY_LIST_ID_SUFFIX: "proxy-listbox";
+export declare const PROXY_LISTITEM_ID_SUFFIX: "proxy-listbox-item";
+export declare const updateFocusProxyList: <T extends HTMLElement>(proxyListElement: HTMLElement, items: T[], modifyProxyElement?: (item: T, proxyElement: HTMLLIElement) => void) => void;

package/dist/types/components/utils/focus/focus-trap.d.ts

@@ -0,0 +1,12 @@
+import { MakeRef } from '../make-ref';
+export interface FocusTrapResult {
+    destroy: () => void;
+}
+export declare const TRAP_FOCUS_EXCLUDE_ATTRIBUTE = "data-ix-focus-trap-exclude";
+export declare const TRAP_FOCUS_INCLUDE_ATTRIBUTE = "data-ix-focus-trap-include";
+export type FocusTrapOptions = {
+    targetElement?: HTMLElement | MakeRef<any>;
+    trapFocusInShadowDom?: boolean;
+    excludeElements?: boolean;
+};
+export declare const addFocusTrap: (element: HTMLElement, options?: FocusTrapOptions) => Promise<FocusTrapResult>;

package/dist/types/components/utils/focus/focus-utilities.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Originally based on Ionic's focus-visible utility.
+ * Fork of https://github.com/ionic-team/ionic-framework/blob/c37e2a5d9e765cf48d768061c9d453a13b187e13/core/src/utils/focus-visible.ts
+ */
+export declare const IX_FOCUS_VISIBLE_ACTIVE = "ix-focused";
+export declare const IX_FOCUS_VISIBLE = "ix-focusable";
+export declare const FOCUS_KEYS: Set<string>;
+export declare function queryElements(dropdownElement: HTMLElement | ShadowRoot | null | undefined, query: string): HTMLElement[];
+export type DomFocusOptions = Parameters<HTMLElement['focus']>[0];
+/** `focusVisible` is supported in Firefox 104+; omitted from some TypeScript DOM typings. */
+export type IxFocusOptions = DomFocusOptions & {
+    focusVisible?: boolean;
+};
+export declare function tryFocusElement(element: Element | HTMLElement, options?: IxFocusOptions): void;
+export type FocusVisibleConfig = {
+    trapFocus?: boolean;
+    trapFocusInShadowDom?: boolean;
+};
+export type FocusOptions = {
+    focusCheckedItem?: boolean;
+};
+export declare const focusFirstDescendant: <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T, options?: FocusOptions) => void;
+export declare const focusLastDescendant: <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T) => void;
+/**
+ * Checks if an element is part of a custom element's shadow root
+ * and returns the host element if it is, otherwise returns the element itself.
+ */
+export declare const getHostElement: (element: HTMLElement) => HTMLElement;
+export declare const focusElementInContext: <T extends HTMLElement>(hostToFocus: HTMLElement | null | undefined, fallbackElement: T) => void;
+export declare const focusElement: (element: HTMLElement | null | undefined, options?: DomFocusOptions) => void;
+export declare const focusableQueryString: string;
+export declare const buildFocusableQueryString: (additionalSelector?: string) => string;

package/dist/types/components/utils/input/index.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { IxComponent } from '../internal';
+import { IxComponentInterface } from '../internal';
 export * from './validation';
 export interface FieldWrapperInterface {
     /**
@@ -39,7 +39,7 @@ export interface IxFormValidationState {
     isInfo: boolean;
     isWarning: boolean;
 }
-export interface IxFormComponent<T = string> extends IxComponent {
+export interface IxFormComponent<T = string> extends IxComponentInterface {
     formInternals: ElementInternals;
     required?: boolean;
     name?: string;
@@ -60,3 +60,7 @@ export interface IxInputFieldComponent<T = string> extends IxFormComponent<T>, I
     focusInput(): Promise<void>;
 }
 export declare function isIxInputFieldComponent<T>(obj: HTMLElement | IxFormComponent<T>): obj is HTMLIxInputFieldComponentElement<T>;
+export interface IxInputFieldWithPickerComponent<T> extends IxInputFieldComponent<T> {
+    openPicker(): Promise<void>;
+}
+export declare function isIxInputFieldWithPickerComponent<T>(obj: HTMLElement | IxFormComponent<T>): obj is IxInputFieldWithPickerComponent<T>;

package/dist/types/components/utils/input/validation.d.ts

@@ -1,5 +1,5 @@
 import { HTMLIxFormComponentElement, IxFormComponent } from '.';
-import { IxComponent } from '../internal';
+import { IxComponentInterface } from '../internal';
 export type ClassMutationObserver = {
     destroy: () => void;
 };
@@ -13,5 +13,5 @@ export type ValidationResults = Record<ValidationResultProperty, boolean>;
 export declare function checkFieldClasses(hostElement: HTMLIxFormComponentElement<unknown>, includeChildren?: boolean): ValidationResults;
 export declare function HookValidationLifecycle(options?: {
     includeChildren?: boolean;
-}): (proto: IxComponent, methodName: string) => void;
+}): (proto: IxComponentInterface, methodName: string) => void;
 export declare function getValidationText(isInputInvalid: boolean, customInvalidText: string | undefined, i18nFallbackText: string): string | undefined;

package/dist/types/components/utils/internal/component.d.ts

@@ -1,4 +1,109 @@
-import { HTMLStencilElement, ComponentInterface } from '../../../stencil-public-runtime';
-export interface IxComponent extends ComponentInterface {
+import type { ComponentInterface } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
+export interface StencilLifecycle {
+    hostElement?: HTMLStencilElement;
+    connectedCallback?(): void;
+    disconnectedCallback?(): void;
+    componentWillRender?(): Promise<void> | void;
+    componentDidRender?(): void;
+    /**
+     * The component is about to load and it has not
+     * rendered yet.
+     *
+     * This is the best place to make any data updates
+     * before the first render.
+     *
+     * componentWillLoad will only be called once.
+     */
+    componentWillLoad?(): Promise<void> | void;
+    /**
+     * The component has loaded and has already rendered.
+     *
+     * Updating data in this method will cause the
+     * component to re-render.
+     *
+     * componentDidLoad will only be called once.
+     */
+    componentDidLoad?(): void;
+    /**
+     * A `@Prop` or `@State` property changed and a rerender is about to be requested.
+     *
+     * Called multiple times throughout the life of
+     * the component as its properties change.
+     *
+     * componentShouldUpdate is not called on the first render.
+     */
+    componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+    /**
+     * The component is about to update and re-render.
+     *
+     * Called multiple times throughout the life of
+     * the component as it updates.
+     *
+     * componentWillUpdate is not called on the first render.
+     */
+    componentWillUpdate?(): Promise<void> | void;
+    /**
+     * The component has just re-rendered.
+     *
+     * Called multiple times throughout the life of
+     * the component as it updates.
+     *
+     * componentWillUpdate is not called on the
+     * first render.
+     */
+    componentDidUpdate?(): void;
+    render?(): any;
+}
+export interface IxComponentInterface extends ComponentInterface {
     hostElement: HTMLStencilElement;
 }
+export declare const DefaultMixins: readonly [<B extends import("@stencil/core").MixedInCtor<StencilLifecycle>>(Base: B) => {
+    new (...args: any[]): {
+        componentDidLoad(): void;
+        disconnectedCallback(): void;
+        hostElement?: HTMLStencilElement;
+        connectedCallback?(): void;
+        componentWillRender?(): Promise<void> | void;
+        componentDidRender?(): void;
+        /**
+         * The component is about to load and it has not
+         * rendered yet.
+         *
+         * This is the best place to make any data updates
+         * before the first render.
+         *
+         * componentWillLoad will only be called once.
+         */
+        componentWillLoad?(): Promise<void> | void;
+        /**
+         * A `@Prop` or `@State` property changed and a rerender is about to be requested.
+         *
+         * Called multiple times throughout the life of
+         * the component as its properties change.
+         *
+         * componentShouldUpdate is not called on the first render.
+         */
+        componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+        /**
+         * The component is about to update and re-render.
+         *
+         * Called multiple times throughout the life of
+         * the component as it updates.
+         *
+         * componentWillUpdate is not called on the first render.
+         */
+        componentWillUpdate?(): Promise<void> | void;
+        /**
+         * The component has just re-rendered.
+         *
+         * Called multiple times throughout the life of
+         * the component as it updates.
+         *
+         * componentWillUpdate is not called on the
+         * first render.
+         */
+        componentDidUpdate?(): void;
+        render?(): any;
+    };
+} & B];

package/dist/types/components/utils/internal/index.d.ts

@@ -1 +1,2 @@
-export { IxComponent } from './component';
+export { IxComponentInterface } from './component';
+export { SetupMixin } from './mixins/setup.mixin';

package/dist/types/components/utils/internal/mixins/accessibility/aria-activedescendant.mixin.d.ts

@@ -0,0 +1,30 @@
+import { MixedInCtor } from '../../../../../stencil-public-runtime';
+import { StencilLifecycle } from '../../component';
+import { IxFocusVisibleChangeEvent } from '../setup.mixin';
+export interface AriaActiveDescendantMixinContract {
+    isAriaActiveDescendantActive(): boolean;
+    getControllingAriaElement(): Promise<HTMLElement> | HTMLElement | null;
+    getAriaActiveDescendantProxyItemId?(): string | boolean;
+    suppressAriaActiveDescendant?: boolean;
+}
+export declare const AriaActiveDescendantMixin: <B extends MixedInCtor<StencilLifecycle>>(Base: B) => {
+    new (...args: any[]): {
+        suppressAriaActiveDescendant: boolean;
+        isAriaActiveDescendantActive(): boolean;
+        getControllingAriaElement(): Promise<HTMLElement> | HTMLElement | null;
+        getAriaActiveDescendantProxyItemId(): string | boolean;
+        clearActiveDescendant(): Promise<void>;
+        $internal_onActiveDescendantChange(event: IxFocusVisibleChangeEvent): Promise<void>;
+        hostElement?: import("@stencil/core/internal").HTMLStencilElement;
+        connectedCallback?(): void;
+        disconnectedCallback?(): void;
+        componentWillRender?(): Promise<void> | void;
+        componentDidRender?(): void;
+        componentWillLoad?(): Promise<void> | void;
+        componentDidLoad?(): void;
+        componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+        componentWillUpdate?(): Promise<void> | void;
+        componentDidUpdate?(): void;
+        render?(): any;
+    };
+} & B;

package/dist/types/components/utils/internal/mixins/accessibility/inherit-aria-attributes.mixin.d.ts

@@ -0,0 +1,25 @@
+import { MixedInCtor } from '../../../../../stencil-public-runtime';
+import { StencilLifecycle } from '../../component';
+import { A11yAttributeName, A11yAttributes } from './../../../a11y';
+export interface InheritAriaAttributesMixinContract {
+    inheritAriaAttributes: A11yAttributes;
+    getIgnoredAriaAttributes?(): A11yAttributeName[];
+}
+export declare const InheritAriaAttributesMixin: <B extends MixedInCtor<StencilLifecycle>>(Base: B) => {
+    new (...args: any[]): {
+        inheritAriaAttributes: A11yAttributes;
+        getIgnoredAriaAttributes(): A11yAttributeName[];
+        componentWillLoad(): Promise<void> | void;
+        ariaAttributeChanged(newValue: string | null, _: string | null, propName: string): void;
+        hostElement?: import("@stencil/core/internal").HTMLStencilElement;
+        connectedCallback?(): void;
+        disconnectedCallback?(): void;
+        componentWillRender?(): Promise<void> | void;
+        componentDidRender?(): void;
+        componentDidLoad?(): void;
+        componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+        componentWillUpdate?(): Promise<void> | void;
+        componentDidUpdate?(): void;
+        render?(): any;
+    };
+} & B;

package/dist/types/components/utils/internal/mixins/focus-visible.mixin.d.ts

@@ -0,0 +1,33 @@
+import { MixedInCtor } from '../../../../stencil-public-runtime';
+import { StencilLifecycle } from '../component';
+export interface FocusVisibleMixinContract {
+    ixFocusVisible: boolean;
+    $internal_checkAriaSelected(focusVisible: boolean): void;
+}
+export declare const FocusVisibleMixin: <B extends MixedInCtor<StencilLifecycle>>(Base: B) => {
+    new (...args: any[]): {
+        /**
+         * @internal
+         */
+        ixFocusVisible: boolean;
+        /**
+         * When `true`, do not map keyboard focus visibility to `aria-selected` on the host.
+         * Use when selection state must not mirror roving focus (e.g. `ix-select-item`).
+         *
+         * @internal
+         */
+        disableAriaSelectHandling: boolean;
+        componentDidLoad(): void;
+        $internal_checkAriaSelected(focusVisible: boolean): void;
+        hostElement?: import("@stencil/core/internal").HTMLStencilElement;
+        connectedCallback?(): void;
+        disconnectedCallback?(): void;
+        componentWillRender?(): Promise<void> | void;
+        componentDidRender?(): void;
+        componentWillLoad?(): Promise<void> | void;
+        componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+        componentWillUpdate?(): Promise<void> | void;
+        componentDidUpdate?(): void;
+        render?(): any;
+    };
+} & B;

package/dist/types/components/utils/internal/mixins/id.mixin.d.ts

@@ -0,0 +1,22 @@
+import { MixedInCtor } from '../../../../stencil-public-runtime';
+import { StencilLifecycle } from '../component';
+export interface ComponentIdMixinContract {
+    getHostElementId(): string;
+}
+export declare const ComponentIdMixin: <B extends MixedInCtor<StencilLifecycle>>(Base: B) => {
+    new (...args: any[]): {
+        $internal_id: number;
+        getHostElementId(): string;
+        hostElement?: import("@stencil/core/internal").HTMLStencilElement;
+        connectedCallback?(): void;
+        disconnectedCallback?(): void;
+        componentWillRender?(): Promise<void> | void;
+        componentDidRender?(): void;
+        componentWillLoad?(): Promise<void> | void;
+        componentDidLoad?(): void;
+        componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+        componentWillUpdate?(): Promise<void> | void;
+        componentDidUpdate?(): void;
+        render?(): any;
+    };
+} & B;

package/dist/types/components/utils/internal/mixins/input/input-picker.mixin.d.ts

@@ -0,0 +1,24 @@
+import { MixedInCtor } from '../../../../../stencil-public-runtime';
+import { StencilLifecycle } from '../../component';
+import { MakeRef } from './../../../../utils/make-ref';
+export interface InputPickerMixinContract {
+    getPickerElement(): MakeRef<HTMLIxDropdownElement> | null;
+    /** @internal */
+    openPicker?(): Promise<void>;
+}
+export declare const InputPickerMixin: <B extends MixedInCtor<StencilLifecycle>>(Base: B) => (abstract new (...args: any[]) => {
+    getPickerElement(): MakeRef<HTMLIxDropdownElement> | null;
+    /** @internal */
+    openPicker(): Promise<void>;
+    hostElement?: import("@stencil/core/internal").HTMLStencilElement;
+    connectedCallback?(): void;
+    disconnectedCallback?(): void;
+    componentWillRender?(): Promise<void> | void;
+    componentDidRender?(): void;
+    componentWillLoad?(): Promise<void> | void;
+    componentDidLoad?(): void;
+    componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+    componentWillUpdate?(): Promise<void> | void;
+    componentDidUpdate?(): void;
+    render?(): any;
+}) & B;

package/dist/types/components/utils/internal/mixins/setup.mixin.d.ts

@@ -0,0 +1,31 @@
+import { type MixedInCtor } from '../../../../stencil-public-runtime';
+import { StencilLifecycle } from '../component';
+export declare function hasKeyboardMode(): boolean;
+export declare function removeVisibleFocus(): void;
+export type IxFocusVisibleChangeEventDetail = {
+    currentFocus: Element[];
+};
+export declare class IxFocusVisibleChangeEvent extends CustomEvent<IxFocusVisibleChangeEventDetail> {
+    static eventName: "ixFocusVisibleChange";
+    constructor(detail: IxFocusVisibleChangeEventDetail);
+}
+export declare function updateFocusState(target: HTMLElement): void;
+/**
+ * Mixin to add global focus visible handling to a component. Mixin will be used via base class IxComponent().
+ * Not necessary to use this mixin directly in components.
+ */
+export declare const SetupMixin: <B extends MixedInCtor<StencilLifecycle>>(Base: B) => {
+    new (...args: any[]): {
+        componentDidLoad(): void;
+        disconnectedCallback(): void;
+        hostElement?: import("@stencil/core/internal").HTMLStencilElement;
+        connectedCallback?(): void;
+        componentWillRender?(): Promise<void> | void;
+        componentDidRender?(): void;
+        componentWillLoad?(): Promise<void> | void;
+        componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+        componentWillUpdate?(): Promise<void> | void;
+        componentDidUpdate?(): void;
+        render?(): any;
+    };
+} & B;

package/dist/types/components/utils/luxon-datetime-format-masks.d.ts

@@ -0,0 +1,13 @@
+/** Used when a format string has time tokens but no date prefix (e.g. time-only mask). */
+export declare const LUXON_DEFAULT_DATE_ONLY_FORMAT = "yyyy/LL/dd";
+/** Used when a format string has no time tokens. */
+export declare const LUXON_DEFAULT_TIME_ONLY_FORMAT = "HH:mm:ss";
+/**
+ * Luxon date mask: substring of `format` before the first time token, trimmed.
+ * Matches splitting used for `ix-datetime-input` / `ix-datetime-picker` embedded date column.
+ */
+export declare function getLuxonDateOnlyFormatMask(format: string, fallback?: string): string;
+/**
+ * Luxon time mask: substring of `format` from the first time token through the end.
+ */
+export declare function getLuxonTimeFormatMask(format: string, fallback?: string): string;

package/dist/types/components/utils/make-ref.d.ts

@@ -4,3 +4,4 @@ export type MakeRef<T> = {
     waitForCurrent(): Promise<T>;
 };
 export declare function makeRef<T>(currentChangedCallback?: (element: T) => void): MakeRef<T>;
+export declare function isMakeRef<T>(ref: any): ref is MakeRef<T>;

package/dist/types/components/utils/menu-tabs/menu-tabs-utils.d.ts

@@ -1,8 +1,3 @@
-import { MenuAbout } from '../../menu-about/menu-about';
-import { MenuSettings } from '../../menu-settings/menu-settings';
-export declare function setTab(context: MenuSettings | MenuAbout, label: string): void;
-export declare function syncTabDisplay(context: MenuSettings | MenuAbout, label: string): void;
-export declare function initialize(context: MenuSettings | MenuAbout): void;
 export interface CustomLabelChangeEvent {
     name: string;
     oldLabel: string;

package/dist/types/components/utils/modal/index.d.ts

@@ -1,3 +1,3 @@
-export { showModalLoading, ModalLoadingContext, ModalLoadingOptions, } from './loading';
-export { MessageConfig, showMessage } from './message';
+export { createShowModalLoading, showModalLoading, ModalLoadingContext, ModalLoadingOptions, ShowModalLoadingDependencies, } from './loading';
+export { createShowMessage, MessageConfig, ShowMessage, ShowMessageDependencies, ShowMessageVariant, showMessage, } from './message';
 export { closeModal, dismissModal, ModalConfig, ModalInstance, showModal, } from './modal';

package/dist/types/components/utils/modal/loading.d.ts

@@ -1,3 +1,4 @@
+import { type CustomElementDependency } from '../dependency-function';
 export type ModalLoadingContext = {
     update: (text: string) => string;
     finish: (text?: string, timeout?: number) => void;
@@ -13,12 +14,12 @@ export type ModalLoadingOptions = {
      */
     centered?: boolean;
 };
+export type ShowModalLoadingDependencies = readonly [
+    CustomElementDependency<'ix-modal'>,
+    CustomElementDependency<'ix-modal-loading'>
+];
 /**
- * Displays a loading modal with a message
- * @deprecated Use ModalLoadingOptions object form instead. Will be removed in v5.0.0.
+ * Create a loading modal helper with custom element dependencies.
  */
-export declare function showModalLoading(message: string): ModalLoadingContext;
-/**
- * Displays a loading modal with a message
- */
-export declare function showModalLoading(message: ModalLoadingOptions): ModalLoadingContext;
+export declare function createShowModalLoading(dependencies: ShowModalLoadingDependencies): import("../dependency-function").DependencyFunction<(options: ModalLoadingOptions) => Promise<ModalLoadingContext>, ShowModalLoadingDependencies>;
+export declare const showModalLoading: import("../dependency-function").DependencyFunction<(options: ModalLoadingOptions) => Promise<ModalLoadingContext>, ShowModalLoadingDependencies>;

package/dist/types/components/utils/modal/message.d.ts

@@ -1,6 +1,7 @@
+import { type CustomElementDependency } from '../dependency-function';
 import { TypedEvent } from '../typed-event';
 import { ModalConfig } from './modal';
-export type MessageConfig<T> = Omit<ModalConfig<T, unknown>, 'content' | 'title'> & MessageContent;
+export type MessageConfig<T> = Omit<ModalConfig<T, unknown>, 'content'> & MessageContent;
 export type MessageAction = {
     id: string;
     type: 'button-primary' | 'button-secondary' | 'okay' | 'cancel';
@@ -16,32 +17,31 @@ export type MessageContent = {
     ariaLabelledby?: string;
     ariaDescribedby?: string;
 };
-/**
- * Displays a message modal with configurable actions and returns an event emitter for action responses
- */
-export declare function showMessage<T>(config: MessageConfig<T>): Promise<TypedEvent<{
+export type ShowMessageDependencies = readonly [
+    CustomElementDependency<'ix-modal'>,
+    CustomElementDependency<'ix-modal-header'>,
+    CustomElementDependency<'ix-modal-content'>,
+    CustomElementDependency<'ix-modal-footer'>,
+    CustomElementDependency<'ix-button'>
+];
+type ShowMessageResult<T> = Promise<TypedEvent<{
     actionId: string;
     payload: T;
 }>>;
-export declare namespace showMessage {
-    var info: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
-        actionId: string;
-        payload: unknown;
-    }>>;
-    var warning: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
-        actionId: string;
-        payload: unknown;
-    }>>;
-    var error: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
-        actionId: string;
-        payload: unknown;
-    }>>;
-    var success: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
-        actionId: string;
-        payload: unknown;
-    }>>;
-    var question: (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => Promise<TypedEvent<{
-        actionId: string;
-        payload: unknown;
-    }>>;
-}
+export type ShowMessageVariant = (title: string, message: string, textOkay: string, textCancel?: string, payloadOkay?: any, payloadCancel?: any) => ShowMessageResult<unknown>;
+export type ShowMessage = (<T>(config: MessageConfig<T>) => ShowMessageResult<T>) & {
+    info: ShowMessageVariant;
+    warning: ShowMessageVariant;
+    error: ShowMessageVariant;
+    success: ShowMessageVariant;
+    question: ShowMessageVariant;
+};
+/**
+ * Create a message modal helper with custom element dependencies.
+ */
+export declare function createShowMessage(dependencies: ShowMessageDependencies): ShowMessage;
+/**
+ * Displays a message modal with configurable actions and returns an event emitter for action responses
+ */
+export declare const showMessage: ShowMessage;
+export {};

package/dist/types/components/utils/modal/modal.d.ts

@@ -1,5 +1,6 @@
 import type { IxModalSize } from '../../modal/modal.types';
 import { TypedEvent } from '../typed-event';
+export declare const IX_MODAL_AUTOFOCUS_SELECTOR = "[autofocus],[auto-focus]";
 /**
  * Set accessibility attributes on modal element
  */
@@ -22,7 +23,7 @@ export interface ModalConfig<TReason = any, CONTENT = any> {
      */
     backdrop?: boolean;
     /**
-     * Dismiss modal on backdrop click
+     * Dismiss modal on backdrop click (ignored when **isNonBlocking** is `true`)
      */
     closeOnBackdropClick?: boolean;
     /**
@@ -34,31 +35,18 @@ export interface ModalConfig<TReason = any, CONTENT = any> {
      */
     centered?: boolean;
     /**
-     * Element to attach modal to
-     *
-     * @deprecated This has no effect anymore and will be removed with 5.0.0
+     * Non-modal dialog: page stays interactive, no lightbox or focus trap; `aria-modal` is `false`.
+     * Set before calling `showModal()`; changing while open is unsupported.
      */
-    container?: string | HTMLElement;
+    isNonBlocking?: boolean;
     /**
      * Modal content
      */
     content: CONTENT | string;
-    /**
-     * Allow closing with Escape key
-     *
-     * @deprecated This has no effect anymore and will be removed with 5.0.0
-     */
-    keyboard?: boolean;
     /**
      * Modal size
      */
     size?: IxModalSize;
-    /**
-     * Modal title
-     *
-     * @deprecated This has no effect anymore and will be removed with 5.0.0
-     */
-    title?: string;
 }
 export interface ModalInstance<TReason = any> {
     /**
@@ -85,4 +73,7 @@ export declare function dismissModal(element: Element, dismissResult?: any): voi
 /**
  * Show modal with given configuration
  */
-export declare function showModal<T>(config: ModalConfig<T>): Promise<ModalInstance<T>>;
+export declare const showModal: import("../dependency-function").DependencyFunction<(<T>(config: ModalConfig<T>) => Promise<ModalInstance<T>>), readonly [{
+    readonly tag: "ix-modal";
+    readonly define: () => void;
+}]>;

package/dist/types/components/utils/overlay.d.ts

@@ -1,5 +1,5 @@
-import { IxComponent } from '../utils/internal';
-export interface IxOverlayComponent extends IxComponent {
+import { IxComponentInterface } from '../utils/internal';
+export interface IxOverlayComponent extends IxComponentInterface {
     isPresent(): boolean;
     willPresent?(): boolean;
     willDismiss?(): boolean;

package/dist/types/components/utils/shadow-dom.d.ts

@@ -3,3 +3,19 @@ export declare function getSlottedElements<R = any>(slot: any): R[];
 export declare function hasSlottedElements(slot: any): boolean;
 export declare function containsElement(target: Element, element: Element): boolean;
 export declare function closestPassShadow(node: Node, selector: string): HTMLElement | null;
+/**
+ * Returns an array of elements representing the path from the given element
+ * to the document root, similar to Event.composedPath().
+ * This function respects shadow DOM boundaries and traverses through them.
+ *
+ * @param element - The HTMLElement to start the path from
+ * @returns An array of Elements including the element itself, shadow roots, and parent elements
+ *
+ * @example
+ * ```typescript
+ * const button = document.querySelector('ix-button');
+ * const path = getComposedPath(button);
+ * // Returns: [button, shadow-root, ix-button, body, html, document]
+ * ```
+ */
+export declare function getComposedPath(element: HTMLElement): Element[];

package/dist/types/components/utils/test/animejs.mock.d.ts

@@ -0,0 +1 @@
+export {};