@siemens/ix 2.5.0 → 2.6.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.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 { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text 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  @State() inputType = 'text';\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n\n  private readonly inputId = `input-${inputIds++}`;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  componentDidRender() {\n    this.updatePaddings();\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\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   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.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  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.inputId}\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.inputRef as unknown as MakeRef<HTMLElement>}\n        >\n          <div class=\"input-wrapper\">\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n            <InputElement\n              id={this.inputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.inputRef.current)}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <ix-icon-button\n                color=\"color-weak-text\"\n                class={{\n                  'password-eye': true,\n                  'eye-hidden': this.type !== 'password',\n                }}\n                ghost\n                icon={\n                  this.inputType === 'password' ? iconEye : iconEyeCancelled\n                }\n                onClick={() => {\n                  if (this.inputType === 'password') {\n                    this.inputType = 'text';\n                    return;\n                  }\n\n                  this.inputType = 'password';\n                }}\n              ></ix-icon-button>\n            </SlotEnd>\n          </div>\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography class=\"bottom-text\" slot=\"bottom-right\" color=\"soft\">\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input/input.util.js

@@ -0,0 +1,103 @@
+/*
+ * 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 { a11yBoolean } from "../utils/a11y";
+import { shouldSuppressInternalValidation, } from "../utils/input";
+import { convertToRemString } from "../utils/rwd.util";
+import { generateUUID } from "../utils/uuid";
+import { shakeInput } from "./input.animation";
+export function createIdIfNotExists(element, idPrefix = 'input') {
+    return element.hasAttribute('id')
+        ? element.getAttribute('id')
+        : `${idPrefix}-${generateUUID()}`;
+}
+export function mapValidationResult(ref, result) {
+    ref.isInvalid = result.isInvalid || result.isInvalidByRequired;
+    ref.isValid = result.isValid;
+    ref.isInfo = result.isInfo;
+    ref.isWarning = result.isWarning;
+}
+export function checkAllowedKeys(comp, event) {
+    if (comp.allowedCharactersPattern) {
+        const regex = new RegExp(comp.allowedCharactersPattern);
+        if (!regex.test(event.key)) {
+            event.preventDefault();
+            shakeInput(comp.inputRef.current);
+        }
+    }
+}
+export async function checkInternalValidity(comp, input) {
+    const validityState = input.validity;
+    const eventResult = comp.validityStateChange.emit(validityState);
+    if (eventResult.defaultPrevented) {
+        return;
+    }
+    if (!comp.value) {
+        return;
+    }
+    const skipValidation = await shouldSuppressInternalValidation(comp);
+    if (skipValidation) {
+        return;
+    }
+    const { valid } = validityState;
+    comp.hostElement.classList.toggle('ix-invalid', !valid);
+}
+export function onInputBlur(comp, input) {
+    comp.ixBlur.emit();
+    if (!input) {
+        throw new Error('Input element is not available');
+    }
+    checkInternalValidity(comp, input);
+}
+export function applyPaddingEnd(inputElement, width, options) {
+    var _a;
+    if (!inputElement) {
+        return;
+    }
+    const remInPixels = 16;
+    const padding = convertToRemString(width + remInPixels / 2);
+    if (options.slotEnd) {
+        inputElement.style.paddingRight = `calc(${padding} + ${(_a = options.additionalPaddingRight) !== null && _a !== void 0 ? _a : '0rem'})`;
+    }
+    else {
+        inputElement.style.paddingLeft = padding;
+    }
+}
+export function adjustPaddingForStartAndEnd(startElement, endElement, inputElement) {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            if (startElement) {
+                const startBoundingRect = startElement.getBoundingClientRect();
+                if (startBoundingRect) {
+                    applyPaddingEnd(inputElement, startBoundingRect.width, {
+                        slotEnd: false,
+                    });
+                }
+            }
+            if (endElement) {
+                const endBoundingRect = endElement.getBoundingClientRect();
+                if (endBoundingRect) {
+                    applyPaddingEnd(inputElement, endBoundingRect.width, {
+                        slotEnd: true,
+                    });
+                }
+            }
+        });
+    });
+}
+export function getAriaAttributesForInput(component) {
+    const inputAria = {
+        'aria-invalid': `${a11yBoolean(component.isInvalid)}`,
+        'aria-required': `${a11yBoolean(component.required)}`,
+    };
+    if (component.isInvalid && component.invalidText) {
+        inputAria['aria-errormessage'] = component.invalidText;
+    }
+    return inputAria;
+}
+//# sourceMappingURL=input.util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.util.js","sourceRoot":"","sources":["../../../src/components/input/input.util.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 */\n\nimport { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/input';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './input.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'input'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult<T>(\n  ref: IxInputFieldComponent<T>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys<T>(\n  comp: IxInputFieldComponent<T>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity<T>(\n  comp: IxFormComponent<T>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid', !valid);\n}\n\nexport function onInputBlur<T>(\n  comp: IxInputFieldComponent<T>,\n  input?: HTMLInputElement | HTMLTextAreaElement | null\n) {\n  comp.ixBlur.emit();\n\n  if (!input) {\n    throw new Error('Input element is not available');\n  }\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPaddingEnd(\n  inputElement: HTMLElement | null,\n  width: number,\n  options: {\n    slotEnd: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  const remInPixels = 16;\n  const padding = convertToRemString(width + remInPixels / 2);\n\n  if (options.slotEnd) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForStartAndEnd(\n  startElement: HTMLElement | null,\n  endElement: HTMLElement | null,\n  inputElement: HTMLElement | null\n) {\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      if (startElement) {\n        const startBoundingRect = startElement.getBoundingClientRect();\n        if (startBoundingRect) {\n          applyPaddingEnd(inputElement, startBoundingRect.width, {\n            slotEnd: false,\n          });\n        }\n      }\n\n      if (endElement) {\n        const endBoundingRect = endElement.getBoundingClientRect();\n        if (endBoundingRect) {\n          applyPaddingEnd(inputElement, endBoundingRect.width, {\n            slotEnd: true,\n          });\n        }\n      }\n    });\n  });\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n"]}

package/dist/collection/components/{form-field/form-field.css → input/number-input.css}

@@ -1,5 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * 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
  *
@@ -26,6 +34,14 @@
 /* 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.
+ */
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
  *
@@ -59,7 +75,9 @@ input {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -85,11 +103,60 @@ input::-moz-placeholder {
 input::placeholder {
   color: var(--theme-input-hint--color);
 }
-input.hover, input:hover {
+input.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+input.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-input.focus, input:focus {
+input.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), input:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+input.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), input:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -99,6 +166,7 @@ input:-moz-read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 input.read-only, input:read-only {
@@ -106,6 +174,7 @@ input.read-only, input:read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 input.read-only::-moz-placeholder, input:read-only::-moz-placeholder {
@@ -117,18 +186,19 @@ input:-moz-read-only::placeholder {
 input.read-only::placeholder, input:read-only::placeholder {
   color: transparent;
 }
-input:disabled {
+input:disabled, input.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-input:disabled::-moz-placeholder {
+input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
   color: transparent;
 }
-input:disabled::placeholder {
+input:disabled::placeholder, input.disabled::placeholder {
   color: transparent;
 }
 
@@ -142,7 +212,6 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 textarea {
-  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 textarea {
@@ -161,7 +230,9 @@ textarea {
   padding: 0.25rem 0.5rem;
   background-color: var(--theme-input--background);
   color: var(--theme-input--color);
-  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
   text-overflow: ellipsis;
   border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -187,11 +258,60 @@ textarea::-moz-placeholder {
 textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
-textarea.hover, textarea:hover {
+textarea.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  border-color: var(--theme-input--border-color--hover) !important;
+  background-color: var(--theme-input--background--hover);
+}
+textarea.hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea:hover:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-textarea.focus, textarea:focus {
+textarea.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only), textarea:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:-moz-read-only) {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus) !important;
+}
+textarea.focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only), textarea:focus:not(.readonly,
+.read-only,
+.disabled,
+[readonly],
+[disabled],
+:read-only) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -201,6 +321,7 @@ textarea:-moz-read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 textarea.read-only, textarea:read-only {
@@ -208,6 +329,7 @@ textarea.read-only, textarea:read-only {
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly);
 }
 textarea.read-only::-moz-placeholder, textarea:read-only::-moz-placeholder {
@@ -219,18 +341,19 @@ textarea:-moz-read-only::placeholder {
 textarea.read-only::placeholder, textarea:read-only::placeholder {
   color: transparent;
 }
-textarea:disabled {
+textarea:disabled, textarea.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
   border: none;
+  border-radius: 0;
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-textarea:disabled::-moz-placeholder {
+textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
   color: transparent;
 }
-textarea:disabled::placeholder {
+textarea:disabled::placeholder, textarea.disabled::placeholder {
   color: transparent;
 }
 
@@ -291,6 +414,216 @@ form:not(.was-validated) .valid-feedback {
   display: none !important;
 }
 
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),
+input.ix-info:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--info);
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-info:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]) {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,
+input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]) {
+  background-color: var(--theme-input--background--invalid);
+  border-color: var(--theme-input--border-color--invalid) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,
+input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
+}
+
+/*
+ * 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 {
-  display: contents;
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-block;
+  position: relative;
+  width: auto;
+}
+: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 .input-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+:host input {
+  width: 100%;
+  height: 100%;
+}
+:host .start-container,
+:host .end-container {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+:host .start-container {
+  left: 0;
+}
+:host .end-container {
+  right: 0;
+}
+:host .start-container ::slotted(*) {
+  margin-left: 0.5rem;
+}
+:host .start-container ::slotted(ix-icon.size-24),
+:host .start-container ::slotted(ix-icon-button.btn-icon-16) {
+  margin-left: 0.25rem;
+}
+:host .start-container ::slotted(ix-icon-button.btn-icon-32) {
+  margin-left: 0;
+}
+:host .end-container ::slotted(*) {
+  margin-right: 0.5rem;
+}
+:host .end-container ::slotted(ix-icon.size-24),
+:host .end-container ::slotted(ix-icon-button.btn-icon-16) {
+  margin-right: 0.25rem;
+}
+:host .end-container ::slotted(ix-icon-button.btn-icon-32) {
+  margin-right: 0;
+}
+:host .bottom-text {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) input,
+:host(.disabled) textarea {
+  pointer-events: none;
+}
+
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input {
+  border-color: var(--theme-input--border-color--info);
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover {
+  border-color: var(--theme-input--border-color--info--hover) !important;
+}
+:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active {
+  border-color: var(--theme-input--border-color--info--active) !important;
+}
+
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active {
+  border-color: var(--theme-input--border-color--warning--active) !important;
+}
+
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input {
+  background-color: var(--theme-input--background--invalid);
+  border-color: var(--theme-input--border-color--invalid) !important;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover {
+  border-color: var(--theme-input--border-color--invalid--hover) !important;
+}
+:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,
+:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active {
+  border-color: var(--theme-input--border-color--invalid--active) !important;
+}
+
+:host .input-wrapper.show-stepper-buttons input[type=number] {
+  min-width: 6rem;
+}
+:host .number-stepper-container {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin-right: 0.25rem;
+}
+:host .number-stepper-container.container-hidden {
+  display: none;
 }