@baloise/ds-core 19.8.2 → 19.8.3

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/matchers/to-have-first-received-event-detail.d.ts

@@ -0,0 +1,5 @@
+import { EventSpy } from '../page/event-spy';
+export declare function toHaveFirstReceivedEventDetail(eventSpy: EventSpy, eventDetail: any): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/matchers/to-have-nth-received-event-detail.d.ts

@@ -0,0 +1,5 @@
+import { EventSpy } from '../page/event-spy';
+export declare function toHaveNthReceivedEventDetail(eventSpy: EventSpy, index: number, eventDetail: any): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/matchers/to-have-received-event-detail.d.ts

@@ -0,0 +1,5 @@
+import type { EventSpy } from '../page/event-spy';
+export declare function toHaveReceivedEventDetail(eventSpy: EventSpy, eventDetail: any): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/matchers/to-have-received-event-times.d.ts

@@ -0,0 +1,5 @@
+import type { EventSpy } from '../page/event-spy';
+export declare function toHaveReceivedEventTimes(eventSpy: EventSpy, count: number): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/matchers/to-have-received-event.d.ts

@@ -0,0 +1,5 @@
+import type { EventSpy } from '../page/event-spy';
+export declare function toHaveReceivedEvent(eventSpy: EventSpy): {
+    message: () => string;
+    pass: boolean;
+};

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/page/event-spy.d.ts

@@ -0,0 +1,44 @@
+import type { JSHandle } from '@playwright/test';
+import { BalPage } from '../types';
+/**
+ * The EventSpy class allows developers to listen for a particular event emission and
+ * pass/fail the test based on whether or not the event was emitted.
+ * Based off https://github.com/ionic-team/stencil/blob/16b8ea4dabb22024872a38bc58ba1dcf1c7cc25b/src/testing/puppeteer/puppeteer-events.ts#L64
+ */
+export declare class EventSpy {
+    eventName: string;
+    /**
+     * Keeping track of a cursor ensures that no two spy.next() calls point to the same event.
+     */
+    private cursor;
+    private queuedHandler;
+    events: CustomEvent[];
+    constructor(eventName: string);
+    get length(): number;
+    get firstEvent(): CustomEvent<any>;
+    get lastEvent(): CustomEvent<any>;
+    next(): Promise<CustomEvent<any>>;
+    push(ev: CustomEvent): void;
+}
+/**
+ * For internal use only.
+ *
+ * Initializes information required to spy on events.
+ * The stencilOnEvent function is called in the context of the current page.
+ * This lets us respond to an event listener created within the page itself.
+ *
+ * @param page The Playwright test page object.
+ */
+export declare const initPageEvents: (page: BalPage) => Promise<void>;
+/**
+ * For internal use only.
+ *
+ * Adds a new event listener in the current page context to updates
+ * the _e2eEvents map when an event is fired.
+ *
+ * @param page The Playwright test page object.
+ * @param elmHandle A {@link JSHandle} representing the element to listen for events on.
+ * @param eventName The event name to listen for.
+ * @param callback The callback to execute when the event is fired.
+ */
+export declare const addE2EListener: (page: BalPage, elmHandle: JSHandle, eventName: string, callback: (ev: any) => void) => Promise<void>;

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/page/utils/goto.d.ts

@@ -0,0 +1,8 @@
+import type { Page } from '@playwright/test';
+import type { BalPageOptions } from '../../types';
+/**
+ * This is an extended version of Playwright's `page.goto` method. In addition to performing
+ * the normal `page.goto` work, this code also automatically waits for the Stencil components
+ * to be hydrated before proceeding with the test.
+ */
+export declare const gotoPage: (page: Page, url: string, originalFn: typeof page.goto, options?: BalPageOptions) => Promise<any>;

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/page/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './goto';
+export * from './locator';
+export * from './spy-on-event';
+export * from './mount';
+export * from './wait-for-changes';

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/page/utils/locator.d.ts

@@ -0,0 +1,21 @@
+import type { Locator } from '@playwright/test';
+import { EventSpy } from '../event-spy';
+import { BalPage } from '../../types';
+export type LocatorOptions = {
+    hasText?: string | RegExp;
+    has?: Locator;
+};
+export interface E2ELocator extends Locator {
+    /**
+     * Creates a new EventSpy and listens on the element for an event.
+     * The test will timeout if the event never fires.
+     *
+     * Usage:
+     * const input = page.locator('ion-input');
+     * const ionChange = await locator.spyOnEvent('ionChange');
+     * ...
+     * await ionChange.next();
+     */
+    spyOnEvent: (eventName: string) => Promise<EventSpy>;
+}
+export declare const locator: (page: BalPage, originalFn: typeof page.locator, selector: string, options?: LocatorOptions) => E2ELocator;

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/page/utils/mount.d.ts

@@ -0,0 +1,3 @@
+import type { TestInfo } from '@playwright/test';
+import type { BalPage } from '../../types';
+export declare const mount: (page: BalPage, content: string, testInfo: TestInfo) => Promise<void>;

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/page/utils/spy-on-event.d.ts

@@ -0,0 +1,3 @@
+import { BalPage } from '../../types';
+import { EventSpy } from '../event-spy';
+export declare const spyOnEvent: (page: BalPage, eventName: string) => Promise<EventSpy>;

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/page/utils/wait-for-changes.d.ts

@@ -0,0 +1,2 @@
+import type { BalPage } from '../../types';
+export declare const waitForChanges: (page: BalPage, timeoutMs?: number) => Promise<void>;

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/screenshot.d.ts

@@ -0,0 +1 @@
+export declare const screenshot: (tag: string) => (name: string) => string;

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/test-expect.d.ts

@@ -0,0 +1,22 @@
+interface CustomMatchers<R = unknown> {
+    /**
+     * Will check if the event spy received the expected event.
+     */
+    toHaveReceivedEvent(): R;
+    /**
+     * Will check if the event spy received the expected event with the expected detail.
+     * @param eventDetail The expected detail of the event.
+     */
+    toHaveReceivedEventDetail(eventDetail: any): R;
+    /**
+     * Will check how many times the event has been received.
+     */
+    toHaveReceivedEventTimes(count: number): R;
+}
+declare global {
+    namespace PlaywrightTest {
+        interface Matchers<R> extends CustomMatchers<R> {
+        }
+    }
+}
+export {};

package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/playwright/src/lib/types.d.ts

@@ -0,0 +1,38 @@
+import { Page, Response } from '@playwright/test';
+import { EventSpy } from './page/event-spy';
+import { E2ELocator, LocatorOptions } from './page/utils';
+export type BalPageOptions = {
+    /**
+     * Referer header value. If provided it will take preference over the referer header value set by
+     * [page.setExtraHTTPHeaders(headers)](https://playwright.dev/docs/api/class-page#page-set-extra-http-headers).
+     */
+    referer?: string;
+    /**
+     * Maximum operation time in milliseconds. Defaults to `0` - no timeout. The default value can be changed via
+     * `navigationTimeout` option in the config, or by using the
+     * [browserContext.setDefaultNavigationTimeout(timeout)](https://playwright.dev/docs/api/class-browsercontext#browser-context-set-default-navigation-timeout),
+     * [browserContext.setDefaultTimeout(timeout)](https://playwright.dev/docs/api/class-browsercontext#browser-context-set-default-timeout),
+     * [page.setDefaultNavigationTimeout(timeout)](https://playwright.dev/docs/api/class-page#page-set-default-navigation-timeout)
+     * or [page.setDefaultTimeout(timeout)](https://playwright.dev/docs/api/class-page#page-set-default-timeout) methods.
+     */
+    timeout?: number;
+    /**
+     * When to consider operation succeeded, defaults to `load`. Events can be either:
+     * - `'domcontentloaded'` - consider operation to be finished when the `DOMContentLoaded` event is fired.
+     * - `'load'` - consider operation to be finished when the `load` event is fired.
+     * - `'networkidle'` - **DISCOURAGED** consider operation to be finished when there are no network connections for
+     *   at least `500` ms. Don't use this method for testing, rely on web assertions to assess readiness instead.
+     * - `'commit'` - consider operation to be finished when network response is received and the document started
+     *   loading.
+     */
+    waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' | 'commit';
+};
+export interface BalPage extends Page {
+    locator(selector: string, options?: LocatorOptions): E2ELocator;
+    goto(url: string, options?: BalPageOptions): Promise<null | Response>;
+    mount(html: string): Promise<void>;
+    waitForChanges(timeoutMs?: number): Promise<void>;
+    spyOnEvent(eventName: string): Promise<EventSpy>;
+    _e2eEventsIds: number;
+    _e2eEvents: Map<number, any>;
+}

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,6 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -151,7 +153,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -233,6 +241,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -323,7 +339,7 @@ export declare function forceUpdate(ref: any): void;
  * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
-export interface HTMLStencilElement extends HTMLElement {
+export interface HTMLStencilElement extends Omit<HTMLElement, 'autocorrect'> {
     componentOnReady(): Promise<this>;
 }
 /**
@@ -349,6 +365,37 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
+ *
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports
@@ -846,7 +893,7 @@ export declare namespace JSXBase {
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
         name?: string;
-        onToggle?: (event: Event) => void;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1552,6 +1599,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1568,6 +1622,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1586,10 +1644,6 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
-        onBeforeToggle?: (event: Event) => void;
-        onBeforeToggleCapture?: (event: Event) => void;
-        onToggle?: (event: Event) => void;
-        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

package/dist/types/utils/animation/animation.interfaces.d.ts

@@ -1,7 +1,8 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export interface BalAnimationObserver {
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     animationListener(data: BalAnimationObserverInfo): void;
 }
 export interface BalAnimationObserverInfo {
-    target: HTMLElement;
+    target: HTMLElement | HTMLStencilElement;
 }

package/dist/types/utils/animation/animation.listener.d.ts

@@ -1,9 +1,10 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { ListenerAbstract } from '../types/listener';
 import { BalAnimationObserverInfo } from './animation.interfaces';
 export declare class BalAnimationListener extends ListenerAbstract<unknown, BalAnimationObserverInfo> {
     private debouncedNotify;
     private callbackWillAnimate;
     private callbackDidAnimate;
-    connect(el?: HTMLElement | Window | Document): void;
+    connect(el?: HTMLElement | HTMLStencilElement | Window | Document): void;
     disconnect(): void;
 }

package/dist/types/utils/attributes.d.ts

@@ -1,3 +1,4 @@
+import { HTMLStencilElement } from '../stencil-public-runtime';
 export type Attributes = {
     [key: string]: any;
 };
@@ -12,7 +13,7 @@ export type Attributes = {
  * This does not need to be reactive as changing attributes on the host element
  * does not trigger a re-render.
  */
-export declare const inheritAttributes: (el: HTMLElement, attributes?: string[]) => Attributes;
+export declare const inheritAttributes: (el: HTMLElement | HTMLStencilElement, attributes?: string[]) => Attributes;
 /**
  * Returns an array of tracking attributes that should be copied from
  * the host element to a target within the component.
@@ -20,4 +21,4 @@ export declare const inheritAttributes: (el: HTMLElement, attributes?: string[])
  * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
  * Use this in instances where we manually specify aria attributes on the `<Host>` element.
  */
-export declare const inheritTrackingAttributes: (el: HTMLElement, ignoreList?: string[]) => Attributes;
+export declare const inheritTrackingAttributes: (el: HTMLElement | HTMLStencilElement, ignoreList?: string[]) => Attributes;

package/dist/types/utils/bem.d.ts

@@ -3,7 +3,7 @@ export declare const BEM: {
         class: (condition?: boolean) => {
             [x: string]: boolean;
         };
-        element: (name: string) => any;
-        modifier: (name: string) => any;
+        element: (name: string) => /*elided*/ any;
+        modifier: (name: string) => /*elided*/ any;
     };
 };

package/dist/types/utils/dropdown/component.d.ts

@@ -3,8 +3,9 @@ import { DropdownValueUtil } from './value';
 import { BalOption } from './option';
 import { DropdownFocus } from './focus';
 import { DropdownPopupUtil } from './popup';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export type DropdownComponent = DropdownFocus & {
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     selectEl: HTMLSelectElement | undefined;
     panelEl: HTMLDivElement | undefined;
     nativeEl: HTMLInputElement | undefined;

package/dist/types/utils/dropdown/popup.d.ts

@@ -1,9 +1,10 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { BalFloatingUi } from '../floating-ui';
 import { DropdownComponent } from './component';
 export declare class DropdownPopupUtil {
     private component;
     connectedCallback(component: DropdownComponent): void;
-    updatePanelPosition: (lib: BalFloatingUi, referenceEl: HTMLElement, floatingEl: HTMLElement) => () => void;
+    updatePanelPosition: (lib: BalFloatingUi, referenceEl: HTMLElement | HTMLStencilElement, floatingEl: HTMLElement | HTMLStencilElement) => () => void;
     toggleList(): void;
     expandList(): Promise<void>;
     collapseList(): void;

package/dist/types/utils/element-states/element-states.interfaces.d.ts

@@ -1,9 +1,10 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export type BalElementStateInfo = {
     hovered: boolean;
     pressed: boolean;
 };
 export type BalElementStateListenerFn = (info: BalElementStateInfo) => void;
 export interface BalElementStateObserver {
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     elementStateListener(info: BalElementStateInfo): void;
 }

package/dist/types/utils/element-states/element-states.listener.d.ts

@@ -1,10 +1,11 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { ListenerAbstract } from '../types/listener';
 import { BalElementStateInfo } from './element-states.interfaces';
 export declare class BalElementStateListener<TObserver> extends ListenerAbstract<TObserver, BalElementStateInfo> {
     static EventListenerOptions: AddEventListenerOptions;
     static DefaultState: BalElementStateInfo;
     private state;
-    connect(el: HTMLElement): void;
+    connect(el: HTMLElement | HTMLStencilElement): void;
     disconnect(): void;
     private updateState;
     private onMouseEnter;

package/dist/types/utils/focus/focus.interfaces.d.ts

@@ -1,5 +1,6 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export interface BalFocusObserver {
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     hasFocus: boolean;
     focusInListener(ev: FocusEvent): void;
     focusOutListener(ev: FocusEvent): void;

package/dist/types/utils/focus/focus.listener.d.ts

@@ -1,7 +1,8 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { ListenerAbstract } from '../types/listener';
 import { BalFocusInfo } from './focus.interfaces';
 export declare class BalFocusListener<TObserver> extends ListenerAbstract<TObserver, BalFocusInfo> {
-    connect(el: HTMLElement): void;
+    connect(el: HTMLElement | HTMLStencilElement): void;
     disconnect(): void;
     private onFocusin;
     private onFocusout;

package/dist/types/utils/form-input.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../stencil-public-runtime';
+import { HTMLStencilElement } from '../stencil-public-runtime';
 export interface FormInput<Value> {
-    el: HTMLElement;
+    el: HTMLStencilElement;
     disabled: boolean;
     readonly: boolean;
     focused: boolean;

package/dist/types/utils/form.d.ts

@@ -1,5 +1,6 @@
+import { HTMLStencilElement } from '../stencil-public-runtime';
 interface ScrollToFirstInvalidFieldOptions {
-    formEl: HTMLElement;
+    formEl: HTMLElement | HTMLStencilElement;
     selector?: string;
 }
 export declare const scrollToFirstInvalidField: (options: ScrollToFirstInvalidFieldOptions) => void;

package/dist/types/utils/helpers.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../stencil-public-runtime';
+import { HTMLStencilElement } from '../stencil-public-runtime';
 import { BalConfig } from './config';
 /**
  * Request Largest Contentful Paint (LCP) callback
@@ -11,10 +12,10 @@ export declare const debounceEvent: (ev: EventEmitter, wait: number) => EventEmi
 export declare const debounceLCP: (func: (...args: any[]) => void, wait?: number) => (...args: any[]) => any;
 export declare const debounce: (func: (...args: any[]) => void, wait?: number) => (...args: any[]) => any;
 export declare const hasTagName: (element: any, tag: string) => boolean;
-export declare const isDescendant: (parent: HTMLElement, child: HTMLElement | EventTarget) => boolean;
+export declare const isDescendant: (parent: HTMLElement | HTMLStencilElement, child: HTMLElement | HTMLStencilElement | EventTarget) => boolean;
 export declare const hasParent: (parentTag: string, child: HTMLElement | EventTarget) => boolean;
 export declare const getSibling: (parentTag: HTMLElement | EventTarget, child: string) => HTMLElement | null;
-export declare const getAppRoot: (doc: Document) => HTMLElement;
+export declare const getAppRoot: (doc: Document) => HTMLElement | HTMLBalAppElement;
 /**
  * Waits for a component to be ready for
  * both custom element and non-custom element builds.
@@ -33,13 +34,13 @@ export declare const componentOnReady: (el: any, callback: any) => void;
  * Use only when you know ngzone should not run
  */
 export declare const raf: (h: any) => any;
-export declare const transitionEndAsync: (el: HTMLElement | null, expectedDuration?: number) => Promise<unknown>;
+export declare const transitionEndAsync: (el: HTMLElement | HTMLStencilElement | null, expectedDuration?: number) => Promise<unknown>;
 export declare const addEventListener: (el: any, eventName: string, callback: any, opts?: any) => any;
 export declare const removeEventListener: (el: any, eventName: string, callback: any, opts?: any) => any;
 export declare const shallowReady: (el: any | undefined) => Promise<any>;
 export declare const deepReady: (el: any | undefined, full?: boolean) => Promise<void>;
-export declare const waitForComponent: (el: HTMLElement | null) => Promise<void>;
-export declare const isChildOfEventTarget: (ev: any, el: HTMLElement | Window | Document, callback: (target: HTMLElement) => void) => Promise<void>;
+export declare const waitForComponent: (el: HTMLElement | HTMLStencilElement | null) => Promise<void>;
+export declare const isChildOfEventTarget: (ev: any, el: HTMLElement | HTMLStencilElement | Window | Document, callback: (target: HTMLElement | HTMLStencilElement) => void) => Promise<void>;
 export declare const waitForDesignSystem: (el: any | null, _config?: BalConfig) => Promise<void>;
 export declare const waitAfterFramePaint: () => Promise<unknown>;
 export declare const waitAfterIdleCallback: () => Promise<unknown>;

package/dist/types/utils/mask/component/mask-component-interfaces.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../../stencil-public-runtime';
 import { BalConfigState } from '../../config';
 export interface MaskAttributes {
     maxLength: number;
@@ -32,7 +33,7 @@ export interface MaskComponent {
     focused: boolean;
     disabled: boolean;
     readonly: boolean;
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     nativeInput: HTMLInputElement;
     valueChanged(newValue: string | undefined, oldValue: string | undefined): void;
     balKeyPress: EventEmitter<KeyboardEvent>;

package/dist/types/utils/mutation/mutation.interfaces.d.ts

@@ -1,10 +1,11 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export interface MutationObserverOptions extends MutationObserverInit {
     tags: string[];
     closest?: string;
     waitAfterFramePrint?: boolean;
 }
 export interface BalMutationObserver {
-    el: HTMLElement;
+    el: HTMLStencilElement;
     mutationObserverActive: boolean;
     mutationListener(): void;
 }

package/dist/types/utils/mutation/mutation.listener.d.ts

@@ -1,3 +1,4 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { ListenerAbstract } from '../types/listener';
 import { MutationObserverOptions } from './mutation.interfaces';
 export declare class BalMutationListener extends ListenerAbstract {
@@ -6,7 +7,7 @@ export declare class BalMutationListener extends ListenerAbstract {
     private mutationObserver;
     private mutationObserverInit;
     constructor(options: Partial<MutationObserverOptions>);
-    connect(el: HTMLElement): Promise<void>;
+    connect(el: HTMLElement | HTMLStencilElement): Promise<void>;
     disconnect(): void;
     private mutationCallback;
     private destroyMutationObserver;

package/dist/types/utils/overlays/overlays.d.ts

@@ -19,7 +19,7 @@ export declare const getOverlay: (doc: Document, overlayTag?: string, id?: strin
 export declare const connectListeners: (doc: Document) => void;
 export declare const getPresentedOverlay: (doc: Document, overlayTag?: string, id?: string) => HTMLBalOverlayElement | undefined;
 export declare const dismiss: (overlay: OverlayInterface, data: any | undefined, role: string | undefined, animation: () => Promise<void>) => Promise<boolean>;
-export declare const eventMethod: <T>(element: HTMLElement, eventName: string) => Promise<T>;
-export declare const onceEvent: (element: HTMLElement, eventName: string, callback: (ev: Event) => void) => void;
+export declare const eventMethod: <T>(element: HTMLElement | HTMLStencilElement, eventName: string) => Promise<T>;
+export declare const onceEvent: (element: HTMLElement | HTMLStencilElement, eventName: string, callback: (ev: Event) => void) => void;
 export declare const FOCUS_TRAP_DISABLE_CLASS = "bal-disable-focus-trap";
 export {};

package/dist/types/utils/resize/resize.interfaces.d.ts

@@ -1,9 +1,10 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export type BalResizeInfo = {
     width: boolean;
     height: boolean;
 };
 export type BalResizeListenerFn = (info: BalResizeInfo) => void;
 export interface BalResizeObserver {
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     resizeListener(info: BalResizeInfo): void;
 }

package/dist/types/utils/resize/resize.listener.d.ts

@@ -1,3 +1,4 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 import { ListenerAbstract } from '../types/listener';
 import { BalResizeInfo } from './resize.interfaces';
 export declare class BalResizeListener<TObserver> extends ListenerAbstract<TObserver, BalResizeInfo> {
@@ -5,6 +6,6 @@ export declare class BalResizeListener<TObserver> extends ListenerAbstract<TObse
     private debouncedNotify;
     private lastWidth;
     private lastHeight;
-    connect(el: HTMLElement): void;
+    connect(el: HTMLElement | HTMLStencilElement): void;
     disconnect(): void;
 }

package/dist/types/utils/resize/window-resize.interfaces.d.ts

@@ -1,5 +1,6 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export type BalWindowResizeListenerFn = () => void;
 export interface BalWindowResizeObserver {
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     windowResizeListener(): void;
 }

package/dist/types/utils/style.d.ts

@@ -1,3 +1,4 @@
+import { HTMLStencilElement } from '../stencil-public-runtime';
 export interface Padding {
     top: number;
     right: number;
@@ -5,5 +6,5 @@ export interface Padding {
     left: number;
 }
 export declare const getComputedPadding: (element: HTMLElement, defaultPadding?: number) => Padding;
-export declare const getComputedWidth: (element: HTMLElement) => number;
+export declare const getComputedWidth: (element: HTMLElement | HTMLStencilElement) => number;
 export declare const getWidthOfOverflowingChildren: (element: HTMLElement) => number;

package/dist/types/utils/swipe/swipe.interfaces.d.ts

@@ -1,9 +1,10 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
 export type BalSwipeInfo = {
     left: boolean;
     right: boolean;
 };
 export type BalSwipeListenerFn = (info: BalSwipeInfo) => void;
 export interface BalSwipeObserver {
-    el: HTMLElement;
+    el: HTMLElement | HTMLStencilElement;
     swipeListener(info: BalSwipeInfo): void;
 }