@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/input/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/input/textarea.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 {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n} from '@stencil/core';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { TextareaElement } from './input.fc';\nimport { mapValidationResult, onInputBlur } from './input.util';\n\nexport type TextareaResizeBehavior =\n  | 'both'\n  | 'horizontal'\n  | 'vertical'\n  | 'none';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxTextareaElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The name of the textarea field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the textarea field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the textarea field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Determines if the textarea field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Determines if the textarea field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Determines if the textarea field is readonly.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The helper text for the textarea field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the textarea field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Determines if the text should be displayed as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the textarea field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the textarea field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the textarea field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the textarea field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The height of the textarea field (e.g. \"52px\").\n   */\n  @Prop() textareaHeight?: string;\n\n  /**\n   * The width of the textarea field (e.g. \"200px\").\n   */\n  @Prop() textareaWidth?: string;\n\n  /**\n   * The height of the textarea specified by number of rows.\n   */\n  @Prop() textareaRows?: number;\n\n  /**\n   * The width of the textarea specified by number of characters.\n   */\n  @Prop() textareaCols?: number;\n\n  /**\n   * Determines the resize behavior of the textarea field.\n   * Resizing can be enabled in one direction, both directions or completely disabled.\n   */\n  @Prop() resizeBehavior: TextareaResizeBehavior = 'both';\n\n  /**\n   * The maximum length of the textarea field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the textarea field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * Event emitted when the value of the textarea field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the textarea field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the textarea field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  private readonly textAreaRef = makeRef<HTMLTextAreaElement>();\n  private touched = false;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Get the native textarea element.\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLTextAreaElement> {\n    return this.textAreaRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Check if the textarea field has been touched.\n   * @internal\n   * */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.textAreaRef}\n        >\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography\n              class=\"bottom-text\"\n              slot=\"bottom-right\"\n              textColor=\"soft\"\n            >\n              {this.value.length}/{this.maxLength}\n            </ix-typography>\n          )}\n          <div class=\"input-wrapper\">\n            <TextareaElement\n              minLength={this.minLength}\n              maxLength={this.maxLength}\n              textareaCols={this.textareaCols}\n              textareaRows={this.textareaRows}\n              textareaHeight={this.textareaHeight}\n              textareaWidth={this.textareaWidth}\n              resizeBehavior={this.resizeBehavior}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              textAreaRef={this.textAreaRef}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => {\n                onInputBlur(this, this.textAreaRef.current);\n                this.touched = true;\n              }}\n            ></TextareaElement>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-group/input-group.css

@@ -0,0 +1,107 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+/*
+ * 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 {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+: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 ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+: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 ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .group {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  height: 100%;
+}
+:host .group-start {
+  left: 0px;
+  height: 2rem;
+  margin-left: 0.5rem;
+  color: var(--theme-color-soft-text);
+}
+:host .group-end {
+  right: 0px;
+  height: 2rem;
+  margin-right: 0.5rem;
+  color: var(--theme-color-soft-text);
+}
+:host ::slotted(*) {
+  display: flex;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .group-start ::slotted(*),
+:host(.disabled) .group-end ::slotted(*) {
+  opacity: 0.4 !important;
+}

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

@@ -0,0 +1,152 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { getSlottedElements } from "../utils/shadow-dom";
+/**
+ * @deprecated since 3.0.0. Will be removed with 4.0.0.
+ * Use the 'ix-input' component instead
+ */
+export class InputGroup {
+    constructor() {
+        this.disabled = false;
+        this.inputPaddingLeft = 0;
+        this.inputPaddingRight = 0;
+    }
+    get inputElement() {
+        return this.hostElement.querySelector('input');
+    }
+    componentWillLoad() {
+        var _a;
+        const { valid } = this.inputElement.validity;
+        this.inputElement.addEventListener('valid', () => {
+            this.onValidInput();
+        });
+        this.inputElement.addEventListener('invalid', () => {
+            this.onInvalidInput();
+        });
+        this.inputElement.addEventListener('input', () => {
+            this.startSlotChanged();
+        });
+        (_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', () => {
+            this.startSlotChanged();
+        });
+        valid ? this.onValidInput() : this.onInvalidInput();
+        this.observer = new MutationObserver(() => {
+            this.slotChanged();
+            this.startSlotChanged();
+            this.endSlotChanged();
+        });
+        this.observer.observe(this.hostElement, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        this.prepareInputElement();
+    }
+    onValidInput() {
+        this.startSlotChanged();
+    }
+    onInvalidInput() {
+        this.startSlotChanged();
+    }
+    prepareInputElement() {
+        if (this.inputElement) {
+            this.inputElement.style.width = '100%';
+            if (this.inputPaddingRight !== 0) {
+                this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
+            }
+            else {
+                this.inputElement.style.paddingRight = '0.5rem';
+            }
+            if (this.inputPaddingLeft !== 0) {
+                this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
+            }
+            else {
+                this.inputElement.style.paddingLeft = '0.5rem';
+            }
+        }
+        else {
+            console.warn('You used the ix-input-group without an input tag, e.g. <input class="ix-form-control" />');
+        }
+    }
+    slotChanged() {
+        var _a;
+        this.disabled = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.disabled;
+    }
+    startSlotChanged() {
+        setTimeout(() => {
+            var _a, _b;
+            const startPadding = this.getChildrenWidth(this.startSlotRef);
+            if (startPadding !== 0) {
+                this.inputPaddingLeft = 11 + startPadding;
+            }
+            else {
+                this.inputPaddingLeft = 0;
+            }
+            if (!this.inputElement) {
+                return;
+            }
+            const isInputInvalid = !this.inputElement.validity.valid ||
+                this.inputElement.classList.contains('is-invalid');
+            const formWasValidated = ((_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.classList.contains('was-validated')) ||
+                ((_b = this.inputElement.form) === null || _b === void 0 ? void 0 : _b.noValidate) === false;
+            if (formWasValidated && isInputInvalid) {
+                const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
+                this.inputElement.style.backgroundPosition = `left ${left}px center`;
+                this.inputPaddingLeft += 26;
+            }
+        });
+    }
+    endSlotChanged() {
+        setTimeout(() => {
+            this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);
+        });
+    }
+    getChildrenWidth(slotElement) {
+        if (!slotElement) {
+            return 0;
+        }
+        const endElements = getSlottedElements(slotElement);
+        if (endElements.length === 0) {
+            return 0;
+        }
+        let width = 0;
+        endElements.forEach((element) => {
+            width += element.getBoundingClientRect().width;
+        });
+        return width;
+    }
+    render() {
+        return (h(Host, { key: 'f911a9b30ed5788e3a2e81da5d935ccdc2bbfbbd', class: { disabled: this.disabled } }, h("div", { key: '65d7c4134a794f46c89d7a8a55140ac515a9d27b', class: "group group-start" }, h("slot", { key: '39bdf4ec556d693e34862bd058a4dfa25f93c82c', ref: (el) => (this.startSlotRef = el), name: "input-start" })), h("slot", { key: '88a1331fdda64f4981cad520f93027740284ce4d' }), h("div", { key: '7b6b3c4b1c365b3bcf0a60715c678fe973c17483', class: "group group-end" }, h("slot", { key: 'a8f4717abc967a4a7fcebd261937ee3533ae344a', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+    }
+    static get is() { return "ix-input-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-group.css"]
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {},
+            "inputPaddingLeft": {},
+            "inputPaddingRight": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=input-group.js.map

package/dist/collection/components/input-group/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @deprecated since 3.0.0. Will be removed with 4.0.0.\n * Use the 'ix-input' component instead\n */\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  startSlotRef?: HTMLElement;\n  endSlotRef?: HTMLElement;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element | undefined) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot\n            ref={(el) => (this.startSlotRef = el as HTMLElement)}\n            name=\"input-start\"\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            ref={(el) => (this.endSlotRef = el as HTMLElement)}\n            name=\"input-end\"\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-group/tests/input-group.ct.js

@@ -0,0 +1,161 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 thi  s source tree.
+ */
+import { expect } from "@playwright/test";
+import { iconEye } from "@siemens/ix-icons/icons";
+import { regressionTest } from "../../../tests/utils/test/index";
+regressionTest('renders', async ({ mount, page }) => {
+    await mount(`
+    <ix-input-group>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+    const group = page.locator('ix-input-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const input = group.locator('input');
+    await expect(input).toHaveCSS('padding-left', '8px');
+    await expect(input).toHaveCSS('padding-right', '15px');
+});
+regressionTest('initial padding start', async ({ mount, page }) => {
+    await mount(`
+    <ix-input-group>
+      <span slot="input-start">
+        <ix-icon name="eye" size="16"></ix-icon>
+      </span>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `, {
+        icons: { iconEye },
+    });
+    const group = page.locator('ix-input-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const input = group.locator('input');
+    await expect(input).toHaveCSS('padding-left', '27px');
+    await expect(input).toHaveCSS('padding-right', '15px');
+});
+regressionTest('initial padding end', async ({ mount, page }) => {
+    await mount(`
+    <ix-input-group>
+      <span slot="input-start">
+          <ix-icon name="eye" size="16"></ix-icon>
+        </span>
+        <span slot="input-end">
+        <ix-icon name="eye" size="16"></ix-icon>
+      </span>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `, {
+        icons: { iconEye },
+    });
+    const group = page.locator('ix-input-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const input = group.locator('input');
+    await expect(input).toHaveCSS('padding-left', '27px');
+    await expect(input).toHaveCSS('padding-right', '31px');
+});
+regressionTest('update padding end', async ({ mount, page }) => {
+    await mount(`
+    <ix-input-group>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+    const group = page.locator('ix-input-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const input = group.locator('input');
+    await expect(input).toHaveCSS('padding-left', '8px');
+    await expect(input).toHaveCSS('padding-right', '15px');
+    await group.evaluate((group) => {
+        const startElement = document.createElement('DIV');
+        startElement.style.height = '1px';
+        startElement.style.width = '40px';
+        startElement.slot = 'input-start';
+        group.appendChild(startElement);
+    });
+    await expect(input).toHaveCSS('padding-left', '51px');
+    await expect(input).toHaveCSS('padding-right', '15px');
+    await group.evaluate((group) => {
+        const endElement = document.createElement('DIV');
+        endElement.style.height = '1px';
+        endElement.style.width = '50px';
+        endElement.slot = 'input-end';
+        group.appendChild(endElement);
+    });
+    await expect(input).toHaveCSS('padding-left', '51px');
+    await expect(input).toHaveCSS('padding-right', '65px');
+});
+regressionTest('validation padding', async ({ mount, page }) => {
+    await mount(`
+    <form class="needs-validation" noValidation>
+      <ix-input-group>
+        <input type="text" required />
+      </ix-input-group>
+
+      <ix-button type="submit">Submit</ix-button>
+    </form>
+  `);
+    const form = page.locator('form');
+    await form.evaluate((form) => form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        form.classList.add('was-validated');
+    }));
+    const group = page.locator('ix-input-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const input = group.locator('input');
+    const button = page.locator('ix-button');
+    await button.click();
+    await expect(input).toHaveCSS('background-position-x', '7px');
+});
+regressionTest('validation padding with input-start slot', async ({ mount, page }) => {
+    await mount(`
+    <form class="needs-validation" noValidation>
+      <ix-input-group>
+        <ix-icon name="eye" size="12" slot="input-start"></ix-icon>
+        <input type="text" required />
+      </ix-input-group>
+
+      <ix-button type="submit">Submit</ix-button>
+    </form>
+  `, {
+        icons: { iconEye },
+    });
+    const form = page.locator('form');
+    await form.evaluate((form) => form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        form.classList.add('was-validated');
+    }));
+    const group = page.locator('ix-input-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const input = group.locator('input');
+    const button = page.locator('ix-button');
+    await button.click();
+    await expect(input).toHaveCSS('background-position-x', '23px');
+    await expect(input).toHaveCSS('padding-left', '49px');
+});
+regressionTest('validation with class padding with input-start slot', async ({ mount, page }) => {
+    await mount(`
+    <form class="needs-validation" noValidation>
+      <ix-input-group>
+        <ix-icon name="eye" size="12" slot="input-start"></ix-icon>
+        <input type="text" class="is-invalid" />
+      </ix-input-group>
+    </form>
+  `, {
+        icons: { iconEye },
+    });
+    const form = page.locator('form');
+    await form.evaluate((form) => form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        form.classList.add('was-validated');
+    }));
+    const group = page.locator('ix-input-group');
+    await expect(group).toHaveClass(/hydrated/);
+    const input = group.locator('input');
+    await expect(input).toHaveCSS('background-position-x', '23px');
+    await expect(input).toHaveCSS('padding-left', '49px');
+});
+//# sourceMappingURL=input-group.ct.js.map

package/dist/collection/components/input-group/tests/input-group.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.ct.js","sourceRoot":"","sources":["../../../../src/components/input-group/tests/input-group.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,MAAM,KAAK,CAAC;;;;GAIX,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IACrD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,uBAAuB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAChE,MAAM,KAAK,CACT;;;;;;;GAOD,EACC;QACE,KAAK,EAAE,EAAE,OAAO,EAAE;KACnB,CACF,CAAC;IAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,qBAAqB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9D,MAAM,KAAK,CACT;;;;;;;;;;GAUD,EACC;QACE,KAAK,EAAE,EAAE,OAAO,EAAE;KACnB,CACF,CAAC;IAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,oBAAoB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7D,MAAM,KAAK,CAAC;;;;GAIX,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IACrD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAEvD,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAkB,EAAE,EAAE;QAC1C,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnD,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;QAClC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAClC,YAAY,CAAC,IAAI,GAAG,aAAa,CAAC;QAClC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAEvD,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAkB,EAAE,EAAE;QAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;QAChC,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAChC,UAAU,CAAC,IAAI,GAAG,WAAW,CAAC;QAC9B,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACtD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,oBAAoB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7D,MAAM,KAAK,CAAC;;;;;;;;GAQX,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC,CAAC,CACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;AAChE,CAAC,CAAC,CAAC;AAEH,cAAc,CACZ,0CAA0C,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxB,MAAM,KAAK,CACT;;;;;;;;;GASH,EACG;QACE,KAAK,EAAE,EAAE,OAAO,EAAE;KACnB,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC,CAAC,CACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;IAC/D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACxD,CAAC,CACF,CAAC;AAEF,cAAc,CACZ,qDAAqD,EACrD,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxB,MAAM,KAAK,CACT;;;;;;;GAOH,EACG;QACE,KAAK,EAAE,EAAE,OAAO,EAAE;KACnB,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC,CAAC,CACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAErC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;IAC/D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACxD,CAAC,CACF,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 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 thi  s source tree.\n */\nimport { expect } from '@playwright/test';\nimport { iconEye } from '@siemens/ix-icons/icons';\nimport { regressionTest } from '@utils/test';\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\nregressionTest('initial padding start', async ({ mount, page }) => {\n  await mount(\n    `\n    <ix-input-group>\n      <span slot=\"input-start\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `,\n    {\n      icons: { iconEye },\n    }\n  );\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '27px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n});\n\nregressionTest('initial padding end', async ({ mount, page }) => {\n  await mount(\n    `\n    <ix-input-group>\n      <span slot=\"input-start\">\n          <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n        </span>\n        <span slot=\"input-end\">\n        <ix-icon name=\"eye\" size=\"16\"></ix-icon>\n      </span>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `,\n    {\n      icons: { iconEye },\n    }\n  );\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '27px');\n  await expect(input).toHaveCSS('padding-right', '31px');\n});\n\nregressionTest('update padding end', async ({ mount, page }) => {\n  await mount(`\n    <ix-input-group>\n      <input class=\"parameter-value\" type=\"text\" value=\"Some initial value\" />\n    </ix-input-group>\n  `);\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  await expect(input).toHaveCSS('padding-left', '8px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const startElement = document.createElement('DIV');\n    startElement.style.height = '1px';\n    startElement.style.width = '40px';\n    startElement.slot = 'input-start';\n    group.appendChild(startElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '51px');\n  await expect(input).toHaveCSS('padding-right', '15px');\n\n  await group.evaluate((group: HTMLElement) => {\n    const endElement = document.createElement('DIV');\n    endElement.style.height = '1px';\n    endElement.style.width = '50px';\n    endElement.slot = 'input-end';\n    group.appendChild(endElement);\n  });\n\n  await expect(input).toHaveCSS('padding-left', '51px');\n  await expect(input).toHaveCSS('padding-right', '65px');\n});\n\nregressionTest('validation padding', async ({ mount, page }) => {\n  await mount(`\n    <form class=\"needs-validation\" noValidation>\n      <ix-input-group>\n        <input type=\"text\" required />\n      </ix-input-group>\n\n      <ix-button type=\"submit\">Submit</ix-button>\n    </form>\n  `);\n\n  const form = page.locator('form');\n  await form.evaluate((form) =>\n    form.addEventListener('submit', (e) => {\n      e.preventDefault();\n      form.classList.add('was-validated');\n    })\n  );\n\n  const group = page.locator('ix-input-group');\n  await expect(group).toHaveClass(/hydrated/);\n\n  const input = group.locator('input');\n  const button = page.locator('ix-button');\n\n  await button.click();\n\n  await expect(input).toHaveCSS('background-position-x', '7px');\n});\n\nregressionTest(\n  'validation padding with input-start slot',\n  async ({ mount, page }) => {\n    await mount(\n      `\n    <form class=\"needs-validation\" noValidation>\n      <ix-input-group>\n        <ix-icon name=\"eye\" size=\"12\" slot=\"input-start\"></ix-icon>\n        <input type=\"text\" required />\n      </ix-input-group>\n\n      <ix-button type=\"submit\">Submit</ix-button>\n    </form>\n  `,\n      {\n        icons: { iconEye },\n      }\n    );\n\n    const form = page.locator('form');\n    await form.evaluate((form) =>\n      form.addEventListener('submit', (e) => {\n        e.preventDefault();\n        form.classList.add('was-validated');\n      })\n    );\n\n    const group = page.locator('ix-input-group');\n    await expect(group).toHaveClass(/hydrated/);\n\n    const input = group.locator('input');\n    const button = page.locator('ix-button');\n\n    await button.click();\n\n    await expect(input).toHaveCSS('background-position-x', '23px');\n    await expect(input).toHaveCSS('padding-left', '49px');\n  }\n);\n\nregressionTest(\n  'validation with class padding with input-start slot',\n  async ({ mount, page }) => {\n    await mount(\n      `\n    <form class=\"needs-validation\" noValidation>\n      <ix-input-group>\n        <ix-icon name=\"eye\" size=\"12\" slot=\"input-start\"></ix-icon>\n        <input type=\"text\" class=\"is-invalid\" />\n      </ix-input-group>\n    </form>\n  `,\n      {\n        icons: { iconEye },\n      }\n    );\n\n    const form = page.locator('form');\n    await form.evaluate((form) =>\n      form.addEventListener('submit', (e) => {\n        e.preventDefault();\n        form.classList.add('was-validated');\n      })\n    );\n\n    const group = page.locator('ix-input-group');\n    await expect(group).toHaveClass(/hydrated/);\n\n    const input = group.locator('input');\n\n    await expect(input).toHaveCSS('background-position-x', '23px');\n    await expect(input).toHaveCSS('padding-left', '49px');\n  }\n);\n"]}

package/dist/collection/components/key-value/key-value.css

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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(.keyValue) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+:host(.keyValue) .keyValue__icon {
+  padding: 0.25rem 0;
+}
+:host(.keyValue) .keyValue__content {
+  display: flex;
+  flex-grow: 1;
+  align-items: flex-start;
+}
+:host(.keyValue) .keyValue__content,
+:host(.keyValue) .keyValue__content .content__label,
+:host(.keyValue) .keyValue__content .content__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+:host(.keyValue) .keyValue__content .content__label {
+  color: var(--theme-color-soft-text);
+}
+:host(.keyValue) .keyValue__content .content__value {
+  width: 100%;
+}
+
+:host(.keyValue.keyValue--column) {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--theme-color-soft-bdr);
+}
+:host(.keyValue.keyValue--column) .keyValue__content {
+  flex-direction: column;
+}
+:host(.keyValue.keyValue--column) .keyValue__content .content__label,
+:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue) {
+  padding: 2px 0;
+}
+
+:host(.keyValue.keyValue--row) {
+  padding: 0.25rem 0;
+}
+:host(.keyValue.keyValue--row) .keyValue__content {
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}
+:host(.keyValue.keyValue--row) .keyValue__content .content__label,
+:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue) {
+  padding: 6px 0;
+}
+:host(.keyValue.keyValue--row) .keyValue__content .content__label {
+  min-width: 8rem;
+}