@siemens/ix 5.0.0 → 5.1.0

package/dist/collection/components/popover/test/popover.constants.js

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Hover hide delay in milliseconds (matches implementation)
+ */
+export const HOVER_HIDE_MS = 150;
+/**
+ * Mouse coordinates for testing click/hover interactions
+ */
+export const OUTSIDE_CLICK_X = 5;
+export const OUTSIDE_CLICK_Y = 5;
+export const FAR_CORNER_X = 800;
+export const FAR_CORNER_Y = 600;

package/dist/collection/components/popover/test/popover.fixtures.js

@@ -0,0 +1,111 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const html = String.raw;
+/**
+ * Generate markup for an interactive popover with header, content, and footer
+ */
+export function interactivePopoverMarkup(options) {
+    const { id = 'popover', triggerId = 'trigger', triggerLabel = 'Open popover', placement = 'bottom', closeOnClickOutside, triggerMode, hasSpike, ariaLabel, hideClose, showFooterDismiss = true, show, } = options ?? {};
+    return html `
+    <ix-button id="${triggerId}">${triggerLabel}</ix-button>
+    <ix-popover
+      id="${id}"
+      trigger="${triggerId}"
+      placement="${placement}"
+      ${show ? 'show' : ''}
+      ${closeOnClickOutside ? 'close-on-click-outside' : ''}
+      ${triggerMode ? `trigger-mode="${triggerMode}"` : ''}
+      ${hasSpike ? 'has-spike' : ''}
+      ${ariaLabel ? `aria-label="${ariaLabel}"` : ''}
+    >
+      <ix-popover-header ${hideClose ? 'hide-close' : ''}
+        >Popover title</ix-popover-header
+      >
+      <ix-popover-content>Popover body content</ix-popover-content>
+      ${showFooterDismiss
+        ? html `<ix-popover-footer>
+            <ix-button id="${id}-dismiss">Dismiss</ix-button>
+          </ix-popover-footer>`
+        : ''}
+    </ix-popover>
+  `;
+}
+/**
+ * Generate markup for placement tests with centered layout
+ */
+export function placementTestMarkup(placement) {
+    return html `
+    <div
+      style="display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 12rem;"
+    >
+      ${interactivePopoverMarkup({
+        placement,
+        hasSpike: true,
+        showFooterDismiss: false,
+    })}
+    </div>
+  `;
+}
+/**
+ * Outer popover only; nested child is injected at runtime (see {@link injectLateNestedPopover}).
+ */
+export function outerPopoverWithNestedMountMarkup() {
+    return html `
+    <div style="padding: 8rem 0 0 8rem;">
+      <ix-button id="outer-trigger">Outer</ix-button>
+      <ix-popover
+        id="outer-popover"
+        trigger="outer-trigger"
+        close-on-click-outside
+      >
+        <ix-popover-header>Outer popover</ix-popover-header>
+        <ix-popover-content>
+          <div id="nested-mount"></div>
+        </ix-popover-content>
+      </ix-popover>
+    </div>
+  `;
+}
+/**
+ * Nested popovers with a third unrelated popover for controller tests
+ */
+export function nestedPopoverMarkup() {
+    return html `
+    <div style="padding: 8rem 0 0 8rem;">
+      <ix-button id="outer-trigger">Outer</ix-button>
+      <ix-popover
+        id="outer-popover"
+        trigger="outer-trigger"
+        close-on-click-outside
+      >
+        <ix-popover-header>Outer popover</ix-popover-header>
+        <ix-popover-content>
+          <ix-button id="inner-trigger">Inner</ix-button>
+          <ix-popover
+            id="inner-popover"
+            trigger="inner-trigger"
+            close-on-click-outside
+          >
+            <ix-popover-header>Inner popover</ix-popover-header>
+            <ix-popover-content>Nested body</ix-popover-content>
+          </ix-popover>
+        </ix-popover-content>
+      </ix-popover>
+      <ix-button id="other-trigger">Other</ix-button>
+      <ix-popover
+        id="other-popover"
+        trigger="other-trigger"
+        close-on-click-outside
+      >
+        <ix-popover-header>Other popover</ix-popover-header>
+        <ix-popover-content>Other body</ix-popover-content>
+      </ix-popover>
+    </div>
+  `;
+}

package/dist/collection/components/popover/test/popover.page.js

@@ -0,0 +1,318 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+import { FAR_CORNER_X, FAR_CORNER_Y, OUTSIDE_CLICK_X, OUTSIDE_CLICK_Y, } from "./popover.constants";
+/**
+ * Page Object Model for ix-popover component testing
+ *
+ * Usage:
+ * ```ts
+ * const popover = new PopoverPage(page);
+ * await popover.open();
+ * await popover.expectOpen();
+ * ```
+ */
+export class PopoverPage {
+    page;
+    triggerId;
+    constructor(page, triggerId = 'trigger') {
+        this.page = page;
+        this.triggerId = triggerId;
+    }
+    /**
+     * Get the trigger button locator
+     */
+    get trigger() {
+        return this.page.locator(`ix-button#${this.triggerId}`);
+    }
+    /** Native button inside the trigger host (pierces open shadow root). */
+    get triggerButton() {
+        return this.trigger.locator('button');
+    }
+    /** First popover on the page (single-popover fixtures). */
+    get host() {
+        return this.popoverElement;
+    }
+    async getTriggerAriaAttribute(attribute) {
+        return this.page.evaluate(({ triggerId, attributeName }) => {
+            const host = document.querySelector(`ix-button#${triggerId}`) ??
+                document.getElementById(triggerId);
+            const inner = host?.shadowRoot?.querySelector('button, a[role="button"]');
+            return (inner ?? host)?.getAttribute(attributeName) ?? null;
+        }, { triggerId: this.triggerId, attributeName: attribute });
+    }
+    /**
+     * 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.
+     */
+    async getPopover() {
+        await expect(async () => {
+            const popoverId = await this.getTriggerAriaAttribute('aria-controls');
+            expect(popoverId).toMatch(/.+/);
+        }).toPass({ timeout: 5000 });
+        const dialogId = await this.getTriggerAriaAttribute('aria-controls');
+        return this.page.locator(`ix-popover[data-ix-popover="${dialogId}"]`);
+    }
+    /**
+     * Same as {@link getPopover}; use after mount when the trigger is registered but the
+     * popover is still closed (e.g. hover/focus tests).
+     */
+    linkedPopover() {
+        return this.getPopover();
+    }
+    /**
+     * Get the popover locator directly by page (for closed state checks)
+     */
+    get popoverElement() {
+        return this.page.locator('ix-popover').first();
+    }
+    /**
+     * Get the dialog element for a popover host.
+     * Uses the dialog `id` (same as `data-ix-popover`) so nested popovers are not matched.
+     */
+    async dialog(popover) {
+        const popoverId = await popover.getAttribute('data-ix-popover');
+        await expect(popoverId).toMatch(/.+/);
+        return this.page.locator(`dialog#${popoverId}, [role="status"]#${popoverId}`);
+    }
+    /**
+     * Open popover by clicking the trigger
+     */
+    async open() {
+        await expect(this.trigger).toHaveAttribute('data-ix-popover-trigger', '');
+        await this.trigger.click();
+    }
+    /**
+     * Assert that popover is visible
+     */
+    async expectOpen(popover) {
+        const target = popover ?? (await this.getPopover());
+        await expect(target).toHaveClass(/visible/);
+        await expect(await this.dialog(target)).toBeVisible();
+    }
+    /**
+     * Assert that popover is closed
+     */
+    async expectClosed(popover) {
+        const target = popover ?? (await this.getPopover());
+        await expect(target).not.toHaveClass(/visible/);
+        await expect(await this.dialog(target)).not.toBeVisible();
+    }
+    /**
+     * Check if popover has spike element in shadow DOM
+     */
+    async hasSpike(popover) {
+        return popover.evaluate((element) => !!element.shadowRoot?.querySelector('.spike'));
+    }
+    /**
+     * Close button on this popover's header only (avoids nested header matches)
+     */
+    scopedHeaderCloseButton(popover) {
+        return popover
+            .locator(':scope > ix-popover-header')
+            .getByRole('button', { name: 'Close' });
+    }
+    /**
+     * Get the close button in popover header
+     */
+    getCloseButton(popover) {
+        return this.scopedHeaderCloseButton(popover);
+    }
+    async openWithKeyboard() {
+        await this.trigger.focus();
+        await this.page.keyboard.press('Enter');
+    }
+    /** Keyboard open can lag behind aria-controls / visible state; poll until stable. */
+    async openWithKeyboardAndExpectOpen(popover) {
+        await this.openWithKeyboard();
+        await expect(async () => this.expectOpen(popover)).toPass({
+            timeout: 5000,
+        });
+        return popover ?? (await this.getPopover());
+    }
+    async closeWithEscape() {
+        await this.page.keyboard.press('Escape');
+    }
+    /**
+     * Assert focus stayed on the trigger (host or shadow-DOM button inside ix-button).
+     */
+    async expectTriggerFocused(timeout = 5000) {
+        await expect(async () => {
+            expect(await this.isTriggerFocused()).toBe(true);
+        }).toPass({ timeout });
+    }
+    async expectTriggerButtonNotFocused() {
+        await expect(this.triggerButton).not.toBeFocused();
+    }
+    async callShowPopover(popover = this.host) {
+        await popover.evaluate((el) => el.showPopover());
+    }
+    async callHidePopover(popover = this.host) {
+        await popover.evaluate((el) => el.hidePopover());
+    }
+    async setShowProperty(show, popover = this.host) {
+        await popover.evaluate((el, visible) => {
+            el.show = visible;
+        }, show);
+    }
+    async callShowPopoverConcurrently(times, popover = this.host) {
+        await popover.evaluate(async (el, count) => {
+            const promises = Array.from({ length: count }, () => el.showPopover());
+            await promises[0];
+        }, times);
+    }
+    /**
+     * Blocks open via cancelable `showChange` (same pattern as other IX CTs:
+     * `locator.evaluate` + `addEventListener`, not `document.querySelector`).
+     */
+    async preventShowChangeOnOpen(popover = this.host) {
+        await popover.evaluate((el) => {
+            el.addEventListener('showChange', (event) => {
+                if (event.detail === true) {
+                    event.preventDefault();
+                }
+            });
+        });
+    }
+    async preventShowChangeOnClose(popover = this.host) {
+        await popover.evaluate((el) => {
+            el.addEventListener('showChange', (event) => {
+                if (event.detail === false) {
+                    event.preventDefault();
+                }
+            });
+        });
+    }
+    async preventHeaderCloseClick(popover) {
+        await popover
+            .locator(':scope > ix-popover-header')
+            .evaluate((header) => {
+            header.addEventListener('closeClick', (event) => {
+                event.preventDefault();
+            });
+        });
+    }
+    async isTriggerFocused() {
+        return this.page.evaluate((triggerId) => {
+            const host = document.querySelector(`ix-button#${triggerId}`);
+            const innerButton = host?.shadowRoot?.querySelector('button');
+            const active = document.activeElement;
+            return (active === host ||
+                active === innerButton ||
+                (host instanceof HTMLElement && host.contains(active)));
+        }, this.triggerId);
+    }
+    async clickOutside(x = OUTSIDE_CLICK_X, y = OUTSIDE_CLICK_Y) {
+        await this.page.mouse.click(x, y);
+    }
+    async pointerDismissFarCorner() {
+        await this.page.mouse.move(FAR_CORNER_X, FAR_CORNER_Y);
+    }
+    async expectAriaExpanded(expanded) {
+        await expect(async () => {
+            expect(await this.getTriggerAriaAttribute('aria-expanded')).toBe(expanded);
+        }).toPass({ timeout: 3000 });
+    }
+    async expectAriaControlsMatch(popover) {
+        const dialogId = await (await this.dialog(popover)).getAttribute('id');
+        await expect(async () => {
+            expect(await this.getTriggerAriaAttribute('aria-controls')).toBe(dialogId);
+        }).toPass({ timeout: 3000 });
+    }
+    static async installShowChangedTracker(page) {
+        const popover = new PopoverPage(page);
+        await popover.host.evaluate((el) => {
+            globalThis.__showChangedEvents = [];
+            el.addEventListener('showChanged', (event) => {
+                globalThis.__showChangedEvents.push(event.detail);
+            });
+        });
+    }
+    async expectShowChangedEvents(expected) {
+        await expect
+            .poll(() => this.page.evaluate(() => globalThis
+            .__showChangedEvents))
+            .toEqual(expected);
+    }
+    async runAxe(makeAxeBuilder) {
+        const results = await makeAxeBuilder().exclude('ix-button').analyze();
+        expect(results.violations).toEqual([]);
+    }
+}
+/**
+ * Assert popover placement relative to trigger
+ */
+export async function expectPlacement(page, triggerSelector, popover, placement) {
+    const getDialog = (popover) => popover.locator('[role="dialog"], [role="status"]').first();
+    await expect(async () => {
+        const triggerBox = await page.locator(triggerSelector).boundingBox();
+        const dialogBox = await getDialog(popover).boundingBox();
+        expect(triggerBox).not.toBeNull();
+        expect(dialogBox).not.toBeNull();
+        const tolerance = 24;
+        if (placement === 'bottom') {
+            expect(dialogBox.y).toBeGreaterThanOrEqual(triggerBox.y + triggerBox.height - tolerance);
+        }
+        if (placement === 'top') {
+            expect(dialogBox.y + dialogBox.height).toBeLessThanOrEqual(triggerBox.y + tolerance);
+        }
+        if (placement === 'right') {
+            expect(dialogBox.x).toBeGreaterThanOrEqual(triggerBox.x + triggerBox.width - tolerance);
+        }
+        if (placement === 'left') {
+            expect(dialogBox.x + dialogBox.width).toBeLessThanOrEqual(triggerBox.x + tolerance);
+        }
+    }).toPass({ timeout: 3000 });
+}
+function elementMatchesFocusVisible(element) {
+    return element.matches(':focus-visible');
+}
+/** Poll until the locator's focused element does not match `:focus-visible`. */
+export async function expectLocatorNotFocusVisible(locator, options = {}) {
+    await expect(async () => {
+        const showsFocusVisible = await locator.evaluate(elementMatchesFocusVisible);
+        expect(showsFocusVisible).toBe(false);
+    }).toPass({ timeout: options.timeout ?? 3000 });
+}
+/**
+ * Mount popover component and wait for hydration
+ */
+export async function mountPopover(mount, page, markup) {
+    await mount(markup);
+    // Wait for the component to hydrate - using first() is acceptable here
+    // as we just need to ensure at least one popover is hydrated
+    await expect(page.locator('ix-popover').first()).toHaveClass(/hydrated/);
+}
+/**
+ * Inject nested popover markup after the parent is already open.
+ * Waits for the inner trigger to register with the controller.
+ */
+export async function injectLateNestedPopover(page) {
+    await page.evaluate(async () => {
+        const mount = document.getElementById('nested-mount');
+        if (!mount) {
+            throw new Error('Nested mount not found');
+        }
+        mount.innerHTML = `
+      <ix-button id="inner-trigger">Inner</ix-button>
+      <ix-popover id="inner-popover" trigger="inner-trigger" close-on-click-outside>
+        <ix-popover-header>Inner popover</ix-popover-header>
+        <ix-popover-content>Nested body</ix-popover-content>
+      </ix-popover>
+    `;
+        await customElements.whenDefined('ix-popover');
+        await customElements.whenDefined('ix-button');
+    });
+    await expect(page.locator('ix-popover#inner-popover')).toHaveClass(/hydrated/);
+    await expect(page.locator('ix-button#inner-trigger')).toHaveAttribute('data-ix-popover-trigger', '');
+}

package/dist/collection/components/popover-content/popover-content.css

@@ -0,0 +1,81 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+:host {
+  display: block;
+  position: relative;
+  overflow: auto;
+  padding: 0.75rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host {
+  /* width */
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host {
+  /* Track */
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host {
+  /* Handle */
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host {
+  /* Handle on hover */
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+
+:host(.no-padding) {
+  padding: 0;
+}

package/dist/collection/components/popover-content/popover-content.js

@@ -0,0 +1,67 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host } from "@stencil/core";
+import { TRAP_FOCUS_INCLUDE_ATTRIBUTE } from "../utils/focus/focus-trap";
+/**
+ * Main body section of the popover.
+ *
+ * @slot - Popover body content.
+ *
+ * @since 5.1.0
+ */
+export class PopoverContent {
+    /**
+     * Remove default inner padding.
+     *
+     * @since 5.1.0
+     */
+    noPadding = false;
+    render() {
+        return (h(Host, { key: '2dc14073545f57f65c6901dc69d7f721df98f3b1', class: { 'no-padding': this.noPadding }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("slot", { key: 'aa44ae3c40f423be58fc5cb1d0f1b535175d8c7f' })));
+    }
+    static get is() { return "ix-popover-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "noPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Remove default inner padding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-padding",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/popover-footer/popover-footer.css

@@ -0,0 +1,91 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+:host {
+  display: flex;
+  padding: 0.75rem;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host {
+  /* width */
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host {
+  /* Track */
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host {
+  /* Handle */
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host {
+  /* Handle on hover */
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .footer-start,
+:host .footer-end {
+  display: flex;
+  gap: 0.5rem;
+}
+
+:host(.alignment-vertical) .footer-end {
+  flex-direction: column;
+  width: 100%;
+}
+:host(.alignment-vertical) .footer-end ::slotted(*) {
+  width: 100%;
+}