@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/chip/chip.js

@@ -7,97 +7,159 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { iconCloseSmall } from "@siemens/ix-icons/icons";
-import { h, Host, } from "@stencil/core";
+import { h, Host, Mixin, } from "@stencil/core";
+import { a11yBoolean } from "../utils/a11y";
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { makeRef } from "../utils/make-ref";
-export class Chip {
+import { CHIP_VARIANTS } from "./chip.types";
+export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
-        /**
-         * Chip variant
-         */
-        this.variant = 'primary';
-        /**
-         * Determines if the chip is interactive. If true no user input (e.g. mouse states, keyboard navigation)
-         * will be possible and also the close button will not be present.
-         */
-        this.inactive = false;
-        /**
-         * Show close icon
-         */
-        this.closable = false;
-        /**
-         * Show chip with outline style
-         */
-        this.outline = false;
-        /**
-         * Display a tooltip. By default, no tooltip will be displayed.
-         * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
-         *
-         * @since 3.0.0
-         */
-        this.tooltipText = false;
-        /**
-         * Center the content of the chip.
-         * Set to false to disable centering.
-         * @since 3.2.0
-         */
-        this.centerContent = false;
-        /**
-         * ARIA label for the close button
-         * Will be set as aria-label on the nested HTML button element
-         */
-        this.ariaLabelCloseButton = 'Close chip';
-        this.containerElementRef = makeRef();
+        super();
     }
-    getCloseButton() {
-        return (h("div", { class: "close-button-container" }, h("ix-icon-button", { type: "button", variant: "subtle-tertiary", icon: iconCloseSmall, class: "close-button", oval: true, size: "16", style: this.variant === 'custom' ? { color: this.chipColor } : {}, onClick: (event) => {
-                this.closeChip.emit(event);
-                event.stopPropagation();
-            }, "aria-label": this.ariaLabelCloseButton })));
+    hostElement;
+    /**
+     * Chip variant.
+     * Defaults to `primary`. When unset or set to an unknown value the chip falls back to `primary` styling.
+     */
+    variant = 'primary';
+    /**
+     * Determines if the chip is interactive. If true no user input (e.g. mouse states, keyboard navigation)
+     * will be possible and also the close button will not be present.
+     */
+    inactive = false;
+    /**
+     * Show close icon
+     */
+    closable = false;
+    /**
+     * Show icon
+     */
+    icon;
+    /**
+     * Accessible name for the leading icon.
+     * When unset, the icon is treated as decorative (hidden from assistive tech) when the default slot supplies a visible label.
+     *
+     * @since 5.0.0
+     */
+    ariaLabelIcon;
+    /**
+     * Custom background color.
+     * Only has an effect on chips with `variant='custom'`
+     */
+    background;
+    /**
+     * Custom font and icon color.
+     * Only has an effect on chips with `variant='custom'`
+     */
+    chipColor;
+    /**
+     * Show chip with outline style
+     */
+    outline = false;
+    /**
+     * Display a tooltip. By default, no tooltip will be displayed.
+     * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+     *
+     * @since 3.0.0
+     */
+    tooltipText = false;
+    /**
+     * Center the content of the chip.
+     * Set to false to disable centering.
+     * @since 3.2.0
+     */
+    centerContent = false;
+    /**
+     * ARIA label for the close button
+     * Will be set as aria-label on the nested HTML button element
+     */
+    ariaLabelCloseButton = 'Close chip';
+    /**
+     * Fire event if close button is clicked
+     */
+    closeChip;
+    containerElementRef = makeRef();
+    getIgnoredAriaAttributes() {
+        return ['role'];
+    }
+    componentWillLoad() {
+        super.componentWillLoad();
     }
     getTooltip() {
-        var _a;
         if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {
             return null;
         }
         const text = typeof this.tooltipText === 'string' && this.tooltipText.trim()
             ? this.tooltipText
-            : (_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim();
-        return (h("ix-tooltip", { for: this.containerElementRef.waitForCurrent() }, text));
+            : this.hostElement.textContent?.trim();
+        return (h("ix-tooltip", { for: this.containerElementRef.waitForCurrent(), "aria-label": text || undefined }, text));
     }
-    render() {
-        let customStyle = {};
-        if (this.variant === 'custom') {
-            customStyle = {
-                color: this.chipColor,
-                [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
-            };
+    getCustomStyles(variant) {
+        const wrap = {};
+        const main = {};
+        if (variant !== 'custom') {
+            return { wrap, main };
         }
-        return (h(Host, { key: 'a96f0d68cb019de562e3f4c491af7c746c10261c', tabIndex: "-1", class: {
-                inactive: this.inactive,
-            }, style: this.variant === 'custom'
-                ? {
-                    '--ix-icon-button-color': this.chipColor,
-                }
-                : {} }, h("div", { key: 'bc4e70fbd0c757d05e35ceeeb8a938695de1ec6e', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
-                container: true,
-                outline: this.outline,
+        main.color = this.chipColor;
+        if (this.chipColor) {
+            wrap.color = this.chipColor;
+        }
+        if (this.outline && this.background) {
+            wrap.borderColor = this.background;
+        }
+        else if (!this.outline && this.background) {
+            main.backgroundColor = this.background;
+        }
+        return { wrap, main };
+    }
+    getIconStyle(variant) {
+        if (variant !== 'custom') {
+            return undefined;
+        }
+        return { color: this.outline ? this.background : this.chipColor };
+    }
+    getHostRole(needsGroupRole) {
+        if (this.hostElement.hasAttribute('role')) {
+            return this.hostElement.getAttribute('role') ?? undefined;
+        }
+        return needsGroupRole ? 'group' : undefined;
+    }
+    render() {
+        const variant = CHIP_VARIANTS.includes(this.variant)
+            ? this.variant
+            : 'primary';
+        const { wrap: customWrapStyle, main: customMainStyle } = this.getCustomStyles(variant);
+        const showClose = !this.inactive && this.closable;
+        const wrapClasses = {
+            'chip-wrap': true,
+            outline: this.outline,
+            inactive: this.inactive,
+            alarm: variant === 'alarm',
+            critical: variant === 'critical',
+            info: variant === 'info',
+            neutral: variant === 'neutral',
+            primary: variant === 'primary',
+            success: variant === 'success',
+            warning: variant === 'warning',
+            custom: variant === 'custom',
+            closable: this.closable,
+            icon: !!this.icon,
+            centerContent: this.centerContent,
+        };
+        const iconIsDecorative = !this.ariaLabelIcon?.trim();
+        const hasAccessibleName = !!this.inheritAriaAttributes['aria-label']?.trim() ||
+            !!this.inheritAriaAttributes['aria-labelledby']?.trim();
+        const hasTooltip = !!this.tooltipText || this.hostElement.hasAttribute('tooltip-text');
+        const needsGroupRole = hasAccessibleName && (showClose || hasTooltip);
+        return (h(Host, { key: '9f724c90d7b7b50436fd53dac1c9e473b568f8f6', role: this.getHostRole(needsGroupRole), class: {
                 inactive: this.inactive,
-                alarm: this.variant === 'alarm',
-                critical: this.variant === 'critical',
-                info: this.variant === 'info',
-                neutral: this.variant === 'neutral',
-                primary: this.variant === 'primary',
-                success: this.variant === 'success',
-                warning: this.variant === 'warning',
-                custom: this.variant === 'custom',
-                closable: this.closable,
-                icon: !!this.icon,
-                centerContent: this.centerContent,
-            } }, h("div", { key: '88e3b421d1128a4199e32d1c514b36cee2056ba4', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '5730c161e18c55c517fd171bb73d3dcf9136cfb2', class: {
+            } }, h("div", { key: '5fe02566c2d6b0a5ef6c6bc5c75aa8a1c9eae41c', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: '9fe4c5a27535af0dc8bff42cc2d4e7277e91e7bd', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: 'fa78760c9912d9642d95b60e401f599de00bc26c', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '34307f0a33c01af655f4d37498a6fc98dfc499c5', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '24', style: this.variant === 'custom'
-                ? { color: this.outline ? this.background : this.chipColor }
-                : undefined })), h("span", { key: 'e918f71979002937e1a532658b02c004dec79ed1', class: "slot-container" }, h("slot", { key: '72e33beeaecb069b2221fd994b7ce93a9ab09501' }))), this.inactive === false && this.closable && this.getCloseButton()), this.getTooltip()));
+            }, name: this.icon, size: '24', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) })), h("span", { key: 'c2093240153933547f8c1e6e5cbe80d664c5aafa', class: "slot-container" }, h("slot", { key: 'c08bf6660d91b77e9d640583a9e2eb5cc4de7365' })))), showClose && (h("button", { key: '233aaa96d9650b9b357b7bae028f9baafd312517', type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
+                this.closeChip.emit(event);
+                event.stopPropagation();
+            } }, h("ix-icon", { key: 'f095e50123273af0a21f3321e6b81358f1cfe8b3', class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" })))), this.getTooltip()));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -117,15 +179,22 @@ export class Chip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom'",
+                    "original": "ChipVariant",
                     "resolved": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
-                    "references": {}
+                    "references": {
+                        "ChipVariant": {
+                            "location": "import",
+                            "path": "./chip.types",
+                            "id": "src/components/chip/chip.types.ts::ChipVariant",
+                            "referenceLocation": "ChipVariant"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Chip variant"
+                    "text": "Chip variant.\nDefaults to `primary`. When unset or set to an unknown value the chip falls back to `primary` styling."
                 },
                 "getter": false,
                 "setter": false,
@@ -192,6 +261,28 @@ export class Chip {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "ariaLabelIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Accessible name for the leading icon.\nWhen unset, the icon is treated as decorative (hidden from assistive tech) when the default slot supplies a visible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-icon"
+            },
             "background": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/chip/chip.types.js

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+export const CHIP_VARIANTS = [
+    'primary',
+    'alarm',
+    'critical',
+    'warning',
+    'info',
+    'neutral',
+    'success',
+    'custom',
+];

package/dist/collection/components/col/col.js

@@ -9,6 +9,23 @@
 import { forceUpdate, h, Host } from "@stencil/core";
 import { matchBreakpoint } from "../utils/breakpoints";
 export class Col {
+    static Breakpoints = ['', 'sm', 'md', 'lg'];
+    /**
+     * Size of the column
+     */
+    size;
+    /**
+     * Size of the column for sm screens
+     */
+    sizeSm;
+    /**
+     * Size of the column for md screens
+     */
+    sizeMd;
+    /**
+     * Size of the column for lg screens
+     */
+    sizeLg;
     onResize() {
         forceUpdate(this);
     }
@@ -60,7 +77,9 @@ export class Col {
         };
     }
     render() {
-        return (h(Host, { key: '552bf87dd4905b2cfc67dbda7c33e1edf89a9cf8', style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: '293331e4b2de069f550f0d47e1525228e49fc159' })));
+        return (h(Host, { key: '8f9bb67a9721a22dab39e140b0e180a868839416', style: {
+                ...this.getColumnSizeStyling(),
+            } }, h("slot", { key: '2d34daa2051b168c8b4dd61233d80195be90f3d5' })));
     }
     static get is() { return "ix-col"; }
     static get encapsulation() { return "shadow"; }
@@ -192,4 +211,3 @@ export class Col {
             }];
     }
 }
-Col.Breakpoints = ['', 'sm', 'md', 'lg'];

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

@@ -26,7 +26,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding: 1.5rem 2rem 0.25rem 2rem;
+  padding: 0.75rem 2rem 0.25rem 2rem;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -84,5 +84,5 @@
   position: relative;
 }
 :host .content-header.slotted {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }

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

@@ -12,19 +12,18 @@ import { hasSlottedElements } from "../utils/shadow-dom";
  * @slot header - Display content at the top of the content page
  */
 export class Content {
-    constructor() {
-        this.isContentHeaderSlotted = false;
-    }
+    hostElement;
+    isContentHeaderSlotted = false;
     get contentHeaderSlot() {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '2ca4af3b088beab36b86cb3431f1d1b59fcf8756' }, h("div", { key: '04f73ba733dc7fbf57ecf6fdc0afc1fec8249b8e', class: {
+        return (h(Host, { key: '2cb8428708f3a1e815704254035676f742cd6f30' }, h("div", { key: '4e275d8af38da243e29b46bb8e5dcc9e9d23b1da', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '962e83643e1ebcd86384cae1e7a3632b6f47554e', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '3e4a6609305c444deaacbf29a60514f300f65301', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '4315ac1e71743ba30c7b8f592997c662eed392b4', class: "content" }, h("slot", { key: 'c1f31f8e283bcc55011b9f2d5746d9b7c10988da' }))));
+            } })), h("div", { key: '893989653b3beaf7bc406e7870db8d8f7d0deba4', class: "content" }, h("slot", { key: '25b54aafbde16ab4d87a0cdbc4a8222dabacb226' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,28 +13,34 @@ import { h, Host } from "@stencil/core";
  * @slot - Default slot for action buttons or other content
  */
 export class ContentHeader {
-    constructor() {
-        /**
-         * Variant of content header
-         */
-        this.variant = 'primary';
-        /**
-         * Subtitle of Header
-         */
-        this.headerSubtitle = undefined;
-        /**
-         * Display a back button
-         */
-        this.hasBackButton = false;
-    }
+    /**
+     * Variant of content header
+     */
+    variant = 'primary';
+    /**
+     * Title of Header
+     */
+    headerTitle;
+    /**
+     * Subtitle of Header
+     */
+    headerSubtitle = undefined;
+    /**
+     * Display a back button
+     */
+    hasBackButton = false;
+    /**
+     * Triggered when back button is clicked
+     */
+    backButtonClick;
     render() {
-        return (h(Host, { key: 'b422be3706aac399ed76b4c491d61e2da8561b24' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '7606ba97f834f591a78fc2cca74bdaf3b3a09feb', class: "titleGroup" }, h("div", { key: 'df174e297a1b2075bcab0182a80f626162d1c319', class: "headerTitleRow" }, h("ix-typography", { key: 'd8ab10dc801306dafe0f3e6e39ed93e0fa162ca1', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
+        return (h(Host, { key: 'a81bf466bf10e9e7a0794253b246c340a9b92999' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '7b81cb2b7c5d48fdd75b631e9ef2b5da9224f455', class: "titleGroup" }, h("div", { key: '59d28222f4bbfd83a94490f10bb67b944e44c79f', class: "headerTitleRow" }, h("ix-typography", { key: 'f6b3985a6b8e2420e4d63a7032b1ff1f12f93679', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
                 secondary: this.variant === 'secondary',
                 titleOverflow: true,
-            } }, this.headerTitle), h("div", { key: 'e24d6b450426931aaead3732fa20161bc5aab4e2', class: "headerSlot" }, h("slot", { key: 'e9a471492f2693fc6abe546d1febbc06834fef1c', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '5fdb5ebce68a3aae09df3299093bca156468933c', format: 'h6', "text-color": 'soft', class: {
+            } }, this.headerTitle), h("div", { key: '9b1a9f865955f4b02a23a528d61e54959a8992d1', class: "headerSlot" }, h("slot", { key: '8d7d21906e9042de89123de9489b2cd8d8db25b5', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '2b29f3ebde503fa328c10bad48ba5b98455d8a31', format: 'h6', "text-color": 'soft', class: {
                 subtitle: this.variant === 'secondary',
                 titleOverflow: true,
-            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '6648f93246d2e8d79cc2d3e7eae65009d578632c', class: "buttons" }, h("slot", { key: '1c3ee8084521a9a799e3b2444b1edc0c1cee5066' }))));
+            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '0a558d5e3c40ab3e5ebd77c1ff8e0e316e263658', class: "buttons" }, h("slot", { key: 'f54687cd38db7f152f3495beec362f0dc82e2bef' }))));
     }
     static get is() { return "ix-content-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid-item.js

@@ -11,10 +11,14 @@ import { h, Host } from "@stencil/core";
  * @internal
  */
 export class CssGridItem {
+    /**
+     * Grid item name
+     */
+    itemName;
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '0f7a1001629ec09b7e6f44470b733f3d1d691bcb', style: style }, h("slot", { key: '1fce4a329cea68181bc52e60d155d6c6b7bb41bc' })));
+        return (h(Host, { key: 'af7e2134d1e6a448e96a0a414c3766f51088fb54', style: style }, h("slot", { key: 'a20d56f4601d818ff1d2e7cad497a0facd09c44e' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid.js

@@ -20,10 +20,13 @@ const mediaQueryCollection = [
  * @internal
  */
 export class CssGrid {
-    constructor() {
-        this.disposeMediaQueryListener = [];
-        this.mediaQueries = [];
-    }
+    /**
+     * Define css grid template
+     */
+    templates;
+    currentTemplate;
+    disposeMediaQueryListener = [];
+    mediaQueries = [];
     componentWillRender() {
         this.mediaQueries = mediaQueryCollection.map((query) => {
             const mediaQuery = window.matchMedia(query.query);
@@ -32,7 +35,10 @@ export class CssGrid {
             };
             this.disposeMediaQueryListener.push(callback);
             mediaQuery.addEventListener('change', callback);
-            return Object.assign(Object.assign({}, query), { mediaQuery });
+            return {
+                ...query,
+                mediaQuery,
+            };
         });
         this.applyTemplate();
     }
@@ -73,7 +79,7 @@ export class CssGrid {
         if (this.currentTemplate && this.currentTemplate.length !== 0) {
             style['grid-template-areas'] = templateBuilder(this.currentTemplate);
         }
-        return (h(Host, { key: '470c3da8301e7d99e603b78cfd9c2883e4801c76', style: style }, h("slot", { key: '64f7e86981ba37aeb20223bd672bc1190dba4619' })));
+        return (h(Host, { key: '491581fede3e8163cdf43cca11f597b98c5bfe32', style: style }, h("slot", { key: 'ddd975c6bfea2c4abfc3b69d8d0d895a69823756' })));
     }
     static get is() { return "ix-css-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,16 +19,43 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Host, h } from "@stencil/core";
 import { HookValidationLifecycle, } from "../utils/input";
 export class CustomField {
-    constructor() {
-        /**
-         * A value is required or must be checked for the form to be submittable
-         */
-        this.required = false;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-    }
+    hostElement;
+    /**
+     * A value is required or must be checked for the form to be submittable
+     */
+    required = false;
+    /**
+     * Label for the field component
+     */
+    label;
+    /**
+     * Show text below the field component which show additional information
+     */
+    helperText;
+    /**
+     * Info text for the field component
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     */
+    warningText;
+    /**
+     * Error text for the field component
+     */
+    invalidText;
+    /**
+     * Valid text for the field component
+     */
+    validText;
+    /**
+     * Show helper, info, warning, error and valid text as tooltip
+     */
+    showTextAsTooltip;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
     updateValidationState({ isInvalid, isValid, isInfo, isWarning, }) {
         this.isInvalid = isInvalid;
         this.isValid = isValid;
@@ -36,7 +63,7 @@ export class CustomField {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: '732dae3e5ba3f37b5eac745ce48338cae5397d9e' }, h("ix-field-wrapper", { key: '5df555252c2de619f3dd5daa082632695a88e3f6', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '81d169fce11d76b04876eb3483909bf163c44370' }))));
+        return (h(Host, { key: '4194f7081c66e42f9376cf0c8004a705bc053f0b' }, h("ix-field-wrapper", { key: '55a70e2a6500a6945f819004c9b910d7d7decd2b', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '8a54f90dc2db37f9a21f2c52f7b4721dbb7acc67' }))));
     }
     static get is() { return "ix-custom-field"; }
     static get encapsulation() { return "shadow"; }