@siemens/ix 5.0.0 → 5.1.0

package/dist/collection/components/pane/pane.css

@@ -215,6 +215,10 @@
   height: 100%;
   width: 100%;
 }
+:host .side-pane-content.no-padding {
+  padding-inline: 0;
+  padding-block-end: 0;
+}
 :host .slot-header {
   max-height: 2rem;
   max-width: unset;

package/dist/collection/components/pane/pane.js

@@ -13,6 +13,8 @@ import Animation from "../utils/animation";
 import { applicationLayoutService } from "../utils/application-layout";
 import { matchBreakpoint } from "../utils/breakpoints";
 import { addDisposableEventListener, } from "../utils/disposable-event-listener";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+import { addFocusTrap } from "../utils/focus/focus-trap";
 import { a11yBoolean } from "../utils/a11y";
 /**
  * @slot header - Additional slot for the header content
@@ -41,6 +43,13 @@ export class Pane {
      * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.
      */
     borderless = false;
+    /**
+     * Remove the padding of the content area.
+     * If set to `true` the left, right and bottom padding of the content area is removed.
+     *
+     * @since 5.1.0
+     */
+    noPadding = false;
     /**
      * State of the pane
      */
@@ -109,6 +118,9 @@ export class Pane {
     mutationObserver;
     resizeObserver;
     disposableWindowClick;
+    disposableKeydown;
+    focusTrap;
+    focusReturnElement;
     get currentSlot() {
         return this.hostElement.getAttribute('slot');
     }
@@ -125,18 +137,44 @@ export class Pane {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
         this.disposableWindowClick?.();
+        this.disposableKeydown?.();
+        this.focusTrap?.destroy();
     }
-    onExpandedChange() {
+    async onExpandedChange() {
         if (!this.closeOnClickOutside || !this.expanded) {
             this.disposableWindowClick?.();
+        }
+        else {
+            this.disposableWindowClick = addDisposableEventListener(window, 'click', (event) => {
+                const path = event.composedPath?.() || [];
+                if (!path.includes(this.hostElement)) {
+                    this.dispatchExpandedChangedEvent();
+                }
+            });
+        }
+        this.registerEscapeListener();
+        if (!this.floating) {
             return;
         }
-        this.disposableWindowClick = addDisposableEventListener(window, 'click', (event) => {
-            const path = event.composedPath?.() || [];
-            if (!path.includes(this.hostElement)) {
-                this.dispatchExpandedChangedEvent();
-            }
-        });
+        if (this.expanded) {
+            const activeElement = document.activeElement;
+            this.focusReturnElement =
+                activeElement instanceof HTMLElement ? activeElement : undefined;
+            this.focusTrap = await addFocusTrap(this.hostElement, {
+                trapFocusInShadowDom: 'both',
+            });
+        }
+        else {
+            this.focusTrap?.destroy();
+            this.focusTrap = undefined;
+            requestAnimationFrameNoNgZone(() => {
+                const elementToFocus = this.focusReturnElement;
+                this.focusReturnElement = undefined;
+                if (elementToFocus && typeof elementToFocus.focus === 'function') {
+                    elementToFocus.focus();
+                }
+            });
+        }
     }
     componentWillLoad() {
         this.onExpandedChange();
@@ -287,10 +325,7 @@ export class Pane {
                 }
             },
             complete: () => {
-                if (this.expanded) {
-                    this.showContent = true;
-                }
-                this.animations.delete(key);
+                this.onAnimationComplete(key);
             },
         });
         this.animations.set(key, animation);
@@ -314,14 +349,22 @@ export class Pane {
                 }
             },
             onComplete: () => {
-                if (this.expanded) {
-                    this.showContent = true;
-                }
-                this.animations.delete(key);
+                this.onAnimationComplete(key);
             },
         });
         this.animations.set(key, animation);
     }
+    onAnimationComplete(key) {
+        if (this.expanded) {
+            this.showContent = true;
+            if (this.floating) {
+                requestAnimationFrameNoNgZone(() => {
+                    this.focusFirstSlottedElement();
+                });
+            }
+        }
+        this.animations.delete(key);
+    }
     removePadding() {
         animate(this.hostElement.shadowRoot.querySelector('#title-div'), {
             duration: 0,
@@ -391,6 +434,11 @@ export class Pane {
             slot: this.currentSlot ?? '',
             variant: value,
         });
+        if (value !== 'floating') {
+            this.focusTrap?.destroy();
+            this.focusTrap = undefined;
+        }
+        this.registerEscapeListener();
     }
     onBorderlessChange(value) {
         this.borderlessChanged.emit({
@@ -398,6 +446,30 @@ export class Pane {
             borderless: value,
         });
     }
+    focusFirstSlottedElement() {
+        const autofocusEl = this.hostElement.querySelector('[autofocus]');
+        if (autofocusEl) {
+            autofocusEl.focus();
+            return;
+        }
+        const closeBtn = this.hostElement.shadowRoot?.querySelector('.title-icon');
+        if (closeBtn) {
+            closeBtn.focus();
+        }
+    }
+    registerEscapeListener() {
+        this.disposableKeydown?.();
+        this.disposableKeydown = undefined;
+        if (!this.floating || !this.expanded) {
+            return;
+        }
+        this.disposableKeydown = addDisposableEventListener(this.hostElement, 'keydown', (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            this.dispatchExpandedChangedEvent();
+        });
+    }
     dispatchExpandedChangedEvent() {
         const newExpandedValue = !this.expanded;
         const event = this.expandedChanged.emit({
@@ -501,7 +573,7 @@ export class Pane {
         else {
             paneButtonAriaLabel = 'Expand pane';
         }
-        return (h(Host, { key: '7cbc0656b5c4c2ec4057733c7eb652004ebdc383', class: {
+        return (h(Host, { key: '660f2e8dc07c9e850c0e3a5519aa2bdf3c8c5fac', class: {
                 'floating-pane': this.floating,
                 'inline-pane': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
@@ -525,28 +597,31 @@ export class Pane {
                     !this.expanded &&
                     !this.floating,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '7c1ea7ef3cf622297ea4363908baf81a9db99dda', id: `pane-${this.composition}`, class: {
+            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: 'd2b0ae9751cda7f718e4d1364e3d3753e57cbefe', id: `pane-${this.composition}`, class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, h("div", { key: 'f6292f3f589efc59514c6998a2ccb7cce694e40e', id: "title-div", class: {
+            } }, h("div", { key: '0b5918ac95f84b670be321fc53dafd181b097dc4', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, h("ix-icon-button", { key: '8b1a984c693aae6838e0c502fa8002ca64d9ca45', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '13c826047f5f354ae359a587250e77c64121fde8', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? iconClose
                     : this.expandIcon
                 : this.minimizeIcon, iconColor: this.expanded && (this.isMobile || this.hideOnCollapse)
                 ? 'color-soft-text'
-                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": paneButtonAriaLabel }), h("div", { key: '794a1436c031004c6353bbaa0a6c232ac26fe173', class: {
+                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": paneButtonAriaLabel }), h("div", { key: '6d78cb728e3a4e6d9c45847af1df55db363c1931', class: {
                 'title-text': true,
                 rotate: rotate,
-            } }, this.icon && (h("ix-icon", { key: 'ec37b0262e2c6b9111753e91388b82db166f7e4c', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: '525da27f90b187e64800360a2e49ee3547ea23d6', class: "title-text-overflow" }, h("ix-typography", { key: 'b11a3a538ffb8db6be4dee5f64d18f9d9e0b78a3', format: "h4" }, this.heading)), this.expanded && (h("div", { key: 'eee6ca859602eb76be791238ca93eda110a61fd9', class: "slot-header" }, h("slot", { key: 'c494d88c9d5c58a2d69a6c95e520e1864a80a275', name: "header" }))))), h("div", { key: '0ce9b176670c9493b900ef86e2d6f1ff0719910b', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '34491085f2d7ccacba88b177c7db695062e42b29' })))));
+            } }, this.icon && (h("ix-icon", { key: '061797c039a5e9a2e00b11a309ee590c1c63ae88', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: '694a060e147b5512b190ac579251c1b7443946e9', class: "title-text-overflow" }, h("ix-typography", { key: '47ccd30e3da94259c7b679c97c680792bb13a7d3', format: "h4" }, this.heading)), this.expanded && (h("div", { key: '96e096bac94baa46ac24fe95e2924c04e5c7ee46', class: "slot-header" }, h("slot", { key: 'd9e4abdaa29161ddf00317a845fe64b215eacbd4', name: "header" }))))), h("div", { key: '810c3551402bb7292c8996d3efeb095a5b2cee8d', class: {
+                'side-pane-content': true,
+                'no-padding': this.noPadding,
+            }, hidden: !this.showContent }, h("slot", { key: '224834ef4d3eb117b0fe9284ba7b76905cb23473' })))));
     }
     static get is() { return "ix-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -661,6 +736,29 @@ export class Pane {
                 "attribute": "borderless",
                 "defaultValue": "false"
             },
+            "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 the padding of the content area.\nIf set to `true` the left, right and bottom padding of the content area is removed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-padding",
+                "defaultValue": "false"
+            },
             "expanded": {
                 "type": "boolean",
                 "mutable": true,

package/dist/collection/components/pane-layout/pane-layout.js

@@ -237,7 +237,7 @@ export class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: 'c21202ca403d967e76477ce169c3c66f568b0fe2' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: '9642eb5fb53b9843df4eb4c558cce46fb48d8c6e' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/dist/collection/components/pill/pill.js

@@ -88,13 +88,13 @@ export class Pill extends Mixin(...DefaultMixins) {
             hostRole = 'group';
         }
         const iconIsDecorative = !this.ariaLabelIcon?.trim();
-        return (h(Host, { key: '7b8f2661c2d2cd4f9d4e71631cfed268167adb5b', style: this.variant === 'custom'
+        return (h(Host, { key: '67338905de82719c9a01fe022487ed706b35d8e6', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            }, role: hostRole }, h("div", { key: '319eb41667d05e12400f933aa71387476b2e1892', ref: this.containerElementRef, style: { ...customStyle }, class: {
+            }, role: hostRole }, h("div", { key: '673b20609f91ffd09d80564d6aa709fe4d9303ad', ref: this.containerElementRef, style: { ...customStyle }, class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -109,9 +109,9 @@ export class Pill extends Mixin(...DefaultMixins) {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (h("ix-icon", { key: '34124123e8411fd9eb1ae957dd6b7d70c115c041', class: {
+            } }, this.icon && (h("ix-icon", { key: '76b1e2d1b248f13f68417f91c72130f40f4e2755', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative) })), h("span", { key: '6b9b25474bfc28109676a60a15d7f13601c5946e', class: "slot-container" }, h("slot", { key: '0d05a9372c9d11ed5cb5f28b618ef3c0b91d31c4', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative) })), h("span", { key: '215af7f202cfd01c6f2f5dc43fbc9b2a6d296ed2', class: "slot-container" }, h("slot", { key: '0e2082d82c6c6be68a7107692c6162080178f601', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,161 @@
+/*
+ * 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 { NestedOverlayStack, pathIncludesTrigger as findTriggerInPath, } from "../utils/nested-overlay";
+class PopoverController {
+    stack = new NestedOverlayStack({
+        blocksOutsideDismiss: (popover) => !popover.closeOnClickOutside,
+    }, (popover) => this.dismiss(popover));
+    /** LIFO order of popovers opened through {@link presentAndWait}. */
+    presentationOrder = [];
+    isWindowListenerActive = false;
+    connected(popover) {
+        if (!this.isWindowListenerActive) {
+            this.addOverlayListeners();
+        }
+        this.stack.connect(popover);
+    }
+    disconnected(popover) {
+        this.removeFromPresentationOrder(popover.getId());
+        this.stack.disconnect(popover);
+    }
+    removeFromNestedPopoverIds(id) {
+        this.stack.removeFromHierarchy(id);
+    }
+    /** Keeps stack parent→child links aligned with host {@link PopoverInterface.getNestedPopoverIds}. */
+    syncNestedPopoverIds(popover) {
+        this.stack.setChildIds(popover.getId(), popover.getNestedPopoverIds());
+    }
+    present(popover) {
+        void this.presentAndWait(popover);
+    }
+    async presentAndWait(popover) {
+        if (!popover.isPresent() && popover.willPresent?.()) {
+            this.dismissOthers(popover.getId());
+            this.syncNestedPopoverIds(popover);
+            await popover.present();
+            this.recordPresented(popover.getId());
+        }
+    }
+    dismissChildren(uid) {
+        this.dismissChildrenWithFocus(uid);
+    }
+    dismiss(popover, closeFocus = 'restore-trigger') {
+        const isPresent = popover.isPresent();
+        const willDismiss = popover.willDismiss?.() ?? true;
+        if (!isPresent || !willDismiss) {
+            return;
+        }
+        this.dismissChildrenWithFocus(popover.getId(), closeFocus);
+        popover.dismiss(closeFocus);
+        this.stack.deleteChildIdsEntry(popover.getId());
+        this.removeFromPresentationOrder(popover.getId());
+    }
+    dismissChildrenWithFocus(uid, closeFocus = 'restore-trigger') {
+        for (const childId of this.stack.getChildIds(uid)) {
+            const child = this.stack.get(childId);
+            if (child) {
+                this.dismiss(child, closeFocus);
+            }
+        }
+    }
+    dismissAll(ignoreCloseOnClickOutside = false) {
+        this.stack.dismissAll(ignoreCloseOnClickOutside
+            ? { ignorePolicyForIds: this.stack.keys() }
+            : undefined);
+    }
+    dismissTopmost() {
+        const topmost = this.getTopmostForEscape();
+        if (topmost) {
+            this.dismiss(topmost);
+        }
+    }
+    dismissOthers(uid) {
+        this.stack.dismissOthers(uid);
+    }
+    pathIncludesTrigger(eventTargets) {
+        return findTriggerInPath(eventTargets, 'data-ix-popover-trigger');
+    }
+    recordPresented(id) {
+        this.removeFromPresentationOrder(id);
+        this.presentationOrder.push(id);
+    }
+    removeFromPresentationOrder(id) {
+        const index = this.presentationOrder.indexOf(id);
+        if (index > -1) {
+            this.presentationOrder.splice(index, 1);
+        }
+    }
+    /** Whether this host is the active (topmost) popover for keyboard focus. */
+    isTopmostPresentedHost(host) {
+        return this.getTopmostForEscape()?.hostElement === host;
+    }
+    getTopmostForEscape() {
+        for (let index = this.presentationOrder.length - 1; index >= 0; index--) {
+            const popover = this.stack.get(this.presentationOrder[index]);
+            if (popover?.isPresent()) {
+                return popover;
+            }
+        }
+        let fallback;
+        this.stack.forEach((popover) => {
+            if (popover.isPresent()) {
+                fallback = popover;
+            }
+        });
+        return fallback;
+    }
+    getPopoverDialog(host) {
+        return host.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    pathIncludesPopover(eventTargets) {
+        for (const eventTarget of eventTargets) {
+            if (!(eventTarget instanceof HTMLElement)) {
+                continue;
+            }
+            if (eventTarget.tagName === 'IX-POPOVER') {
+                return true;
+            }
+            for (const popover of this.stack.values()) {
+                if (eventTarget === popover.hostElement) {
+                    return true;
+                }
+                const panel = this.getPopoverDialog(popover.hostElement);
+                if (panel && eventTarget === panel) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    dismissAllFromOutsideClick() {
+        this.stack.forEach((instance) => {
+            if (!instance.closeOnClickOutside || !instance.isPresent()) {
+                return;
+            }
+            this.dismiss(instance, 'release');
+        });
+    }
+    addOverlayListeners() {
+        this.isWindowListenerActive = true;
+        window.addEventListener('click', (event) => {
+            const hasTrigger = this.pathIncludesTrigger(event.composedPath());
+            const hasPopover = this.pathIncludesPopover(event.composedPath());
+            if (!hasTrigger && !hasPopover) {
+                this.dismissAllFromOutsideClick();
+            }
+        });
+        window.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.dismissTopmost();
+            }
+        });
+    }
+}
+export { PopoverController };
+export const popoverController = new PopoverController();

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

@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+:host {
+  --theme-popover--background: var(--theme-color-2);
+  --theme-popover--border-color: transparent;
+  --theme-popover--color: var(--theme-color-std-text);
+  --theme-popover--elevation-filter: drop-shadow(0 0 2px var(--theme-color-shadow-2))
+    drop-shadow(0 4px 8px var(--theme-color-shadow-3))
+    drop-shadow(0 12px 18px var(--theme-color-shadow-3));
+  --theme-popover-close--color: var(--theme-color-soft-text);
+  --theme-popover-close-btn--background: transparent;
+  --theme-popover-close-btn--background--active: var(--theme-color-ghost--active);
+  --theme-popover-close-btn--background--hover: var(--theme-color-ghost--hover);
+}
+:host dialog.dialog {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  overflow: visible;
+  position: fixed;
+  inset: unset;
+  width: 25rem;
+  min-width: 15rem;
+  max-width: 37.5rem;
+  max-height: calc(100vh - 2rem);
+}
+:host .popover-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  max-height: calc(100vh - 2rem);
+  background: var(--theme-popover--background);
+  color: var(--theme-popover--color);
+  border: 1px solid var(--theme-popover--border-color);
+  box-shadow: var(--theme-shadow-4);
+  border-radius: var(--theme-default-border-radius);
+  overflow: visible;
+}
+:host .popover-body {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+}
+:host .popover-container:has(.spike) {
+  box-shadow: none;
+  filter: var(--theme-popover--elevation-filter);
+}
+:host .spike,
+:host .spike::before {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: inherit;
+}
+:host .spike {
+  visibility: hidden;
+  z-index: 0;
+  pointer-events: none;
+}
+:host .spike::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--theme-popover--background);
+}