@siemens/ix 1.3.0 → 1.4.0-beta.1

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
@@ -159,7 +167,7 @@ export namespace Components {
          */
         "labelCategories": string;
         /**
-          * In certain use cases some categories are not available for selection any more. To allow proper display of set filters with these categories this ID to label mapping can be populated. Configuration object hash used to supply labels to the filter chips in the input field. Each ID maps to a string representing the label to display.
+          * In certain use cases some categories may not be available for selection anymore. To allow proper display of set filters with these categories this ID to label mapping can be populated.  Configuration object hash used to supply labels to the filter chips in the input field. Each ID maps to a string representing the label to display.
          */
         "nonSelectableCategories"?: {
     [id: string]: string;
@@ -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
@@ -453,9 +463,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 +531,8 @@ export namespace Components {
          */
         "label": string;
     }
+    interface IxDropdownQuickActions {
+    }
     interface IxEventList {
         /**
           * Animate state change transitions. Defaults to 'true'.
@@ -886,7 +902,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 +1399,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 +1451,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 +1752,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 +1800,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 +1830,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 +2088,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 +2106,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 +2150,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 +2158,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 +2206,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 +2254,7 @@ declare namespace LocalJSX {
          */
         "applicationName"?: string;
         /**
-          * Hide application header
+          * Hide application header. Will disable responsive feature of basic navigation.
          */
         "hideHeader"?: boolean;
     }
@@ -2220,6 +2304,12 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    interface IxBurgerMenu {
+        /**
+          * Is menu displayed as expanded
+         */
+        "expanded"?: boolean;
+    }
     interface IxButton {
         /**
           * Disable the button
@@ -2287,7 +2377,7 @@ declare namespace LocalJSX {
          */
         "labelCategories"?: string;
         /**
-          * In certain use cases some categories are not available for selection any more. To allow proper display of set filters with these categories this ID to label mapping can be populated. Configuration object hash used to supply labels to the filter chips in the input field. Each ID maps to a string representing the label to display.
+          * In certain use cases some categories may not be available for selection anymore. To allow proper display of set filters with these categories this ID to label mapping can be populated.  Configuration object hash used to supply labels to the filter chips in the input field. Each ID maps to a string representing the label to display.
          */
         "nonSelectableCategories"?: {
     [id: string]: string;
@@ -2552,6 +2642,8 @@ declare namespace LocalJSX {
          */
         "to"?: string | null;
     }
+    interface IxDivider {
+    }
     interface IxDrawer {
         /**
           * Fired in case of an outside click during drawer showed state
@@ -2626,7 +2718,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 +2778,8 @@ declare namespace LocalJSX {
          */
         "onItemClick"?: (event: IxDropdownItemCustomEvent<HTMLIxDropdownItemElement>) => void;
     }
+    interface IxDropdownQuickActions {
+    }
     interface IxEventList {
         /**
           * Animate state change transitions. Defaults to 'true'.
@@ -3081,7 +3175,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 +3703,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 +3771,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 +3895,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 +3903,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 +3951,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 +3973,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 +3981,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 +4029,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.3.0",
+  "version": "1.4.0-beta.1",
   "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
  *
@@ -65,7 +65,7 @@ $button-categories: (primary, secondary);
     }
 
     @include focus-visible {
-      outline: 1px solid var(--focus--border-color);
+      outline: 1px solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-btn--focus--outline-offset);
     }
 

package/scss/components/_checkboxes.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -53,14 +53,14 @@
 
   [type='checkbox'] + label:focus-visible {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
   [type='checkbox']:focus-visible + label {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
@@ -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
  *

package/scss/components/_forms.scss

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -44,7 +44,7 @@
     border-color: var(--theme-input--border-color--focus);
     outline-offset: var(--theme-input--focus--outline-offset);
     box-shadow: var(--theme-input--box-shadow);
-    outline: 1px solid var(--focus--border-color);
+    outline: 1px solid var(--theme-color-focus-bdr);
   }
 }
 
@@ -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
  *
@@ -57,14 +57,14 @@
 
   [type='radio'] + label:focus-visible {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
     }
   }
 
   [type='radio']:focus-visible + label {
     &:before {
-      outline: 0.0625rem solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
     }
   }