@siemens/ix 4.4.0 → 5.1.0

package/dist/types/components/popover/test/popover.page.d.ts

@@ -0,0 +1,118 @@
+import AxeBuilder from '@axe-core/playwright';
+import { Locator, Page } from '@playwright/test';
+/**
+ * Page Object Model for ix-popover component testing
+ *
+ * Usage:
+ * ```ts
+ * const popover = new PopoverPage(page);
+ * await popover.open();
+ * await popover.expectOpen();
+ * ```
+ */
+export declare class PopoverPage {
+    readonly page: Page;
+    readonly triggerId: string;
+    constructor(page: Page, triggerId?: string);
+    /**
+     * Get the trigger button locator
+     */
+    get trigger(): Locator;
+    /** Native button inside the trigger host (pierces open shadow root). */
+    get triggerButton(): Locator;
+    /** First popover on the page (single-popover fixtures). */
+    get host(): Locator;
+    private getTriggerAriaAttribute;
+    /**
+     * Resolves the popover host via the trigger's `aria-controls` id.
+     * That id is assigned when the trigger registers (typically before the first open).
+     *
+     * `expectOpen()` and `expectClosed()` call this when no locator is passed; Playwright
+     * retries the `aria-controls` assertion until the link exists. Prefer those helpers
+     * after open/close actions unless you need the locator for further queries.
+     */
+    getPopover(): Promise<Locator>;
+    /**
+     * Same as {@link getPopover}; use after mount when the trigger is registered but the
+     * popover is still closed (e.g. hover/focus tests).
+     */
+    linkedPopover(): Promise<Locator>;
+    /**
+     * Get the popover locator directly by page (for closed state checks)
+     */
+    get popoverElement(): Locator;
+    /**
+     * Get the dialog element for a popover host.
+     * Uses the dialog `id` (same as `data-ix-popover`) so nested popovers are not matched.
+     */
+    dialog(popover: Locator): Promise<Locator>;
+    /**
+     * Open popover by clicking the trigger
+     */
+    open(): Promise<void>;
+    /**
+     * Assert that popover is visible
+     */
+    expectOpen(popover?: Locator): Promise<void>;
+    /**
+     * Assert that popover is closed
+     */
+    expectClosed(popover?: Locator): Promise<void>;
+    /**
+     * Check if popover has spike element in shadow DOM
+     */
+    hasSpike(popover: Locator): Promise<boolean>;
+    /**
+     * Close button on this popover's header only (avoids nested header matches)
+     */
+    scopedHeaderCloseButton(popover: Locator): Locator;
+    /**
+     * Get the close button in popover header
+     */
+    getCloseButton(popover: Locator): Locator;
+    openWithKeyboard(): Promise<void>;
+    /** Keyboard open can lag behind aria-controls / visible state; poll until stable. */
+    openWithKeyboardAndExpectOpen(popover?: Locator): Promise<Locator>;
+    closeWithEscape(): Promise<void>;
+    /**
+     * Assert focus stayed on the trigger (host or shadow-DOM button inside ix-button).
+     */
+    expectTriggerFocused(timeout?: number): Promise<void>;
+    expectTriggerButtonNotFocused(): Promise<void>;
+    callShowPopover(popover?: Locator): Promise<void>;
+    callHidePopover(popover?: Locator): Promise<void>;
+    setShowProperty(show: boolean, popover?: Locator): Promise<void>;
+    callShowPopoverConcurrently(times: number, popover?: Locator): Promise<void>;
+    /**
+     * Blocks open via cancelable `showChange` (same pattern as other IX CTs:
+     * `locator.evaluate` + `addEventListener`, not `document.querySelector`).
+     */
+    preventShowChangeOnOpen(popover?: Locator): Promise<void>;
+    preventShowChangeOnClose(popover?: Locator): Promise<void>;
+    preventHeaderCloseClick(popover: Locator): Promise<void>;
+    private isTriggerFocused;
+    clickOutside(x?: number, y?: number): Promise<void>;
+    pointerDismissFarCorner(): Promise<void>;
+    expectAriaExpanded(expanded: 'true' | 'false'): Promise<void>;
+    expectAriaControlsMatch(popover: Locator): Promise<void>;
+    static installShowChangedTracker(page: Page): Promise<void>;
+    expectShowChangedEvents(expected: boolean[]): Promise<void>;
+    runAxe(makeAxeBuilder: () => AxeBuilder): Promise<void>;
+}
+/**
+ * Assert popover placement relative to trigger
+ */
+export declare function expectPlacement(page: Page, triggerSelector: string, popover: Locator, placement: 'top' | 'bottom' | 'left' | 'right'): Promise<void>;
+/** Poll until the locator's focused element does not match `:focus-visible`. */
+export declare function expectLocatorNotFocusVisible(locator: Locator, options?: {
+    timeout?: number;
+}): Promise<void>;
+/**
+ * Mount popover component and wait for hydration
+ */
+export declare function mountPopover(mount: (markup: string) => Promise<unknown>, page: Page, markup: string): Promise<void>;
+/**
+ * Inject nested popover markup after the parent is already open.
+ * Waits for the inner trigger to register with the controller.
+ */
+export declare function injectLateNestedPopover(page: Page): Promise<void>;

package/dist/types/components/popover-content/popover-content.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Main body section of the popover.
+ *
+ * @slot - Popover body content.
+ *
+ * @since 5.1.0
+ */
+export declare class PopoverContent {
+    /**
+     * Remove default inner padding.
+     *
+     * @since 5.1.0
+     */
+    noPadding: boolean;
+    render(): any;
+}

package/dist/types/components/popover-footer/popover-footer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Footer section for actions and optional leading metadata.
+ *
+ * @slot - Footer actions (typically buttons), aligned to the end.
+ * @slot start - Optional leading content (for example version text or step indicators).
+ *
+ * @since 5.1.0
+ */
+export declare class PopoverFooter {
+    /**
+     * Button layout direction
+     *
+     * @since 5.1.0
+     */
+    alignment: 'horizontal' | 'vertical';
+    render(): any;
+}

package/dist/types/components/popover-header/popover-header.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Header section with optional icon, title, additional items, and close button.
+ *
+ * @slot - Popover title (rendered as heading text).
+ * @slot additional-items - Optional content beside the title (for example `ix-pill`).
+ *
+ * @since 5.1.0
+ */
+export declare class PopoverHeader {
+    hostElement: HTMLIxPopoverHeaderElement;
+    /**
+     * Icon name displayed before the title.
+     * The icon is decorative; provide context in the default slot heading.
+     *
+     * @since 5.1.0
+     */
+    icon?: string;
+    /**
+     * Icon color
+     *
+     * @since 5.1.0
+     */
+    iconColor?: string;
+    /**
+     * Hide the close (X) button
+     *
+     * @since 5.1.0
+     */
+    hideClose: boolean;
+    /**
+     * ARIA label for the close icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     *
+     * @since 5.1.0
+     */
+    ariaLabelCloseIconButton?: string;
+    /**
+     * Fires when close button is clicked.
+     * Cancel to prevent closing.
+     *
+     * @since 5.1.0
+     */
+    closeClick: EventEmitter<MouseEvent>;
+    private parentPopover?;
+    componentDidLoad(): void;
+    private onCloseClick;
+    render(): any;
+}

package/dist/types/components/popover-image/popover-image.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Optional image section for the popover.
+ *
+ * @since 5.1.0
+ */
+export declare class PopoverImage {
+    /**
+     * Image source URL
+     *
+     * @since 5.1.0
+     */
+    image?: string;
+    /**
+     * Alt text for the image.
+     * Use an empty string for decorative images; provide descriptive text for content images.
+     *
+     * @since 5.1.0
+     */
+    imageAlt: string;
+    render(): any;
+}

package/dist/types/components/range-field/range-field.d.ts

@@ -0,0 +1,34 @@
+declare const RangeField_base: abstract 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;
+} & import("../utils/internal/component").StencilLifecycle;
+export declare class RangeField extends RangeField_base {
+    hostElement: HTMLIxRangeFieldElement;
+    /**
+     * The type of the input range. If set to "time-range", the input range will be displayed as a time range.
+     */
+    type?: 'time-range' | 'date-range' | 'datetime-range';
+    /**
+     * Hides the arrow icon between the two input fields. This can be used when the input range is used in a context where the arrow icon is not desired, such as in a form field with a custom label.
+     */
+    hideArrow: boolean;
+    private observeElements?;
+    hasLabel: boolean;
+    private elements?;
+    private warnInDev;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private validateRangeElements;
+    onValueChange(evt: CustomEvent): Promise<void>;
+    render(): any;
+}
+export {};

package/dist/types/components/select/select.d.ts

@@ -1,11 +1,57 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { DropdownItemWrapper } from '../dropdown/dropdown-controller';
 import { IxSelectItemLabelChangeEvent } from '../select-item/events';
 import { IxInputFieldComponent, ValidationResults } from '../utils/input';
+import { AriaActiveDescendantMixinContract } from '../utils/internal/mixins/accessibility/aria-activedescendant.mixin';
+import { ComponentIdMixinContract } from '../utils/internal/mixins/id.mixin';
+declare const Select_base: abstract 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;
+} & import("../utils/internal/component").StencilLifecycle & {
+    $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;
+} & {
+    suppressAriaActiveDescendant: boolean;
+    isAriaActiveDescendantActive(): boolean;
+    getControllingAriaElement(): Promise<HTMLElement> | HTMLElement | null;
+    getAriaActiveDescendantProxyItemId(): string | boolean;
+    clearActiveDescendant(): Promise<void>;
+    $internal_onActiveDescendantChange(event: import("../utils/internal/mixins/setup.mixin").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;
+};
 /**
  * @form-ready
  */
-export declare class Select implements IxInputFieldComponent<string | string[]> {
+export declare class Select extends Select_base implements IxInputFieldComponent<string | string[]>, AriaActiveDescendantMixinContract, ComponentIdMixinContract {
     hostElement: HTMLIxSelectElement;
     formInternals: ElementInternals;
     /**
@@ -22,19 +68,26 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
      */
     label?: string;
     /**
-     * ARIA label for the chevron down icon button
+     * ARIA label for the clear icon button
      * Will be set as aria-label on the nested HTML button element
      *
      * @since 3.2.0
      */
-    ariaLabelChevronDownIconButton?: string;
+    ariaLabelClearIconButton?: string;
     /**
-     * ARIA label for the clear icon button
-     * Will be set as aria-label on the nested HTML button element
+     * ARIA label for the add item
      *
-     * @since 3.2.0
+     * @since TODO: Define
      */
-    ariaLabelClearIconButton?: string;
+    ariaLabelAddItem: string;
+    /**
+     * Accessible label template for the overflow indicator chip shown in multiple
+     * mode when not all selected chips fit on a single row. The `{count}`
+     * placeholder is replaced with the number of hidden items (e.g. "3 more").
+     *
+     * @since 5.1.0
+     */
+    i18nMoreItems: string;
     /**
      * Warning text for the select component
      **/
@@ -104,6 +157,13 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
      * Chip label for all selected items in multiple mode.
      */
     i18nAllSelected: string;
+    /**
+     * Prefix for the accessible name of the close control on a selected chip in multiple mode.
+     * The chip label or value is appended (e.g. "Remove Item 1").
+     *
+     * @since 5.0.0
+     */
+    i18nRemoveSelectedItem: string;
     /**
      * Hide list header
      */
@@ -147,71 +207,104 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
     dropdownShow: boolean;
     selectedLabels: (string | undefined)[];
     isDropdownEmpty: boolean;
-    navigationItem?: DropdownItemWrapper;
     inputFilterText: string;
     inputValue: string;
+    visibleChipValues: string[] | null;
+    hiddenChipValues: string[];
+    overflowDropdownShow: boolean;
+    hasInputFocus: boolean;
+    dropdownItemsVisualFocused: boolean;
     isInvalid: boolean;
     isValid: boolean;
     isInfo: boolean;
     isWarning: boolean;
+    private readonly hostId;
     private readonly dropdownWrapperRef;
     private readonly dropdownAnchorRef;
     private readonly inputRef;
+    private readonly dropdownRef;
+    private readonly chipElementRefs;
+    private readonly chipWidths;
+    private readonly overflowChipRef;
+    private readonly chipsContainerRef;
+    private readonly clearButtonRef;
+    private readonly chipHorizontalMargin;
+    private readonly triggerMinWidth;
+    private readonly overflowChipFallbackWidth;
+    private overflowChipWidth;
+    private chipsResizeObserver?;
+    private overflowDropdownOpenedByKeyboard;
+    private proxyListObserver;
     private inputElement?;
-    private dropdownElement?;
-    private customItemsContainerElement?;
-    private addItemElement?;
-    private arrowFocusController?;
     private touched;
-    private readonly itemObserver;
-    private readonly focusControllerCallbackBind;
     get nonShadowItems(): HTMLIxSelectItemElement[];
-    get visibleNonShadowItems(): HTMLIxSelectItemElement[];
     get shadowItems(): HTMLIxSelectItemElement[];
-    get visibleShadowItems(): HTMLIxSelectItemElement[];
+    get focusableItems(): (HTMLIxDropdownItemElement | HTMLIxSelectItemElement)[];
+    get allFocusableItems(): (HTMLIxDropdownItemElement | HTMLIxSelectItemElement)[];
     get items(): HTMLIxSelectItemElement[];
-    get visibleItems(): HTMLIxSelectItemElement[];
     get selectedItems(): HTMLIxSelectItemElement[];
-    get addItemButton(): Element | null;
+    get addItemElement(): HTMLIxDropdownItemElement | null;
     get isSingleMode(): boolean;
     get isMultipleMode(): boolean;
     get isEveryDropdownItemHidden(): boolean;
     watchValue(value: string | string[]): void;
-    watchDropdownShow(show: boolean): void;
-    private cleanupResources;
-    onItemClicked(event: CustomEvent<string>): void;
+    watchDisabledReadonly(): void;
     updateFormInternalValue(value: string | string[]): void;
     /** @internal */
     hasValidValue(): Promise<boolean>;
     private hasValue;
-    private focusDropdownItem;
     private itemClick;
     private emitAddItem;
     private toggleValue;
     private updateSelection;
     private emitValueChange;
+    private createAddItemElement;
     componentDidLoad(): void;
     componentWillLoad(): void;
-    componentDidRender(): void;
-    onLabelChange(event: IxSelectItemLabelChangeEvent): void;
     disconnectedCallback(): void;
+    onLabelChange(event: IxSelectItemLabelChangeEvent): void;
     private itemExists;
+    private getActiveVisualFocusedItem;
     private dropdownVisibilityChanged;
-    onKeyDown(event: KeyboardEvent): Promise<void>;
-    private onEnterNavigation;
-    private onArrowNavigation;
-    private applyFocusTo;
-    private focusAddItemButton;
-    private filterItemsWithTypeahead;
-    private removeHiddenFromItems;
+    private setItemFilter;
+    private checkVisibilityOfProxyList;
+    private removeHiddenAttributeFromItems;
     private clearInput;
     private clear;
     private onInputBlur;
+    onInputFocus(): void;
     private placeholderValue;
     private isAddItemVisible;
     private shouldDisplayAllChip;
+    private getRemoveChipAriaLabel;
     private renderAllChip;
     private renderChip;
+    private renderHiddenChip;
+    private renderOverflowChip;
+    private renderMultipleModeChips;
+    private renderOverflowDropdown;
+    private toggleOverflowDropdown;
+    private getOverflowRemoveButtons;
+    private focusOverflowRemoveButton;
+    onOverflowRemoveButtonKeyDown(event: KeyboardEvent): void;
+    private focusOverflowChip;
+    private pruneChipWidthCache;
+    private sameChipValues;
+    private applyOverflowState;
+    private getChipWidthWithMargin;
+    private getOverflowChipWidthWithMargin;
+    private canShowAllChips;
+    private getOverflowChipValues;
+    private hasUnmeasuredSelectedChips;
+    private getChipOverflowContext;
+    private handleChipsContainerResize;
+    private calculateChipOverflow;
+    private waitForComponentReady;
+    private waitForNextFrame;
+    private waitForChipLayout;
+    private measureSelectedChipWidths;
+    private measureOverflowChipWidth;
+    componentDidRender(): Promise<void>;
     onValidationChange({ isInvalid, isInvalidByRequired, isValid, isInfo, isWarning, }: ValidationResults): void;
     /** @internal */
     getAssociatedFormElement(): Promise<HTMLFormElement | null>;
@@ -228,5 +321,11 @@ export declare class Select implements IxInputFieldComponent<string | string[]>
      * @internal
      * */
     isTouched(): Promise<boolean>;
+    getControllingAriaElement(): Promise<HTMLElement> | HTMLElement | null;
+    isAriaActiveDescendantActive(): boolean;
+    getAriaActiveDescendantProxyItemId(): string | boolean;
+    componentWillRender(): Promise<void> | void;
+    private updateAriaProxyListbox;
     render(): any;
 }
+export {};

package/dist/types/components/select/test/select-controller.d.ts

@@ -0,0 +1,15 @@
+import { Locator } from '@playwright/test';
+export declare function selectController(select: Locator): {
+    getDropdownLocator(): Locator;
+    getInputLocator(): Locator;
+    clickDropdownChevron(): Promise<void>;
+    fillInput(text: string): Promise<void>;
+    focusInput(): Promise<void>;
+    arrowDown(skipDropdownCheck?: boolean): Promise<void>;
+    arrowUp(skipDropdownCheck?: boolean): Promise<void>;
+    pressEnter(): Promise<void>;
+    getDropdownItemsLocator(onlyVisible?: boolean): Promise<Locator[]>;
+    getFocusDropdownItemLocator(): Promise<Locator>;
+    getAddItemDropdownItemLocator(): Promise<Locator>;
+    getItemCheckedLocator(): Promise<Locator>;
+};

package/dist/types/components/select-item/select-item.d.ts

@@ -1,6 +1,48 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { DropdownItemWrapper } from '../dropdown/dropdown-controller';
-export declare class SelectItem implements DropdownItemWrapper {
+declare const SelectItem_base: abstract 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;
+} & import("../utils/internal/component").StencilLifecycle & {
+    $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;
+} & {
+    ixFocusVisible: boolean;
+    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;
+};
+export declare class SelectItem extends SelectItem_base implements DropdownItemWrapper {
     hostElement: HTMLIxSelectItemElement;
     /**
      * Displayed name of the item
@@ -16,6 +58,13 @@ export declare class SelectItem implements DropdownItemWrapper {
      * Flag indicating whether the item is selected
      */
     selected: boolean;
+    /**
+     * Disable the item. A disabled item cannot be selected via mouse or keyboard
+     * and is excluded from the focusable items of the parent ix-select.
+     *
+     * @since 5.1.0
+     */
+    disabled: boolean;
     /**
      * @internal
      */
@@ -25,16 +74,14 @@ export declare class SelectItem implements DropdownItemWrapper {
      */
     itemClick: EventEmitter<string>;
     private componentLoaded;
+    private readonly dropdownItemRef;
+    private inheritAriaAttributes;
+    componentDidLoad(): void;
     /** @internal */
     getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;
-    /**
-     * @internal
-     * @param event
-     */
-    onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>): Promise<void>;
-    get dropdownItem(): HTMLIxDropdownItemElement | null;
     componentDidRender(): void;
     onValueChange(newValue: string, oldValue: string): void;
     labelChange(newValue: string, oldValue: string): void;
     render(): any;
 }
+export {};

package/dist/types/components/slider/slider.d.ts

@@ -78,12 +78,6 @@ export declare class Slider implements FieldWrapperInterface, IxFormValidationSt
      * Show control as disabled
      */
     disabled: boolean;
-    /**
-     * Show error state and message
-     *
-     * @deprecated Will be removed in 5.0.0. Use invalid class instead.
-     */
-    error?: boolean | string;
     /**
      * Will emit the value when it changes
      */