@siemens/ix 5.0.0 → 5.1.0

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

@@ -0,0 +1,68 @@
+/*
+ * 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";
+/**
+ * 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 class PopoverFooter {
+    /**
+     * Button layout direction
+     *
+     * @since 5.1.0
+     */
+    alignment = 'horizontal';
+    render() {
+        return (h(Host, { key: '7bab2eff391dce0ec212153f377ae18cc17df0d7', class: { [`alignment-${this.alignment}`]: true }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("div", { key: '238db3b5532bf4bf6cbe07018a204e1bf4a85a07', class: "footer-start" }, h("slot", { key: '8bdafda85a6c0a4e8f0e5e0bc7f3d9e61fed5b99', name: "start" })), h("div", { key: '42f53fb182fe5a0b91df29cef856c94e87756e2a', class: "footer-end" }, h("slot", { key: 'bb4dab35e016c975e7d29c1dbbff53222d801228' }))));
+    }
+    static get is() { return "ix-popover-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Button layout direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,105 @@
+/*
+ * 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;
+  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 .popover-title {
+  flex-grow: 1;
+}
+:host .additional-items {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+:host .popover-close {
+  align-self: flex-start;
+  border-radius: var(--theme-small-border-radius);
+  --ix-icon-button-color: var(--theme-popover-close--color);
+  --theme-btn-tertiary--color: var(--theme-popover-close--color);
+  --theme-btn-tertiary--color--hover: var(--theme-popover-close--color);
+  --theme-btn-tertiary--color--active: var(--theme-popover-close--color);
+  --theme-btn-tertiary--background: var(
+    --theme-popover-close-btn--background
+  );
+  --theme-btn-tertiary--background--hover: var(
+    --theme-popover-close-btn--background--hover
+  );
+  --theme-btn-tertiary--background--active: var(
+    --theme-popover-close-btn--background--active
+  );
+  --theme-btn-tertiary--border-color: transparent;
+  --theme-btn-tertiary--border-color--hover: transparent;
+  --theme-btn-tertiary--border-color--active: transparent;
+}

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

@@ -0,0 +1,205 @@
+/*
+ * 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 { iconClose } from "@siemens/ix-icons/icons";
+import { h, Host, } from "@stencil/core";
+import { a11yBoolean } from "../utils/a11y";
+import { TRAP_FOCUS_INCLUDE_ATTRIBUTE } from "../utils/focus/focus-trap";
+import { closestPassShadow } from "../utils/shadow-dom";
+/**
+ * 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 class PopoverHeader {
+    hostElement;
+    /**
+     * Icon name displayed before the title.
+     * The icon is decorative; provide context in the default slot heading.
+     *
+     * @since 5.1.0
+     */
+    icon;
+    /**
+     * Icon color
+     *
+     * @since 5.1.0
+     */
+    iconColor;
+    /**
+     * Hide the close (X) button
+     *
+     * @since 5.1.0
+     */
+    hideClose = false;
+    /**
+     * ARIA label for the close icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     *
+     * @since 5.1.0
+     */
+    ariaLabelCloseIconButton = 'Close';
+    /**
+     * Fires when close button is clicked.
+     * Cancel to prevent closing.
+     *
+     * @since 5.1.0
+     */
+    closeClick;
+    parentPopover;
+    componentDidLoad() {
+        this.parentPopover = closestPassShadow(this.hostElement, 'ix-popover');
+    }
+    onCloseClick(event) {
+        const ce = this.closeClick.emit(event);
+        if (ce.defaultPrevented || event.defaultPrevented) {
+            return;
+        }
+        this.parentPopover?.hidePopover();
+    }
+    render() {
+        return (h(Host, { key: 'd75ad6fc30a8b3df9d1588fc18be610f19946a15', [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "24", "aria-hidden": a11yBoolean(true) })) : null, h("div", { key: 'c5db5b3c4d9537f1b5ec2d53eda5d94aba0984d5', class: "popover-title" }, h("ix-typography", { key: '0c87f6cb01be5089a35f0eeb30e6aa7743865eef', format: "h5" }, h("slot", { key: 'd5bcd06f9dd501f7f52861d0ed2c6dd967bd8196' }))), h("div", { key: 'fa7365f8ddce2cd12f92165160fb780426a994ce', class: "additional-items" }, h("slot", { key: 'b093c196c32eff075d65a5a9e570292174a1f943', name: "additional-items" })), this.hideClose ? null : (h("ix-icon-button", { class: "popover-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, "aria-label": this.ariaLabelCloseIconButton }))));
+    }
+    static get is() { return "ix-popover-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Icon name displayed before the title.\nThe icon is decorative; provide context in the default slot heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Icon color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-color"
+            },
+            "hideClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Hide the close (X) button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-close",
+                "defaultValue": "false"
+            },
+            "ariaLabelCloseIconButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "ARIA label for the close icon button.\nWill be set as aria-label on the nested HTML button element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-close-icon-button",
+                "defaultValue": "'Close'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClick",
+                "name": "closeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Fires when close button is clicked.\nCancel to prevent closing."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,80 @@
+/*
+ * 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;
+}
+: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 img {
+  display: block;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}

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

@@ -0,0 +1,96 @@
+/*
+ * 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";
+/**
+ * Optional image section for the popover.
+ *
+ * @since 5.1.0
+ */
+export class PopoverImage {
+    /**
+     * Image source URL
+     *
+     * @since 5.1.0
+     */
+    image;
+    /**
+     * Alt text for the image.
+     * Use an empty string for decorative images; provide descriptive text for content images.
+     *
+     * @since 5.1.0
+     */
+    imageAlt = '';
+    render() {
+        if (!this.image) {
+            return null;
+        }
+        return (h(Host, null, h("img", { src: this.image, alt: this.imageAlt })));
+    }
+    static get is() { return "ix-popover-image"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-image.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Image source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Alt text for the image.\nUse an empty string for decorative images; provide descriptive text for content images."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-alt",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -94,17 +94,17 @@ export class ProgressIndicator {
     render() {
         const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
         const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-        return (h(Host, { key: 'b7422413aa3645c9eed7b3d6ab547fc5ee7a0322', class: {
+        return (h(Host, { key: '4c8ce44855219cefbe2adc70d46d6194d02edc2d', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, h("div", { key: 'ee59c601c1c9814de20b10fc42f6770102873f8e', class: {
+            }, tabIndex: -1 }, h("div", { key: '4204012c4368150615e95d16bc52026a9ae893c6', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
                 ['text-center']: this.textAlignment === 'center',
                 ['text-left']: this.textAlignment === 'left',
                 ['text-right']: this.textAlignment === 'right',
-            } }, this.label && (h("ix-typography", { key: 'b87dc78097b0148cb1af311b9ad636877732155d', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '2c5706e0381b581b846c6c925738653dc730fe6c', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+            } }, this.label && (h("ix-typography", { key: '522744e8f2be71e94fa6e87ec1f053c9f2b141fe', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: 'c5a2069c251c44ff3a33bfe7caea66f657b03d5e', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
     }
     static get is() { return "ix-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/push-card/push-card.js

@@ -43,7 +43,7 @@ export class PushCard {
      */
     passive = false;
     render() {
-        return (h(Host, { key: '5380f3adc73e74559c0fc996e7de3cdaf965650c', class: `card-${this.variant}` }, h("ix-card", { key: '9e0b3ee1196fce31e4e475c6e365de6e0bd68350', variant: this.variant, passive: this.passive }, h("ix-card-content", { key: 'aa6998c8d7b9a7b2a2329e73ed53dcf736822e91' }, h("ix-card-title", { key: '9ad22d217648716115d3bbd1eb5c0dc38f7af26e' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '1d11c4efa541af33c0db5b7f8ab6ead6160273e6', format: "display-xxl" }, this.notification ?? 0), h("slot", { key: 'a96ae7771c8fcf54f17874f97b2fb01529dc7aa8', name: "title-action" })), h("ix-typography", { key: '842b4a4cd60f935a1cbb2fe4fc2ee661a56d0757', format: "h4" }, this.heading), h("ix-typography", { key: 'a355342f44ca44a492e2756be614c7af340c508e' }, this.subheading)), h("ix-card-accordion", { key: '0e2fc1caa5c33899c31bfe8e0076834229385c3a', collapse: !this.expanded, variant: this.variant }, h("slot", { key: 'f7f08c778f246a9226887ddbf7a55eb7f3119f5b' })))));
+        return (h(Host, { key: '4f607dbe48bd80e6528f16d3dd70b1759e00f643', class: `card-${this.variant}` }, h("ix-card", { key: '4fafba1c8dbdd0b8503c14c53dc3c888567725c7', variant: this.variant, passive: this.passive }, h("ix-card-content", { key: 'c7ac7e9ea9061af15c28ad79b3773ac4cd511a93' }, h("ix-card-title", { key: '4206e4413e42e914b11526b40e44cd5e5360d403' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '91384db0e1c690aa9715bda38220127f545353b3', format: "display-xxl" }, this.notification ?? 0), h("slot", { key: '37cb75b3f6c2578cfa958982c20a5f0c9fa661dc', name: "title-action" })), h("ix-typography", { key: '349b36fe5eaa7faf0b8fa9da84b8b201fd1a173d', format: "h4" }, this.heading), h("ix-typography", { key: 'edd40ab8765df06b960b8014e318f06cd8c0f56f' }, this.subheading)), h("ix-card-accordion", { key: 'db0a3f66d0ea0fc8bed61b15651bea6381d812b1', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '5095d6f7f3f9b23c17daccf9599ede0426db8b01' })))));
     }
     static get is() { return "ix-push-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.js

@@ -137,17 +137,17 @@ export class Radio {
         if (this.disabled) {
             tabIndex = -1;
         }
-        return (h(Host, { key: '5e76cfa3be05a7b0354e987f2ec3f3e5df152c4c', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
+        return (h(Host, { key: '38a5132a44f733662ff6b744cb4469595df3d2b9', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
             }, onClick: () => {
                 if (this.disabled)
                     return;
                 this.setCheckedState(true);
-            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '78ed2a34ead25c7f1836be8e1588a2cb70c107c0' }, h("div", { key: 'a06de9d6645e89b86daa35ff7b495bdf77d72377', class: "radio-button" }, h("div", { key: 'bb4e8c6cea96503bc6211c43464ce0ea14923048', "aria-hidden": "true", class: {
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '2505290137ef4bf9771119b347c95896afd3bfb2' }, h("div", { key: '774c09d5a0bb29a13cf6fb091e912f81d17e3ea8', class: "radio-button" }, h("div", { key: '1a44e92780fa8fa8ecee253400b23febfa3de481', "aria-hidden": "true", class: {
                 ['radio-checkmark']: true,
                 checked: this.checked,
-            } }, h("div", { key: 'eca09b300d52b090f83e7e6bffa6b08b6bbad30d', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'e80c0237090a0b5069f6a33ea0aaa831f197da59', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '9a0db47b61423675b443a0e7bb5fa36f99f141ba' }))))));
+            } }, h("div", { key: 'e2e26bd36cbc7c94be84fed124f30dda3aee4086', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'c96621fb5011671d18b32d38bb619585ba2aaa35', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '849c0c96db14348798bb2ca509e3e828dfd40600' }))))));
     }
     static get is() { return "ix-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.js

@@ -182,10 +182,10 @@ export class RadiobuttonGroup {
         nextRadio.focus();
     }
     render() {
-        return (h(Host, { key: 'bd4e0a22376eff4ee73490013feacc1097330558', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '18b2eef5eb0cc31c50d2282bb05d45b263e6d6c2', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '36f69aee31fa35337d1b14eafc9d06ca6dd234e5', class: {
+        return (h(Host, { key: '52fe1cdeb484f3114564701e714e686479ad27cb', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '21591f15dbea1dbbe7fcf625b4f866ecfc95f8bb', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '1acbd13c448af7fc4b76690ceafe8afbf19e66b8', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '294428b89f46622315677a2e4dc0ef0841ef81c4' })))));
+            } }, h("slot", { key: 'cca579b75a01d8bd2755de0eb5d1e48e1eb2125d' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/range-field/range-field.js

@@ -115,10 +115,10 @@ export class RangeField extends Mixin(...DefaultMixins) {
         requestAnimationFrameNoNgZone(() => secondElement.openPicker());
     }
     render() {
-        return (h(Host, { key: '9a7a7fe48f24b453a0ec97441a295ecdedce01bc', class: { 'hide-arrow': this.hideArrow }, role: "group" }, !this.hideArrow && (h("ix-icon", { key: '6e70058b9ed46a3d0d8a9d81db96a1449a94eb00', "aria-hidden": "true", class: {
+        return (h(Host, { key: 'a3fe83cc2529f7b415a7c2b7cc6f03685078df51', class: { 'hide-arrow': this.hideArrow }, role: "group" }, !this.hideArrow && (h("ix-icon", { key: '10503bc358606a043a4cd3f56c399bc500fb4714', "aria-hidden": "true", class: {
                 'range-delimiter': true,
                 'has-label': this.hasLabel,
-            }, name: iconArrowRight })), h("slot", { key: 'f700e47951e5a58c9232adb5a79fa01f42d369fa' })));
+            }, name: iconArrowRight })), h("slot", { key: '2b97358a113fa98803c17dda0d1202d94d1cdc34' })));
     }
     static get is() { return "ix-range-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Row {
     render() {
-        return (h(Host, { key: '88036865546dd8f57cac8099b7bef38d6420c722' }, h("slot", { key: '948ec4b33c9f03caa4feec78d76f397bd320d045' })));
+        return (h(Host, { key: 'd196cf5b6609b66fd1d8e60175373e6463faec5c' }, h("slot", { key: 'cd5208fe0e779fb69579e8f9bbc1af21572d8bbc' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }