@siemens/ix 1.4.0-beta.0 → 1.4.0-beta.2

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { Buttons } from "./components/utils/button-variants";
+import { Buttons } from "./components/button/button-variants";
 import { FilterState } from "./components/category-filter/filter-state";
 import { InputState } from "./components/category-filter/input-state";
 import { DateTimeCardCorners } from "./components/date-time-card/date-time-card";
@@ -13,12 +13,14 @@ import { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker
 import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
 import { DateTimeSelectEvent } from "./components/datetime-picker/event";
 import { Placement } from "./components/dropdown/placement";
+import { DropdownTriggerEvent } from "./components/dropdown/dropdown-trigger-event";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { NotificationColor } from "./components/utils/notification-color";
 import { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
 import { ToastConfig, ToastType } from "./components/toast/toast-utils";
 import { TypedEvent } from "./components/utils/typed-event";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
+import { TypographyVariants } from "./components/typography/types";
 import { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
     interface IxAnimatedTab {
@@ -54,7 +56,7 @@ export namespace Components {
          */
         "applicationName": string;
         /**
-          * Hide application header
+          * Hide application header. Will disable responsive feature of basic navigation.
          */
         "hideHeader": boolean;
     }
@@ -92,6 +94,12 @@ export namespace Components {
          */
         "label": string;
     }
+    interface IxBurgerMenu {
+        /**
+          * Is menu displayed as expanded
+         */
+        "expanded": boolean;
+    }
     interface IxButton {
         /**
           * Disable the button
@@ -378,6 +386,8 @@ export namespace Components {
          */
         "to": string | null;
     }
+    interface IxDivider {
+    }
     interface IxDrawer {
         /**
           * Fired in case of an outside click during drawer showed state
@@ -440,6 +450,10 @@ export namespace Components {
     crossAxis?: number;
     alignmentAxis?: number;
   };
+        "overwriteDropdownStyle": (delegate: {
+    dropdownRef: HTMLElement;
+    triggerRef?: HTMLElement;
+  }) => Promise<Partial<CSSStyleDeclaration>>;
         /**
           * Placement of the dropdown
          */
@@ -453,9 +467,13 @@ export namespace Components {
          */
         "show": boolean;
         /**
-          * Define an element that triggers the dropdown. A trigger can either be a string that will be interprated as id attribute or a DOM element.
+          * Define an element that triggers the dropdown. A trigger can either be a string that will be interpreted as id attribute or a DOM element.
          */
         "trigger": string | HTMLElement;
+        /**
+          * Define one or more events to open dropdown
+         */
+        "triggerEvent": DropdownTriggerEvent | DropdownTriggerEvent[];
         /**
           * Update position of dropdown
          */
@@ -517,6 +535,8 @@ export namespace Components {
          */
         "label": string;
     }
+    interface IxDropdownQuickActions {
+    }
     interface IxEventList {
         /**
           * Animate state change transitions. Defaults to 'true'.
@@ -886,7 +906,20 @@ export namespace Components {
           * Second line of text
          */
         "bottom": string;
+        /**
+          * Use for translation
+         */
         "i18nLogout": string;
+        /**
+          * Display a avatar image
+          * @since 1.4.0
+         */
+        "image": string;
+        /**
+          * Display the initials of the user. Will be overwritten by image
+          * @since 1.4.0
+         */
+        "initials": string;
         /**
           * First line of text
          */
@@ -1370,6 +1403,20 @@ export namespace Components {
          */
         "textOn": string;
     }
+    interface IxTooltip {
+        /**
+          * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
+         */
+        "for": string;
+        /**
+          * Define if the user can access the tooltip via mouse.
+         */
+        "interactive": boolean;
+        /**
+          * Title of the tooltip
+         */
+        "titleContent": string;
+    }
     interface IxTree {
         /**
           * Selection and collapsed state management
@@ -1408,6 +1455,12 @@ export namespace Components {
          */
         "text": string;
     }
+    interface IxTypography {
+        /**
+          * Font variant
+         */
+        "variant": TypographyVariants;
+    }
     interface IxUpload {
         /**
           * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). [accept]{@link "https://www.w3schools.com/tags/att_input_accept.asp"}
@@ -1703,6 +1756,12 @@ declare global {
         prototype: HTMLIxBreadcrumbItemElement;
         new (): HTMLIxBreadcrumbItemElement;
     };
+    interface HTMLIxBurgerMenuElement extends Components.IxBurgerMenu, HTMLStencilElement {
+    }
+    var HTMLIxBurgerMenuElement: {
+        prototype: HTMLIxBurgerMenuElement;
+        new (): HTMLIxBurgerMenuElement;
+    };
     interface HTMLIxButtonElement extends Components.IxButton, HTMLStencilElement {
     }
     var HTMLIxButtonElement: {
@@ -1745,6 +1804,12 @@ declare global {
         prototype: HTMLIxDatetimePickerElement;
         new (): HTMLIxDatetimePickerElement;
     };
+    interface HTMLIxDividerElement extends Components.IxDivider, HTMLStencilElement {
+    }
+    var HTMLIxDividerElement: {
+        prototype: HTMLIxDividerElement;
+        new (): HTMLIxDividerElement;
+    };
     interface HTMLIxDrawerElement extends Components.IxDrawer, HTMLStencilElement {
     }
     var HTMLIxDrawerElement: {
@@ -1769,6 +1834,12 @@ declare global {
         prototype: HTMLIxDropdownItemElement;
         new (): HTMLIxDropdownItemElement;
     };
+    interface HTMLIxDropdownQuickActionsElement extends Components.IxDropdownQuickActions, HTMLStencilElement {
+    }
+    var HTMLIxDropdownQuickActionsElement: {
+        prototype: HTMLIxDropdownQuickActionsElement;
+        new (): HTMLIxDropdownQuickActionsElement;
+    };
     interface HTMLIxEventListElement extends Components.IxEventList, HTMLStencilElement {
     }
     var HTMLIxEventListElement: {
@@ -2021,6 +2092,12 @@ declare global {
         prototype: HTMLIxToggleElement;
         new (): HTMLIxToggleElement;
     };
+    interface HTMLIxTooltipElement extends Components.IxTooltip, HTMLStencilElement {
+    }
+    var HTMLIxTooltipElement: {
+        prototype: HTMLIxTooltipElement;
+        new (): HTMLIxTooltipElement;
+    };
     interface HTMLIxTreeElement extends Components.IxTree, HTMLStencilElement {
     }
     var HTMLIxTreeElement: {
@@ -2033,6 +2110,12 @@ declare global {
         prototype: HTMLIxTreeItemElement;
         new (): HTMLIxTreeItemElement;
     };
+    interface HTMLIxTypographyElement extends Components.IxTypography, HTMLStencilElement {
+    }
+    var HTMLIxTypographyElement: {
+        prototype: HTMLIxTypographyElement;
+        new (): HTMLIxTypographyElement;
+    };
     interface HTMLIxUploadElement extends Components.IxUpload, HTMLStencilElement {
     }
     var HTMLIxUploadElement: {
@@ -2071,6 +2154,7 @@ declare global {
         "ix-blind": HTMLIxBlindElement;
         "ix-breadcrumb": HTMLIxBreadcrumbElement;
         "ix-breadcrumb-item": HTMLIxBreadcrumbItemElement;
+        "ix-burger-menu": HTMLIxBurgerMenuElement;
         "ix-button": HTMLIxButtonElement;
         "ix-category-filter": HTMLIxCategoryFilterElement;
         "ix-chip": HTMLIxChipElement;
@@ -2078,10 +2162,12 @@ declare global {
         "ix-date-picker": HTMLIxDatePickerElement;
         "ix-date-time-card": HTMLIxDateTimeCardElement;
         "ix-datetime-picker": HTMLIxDatetimePickerElement;
+        "ix-divider": HTMLIxDividerElement;
         "ix-drawer": HTMLIxDrawerElement;
         "ix-dropdown": HTMLIxDropdownElement;
         "ix-dropdown-button": HTMLIxDropdownButtonElement;
         "ix-dropdown-item": HTMLIxDropdownItemElement;
+        "ix-dropdown-quick-actions": HTMLIxDropdownQuickActionsElement;
         "ix-event-list": HTMLIxEventListElement;
         "ix-event-list-item": HTMLIxEventListItemElement;
         "ix-expanding-search": HTMLIxExpandingSearchElement;
@@ -2124,8 +2210,10 @@ declare global {
         "ix-toast": HTMLIxToastElement;
         "ix-toast-container": HTMLIxToastContainerElement;
         "ix-toggle": HTMLIxToggleElement;
+        "ix-tooltip": HTMLIxTooltipElement;
         "ix-tree": HTMLIxTreeElement;
         "ix-tree-item": HTMLIxTreeItemElement;
+        "ix-typography": HTMLIxTypographyElement;
         "ix-upload": HTMLIxUploadElement;
         "ix-validation-tooltip": HTMLIxValidationTooltipElement;
         "ix-workflow-step": HTMLIxWorkflowStepElement;
@@ -2170,7 +2258,7 @@ declare namespace LocalJSX {
          */
         "applicationName"?: string;
         /**
-          * Hide application header
+          * Hide application header. Will disable responsive feature of basic navigation.
          */
         "hideHeader"?: boolean;
     }
@@ -2220,6 +2308,12 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    interface IxBurgerMenu {
+        /**
+          * Is menu displayed as expanded
+         */
+        "expanded"?: boolean;
+    }
     interface IxButton {
         /**
           * Disable the button
@@ -2418,7 +2512,7 @@ declare namespace LocalJSX {
         "minDate"?: string;
         /**
           * Date change event  If datepicker is in range mode the event detail will be sperated with a `-` e.g. `2022/10/22 - 2022/10/24` (start and end). If range mode is choosen consider to use `dateRangeChange`.
-          * @depracted String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string
+          * @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string
          */
         "onDateChange"?: (event: IxDatePickerCustomEvent<LegacyDateChangeEvent>) => void;
         /**
@@ -2552,6 +2646,8 @@ declare namespace LocalJSX {
          */
         "to"?: string | null;
     }
+    interface IxDivider {
+    }
     interface IxDrawer {
         /**
           * Fired in case of an outside click during drawer showed state
@@ -2626,7 +2722,7 @@ declare namespace LocalJSX {
          */
         "show"?: boolean;
         /**
-          * Define an element that triggers the dropdown. A trigger can either be a string that will be interprated as id attribute or a DOM element.
+          * Define an element that triggers the dropdown. A trigger can either be a string that will be interpreted as id attribute or a DOM element.
          */
         "trigger"?: string | HTMLElement;
     }
@@ -2686,6 +2782,8 @@ declare namespace LocalJSX {
          */
         "onItemClick"?: (event: IxDropdownItemCustomEvent<HTMLIxDropdownItemElement>) => void;
     }
+    interface IxDropdownQuickActions {
+    }
     interface IxEventList {
         /**
           * Animate state change transitions. Defaults to 'true'.
@@ -3081,7 +3179,20 @@ declare namespace LocalJSX {
           * Second line of text
          */
         "bottom"?: string;
+        /**
+          * Use for translation
+         */
         "i18nLogout"?: string;
+        /**
+          * Display a avatar image
+          * @since 1.4.0
+         */
+        "image"?: string;
+        /**
+          * Display the initials of the user. Will be overwritten by image
+          * @since 1.4.0
+         */
+        "initials"?: string;
         /**
           * Logout click
          */
@@ -3596,6 +3707,20 @@ declare namespace LocalJSX {
          */
         "textOn"?: string;
     }
+    interface IxTooltip {
+        /**
+          * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
+         */
+        "for"?: string;
+        /**
+          * Define if the user can access the tooltip via mouse.
+         */
+        "interactive"?: boolean;
+        /**
+          * Title of the tooltip
+         */
+        "titleContent"?: string;
+    }
     interface IxTree {
         /**
           * Selection and collapsed state management
@@ -3650,6 +3775,12 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    interface IxTypography {
+        /**
+          * Font variant
+         */
+        "variant"?: TypographyVariants;
+    }
     interface IxUpload {
         /**
           * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). [accept]{@link "https://www.w3schools.com/tags/att_input_accept.asp"}
@@ -3768,6 +3899,7 @@ declare namespace LocalJSX {
         "ix-blind": IxBlind;
         "ix-breadcrumb": IxBreadcrumb;
         "ix-breadcrumb-item": IxBreadcrumbItem;
+        "ix-burger-menu": IxBurgerMenu;
         "ix-button": IxButton;
         "ix-category-filter": IxCategoryFilter;
         "ix-chip": IxChip;
@@ -3775,10 +3907,12 @@ declare namespace LocalJSX {
         "ix-date-picker": IxDatePicker;
         "ix-date-time-card": IxDateTimeCard;
         "ix-datetime-picker": IxDatetimePicker;
+        "ix-divider": IxDivider;
         "ix-drawer": IxDrawer;
         "ix-dropdown": IxDropdown;
         "ix-dropdown-button": IxDropdownButton;
         "ix-dropdown-item": IxDropdownItem;
+        "ix-dropdown-quick-actions": IxDropdownQuickActions;
         "ix-event-list": IxEventList;
         "ix-event-list-item": IxEventListItem;
         "ix-expanding-search": IxExpandingSearch;
@@ -3821,8 +3955,10 @@ declare namespace LocalJSX {
         "ix-toast": IxToast;
         "ix-toast-container": IxToastContainer;
         "ix-toggle": IxToggle;
+        "ix-tooltip": IxTooltip;
         "ix-tree": IxTree;
         "ix-tree-item": IxTreeItem;
+        "ix-typography": IxTypography;
         "ix-upload": IxUpload;
         "ix-validation-tooltip": IxValidationTooltip;
         "ix-workflow-step": IxWorkflowStep;
@@ -3841,6 +3977,7 @@ declare module "@stencil/core" {
             "ix-blind": LocalJSX.IxBlind & JSXBase.HTMLAttributes<HTMLIxBlindElement>;
             "ix-breadcrumb": LocalJSX.IxBreadcrumb & JSXBase.HTMLAttributes<HTMLIxBreadcrumbElement>;
             "ix-breadcrumb-item": LocalJSX.IxBreadcrumbItem & JSXBase.HTMLAttributes<HTMLIxBreadcrumbItemElement>;
+            "ix-burger-menu": LocalJSX.IxBurgerMenu & JSXBase.HTMLAttributes<HTMLIxBurgerMenuElement>;
             "ix-button": LocalJSX.IxButton & JSXBase.HTMLAttributes<HTMLIxButtonElement>;
             "ix-category-filter": LocalJSX.IxCategoryFilter & JSXBase.HTMLAttributes<HTMLIxCategoryFilterElement>;
             "ix-chip": LocalJSX.IxChip & JSXBase.HTMLAttributes<HTMLIxChipElement>;
@@ -3848,10 +3985,12 @@ declare module "@stencil/core" {
             "ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes<HTMLIxDatePickerElement>;
             "ix-date-time-card": LocalJSX.IxDateTimeCard & JSXBase.HTMLAttributes<HTMLIxDateTimeCardElement>;
             "ix-datetime-picker": LocalJSX.IxDatetimePicker & JSXBase.HTMLAttributes<HTMLIxDatetimePickerElement>;
+            "ix-divider": LocalJSX.IxDivider & JSXBase.HTMLAttributes<HTMLIxDividerElement>;
             "ix-drawer": LocalJSX.IxDrawer & JSXBase.HTMLAttributes<HTMLIxDrawerElement>;
             "ix-dropdown": LocalJSX.IxDropdown & JSXBase.HTMLAttributes<HTMLIxDropdownElement>;
             "ix-dropdown-button": LocalJSX.IxDropdownButton & JSXBase.HTMLAttributes<HTMLIxDropdownButtonElement>;
             "ix-dropdown-item": LocalJSX.IxDropdownItem & JSXBase.HTMLAttributes<HTMLIxDropdownItemElement>;
+            "ix-dropdown-quick-actions": LocalJSX.IxDropdownQuickActions & JSXBase.HTMLAttributes<HTMLIxDropdownQuickActionsElement>;
             "ix-event-list": LocalJSX.IxEventList & JSXBase.HTMLAttributes<HTMLIxEventListElement>;
             "ix-event-list-item": LocalJSX.IxEventListItem & JSXBase.HTMLAttributes<HTMLIxEventListItemElement>;
             "ix-expanding-search": LocalJSX.IxExpandingSearch & JSXBase.HTMLAttributes<HTMLIxExpandingSearchElement>;
@@ -3894,8 +4033,10 @@ declare module "@stencil/core" {
             "ix-toast": LocalJSX.IxToast & JSXBase.HTMLAttributes<HTMLIxToastElement>;
             "ix-toast-container": LocalJSX.IxToastContainer & JSXBase.HTMLAttributes<HTMLIxToastContainerElement>;
             "ix-toggle": LocalJSX.IxToggle & JSXBase.HTMLAttributes<HTMLIxToggleElement>;
+            "ix-tooltip": LocalJSX.IxTooltip & JSXBase.HTMLAttributes<HTMLIxTooltipElement>;
             "ix-tree": LocalJSX.IxTree & JSXBase.HTMLAttributes<HTMLIxTreeElement>;
             "ix-tree-item": LocalJSX.IxTreeItem & JSXBase.HTMLAttributes<HTMLIxTreeItemElement>;
+            "ix-typography": LocalJSX.IxTypography & JSXBase.HTMLAttributes<HTMLIxTypographyElement>;
             "ix-upload": LocalJSX.IxUpload & JSXBase.HTMLAttributes<HTMLIxUploadElement>;
             "ix-validation-tooltip": LocalJSX.IxValidationTooltip & JSXBase.HTMLAttributes<HTMLIxValidationTooltipElement>;
             "ix-workflow-step": LocalJSX.IxWorkflowStep & JSXBase.HTMLAttributes<HTMLIxWorkflowStepElement>;

package/dist/types/exports.d.ts

@@ -1,5 +1,6 @@
 export * from './components/date-picker/events';
 export * from './components/datetime-picker/event';
+export * from './components/dropdown/dropdown-trigger-event';
 export * from './components/modal/modal-utils';
 export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';

package/dist/types/index.d.ts

@@ -1,11 +1,12 @@
 export { Components, JSX } from './components';
+export { Buttons } from './components/button/button-variants';
 export { FilterState } from './components/category-filter/filter-state';
 export { InputState } from './components/category-filter/input-state';
 export { LogicalFilterOperator } from './components/category-filter/logical-filter-operator';
+export { DropdownTriggerEvent } from './components/dropdown/dropdown-trigger-event';
 export { FlipTileState } from './components/flip-tile/flip-tile-state';
 export { ModalContainer } from './components/modal-container/modal-container';
 export { Modal } from './components/modal/modal';
-export { Buttons } from './components/utils/button-variants';
 export { NotificationColor } from './components/utils/notification-color';
 export { convertToAbbreviationString, convertToRemString, } from './components/utils/rwd.util';
 export * from './exports';

package/dist/types/tests/utils/test/index.d.ts

@@ -0,0 +1 @@
+export * from './page';

package/dist/types/tests/utils/test/page.d.ts

@@ -0,0 +1,3 @@
+export declare const regressionTest: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
+  [key: string]: any;
+}, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "1.4.0-beta.0",
+  "version": "1.4.0-beta.2",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -42,7 +42,7 @@
     "generate:theme": "ts-node -P ./scripts/generate-theme/tsconfig.json ./scripts/generate-theme/generate-theme"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.6",
+    "@floating-ui/dom": "^1.1.0",
     "@stencil/core": "~2.19.2",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",

package/scss/_common-variables.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/_fonts.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/_z-index.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_button-group.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_buttons.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_checkboxes.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -100,16 +100,16 @@
 
     & + label:after {
       content: '';
-      width: 0.45rem;
-      height: 0.25rem;
+      width: 0.4rem;
+      height: 0.26rem;
       display: block;
       border-top: none;
       border-right: none;
       border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color);
       border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
       position: absolute;
-      margin: 0.3125rem 0.3125rem 0.1875rem;
-      transform: rotate(-53deg) scale(2);
+      margin: 0.31rem 0.42rem 0.1875rem;
+      transform: rotate(-53deg) scale(2) skew(-8deg, -3deg);
     }
 
     &:hover + label:before {

package/scss/components/_dropdown.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -145,6 +145,10 @@
   > .glyph {
     color: var(--theme-menu-item-icon--color);
 
+    &.disabled {
+      color: var(--color-weak-text);
+    }
+
     &.glyph-single-check {
       color: var(--theme-menu-item-icon-check--color);
     }

package/scss/components/_forms.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -56,7 +56,7 @@
   &::-webkit-inner-spin-button {
     margin-right: -2px;
     margin-left: 2px;
-    display: none;
+    //   display: none;
   }
 
   text-align: right;
@@ -128,15 +128,17 @@ textarea {
   }
 }
 
-.form-control:invalid,
-.is-invalid {
-  background-color: var(--theme-input-error--background);
-  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
-  background-position: left calc(0.375em + 0.1875rem) center !important;
-  padding-right: 0.75rem;
-  padding-left: calc(1.5em + 0.75rem);
-  background-size: 18px;
-  background-repeat: no-repeat;
+.was-validated {
+  .form-control:invalid,
+  .is-invalid {
+    background-color: var(--theme-input-error--background);
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+    background-position: left calc(0.375em + 0.1875rem) center !important;
+    padding-right: 0.75rem;
+    padding-left: calc(1.5em + 0.75rem);
+    background-size: 18px;
+    background-repeat: no-repeat;
+  }
 }
 
 input {

package/scss/components/_input-group.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_links.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_modal.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_radiobuttons.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_shadows.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/components/_table.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/ix.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/mixins/_animations.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/scss/mixins/_fonts.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *