@siemens/ix 2.5.0 → 2.6.0

package/dist/collection/components/expanding-search/expanding-search.js

@@ -52,20 +52,20 @@ export class ExpandingSearch {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'fd70f74b8c961ba043bd2cfe646bf2ab287b7edf', class: {
+        return (h(Host, { key: 'a95e8e89feb4d738194ac5d709ed0e41a06870d0', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: 'afb4150bf7b4847e79723ec9595913eea9facecc', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: 'e8640b3f3362adca9b820190a47a91a66cd634e6', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            } }), h("div", { key: '69c41e59e7d3e780b50a8619049d44044aae699d', class: {
+            } }), h("div", { key: '5cfe2e19c1e9ffc2e061b530aeb8801c3f52b6aa', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: '57daef5e26aa3dc16d9e8043ccfa14d2c4983cf6', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: 'ed0e943c5fc6860a0687f4ea950642146be5623f', class: {
                 'form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/collection/components/field-label/field-label.css

@@ -0,0 +1,14 @@
+/*
+ * 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: inline-block;
+  position: relative;
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+}

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

@@ -0,0 +1,230 @@
+/*
+ * 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.
+ */
+import { Host, h } from "@stencil/core";
+import { createClassMutationObserver, isIxInputFieldComponent, } from "../utils/input";
+import { a11yHostAttributes } from "../utils/a11y";
+import { makeRef } from "../utils/make-ref";
+export class FormFieldLabel {
+    constructor() {
+        this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
+        this.a11yAttributes = {};
+        this.labelRef = makeRef();
+        this.required = undefined;
+        this.htmlFor = undefined;
+        this.controlRef = undefined;
+        this.isInvalid = false;
+    }
+    connectedCallback() {
+        this.registerHtmlForObserver();
+        this.registerControlRefObserver();
+    }
+    disconnectedCallback() {
+        if (this.htmlForObserver) {
+            this.htmlForObserver.disconnect();
+        }
+        if (this.htmlForClassObserver) {
+            this.htmlForClassObserver.destroy();
+        }
+        if (this.controlRefClassObserver) {
+            this.controlRefClassObserver.destroy();
+        }
+    }
+    componentWillRender() {
+        this.checkForInternalState();
+    }
+    componentWillLoad() {
+        this.a11yAttributes = a11yHostAttributes(this.hostElement);
+    }
+    registerHtmlForObserver() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.htmlForObserver) {
+            this.htmlForObserver.disconnect();
+        }
+        if (this.htmlFor) {
+            this.htmlForObserver.observe(window.document, {
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+    async registerControlRefObserver() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.controlRefClassObserver) {
+            this.controlRefClassObserver.destroy();
+        }
+        if (this.controlRef) {
+            const input = await this.controlRef.waitForCurrent();
+            this.controlRefClassObserver = createClassMutationObserver(input, () => this.checkForInvalidState(input));
+        }
+    }
+    registerHtmlForClassObserver(forElement) {
+        if (this.htmlForClassObserver) {
+            this.htmlForClassObserver.destroy();
+        }
+        this.htmlForClassObserver = createClassMutationObserver(forElement, () => this.checkForInvalidState(forElement));
+    }
+    checkForInvalidState(elementToCheck) {
+        this.isInvalid =
+            elementToCheck.classList.contains('is-invalid') ||
+                elementToCheck.classList.contains('ix-invalid');
+    }
+    async checkForInternalState() {
+        if (this.htmlFor) {
+            const forElement = document.getElementById(this.htmlFor);
+            if (forElement) {
+                if (typeof forElement.required === 'boolean') {
+                    this.required = forElement.required;
+                }
+                this.registerHtmlForClassObserver(forElement);
+                this.checkForInvalidState(forElement);
+            }
+        }
+        if (this.controlRef) {
+            const input = await this.controlRef.waitForCurrent();
+            this.required = input.required;
+        }
+    }
+    async focusOnClick() {
+        if (this.htmlFor) {
+            const target = document.getElementById(this.htmlFor);
+            if (target) {
+                let input = null;
+                if (isIxInputFieldComponent(target)) {
+                    input = await target.getNativeInputElement();
+                }
+                else {
+                    input = target;
+                }
+                if (typeof input.focus === 'function') {
+                    input.focus();
+                }
+            }
+        }
+        if (this.controlRef) {
+            (await this.controlRef.waitForCurrent()).focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '3a62067a0af7847c578459a35bcbd56c54f59bf1', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '05aea8c0c5783f8cffb9d3968f1621564203c2ac', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '6285d1624065c691d9beb3a1c4c31268e0a6bde9', color: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: 'cc8185cb40bf055c6f2e29ee09265acc10719657' }), this.required && h("span", { key: 'b8c6191b6a0fd1314afd21d555268417292b1201' }, "\u00A0*")))));
+    }
+    static get is() { return "ix-field-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["field-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["field-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "required": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A value is required or must be checked for the form to be submittable"
+                },
+                "attribute": "required",
+                "reflect": true
+            },
+            "htmlFor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the form element that the label is associated with"
+                },
+                "attribute": "html-for",
+                "reflect": true
+            },
+            "controlRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MakeRef<HTMLElement>",
+                    "resolved": "{ (ref: HTMLElement): void; current: HTMLElement; waitForCurrent(): Promise<HTMLElement>; }",
+                    "references": {
+                        "MakeRef": {
+                            "location": "import",
+                            "path": "../utils/make-ref",
+                            "id": "src/components/utils/make-ref.ts::MakeRef"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                }
+            },
+            "isInvalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "is-invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "htmlFor",
+                "methodName": "registerHtmlForObserver"
+            }, {
+                "propName": "controlRef",
+                "methodName": "registerControlRefObserver"
+            }];
+    }
+}
+//# sourceMappingURL=field-label.js.map

package/dist/collection/components/field-label/field-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-label.js","sourceRoot":"","sources":["../../../src/components/field-label/field-label.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?: MakeRef<HTMLElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            color={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>&nbsp;*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/field-label/tests/field-label.ct.js

@@ -0,0 +1,113 @@
+/*
+ * 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.
+ */
+import { expect } from "@playwright/test";
+import { test } from "../../../tests/utils/test/index";
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-field-label>My Label</ix-field-label>`);
+    const fieldLabelElement = page.locator('ix-field-label');
+    await expect(fieldLabelElement).toHaveClass(/hydrated/);
+    await expect(fieldLabelElement.locator('label').locator('ix-typography')).toHaveClass(/typography-label/);
+    await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText('My Label');
+});
+test('required', async ({ mount, page }) => {
+    await mount(`<ix-field-label required>MyLabel</ix-field-label>`);
+    const labelElement = page.locator('ix-field-label');
+    await expect(labelElement).toHaveText('MyLabel *');
+});
+test('focus native input by label click', async ({ mount, page }) => {
+    await mount(`
+    <ix-field-label html-for="input">MyLabel</ix-field-label>
+    <input data-testid="input" id="input" />
+  `);
+    const labelElement = page.locator('ix-field-label');
+    await labelElement.click();
+    const inputElement = page.getByTestId('input');
+    await expect(inputElement).toBeFocused();
+});
+test.describe('click label', () => {
+    ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach((selector) => {
+        test(`focus ${selector} by external label click`, async ({ mount, page, }) => {
+            await mount(`
+        <ix-field-label html-for="input">MyLabel</ix-field-label>
+        <${selector} id="input"></${selector}>
+      `);
+            const labelElement = page.locator('ix-field-label');
+            await labelElement.click();
+            const component = page.locator(selector);
+            const focusElement = selector !== 'ix-textarea'
+                ? component.locator('input')
+                : component.locator('textarea');
+            await expect(focusElement).toBeFocused();
+        });
+        test(`focus ${selector} by embedded label click`, async ({ mount, page, }) => {
+            await mount(`
+        <${selector} label="MyLabel"></${selector}>
+      `);
+            const component = page.locator(selector);
+            await expect(component).toHaveClass(/hydrated/);
+            const labelElement = component
+                .locator('ix-field-wrapper')
+                .locator('ix-field-label');
+            await labelElement.click();
+            const focusElement = selector !== 'ix-textarea'
+                ? component.locator('input')
+                : component.locator('textarea');
+            await expect(focusElement).toBeFocused();
+        });
+    });
+});
+test('valid color', async ({ mount, page }) => {
+    await mount(`<ix-field-label>LabelValid</ix-field-label>`);
+    const labelElement = page.locator('ix-field-label');
+    await expect(labelElement).not.toHaveAttribute('is-invalid');
+    await expect(labelElement.locator('ix-typography')).toHaveAttribute('style', 'color: var(--theme-color-soft-text);');
+});
+test('invalid color', async ({ mount, page }) => {
+    await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);
+    const labelElement = page.locator('ix-field-label');
+    await expect(labelElement).toHaveAttribute('is-invalid');
+    await expect(labelElement.locator('ix-typography')).toHaveAttribute('style', 'color: var(--theme-color-alarm-text);');
+});
+test('valid color with valid text field', async ({ mount, page }) => {
+    await mount(`
+    <ix-input label="label text">valid field</ix-input>
+  `);
+    const fieldElement = page.locator('ix-input');
+    const labelElement = page.locator('ix-field-label');
+    await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);
+    await expect(labelElement.locator('ix-typography')).toHaveAttribute('style', 'color: var(--theme-color-soft-text);');
+});
+test('invalid color with invalid text field', async ({ mount, page }) => {
+    await mount(`
+    <ix-input label="invalid label text" required>invalid field</ix-input>
+  `);
+    const fieldElement = page.locator('ix-input');
+    const labelElement = page.locator('ix-field-label');
+    await expect(fieldElement).toHaveClass(/ix-invalid--required/);
+    await expect(labelElement.locator('ix-typography')).toHaveAttribute('style', 'color: var(--theme-color-alarm-text);');
+});
+test('valid color with valid textarea field', async ({ mount, page }) => {
+    await mount(`
+    <ix-textarea label="label text">valid field</ix-textarea>
+  `);
+    const fieldElement = page.locator('ix-textarea');
+    const labelElement = page.locator('ix-field-label');
+    await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);
+    await expect(labelElement.locator('ix-typography')).toHaveAttribute('style', 'color: var(--theme-color-soft-text);');
+});
+test('invalid color with invalid textarea field', async ({ mount, page }) => {
+    await mount(`
+    <ix-textarea label="invalid label text" required>valid field</ix-textarea>
+  `);
+    const fieldElement = page.locator('ix-textarea');
+    const labelElement = page.locator('ix-field-label');
+    await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);
+    await expect(labelElement.locator('ix-typography')).toHaveAttribute('style', 'color: var(--theme-color-alarm-text);');
+});
+//# sourceMappingURL=field-label.ct.js.map

package/dist/collection/components/field-label/tests/field-label.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-label.ct.js","sourceRoot":"","sources":["../../../../src/components/field-label/tests/field-label.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-field-label>My Label</ix-field-label>`);\n  const fieldLabelElement = page.locator('ix-field-label');\n  await expect(fieldLabelElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldLabelElement.locator('label').locator('ix-typography')\n  ).toHaveClass(/typography-label/);\n  await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText(\n    'My Label'\n  );\n});\n\ntest('required', async ({ mount, page }) => {\n  await mount(`<ix-field-label required>MyLabel</ix-field-label>`);\n  const labelElement = page.locator('ix-field-label');\n  await expect(labelElement).toHaveText('MyLabel *');\n});\n\ntest('focus native input by label click', async ({ mount, page }) => {\n  await mount(`\n    <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n    <input data-testid=\"input\" id=\"input\" />\n  `);\n  const labelElement = page.locator('ix-field-label');\n  await labelElement.click();\n\n  const inputElement = page.getByTestId('input');\n  await expect(inputElement).toBeFocused();\n});\n\ntest.describe('click label', () => {\n  ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach(\n    (selector) => {\n      test(`focus ${selector} by external label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n        <${selector} id=\"input\"></${selector}>\n      `);\n        const labelElement = page.locator('ix-field-label');\n        await labelElement.click();\n\n        const component = page.locator(selector);\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n        await expect(focusElement).toBeFocused();\n      });\n\n      test(`focus ${selector} by embedded label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <${selector} label=\"MyLabel\"></${selector}>\n      `);\n\n        const component = page.locator(selector);\n        await expect(component).toHaveClass(/hydrated/);\n\n        const labelElement = component\n          .locator('ix-field-wrapper')\n          .locator('ix-field-label');\n\n        await labelElement.click();\n\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n\n        await expect(focusElement).toBeFocused();\n      });\n    }\n  );\n});\n\ntest('valid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label>LabelValid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).not.toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"label text\">valid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"invalid label text\" required>invalid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"label text\">valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"invalid label text\" required>valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n"]}

package/dist/collection/components/field-wrapper/field-wrapper.css

@@ -0,0 +1,62 @@
+/*
+ * 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;
+  position: relative;
+  flex-direction: column;
+}
+:host .slot-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+:host .field-bottom,
+:host .field-top {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  justify-content: space-between;
+  gap: 1rem;
+  width: -moz-min-content;
+  width: min-content;
+  min-width: 100%;
+}
+:host .field-bottom .bottom-right {
+  margin-left: auto;
+  margin-right: 0px;
+}
+:host .bottom-text {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.25rem;
+  margin-right: 0.25rem;
+}
+:host .text-icon {
+  margin: 0.125rem;
+}
+:host .text-icon.invalid {
+  color: var(--theme-helper-icon--color--invalid);
+}
+:host .text-icon.info {
+  color: var(--theme-helper-icon--color--info);
+}
+:host .text-icon.warning {
+  color: var(--theme-helper-icon--color--warning);
+}
+:host .text-icon.valid {
+  color: var(--theme-helper-icon--color--valid);
+}
+:host .bottom-text {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}